駆け出しWebデザイナー必見!仕事がはかどるWebサービス7選

_shared_img_thumb_PAK85_iroenpitunaname131310_TP_V

先日、こんな記事を書きました。

駆け出しフリーランス必見!これがないと仕事にならないWebサービス4選

今回はWebデザイナー編をお届けします!

Webデザインの仕事は、設計・デザイン・コーディング・プログラミング・テストなど工程が幅広く、それぞれ多種多様なツールを使い分けて作業していきます。
今回はその中でも、かゆいところに手が届く!超絶便利なWebサービスを厳選してご紹介いたします。

それではどうぞ!

Adobe Color CC

カラーホイール | カラースキーム – Adobe Color CC

デザイン作業の冒頭、カラースキーム(配色パターン)を決めるときに大活躍するサイトです。
画面上部の「探索」を見ると、洗練された美しいカラースキームがずらりと並びます。
ここにあるのをそのまま採用するのも手ですが、筆者の場合、要件に近いカラースキームをいくつか選び出してみて、おおよその方向性を固めるという具合に活用しています。

Coolors

Coolors – The super fast color schemes generator!

こちらもカラースキームのジェネレータです。
スタートボタンを押すと、画面いっぱいにカラースキームが表示されます。
ここでスペースキーを押していくと、カラースキームがランダムで切り替わります。
この“ランダム”というのがCoolors最大の特長ですね!
Adobe Color CCで決めた方向性のもと、可能性を探ったり調整をしたりするのに利用しています。

Color-Sample.com

色見本と配色サイト – color-sample.com

カラースキームが決まって、具体的にデザインを作っていく段階で頼りになるのがこのサイト。
左の「Colors」にカラーコードを入力すると、その色についての詳しい情報を見ることができます。
色相別、彩度別、明度別、輝度別など、豊富に提示される配色候補が非常に便利。
「同系色の明るい色がほしい」「同じトーンで5色展開したい」など、具体的なシーンで役立ちます。

wordmark.it

wordmark.it – helps you choose fonts!

こちらはフォント選びに大活躍するサイトです。
単語を入力し「load fonts」ボタンを押すと、PCにインストールされているすべてのフォントでその単語を表示してくれます。
ネガポジを切り替えたり、サイズを変えたりといったことも可能。
単純ながら超強力なお助けサービスです。

Can I use…

Can I use… Support tables for HTML5, CSS3, etc

ここからはコーディングや構築で使うツールをご紹介。
Can I use…は、CSS3のプロパティやHTML5の機能が、主要なブラウザ(スマートフォン含む)でどれくらい対応しているかを教えてくれるサービスです。
プロパティ名を入力するだけで、各ブラウザの対応状況が一目瞭然!
これがいかにありがたいことか、同業の方ならおわかりいただけることでしょう… 感涙ものです。
筆者はもっぱらCSSコーディングの際に活用しています。

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator – ColorZilla.com

CSSでグラデーションを作りたいときはこれ!
複雑極まりないグラデーションのコードを自動生成してくれるサービスです。
ページを閉じた後も、コメントのURLにアクセスすれば、グラデーションを再度編集することが可能です。

TinyPNG

TinyPNG – Compress PNG images while preserving transparency

ドラッグ&ドロップで画像の容量を大幅に圧縮してくれるサービスです。
複数の画像をいっぺんに放り込むことができ、圧縮後もファイル名が変わりません。
スマートフォンからのアクセスが急増し、PCを上回ることも日常茶飯事となった今、ページの軽量化は最優先課題のひとつ。
構築はもちろん、ブログを書く際にも、毎日のようにお世話になっているありがたいツールです。

無数に存在する便利ツールを使いこなそう!

以上、筆者が実際にヘビーユースしているWebサービス7選でした。

ありがたいことに、ここにあるもの以外にも、かゆいところに手が届くツールは無数に存在します。
作業中「面倒だな」「大変だな」と思ったら、とりあえずググってみましょう!
きっと自分に合ったツールが見つかりますよ。

コメント

タイトルとURLをコピーしました