Google色彩サービス Material UI Colors でWebデザインはもっと鮮やかになる

Pocket
LINEで送る

色はWebサービスやロゴの印象を大きく左右します。興奮や刺激のある印象を与える赤は飲食の広告に使われることが多く、落ち着きがあり知的なイメージをもたらす青は企業サイトによく取り入れられます。

最適な色選びをしたければ、Googleが新しく定めたUX体系「マテリアルデザイン」で指定されている色を選んでみてはいかがでしょうか?
s_colors4
Material UI Colors」のカラーパレットを使えばたったワンクリックでカラーコードをコピーできます。”なんとなくイイ感じ”の抽象的な色選びはもう終わりにしませんか?

1.好みの色をコピーする

colors3
サイトを開くとカラーパレットが表示されます。ここにある色すべてはマテリアルデザインの指定カラー。好みの色を見つけたらカーソルを合わせてクリックします。

colors5
画面下からフワーっと選んだ色のカラーコードが表示されたらコピー完了です!なんとなくクセになる操作に他の色もポチポチ押してしまいます。

サイトの右上に表示されているHEX、#HEX、RGB、RGBAをクリックしてから色を選べば、形式に合わせたカラーコードに切り替えてくれるのが嬉しいですね。

2. 特定の色を指定する

colors2
特定のカラーパレットのみを表示させるには、URLに指定したい色を追記します。例えば赤系統の色のみ表示させたいときは、URLの最後に「colors/red」を付け加えます。サイト最上部のカラー名(Red、Pink、Purple…Grey、Blue Grey)から選びましょう。

おわりに

Material UI Colorsを使うと、サイトデザインの効率が飛躍的に向上します。1色ずつコードを調べる煩わしさがなくなるだけではなく、illustratorとPhotoshopに対応しているスウォッチもダウンロードできます。

「こんな色ほしかった!」は見つかりましたか?Material UI Colorsであなたのサービスをもっと鮮やかにする運命の一色に出会えますように。

Googleの求人
webデザインの求人
CSSの求人

執筆者

みんなのスタンバイ編集部。「はたらきかたをかんがえる」をコンセプトに、はたらく好奇心を刺激する情報をすべてのはたらく世代へお届けします。