フラットデザイン

Flat Design

影や立体感をなくし、はっきりした単色の面だけで作るデザイン。

見た目の特徴

• 影・グラデーションを使わない
• 彩度の高いはっきりした色
• 角の丸みは小さめ
• シンプルなアイコン

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

合うフォントの例

Noto Sans JPM PLUS 1pInter

どこで使われている？

よく見かける場所

Windows 8以降のアイコン、2013年ごろからの多くのアプリ、図解・インフォグラフィック

使うとよい場面

はっきり見やすく、軽い印象にしたいとき

避けたい場面

高級感や奥行きを出したいとき（平たく見えすぎる）

向いているもの

アプリ、図解、子ども向けサービス

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

AIへの指示文

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

Webサイトを「フラットデザイン（Flat Design）」のデザインで作ってください。

見た目：影・グラデーション・立体感を使わず、彩度の高い単色の面と小さな角丸でまとめる。アイコンも単色のシンプルな形にする。

特徴：影・グラデーションを使わない／彩度の高いはっきりした色／角の丸みは小さめ／シンプルなアイコン

色：背景 #E8F4FF、文字 #1E2A3A、メイン #4AA3FF、アクセント #FF6B4A、サブ #2ECC71
フォントの例：Noto Sans JP、M PLUS 1p、Inter