「作りたい画面のイメージはあるのに、形にして人に見せられない」「デザイナーに頼む前の、たたき台の段階で止まってしまう」——サービスや社内ツールを企画する人が必ずぶつかる壁です。
AIはこの段階を大きく短縮します。言葉で説明すれば、画面の構成要素と配置を一覧にして返してくれるので、議論の土台がその場でできます。絵が描けなくても構いません。
この記事では、画面設計をAIに手伝わせる手順を、そのままコピーできるプロンプトつきで解説します。デザインの専門知識がない人を想定しています。
ワイヤーフレームとは何か
見た目ではなく「配置と順番」を決めるもの
ワイヤーフレームは、色もフォントも決めない段階の設計図です。どこに何を置き、どの順番で読ませるかだけを決めます。この段階を飛ばして見た目から入ると、後で全部やり直しになります。
AIが強いのは「要素の洗い出し」
絵を描くことより、その画面に何が必要かを漏れなく挙げるほうが難しく、そしてAIが得意な部分です。ログイン画面に必要なもの、申し込みフォームに必要なもの。こうした定番の構成は、AIのほうが抜けが少なくなります。
AIが弱いのは「その事業ならではの判断」
何を優先して見せるか、どこで離脱を防ぐか。ここは事業を理解している人にしか決められません。AIは選択肢を並べる係、決めるのは自分、という分担にしてください。
手順1｜画面の役割を1文で決める
いきなり要素を並べない
最初にやることは、その画面で利用者に何をしてほしいのかを1文で書くことです。「サービスを理解してもらう」ではなく「無料登録のボタンを押してもらう」まで具体化します。
これが決まると要素が決まる
目的が1つに絞れれば、必要な要素は自動的に決まります。迷いが生まれるのは、1つの画面に目的を2つ以上入れているときです。
手順2｜要素を洗い出す
抜けを潰すのがAIの仕事
【プロンプト】
「画面に必要な要素を洗い出してください。
【画面の前提】
・何の画面か：（例：オンライン相談の申し込みフォーム）
・利用者にしてほしいこと：（例：日時を選んで送信してもらう）
・想定する利用者：（例：スマホで操作する40代、ITに詳しくない）
【条件】
・上から順に、表示すべき要素をすべて挙げる
・各要素に、なぜ必要かを1行で書く
・入力項目は、必須と任意を分ける
・エラー時と送信後に表示すべき内容も挙げる
・見落としやすい要素があれば、最後に別枠で指摘する」
「見落としやすい要素」を出させる
この一文が効きます。戻るボタン、送信中の表示、入力内容の確認手段など、自分では思いつかない項目が出てきます。
入力項目は減らす方向で見直す
洗い出したあとは、削る作業です。フォームの項目が1つ増えるごとに、完了する人は減ります。本当に今必要な項目か、あとで聞けないかを1つずつ確認してください。
手順3｜配置と優先順位を決める
順番は「上から読む順」で指定させる
【プロンプト】
「洗い出した要素を、画面の配置案として整理してください。
【前提】
・表示端末：（例：スマートフォンを優先）
・最も押してほしいもの：（例：送信ボタン）
【条件】
・上から順に、要素を並べた案を3パターン出す
・パターンごとに、どういう利用者に向くかを書く
・スクロールせずに見える範囲がどこまでかを明示する
・文章ではなく、階層のある箇条書きで表現する
・色やフォントには触れない」
3案出させて比べる
1案だけだと、それが良いのか判断できません。比較対象があって初めて、自分たちに合う形が見えます。アイデアを広げる方法はChatGPTでアイデア出しをする方法が参考になります。
スマホを先に決める
多くのサービスで、利用の大半はスマートフォンです。狭い画面で成立する構成を先に作り、広い画面はあとで考えるほうが失敗しません。
手順4｜図にして共有する
箇条書きのままでも議論できる
階層のある箇条書きは、そのままでも十分に設計図として機能します。絵にしないと議論できない、というのは思い込みです。
デザインツールに渡す
形にする段階では、テンプレートを持つツールが早いです。手順はデザインAIツールの使い方で解説しています。画像として見せたい場合はAI画像生成プロンプトの書き方も使えますが、正確な画面設計には向きません。
手描きを読み取らせる
紙に描いたラフを撮影して、要素の一覧に起こす使い方も有効です。方法はChatGPTの画像認識の使い方をご覧ください。
文言を詰める
ボタンの文字で完了率が変わる
「送信」と「無料で相談を予約する」では、押される率が違います。ボタンの文言は、押した先で何が起きるかを書くのが原則です。
エラーメッセージを丁寧に作る
利用者が離脱する最大の場面がエラー表示です。何が悪いのか、どう直せばいいのかを、必ずセットで書いてください。
【プロンプト】
「フォームのエラーメッセージを作成してください。
【入力項目】
（例：氏名、メールアドレス、希望日時、相談内容）
【条件】
・項目ごとに、想定されるエラーを挙げる
・メッセージは、原因と直し方を1文で両方書く
・利用者を責める書き方にしない
・専門用語を使わない
・30字以内にする」
コピーは別で磨く
見出しや説明文は、画面設計とは別の作業です。AIでLPのコピーライティングをする方法とChatGPTでキャッチコピーを作る方法が参考になります。
社内ツールを設計する場合
使う人に聞いてから作る
社内ツールは、作る人と使う人が別なせいで失敗します。今の作業手順を聞き取り、それを画面に落とす順番を守ってください。手順の整理はAIでマニュアル・業務手順書を作成する方法が使えます。
実装を頼む前に固める
画面が決まっていない状態で開発を始めると、手戻りが大量に出ます。ワイヤーフレームの段階で合意を取ることが、結果的にいちばん早い道です。実装の相談はChatGPTでコード生成・デバッグする方法が参考になります。
画面のつながりを設計する
1画面ずつ作ると破綻する
画面単体で完成度を上げても、画面から画面への移動がつながっていなければ使えません。申し込みフォームだけ立派でも、そこに辿り着く導線がなければ意味がないのと同じです。
行き止まりを潰す
設計でいちばん多い抜けが、失敗したときの行き先です。送信に失敗した、在庫がなかった、条件に合わなかった。こうした場面で利用者がどこへ行くのかを決めていないと、そこで離脱します。
【プロンプト】
「画面遷移の抜けを点検してください。
【想定している流れ】
（例：一覧画面 → 詳細画面 → 申し込みフォーム → 完了画面）
【条件】
・各画面で、利用者が取りうる行動をすべて挙げる
・その行動ごとに、次にどこへ行くかを示す
・行き先が決まっていない箇所を「未定」として指摘する
・失敗したときの行き先を、特に重点的に確認する
・戻る操作をしたときの挙動も確認する」
未定の箇所こそが仕様の穴
この指摘で出てくる「未定」が、後の手戻りの正体です。実装前にここを埋めておけば、開発中の質問がほとんど出なくなります。関係者への確認も、この一覧を見せるだけで済みます。
やってはいけないこと
AIの案をそのまま採用する
出てくるのは一般的によくある構成です。自社の利用者に合っているかは別の話で、そこを検証せずに進めると平凡な画面になります。
実在するサービスの画面をまねる指示をする
参考にするのは構いませんが、特定のサービスの画面をそのまま再現させるのは避けてください。権利の問題が生じます。判断はAI生成物の著作権と商用利用の考え方で整理しています。
未公開の企画情報を入力する
新サービスの詳細は、社外に出せない情報です。一般化した形で相談してください。線引きは生成AIの情報漏洩リスクと社内利用ルールの作り方をご覧ください。
よくある質問（FAQ）
Q. デザインの知識がなくても使えますか？
使えます。ワイヤーフレームは見た目を決める作業ではないので、必要なのは「利用者に何をしてほしいか」を言語化する力だけです。
Q. 画像として出力させられますか？
ツールによっては可能ですが、細かい配置の精度は期待できません。階層のある箇条書きで設計し、形にするのはデザインツールで行うのが確実です。
Q. デザイナーは不要になりますか？
なりません。AIで作れるのはたたき台までです。ただし、たたき台があると依頼の質が上がり、やり取りの回数が減ります。
Q. 既存の画面の改善にも使えますか？
使えます。現在の画面の要素を書き出して渡し、「離脱しそうな箇所を指摘して」と聞く使い方が有効です。
Q. アプリの画面にも使えますか？
使えます。ただし端末ごとの操作の作法が異なるので、前提として端末を明記してください。
まとめ
この記事では、AIを使った画面設計とワイヤーフレーム作成を解説しました。ポイントを整理します。
- ワイヤーフレームは見た目ではなく配置と順番を決めるもの
- 最初にその画面で何をしてほしいかを1文で決める
- AIに任せるのは要素の洗い出しと抜けの指摘
- 配置は3案出させて比べる。スマホから決める
- エラーメッセージは原因と直し方をセットで書く
まずは今考えている画面を1つ選んで、必要な要素を洗い出させてみてください。自分では気づかなかった項目が必ず出てきます。
プロンプトの基本はAIプロンプトとは？初心者が最初に知るべき基礎知識、AI検索時代のコンテンツ戦略はSEOプロンプト作成ツール完全ガイドもどうぞ。その他はAIプロンプト活用ブログでご紹介しています。
コメント