マテリアルデザインのおすすめカラーパレット/ツール/リソース11選

Googleが2014年6月に発表したデザインの概念「マテリアルデザイン」は多くのWebサイトやアプリに役立てられています。マテリアルデザインとは、マテリアル＝物質的な法則に基づいたデザインのことです。

自分のブランドを際立たせるために、デザイナー達は、マテリアルデザインの法則と、カラースキームを最大限活用しています。マテリアルデザインで使用可能なカラーは、大胆かつ明るい色が多いのが特徴です。

Googleのマテリアルデザイン公式文書には、以下のように記載されています。

「マテリアルデザインで使用する色は、落ち着いた環境、濃い影、明るいハイライトと大胆な色相からインスピレーションを受けています。」（-マテリアルデザイン公式文書）

色はブランドアイデンティティにおいて最も重要な要素のひとつです。UBERの黒と白のテーマや、Facebookの青と白のテーマなどが分かりやすい例です。ブランドのアイデンティティ確立のために、UIデザインの色をどう使うのが効果的なのか？より影響を与えやすい色はどんな色なのか？最も役立つツールはどれなのか？

これらの質問に答えてくれる、カラーツール一覧を見ていきましょう。今回はマテリアルデザインのカラーパレット、ツール、リソースを11個リストアップしました。

マテリアルデザインのカラーツール

1. Material.io

Material.ioはGoogleの公式マテリアルデザインカラーマッチングツールです。パレット内の好みの色を選択するだけで、すぐにAppインターフェイスにカラーを反映できます。右下に表示されているカラースキームパレットを使って、主要色、二次色、そしてテキストカラーのカラー番号を追加しましょう。

特徴：完全なカラースキーム

1. マテリアルデザインでは、アプリケーション内で最も頻繁に表示される色が主要色となります。二次色は、UIの主要部分を強調するために使われます。
2. 二次色が主に使用されるのは以下のシーンです。

• ボタン、フローティングボタン、ボタンテキスト
• テキストフィールド、カーソル、テキスト選択
• プログレスバー
• コントロール、ボタン、スライダーの選択
• リンク
• タイトル

2. Material Colors

マテリアルカラーは単なるパレットではなく、アイコンツールとカラーツールでもあります。マテリアルカラーの主な特長は、ユーザーが色を選択し、カラーエフェクトをリアルタイムでプレビューできることです。

操作はシンプルかつとても簡単。一色もしくは二色のカラーを選択すれば、一連のAPP UIカラースキームとシステムが一致します。このサイトでは、さまざまな形式のオンライン共有とダウンロードが可能です。

特徴

• カラープレビュー
• サポートダウンロード
• オンラインでの共有

3. Material UI

Material UIは、ユーザーが色一覧から選択できるように、すべての利用可能色を1ページにまとめているサイトです。別名「チートシート」とも呼ばれています。

ユーザーがカラーボックスをクリックすれば、その色に対応するカラーコードが自動的にクリップボードにコピーされます。主にMaterial Designスタンダードに適合するカラーコードを素早くデザインしたい開発者やデザイナー向けです。

特徴

• カラーコードを直接コピーして貼り付けることができる
• 複数のカラーフォーマットの切り替えをサポートしてくれる

4. Material Design Palette Generator

Material Design Palette Generatorは、マテリアルデザインパネルビルダーが、選択した色に基づいてスウォッチを生成してくれるツールです。カスタムスウォッチに興味がある方は、このマテリアルデザインパレットジェネレーターを試してみてください。

手動でカラーを設定するには、カラーコードを入力するか、開いているパレットのカラーボックスをクリックし、カラーダイアログボックスのカラーパレットから色選択をおこないます。

特徴

• カスタムスウォッチ

5. Color — Materialize

マテリアルデザインのベースカラーに基づくカラーパレットです。各色は、基本色のカラー段階と、オプションの明→暗のカラー段階で定義されます。特徴はカラーシェーディング調整です。

特徴

• カラーシェードの調節が可能

Android向けマテリアルデザインのカラーリソース

6. Sketchappsources

Sketchappsourcesはデザイン関連の様々なリソースを無料でダウンロード出来るサイトです。アンドロイドのマテリアルデザイン向けのカラーパレットも、ここで無料でダウンロード出来ます。

7. Android Material Design Colours

Android Material Design Coloursは、GitHubのユーザーが提供しているAndroidマテリアルカラーコードです。各色はさまざまなカラーコードに対応しています。時間節約に有効なダイレクトコピー&ペーストモードは、多くのデザイナーの味方になるでしょう。

マテリアルデザインを活かしたアプリ

8. Google Hangouts

Googleハングアウトは、マテリアルデザインのデザイン原則と配色を踏襲したGoogleの製品のひとつです。Googleマテリアルデザインの典型的なケーススタディであり、マテリアルデザインのカラースキームを効果的に適用しています。

9. Weather Timeline

このアプリケーションに使用されているカラーは、この記事で紹介してきたマテリアルデザインのカラーツールの原理に忠実に従って選ばれています。主要カラー、セカンドカラー、テキストカラー、ボタンのカラーの組み合わせは、とても独特で大胆です。

マテリアルデザインを活かしたWebサイト

10. Google

マテリアルデザインを語る上で、Googleを避けて通ることは出来ません。Googleは、マテリアルデザインの最良の事例です。Googleのマテリアルデザインのスタイルは、クリーンなタイポグラフィとシンプルなレイアウトによって特徴付けられており、ユーザーはコンテンツそのものに集中できます。

11. WhatsApp

WhatsAppは、世界中の人々に愛されているコミュニケーションツールです。

Webデザインとモバイルアプリデザインの両方において、マテリアルデザインというコンセプトを非常にうまく使っています。カラフルなパレットをメインカラーには使用せず、グレーと緑の抑え気味なミックスで構成されています。

まとめ

いかがでしたか？

この記事で紹介したマテリアルデザインのカラーツールを使うことで、ウェブサイトやアプリ開発がずっと楽になるでしょう。

ウェブサイトやアプリにマテリアルデザインを採用することは、実はそれほど難しいことではありません。マテリアルデザインスタイルのプロトタイプツールを使用してみましょう。このプロトタイプツールとしては、ウェブサイトとアプリどちらにも対応している、Mockplusというサービスがおすすめです。Mockplusにビルトインされているマテリアルデザインコンポーネンツと、この記事で紹介したカラースキーム選びのツールを活用すれば、マテリアルデザインのウェブサイトやアプリケーションのデザインは決して難しいものではありません。

ブランドアイデンティティにとって最も重要な要素のひとつであるカラーは、慎重に吟味される必要があります。カラーの組み合わせを正しく使用するのは難しいことですが、この記事で紹介したマテリアルデザインのカラーツールが、その悩みを解決してくれることでしょう。

（著者：Amy Smith　翻訳：Ayaka Takei, Mariko Sugita）

こちらもおすすめ↓