本文へ移動
つまずき地図Vibe Dev Navigator
メニュー

AIでサービスをつくる、非エンジニアのための実践ガイド

Web全体デザイン

フラットデザイン

Flat design

影や質感を抑え、色と形で役割をはっきり見せるデザインです。

危険度: 通常シンプル

今すぐ使う

見た目と印象をつかむ

見本の空気感が近いかを確かめてから、そのままAIへの依頼文へつなげられます。

10秒で分かる説明

単色の面、明快な輪郭、少ない装飾でボタンや情報の役割を分けます。

受ける印象

  • 明快
  • 軽快
  • 親しみやすい

AIへの依頼文

フラットデザインへ整える依頼

危険度:通常

内容と対象をひと目確認してから使うと安心です。

分かる範囲で2か所だけ

自分の状況を入れる

空欄のままでもコピーできます。秘密情報は書かずにお試しください。

コピーされる依頼文を確認
目的:
立体的な装飾を抑え、重要な操作が一目で分かるフラットな画面へ整える。

現在の状態:
【ここに、何をしたらどうなったかを書く】

今回依頼すること:
指定した画面をフラットデザインへ整えてください。影と質感表現を減らし、塗り、余白、文字サイズ、明確な輪郭で情報の優先順位を作ってください。クリックできる要素は色だけに頼らず判別できるようにしてください。

変更してよい範囲:
【ここに、変更してよい画面やファイルを書く】

変更しない範囲:
本文、機能、画面遷移、既存ブランドカラーの意味、アクセシビリティ要件は変えない。

完了条件:
- 主要操作が装飾なしでも見分けられる
- 色と文字のコントラストが十分である
- 同じ役割の要素に同じ形と色が使われる

実装前に確認すること:
- 対象とするファイル、現在の差分、関連する設定を読み取り、変更計画を短く示す
- 判断できない点があれば、変更する前に止めて質問する

実装後に報告すること:
- 変更したファイルと変更理由
- 実行した確認と、その結果
- 未解決の点や追加で確認が必要な点

使う前に確認
使った後に確認

確かめる

向いている場面を見分ける

好みだけで決めず、このサイトの目的と情報量に合うかを確認します。

向いている場面

  • 操作の分かりやすさを最優先する
  • 多くの機能を同じルールで整理する

向いていない場面

  • 高級感や素材感そのものが重要なブランド
  • クリックできる場所を色だけで区別する場合

理解する

特徴と作り方を知る

AIへ伝える名前と、見た目を崩さず実装するための確認点です。

見た目の特徴

  • 影とグラデーションを必要最小限にする
  • 塗りと余白で情報の階層を作る
  • 同じ役割へ同じ形と色を使う

実装時の確認

  • ボタン、入力、情報カードの違いを輪郭でも示す
  • 文字と背景のコントラストを確認する