こんにちは。アイレットデザイン事業部の黒木です。
アイレットデザイン事業部ではINSIDE UI/UXと題して、所属メンバーがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。
Webサイトやアプリ開発のプロジェクトをスムーズに進める上で、設計図となる「ワイヤーフレーム」はとても大切な工程です。
とはいえ、ゼロから画面の構成を考えるのは、なかなか時間がかかる作業でもありますよね。
最近は、デザインや開発の現場でもAIの活用がどんどん広がっています。
そこでこの記事では、GoogleのAI「Gemini」を使ってワイヤーフレームを作る方法と、その過程で「アクセシビリティ」をしっかり考慮するコツを、実践した内容を元にご紹介します！
まずはGeminiに「お題」を出してもらおう
ワイヤーフレーム作成の練習で、意外と多くの人が「何から作ろう？」という壁にぶつかりがちです。今回は、そんなアイデア出しからGeminiに相談相手になってもらいました。
▼実際に投げかけたプロンプトはこちら
ワイヤーフレームを作る練習がしたい。
（ホーム画面とお問い合わせフォーム画面の2画面を作る）
架空の企業を使った良いお題を作ってほしい。
この簡単な相談だけで、Geminiは具体的なお題を考えてくれました。
▼実際に考えてくれたお題はこちら
【お題】オンライン専門の観葉植物店「Green」のWebサイト
1. 架空の企業情報
– 企業名: Green (グリーン)
– 事業内容: オンラインでの観葉植物の販売。特に、初心者向けのセット商品や、珍しい品種の取り扱いに力を入れている。
– ターゲットユーザー:
20代〜30代の、都心で一人暮らしをしている男女。
インテリアに関心が高く、部屋に緑を取り入れたいと思っている。
植物を育てた経験はあまりないが、挑戦してみたいと考えている。
– サイトの目的:
企業のブランディングと商品の魅力を伝え、購入につなげる。
植物を育てる楽しさや、緑のある暮らしの豊かさを伝え、ファンになってもらう。
– 強み・特徴:
初心者向けサポート: 購入後の育て方相談にLINEで対応。
– 品質保証: 到着後1ヶ月以内の枯れ保証サービスがある。
– 豊富な品揃え: 定番の植物から、少し珍しい品種まで取り揃えている。2. 作成する画面（2画面）
以下の2画面のワイヤーフレームを作成してください。
（PC画面とスマートフォン画面の両方を想定すると、より実践的な練習になります）① ホーム画面
② お問い合わせフォーム画面3. 各画面に盛り込む要素
① ホーム画面
ユーザーがサイトに訪れたときに、最初に見るページです。「お店のコンセプト」と「商品の魅力」が伝わり、他のページも見てみたくなるような構成を考えましょう。
– ヘッダー
– ロゴ
– グローバルナビゲーション（例：ホーム, 商品一覧, Greenとは, よくある質問, お問い合わせ）
– カートアイコン、ログインボタン
– メインビジュアル
– お店のコンセプトが伝わるキャッチコピーと写真
– 開催中のキャンペーンや新商品への導線ボタン
– サービスの特徴
– 「初心者向けサポート」「品質保証」「豊富な品揃え」など、Greenの強みが3つほど簡潔にわかるエリア
– 商品カテゴリー
– 「育てるのが簡単な植物」「日陰に強い植物」「中型〜大型の植物」など、ユーザーが探しやすくなるようなカテゴリーへの導線
– 人気商品ランキング
– 写真付きで人気商品を3〜5つ紹介
– お客様の声（レビュー）
– 購入者の写真付きのコメントを2〜3件紹介
– お知らせ・コラム
– 新商品の入荷情報や、植物の育て方に関するコラムへの導線
– フッター
– 会社概要、利用規約、プライバシーポリシーなどへのリンク
– SNSへのリンク（Instagram, Xなど）② お問い合わせフォーム画面
ユーザーが疑問や不安を感じたときに、ストレスなく質問できるように設計しましょう。
– パンくずリスト
– 例：「ホーム > お問い合わせ」
– ページのタイトル
– 「お問い合わせ」
– 導入文
– お問い合わせへの感謝や、返信にかかる時間の目安などを記載
– 入力フォーム
– お問い合わせ種別（例：商品について, 返品・交換について, その他）※選択式
– お名前（必須）
– メールアドレス（必須）
– お問い合わせ内容（必須）※テキストエリア
– プライバシーポリシーへの同意
– チェックボックス
– 送信ボタン
– その他
– よくある質問（FAQ）へのリンクを設置し、ユーザーの自己解決を促す導線
Gemini Canvasでワイヤーフレームを作ってもらう
お題が決まったら、いよいよワイヤーフレーム作りです。
Geminiには「Canvas」という、簡単な図やレイアウトを作れる機能があります。
先ほどのお題を元にワイヤーフレーム作成をお願いする際、「WCAG レベルAAの基準を満たすように」という指示も加えてみました。
驚くことに、数分も待たずに基本的なレイアウトが完成しました。
トップページ
お問い合わせページ
これまで手作業で一つひとつ要素を置いていた時間を考えると、大幅な時短になります。
【比較】AIと人間、ワイヤーフレーム作成のアプローチ
AIが作ったワイヤーフレームは、たしかに高速でクオリティも高いです。
では、人間が「アクセシビリティ」のような配慮を加えながら作ると、どのようなアプローチの違いが見られるのでしょうか？
ここからは、同じお題に対して「私がアクセシビリティを意識して作成した案」と「Geminiにアクセシビリティを意識して作ってもらった案」を並べて、それぞれの特徴や思考プロセスを比べてみたいと思います。
比較テーマ1：お問い合わせフォームの「必須項目」
【私が作成した案】
まず、私自身が作成したお問い合わせフォームです。
誰にとっても分かりやすいことを第一に考え、必須項目にはアスタリスク（*）だけでなく、「（必須）」というテキストラベルを付け加えました。
これは、色の見え方が異なる方や、スクリーンリーダー（画面読み上げソフト）を使う方にも、その項目が「必須である」という情報が正確に伝わるようにするための配慮です。
【Geminiが作成した案】
一方、こちらがGeminiに作ってもらったフォームです。
必須項目は、Webで一般的に見られる赤いアスタリスク（*）のみで表現されていました。デザインとしては非常にシンプルです。
【考察】
Geminiは「よくある一般的なパターン」を素早く生成するのが非常に得意なようです。
そこから一歩踏み込んだ「より丁寧な配慮」という点では、人間が意図を汲み取って設計する部分が活きてきます。
AIにこの配慮をさせるには、「必須テキストを付けて」という、より具体的な指示で補ってあげると良さそうですね。
比較テーマ2：トップページの「アイコンボタン」
【私が作成した案】
私が作成したトップページでは、カートなどのボタンにアイコンとテキストラベルを両方表示させました。
アイコンのデザインは文化や個人の経験によって解釈が異なる可能性があるため、誰が見ても機能が明確に伝わることを優先した設計です。
【Geminiが作成した案】
Geminiの提案では、この部分はアイコンのみで表現されており、非常にすっきりとしたモダンな印象でした。
【考察】
デザインのシンプルさと分かりやすさのバランスは、常に考えるべきポイントです。
ワイヤーフレームの段階では、まず機能が誤解なく伝わることを重視するのが安全策と言えるでしょう。
もちろん、これもGeminiに「テキストラベルも付けて」と追加でお願いすれば、すぐに対応してくれます。
大切なのは、AIの提案を鵜呑みにせず、プロジェクトの目的に合わせて人間が判断し、共同作業を進めていくことです。
まとめ：Geminiとワイヤーフレームを作ってみた感想
今回、Geminiをワイヤーフレーム作成に活用してみて感じたことをまとめます。
- メリット
- とにかく速い！：アイデア出しから形にするまでの時間をぐっと短縮できます。
- アイデアの引き出しが増える：自分では思いつかないようなレイアウトを提案してくれて参考になります。
- 初心者の練習にぴったり：お題を出してくれるので、学習の題材に困りません。
- 構造を意識してくれる：HTMLベースで生成するため、alt属性など、ビジュアルデザインの段階では見落としがちな構造レベルのアクセシビリティを考慮した提案をしてくれることがありました。
- 注意点
- デザインデータにするには一手間：生成されるのはHTML、CSSなので、Figmaなどで編集できるデータにするには、キャプチャを撮ったうえでトレース（描き直し）作業が必要です。
- 細やかな配慮は人の手で：今回見てきたように、AIの提案をそのまま使うのではなく、人間が意図を持ってアクセシビリティなどの配慮を加えていくことが大切です。
結論として、Geminiはワイヤーフレーム作りの、かなり頼もしいアシスタントになってくれると実感しました。
AIの圧倒的なスピードをサポート役として活用し、私たち人間はより創造的で、ユーザーのことを考える時間をもっと大切にできる。これが、これからのデザイナーとAIとの上手な付き合い方なのかもしれません。
簡単30秒