デザインに迷ったらこれ！デザイナー向けの便利なWebサイト・サービス10選

配色、フォント、レイアウト、アニメーションなど、デザイナーが考えなければはいけないことは膨大です。急がなきゃいけないのになかなか作業が進まない…と苦戦することもあるのではないでしょうか。

そこで今回は、デザインをより効率的に、ハイクオリティにしてくれるWebサイトやサービスをご紹介します。

Coolors

Coolorsは、バランスの良い配色パターンをランダムに表示してくれるWebサービスです。スペースキーを押すと、センスのある配色パターンを次々と生成してくれます。

気に入った色は固定することができ、さらにそれに合った色を探してくれるのでとても便利です。また、気になった色にカーソルを合わせれば、HSB、CMYK、RGB、PMSの値やコピックの色番号を知ることもできます。

COLOR SAFE

背景色やフォント、フォントサイズを指定すれば、WCAGをもとに最適なテキストカラーを提案してくれるWebサイトです。WCAGとは、W3Cが提唱しているWebページのアクセシビリティに関するガイドラインのことです。背景色に対して視認性の高い色を提示してくれるので、テキストカラーに悩んだときに使えそうです。

Niice

Niiceは、BehanceやDribbble、Designspirationをはじめとした人気のデザイン集積サイトの画像だけを集めた「インスピレーション検索サービス」です。デザインに悩んだときはここで検索すれば、良いインスピレーションを得られるかもしれません。キーワードだけでなくカラーコードでも画像検索できるため、Web制作のときにも役立ちそうです。

CAPPTIVATE.co

iOSアプリのUIアニメーションをカテゴリ別に紹介しているWebサイト。クリックするとアニメーションを確認することができます。UIのパターンやバウンド、イージングなどアニメーションの効果でも探すことができ非常に便利です。「Capptivate.co」のiOSアプリも配信されているので、こちらもおすすめです。

HOVER STATES

インタラクションデザインを取り入れたWebサイトをアニメーション画像で紹介しています。WebサイトはサイドメニューのHomeやSitesから閲覧可能。画像の上でマウスオーバーすれば、サイト上でのアニメーションの動き方を実際に確認することができます。

Cacooは、フローチャート、ワイヤーフレームUML などの図を作成できるオンラインドローイングツールです。作成した図はメンバーと共有することができ、閲覧だけではなく編集や同時編集もできます。ドラッグ＆ドロップなど直感的に操作できる上に、おしゃれなデザインテンプレートとステンシルが多数用意されているため、デザインスキルが無くても簡単に図を作成できるところが特徴です。

使用プランは、無料プランのFREE、個人向けのPLUS、ビジネス向けのCacoo for Business、社内ネットワークに導入できるCacooエンタープライズ、学生向けの Cacoo for エデュケーションの５つが用意されています。

wordmark.it

好きなテキストを打ち込んでエンターを押すと、PCにインストールされているすべてのフォントでテキストを一覧表示してくれるサイト。テキストを白抜きで表示したり、フォントサイズを変えたり、テキストの間隔調整をすることもできます。

infogr.am

infogr.am は、図表やグラフ、地図などといったインフォグラフィック（情報、データ、知識を視覚的に表現したもの）を簡単に作成できるWebサービスです。データはツール上で直接入力することもできますが、excelやcsvデータを読み込むこともできます。基本的な機能は無料で使うことができますが、有料のProアカウントやWhite Labelアカウントを取得すれば、Google Driveと連携し、リアルタイムでデータを反映したりということも可能になります。

Logo Garden

Logo Gardenは、ロゴ作成が無料でできるオンラインツール。業種ごとにロゴがたくさん用意されていて、トップ画面にある“Make My FREE LOGO”のボタンをクリックすると業種を選ぶことができます。ロゴは自分のWebサイトに合わせてカラーやフォントを変えることができ、完成したらすぐにダウンロードできます。

Metallic Ratio

黄金比や白銀比などを簡単に算出できるWebサービスです。縦横比だけでなく、これらの比率を左右に並べた分割比も表示できるので、Webページで列幅を決めたり、横長のバナーで区切り位置を決めるといった場合にもとても役立ちます。