マテリアルデザイン カラーツールの基本的な使い方

自宅で学べるオンラインのプログラミングスクール TechAcademy

マテリアルデザイン カラーツールの基本的な使い方を紹介します。

マテリアルデザインとは？

マテリアルデザインとは、Googleの提唱しているデザインで、ユーザーが見やすく、直感的な使いやすさを目指したデザインです。

• 現実の物理法則を取り込む
• 印刷物向けデザインの基本要素
• 連続性のある動き

Introduction – Material Design

Material Design Color Tool(マテリアルデザイン カラーツール)とは？

Color Tool - Material Design

https://material.io/color/#!/?view.left=0&view.right=0&primary.color=64B5F6

An interactive tool to create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.

Color Tool - Material Design

Color Tool – Material Design

Color Toolでは、設定したカラー配色を確認しながら選択することができます。

• カラースキームの作成
• アクセシビリティのテスト
• 作成したカラースキームでのUIをプレビュー

Material Design Color Toolsの使い方

Color Tool にアクセスし、画面下の薄く黒くなっている部分のどこかをクリックします。

Color Tool

メインカラーの選択

すると、画面左側にプレビュー、右側がカラーパレットが表示されます。
右側のカラーパレットの中からデザインの基本となるカラーを選択します。
マテリアルデザインでは500番代のカラーをメインにすることを推奨しています。
カラーを選択すると、左側にUIが表示されます。

カラーの選択

ユーザーインターフェイス

UI（ユーザーインターフェイス）は、「＜」、「＞」で切り替えることができます。
いろんなパターンのイメージを確認してみましょう。

ユーザーインターフェイス

ACCESSIBILITY（アクセシビリティ）

ACCESSIBILITYタブを選択すると、選択したカラーの文字の読みやすさを確認できます。

ACCESSIBILITY（アクセシビリティ）

CURRENT SCHEME

画面の右下のCURRENT SCHEMEでは、カラー番号の確認ができます。

• Primary
• P — Light
• P — Dark
  

  CURRENT SCHEME

テキスト・文字カラー

テキスト・文字カラー

画面右下の「Text on P」をクリック後、カラーパレットから色を選択します。
すると、左側のユーザーインタフェイスにテキスト・文字カラーが反映されます。

CodePen

EXPORT（エクスポート）をクリックします。

EXPORT

CodePenをクリックします。

CodePen

HTML、CSS、JSのソースコードが表示表示されます。

CodePen

最後に

Material Design Color Tools紹介しました。