マテリアルデザイン

Material Design

Googleが作ったデザインのルール。紙を重ねたような薄い影と、大きな丸みが特徴。

見た目の特徴

• 薄い影で重なりを表す
• 丸みの大きいカードとボタン
• テーマカラーから自動で配色
• 押すと波紋（リップル）

色の組み合わせ （押すと色のコードをコピー）

合うフォントの例

RobotoNoto Sans JP

どこで使われている？

よく見かける場所

Gmail、Googleカレンダー、多くのAndroidアプリ

使うとよい場面

ルールに沿って、迷わず整った画面を作りたいとき

避けたい場面

iPhoneらしさを出したいアプリ

向いているもの

Androidアプリ、管理画面、業務アプリ

補足Androidアプリなら、標準の部品を使うだけでこの見た目になります。

似ている雰囲気と見比べる

AIへの指示文

Webサイト を作るときの指示文です。作るものは右上の「何を作る？」で変えられます。

Webサイトを「マテリアルデザイン（Material Design）」のデザインで作ってください。

見た目：Googleのマテリアルデザイン3に沿って、丸みの大きいカード、薄い影、テーマカラーから作った配色、押すと波紋が広がるボタンでまとめる。

特徴：薄い影で重なりを表す／丸みの大きいカードとボタン／テーマカラーから自動で配色／押すと波紋（リップル）

色：背景 #F7F2FA、面 #FFFBFE、文字 #1D1B20、メイン #6750A4、サブ #D0BCFF
フォントの例：Roboto、Noto Sans JP