3. 迷わない流れを設計する
利用者が入口から目的まで進む順序と、画面の役割を決めます。
AIでサービスをつくる、非エンジニアのための実践ガイド
Web全体デザイン
Flat design
影や質感を抑え、色と形で役割をはっきり見せるデザインです。
今すぐ使う
見本の空気感が近いかを確かめてから、そのままAIへの依頼文へつなげられます。
単色の面、明快な輪郭、少ない装飾でボタンや情報の役割を分けます。
AIへの依頼文
内容と対象をひと目確認してから使うと安心です。
分かる範囲で2か所だけ
空欄のままでもコピーできます。秘密情報は書かずにお試しください。
目的:
立体的な装飾を抑え、重要な操作が一目で分かるフラットな画面へ整える。
現在の状態:
【ここに、何をしたらどうなったかを書く】
今回依頼すること:
指定した画面をフラットデザインへ整えてください。影と質感表現を減らし、塗り、余白、文字サイズ、明確な輪郭で情報の優先順位を作ってください。クリックできる要素は色だけに頼らず判別できるようにしてください。
変更してよい範囲:
【ここに、変更してよい画面やファイルを書く】
変更しない範囲:
本文、機能、画面遷移、既存ブランドカラーの意味、アクセシビリティ要件は変えない。
完了条件:
- 主要操作が装飾なしでも見分けられる
- 色と文字のコントラストが十分である
- 同じ役割の要素に同じ形と色が使われる
実装前に確認すること:
- 対象とするファイル、現在の差分、関連する設定を読み取り、変更計画を短く示す
- 判断できない点があれば、変更する前に止めて質問する
実装後に報告すること:
- 変更したファイルと変更理由
- 実行した確認と、その結果
- 未解決の点や追加で確認が必要な点確かめる
好みだけで決めず、このサイトの目的と情報量に合うかを確認します。
理解する
AIへ伝える名前と、見た目を崩さず実装するための確認点です。