3. 迷わない流れを設計する
利用者が入口から目的まで進む順序と、画面の役割を決めます。
AIでサービスをつくる、非エンジニアのための実践ガイド
Web全体デザイン
ホワイトミニマル
White minimal
白と広い余白を主役にし、必要な情報だけを静かに見せるデザインです。
危険度: 通常余白
今すぐ使う
見た目と印象をつかむ
見本の空気感が近いかを確かめてから、そのままAIへの依頼文へつなげられます。
10秒で分かる説明
白い背景と大きな余白の中へ、濃い文字と細い線を少数だけ置きます。
受ける印象
- 静か
- 上品
- 信頼感
AIへの依頼文
ホワイトミニマルへ整える依頼
内容と対象をひと目確認してから使うと安心です。
分かる範囲で2か所だけ
自分の状況を入れる
空欄のままでもコピーできます。秘密情報は書かずにお試しください。
コピーされる依頼文を確認
目的:
情報量を絞り、広い余白と明快な文字組みで迷いにくい画面へ整える。
現在の状態:
【ここに、何をしたらどうなったかを書く】
今回依頼すること:
指定した画面をホワイトミニマルに整えてください。白を基調に、十分な余白、少ない色、はっきりした見出し階層で読む順番を作ってください。必要な説明や操作まで削らず、一画面の主目的を一つに絞ってください。
変更してよい範囲:
【ここに、変更してよい画面やファイルを書く】
変更しない範囲:
必要な説明、エラー表示、操作ラベル、キーボードフォーカス、機能は削除しない。
完了条件:
- 最初に見る見出しと主要操作が明確である
- 一つのまとまりごとに十分な余白がある
- 説明を減らしても操作方法が分かる
実装前に確認すること:
- 対象とするファイル、現在の差分、関連する設定を読み取り、変更計画を短く示す
- 判断できない点があれば、変更する前に止めて質問する
実装後に報告すること:
- 変更したファイルと変更理由
- 実行した確認と、その結果
- 未解決の点や追加で確認が必要な点確かめる
向いている場面を見分ける
好みだけで決めず、このサイトの目的と情報量に合うかを確認します。
向いている場面
- 文章や写真を落ち着いて読んでもらう
- 一画面の目的を一つに絞れる
向いていない場面
- 同時に多くの状態を監視する管理画面
- 説明まで削ると初心者が迷う場合
理解する
特徴と作り方を知る
AIへ伝える名前と、見た目を崩さず実装するための確認点です。
見た目の特徴
- 白またはごく淡い背景を使う
- 見出しと余白で読む順番を作る
- 差し色を主要操作へ限定する
実装時の確認
- 必要な操作ラベルと説明は削らない
- 狭い画面では余白を段階的に縮める