Web制作ネタを中心に、ネット上の様々な情報をゆる~く発信する個人ブログです

KuzLog

2017/01/16 2018/01/13 Web制作, Webサービス

マテリアルデザインによく使われている色を一覧で確認&クリック一発でコピーできる「Material UI」

今更感がすごいですが、マテリアルデザインに使われている色を確認&1クリックでコピーできるできるWebツールの紹介です。もうみんな知ってるよねコレ。

そもそもマテリアルデザインって何よ?

正直、Leo(@Akamaru12mg)もしっかり理解していません。気になる方はGoogleの公式ガイドラインをサラッと読んでおきましょう。

すごく…長いです…
という訳でカラーに関するところだけ一部抜粋すると…

マテリアルデザインのカラーは、落ち着いた環境、濃い影、鮮やかなハイライトと並べられた大胆な色合いにインスピレーションを得ています。マテリアルのヒントとなっているのは、現代建築、道路標識、路面標示用テープ、競技用コートです。カラーは、意外性があり鮮明なものでなければなりません。

はい。分かるようで分かりません。
ただ、実際にマテリアルデザインのガイドラインに従って作られたサイトやアプリの色を見ると「あ~こういう色か」って納得した気分になります。最近のWebサイトとかアプリではよく見る配色ですからね。

Material UI


「あ~こういう色か」ってなりますよね?
このサイトを参考に色を選んで、ついでにbox-shadow: 0 2px 5px rgba(0,0,0,0.27);あたりのフンワリとした影を落とせば、どんなサイトでも不思議とそれっぽい雰囲気になります。

ね?
それっぽいでしょ?

Photoshop,Illustrator用のパレットもあるよ

PhotoshopやIllustratorを使っている方は、こちらのパレットをダウンロードしておくと便利です。

少しスクロールしたところにダウンロードリンクがあります。

ダウンロードしたzipファイルを解凍し、中にあるMaterial Palette.acoをダブルクリックすればスウォッチに登録できます。簡単!


Leo(@Akamaru12mg)は配色が苦手なので、こういうテンプレートは本当にありがたい。今まで色選びに掛けていた時間を他の作業に回せるので、作業効率がグンと上がります。皆さん是非ご活用ください。