先日、こんな記事を書きました。
駆け出しフリーランス必見！これがないと仕事にならない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
カラースキームが決まって、具体的にデザインを作っていく段階で頼りになるのがこのサイト。
左の「Colors」にカラーコードを入力すると、その色についての詳しい情報を見ることができます。
色相別、彩度別、明度別、輝度別など、豊富に提示される配色候補が非常に便利。
「同系色の明るい色がほしい」「同じトーンで５色展開したい」など、具体的なシーンで役立ちます。
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選でした。
ありがたいことに、ここにあるもの以外にも、かゆいところに手が届くツールは無数に存在します。
作業中「面倒だな」「大変だな」と思ったら、とりあえずググってみましょう！
きっと自分に合ったツールが見つかりますよ。
