SwitchBox > ソフト・サービス > WEBサービス > Googleマテリアルデザインの配色を一覧出来る「Material UI Colors」

Googleマテリアルデザインの配色を一覧出来る「Material UI Colors」

2015年01月28日
Googleマテリアルデザインの配色を一覧出来る「Material UI Colors」

「Material UI Colors」は、Googleが提唱する「マテリアルデザイン」で使える色を一覧出来るサイトです。色をクリックしてカラーコードを一発コピペしたりも出来るので、配色を考えるときには便利なサイトですよ。

マテリアルデザインって?

マテリアルデザインとは、Googleが独自に提案する「デザインの仕方のルール」のようなもの。GoogleはGmailやGoogleMapなどのアプリやAndroidなどいろんな製品を出してますよね。だったら、その全部を同じルールでデザインすれば統一感が出て使いやすくなるんじゃない?というアイディアです。主な特徴として、「色を統一する」「立体感の付け方を統一する」「動きを統一する」などの要素があります。

サイトの使い方

まずはMaterial UIにアクセスしてみましょう。明るいカラーがずらっと並んでいます。ここにあるのは全てGoogleがマテリアルデザインのガイドラインの中で正式に採用している色です。

Material UI Colors - 01

色のカラーコードをクリップボードにコピーすることも出来ます。まずは画面上にあるカラーモードをクリックして選びます。

Material UI Colors - 02

次に好きな色をクリックすればOK。これだけで「Ctrl + C」で色の文字をコピーしたのと同じ状態になりますよ。

Material UI Colors - 03

紹介したWEBサービス:Material UI

…というわけで今回は、Googleマテリアルデザインの配色を簡単に作れる色見本サイト「Material UI Colors」でした。パっと一覧出来て、簡単に使えるのがイイ感じです。マテリアルデザインにこだわらなくても、こういう明るい配色にすれば今どきのモダンな雰囲気が出せるので、参考になりますね。

Googleマテリアルデザインの配色を一覧出来る「Material UI Colors」
この記事は気に入ってもらえましたか?

記事が役に立ったり楽しかったときは、ぜひシェアしてみてください。
なるべく人気カテゴリーの記事を増やして便利なサイトになるように頑張ります!

オススメの記事

おすすめ記事はこちらです。



RSS

RSS登録はこちらから。好きなカテゴリーだけを選んで登録することも出来ますよ。

トップ / プライバシーポリシー
ページトップ