WebデザイナーはAIをどう使う？アイデア出しから確認作業まで
WebデザインでAIを使うと聞くと、指示を一度出して画面をまるごと作らせる方法を思い浮かべるかもしれません。
ただ、出てきた画面をそのまま顧客へ出せるかというと、手が止まってしまいますよね。
実務で使いやすいのは、要件の整理、複数案の比較、見落とし探しをAIに手伝ってもらう方法のほうです。
この使い方なら、なぜその案にしたのかという判断の根拠も残せます。
AIから見た目のよい案が出てきても、そのまま採用できるとはかぎりません。
利用者の目的に合っているか、本番の文章量でも崩れないか、アクセシビリティ（年齢や障害にかかわらず使えること）や権利の面で問題がないか。
さらに、顧客のブランドと合っているか。
こうした点までは、AIが保証してくれないからです。
この記事では、企画からレビューまでの5つの工程について、AIへ任せてよい作業と、人が手放してはいけない判断を順番に見ていきます。
読み終えるころには、次の案件でAIへ何を頼み、どこを自分の目で確かめるかがはっきりします！
1. 要件と利用者の整理を補助させる
デザインに取りかかる前に、打ち合わせメモや依頼内容を、確定事項、仮説、未確認事項の三つへ分けましょう。
このときAIには、どの要件を優先するかという判断まで任せないでください。
任せるのは、情報を三つへ分類すること、矛盾していそうな箇所を挙げること、顧客へ追加で聞く質問を考えることだけです。
顧客から預かった資料をAIへ入力するなら、その前に契約書と秘密保持の取り決め、そして使うAIサービスのデータ取扱条件を確かめておきましょう。
許可を得ていない個人情報や未公開情報は入力しないでください。
書き出すときは、この三つに目的と制約を足した、次の6つの見出しで整理してみましょう⇩
- 事業の目的
問い合わせ、予約、購入、採用など、サイトで達成したいこと - 利用者の目的
サイトを訪れた人が知りたいこと、比べて決めたいこと、その場で終わらせたいこと - 確定事項
公開できる事実、必須ページ、期限、対応端末、運用体制 - 仮説
利用者が抱えていそうな悩み、見られそうな場面や端末、優先したい案内の流れ - 未確認事項
料金、実績、担当者、原稿、機能、法的な表示など、まだ確かめられていないこと - 制約
予算、使うCMS（管理画面からページを更新する仕組み）、既存システム、ブランドルール、制作範囲
ここまで分けておくと、画面に載せるべき情報が見つけやすくなります。
気をつけたいのは、AIが作った利用者像や悩みは、調査結果ではなく推測だという点です。
アクセス解析の数値、実際の問い合わせ内容、顧客への聞き取りなど、手元にある事実と照らし合わせて確かめましょう。
実在しない利用者の声やもっともらしい根拠を、AIに補わせてはいけません。
分からない項目は、無理に埋めず「未確認」のまま残しておけば大丈夫です！
AIには要件を完成させてもらうのではなく、確定事項と推測を分ける作業と、顧客へ次に確認する質問を洗い出す作業を任せましょう。
2. アイデアを広げる相手として使う
デザインの方向性が一案しか浮かんでいないときは、AIを「比べる材料を増やす相手」として使ってみましょう。
どの案を採用するかを決めるのは、AIではなく人です。
AIへ頼むときは、「おしゃれな案をください」とだけ書かないでください。
ページの目的、読み手、伝えたい内容、守ってほしい制約、比べたい観点を具体的に伝えましょう。
たとえば同じサービスページでも、安心材料を先に示す案、利用の流れを先に示す案、事例から入る案を並べて出してもらえます。
こうして複数の案を横に並べると、どの順番で情報を伝えるのが読み手に合うかを比べられます。
さらに、案ごとに次の5点も説明してもらいましょう。
- 最初に伝える情報と、その理由
- 読み手に取ってほしい行動までの案内の流れと、迷いやすい箇所
- その案を実現するために必要な文章、写真、実績、よくある質問
- スマートフォンでも省略せずに残す情報
- その案の弱点と、うまくいかなくなる条件
ここまで言葉にしてもらうと、見た目の雰囲気だけで案を選ばずに済みます。
一方で、AIへ「特定の競合サイトと同じにしてください」と指示するのは避けましょう。
代わりに、解決したい課題や、情報を並べる順番の考え方を言葉にして伝えてください。
最終案を選ぶのは、顧客の要件、実際の利用者、ブランド、制作条件を踏まえた人の判断です。
選んだあとは、なぜその案にしたのかという理由を短く書き残しておきましょう。
考え方の異なる案をAIから3つほど出してもらい、採用した案と見送った案の理由を書き出しておくと、顧客へデザインを説明するときにもそのまま使えます。
3. ダミー文章ではなく構造確認に使う
画面を作るときは、意味のない仮の文章で埋めずに、本番に近い文章量で崩れを確かめましょう。
この意味のない仮の文章のことを、制作の現場ではダミー文章と呼びます。
ダミー文章だけで画面を作ると、本番の原稿を流し込んだときの崩れを見落としやすくなります。
実際の原稿では、見出しが二行に折り返したり、注意事項が想定より増えたりするからです。
公開直前になって表示が崩れると、慌ててしまいますよね。
そこでAIには、必要な文章の種類と長さを確かめるための仮原稿を作ってもらいましょう。
このとき、まだ確認できていない事実を、それらしく書かせてはいけません。
仮原稿には「要確認」「仮の数値」「顧客確認待ち」などの印を付けておきましょう。
公開用の原稿と混ざらないよう、保存する場所も分けておくと安心です。
文章量による崩れを確かめるときは、次の7通りの状態を用意して見比べてみてください。
- 短い見出しと、折り返して二行になる長い見出し
- 1行で終わる説明と、数行にわたる説明
- 画像がある場合とない場合
- 実績や記事が0件、1件、多数ある場合
- フォームが未入力のとき、入力エラーが出たとき、送信中、送信完了後
- 料金や条件に注記が付く場合
- 日本語、英数字、長いURLが混ざる場合
見るのは、文章が枠へ収まるかどうかだけではありません。
どの情報を先に読んでほしいかが読み手へ伝わるか、料金の条件や例外の注記が小さくなりすぎていないかも確かめましょう。
そして、AIが作った仮原稿は事実を確認したものではない、という前提を忘れないでください。
納品前に顧客が承認した原稿へ置き換え、「要確認」などの印で検索して、仮の情報が残っていないか確かめましょう。
もっともらしい仮原稿がそのまま実績や料金、顧客の声として公開されないよう、仮情報に付ける印と、本番原稿へ差し替える担当者を先に決めてください。
4. デザインレビューの観点を増やす
レビューでは、見るべき項目の候補を増やすところまでをAIに頼みましょう。
AIは、観点を挙げるのが得意です。
一方で、実際の画面を操作できるか、読み上げの順番が自然か、書かれている内容が正しいかまでは確かめられません。
AIへ質問する前に、その画面の目的、対象にする端末、どこまで作り込んだか、すでに分かっている制約を伝えてください。
そのうえで、「見落としやすい観点はどこか」と聞いてみましょう。
出てきた項目はそのまま採用せず、案件ごとの基準と照らし合わせて、自分たちのチェックリストへ整理してください。
観点をそろえるときの下敷きになるのが、W3CのWCAG 2.2（年齢や障害にかかわらずWebを利用しやすくするための国際的なガイドライン）と、デジタル庁のウェブアクセシビリティ導入ガイドブックです。
この2つを参考に、少なくとも次の9点は実際の画面で確かめましょう。
- 見出しの順序どおりに読み進めて、内容が自然につながるか
- 色だけで状態や意味を区別していないか
- キーボードだけで移動、操作、送信ができるか
- 今どこを選んでいるかを示す枠が見え、追従するヘッダーなどに隠れないか
- 画像の代替テキスト（画像の内容を説明する文字）が目的に合い、飾りの画像は読み上げられない設定になっているか
- リンクとボタンの文言だけで行き先や操作が分かるか
- フォームのラベル、必須表示、エラー内容と直し方が伝わるか
- 文字を拡大しても、画面を拡大しても、幅を狭くしても、情報や操作が失われないか
- マウスを重ねたとき、選択中、エラー、押せない状態、読み込み中の見た目が用意されているか
最初にざっと見るだけなら、W3Cのドラフト版「Easy Checks」も役に立ちます。
ただし、この簡易的な確認だけでは、ガイドラインを満たしているかどうかまでは判断できません。
自動チェックツール、目視、キーボード操作に加え、必要に応じて読み上げソフトなどの支援技術での確認も組み合わせましょう。
修正したあとは、同じ手順でもう一度確かめてください。
AIが挙げた観点は、あくまでレビューの入口です。
最終的な判断は、実際の文章と画面を見て、操作や読み上げまで確認できる人が行いましょう。
5. 生成物の権利・類似・ブランドを確認する
AIで作った画像や文章は、採用を決める前に、どのサービスで生成し、何を参照させ、人がどこを直したかを記録しておきましょう。
サービスの利用規約、契約しているプラン、商用利用の条件、入力する素材を使ってよいかは、制作している時点の公式情報で確認してください。
文化庁の「AIと著作権について」には、生成AIと著作権に関する考え方と、公開や利用の前にリスクを下げるためのチェックリストが掲載されています。
生成物を採用する前に、一度目を通しておきましょう。
案件ごとに残しておきたい記録は、次の7項目です。
- 使用したサービス、モデルや機能の名前、生成した日
- AIへ入力した指示文と、参照させた素材の名称
- 参照させた素材の権利者、入手先、利用条件
- 採用した生成物と、人が加えた修正の内容
- 既存作品や他社ブランドと似ていないか確認した結果
- 顧客のブランドガイドラインと照らした結果と、顧客の承認の記録
- 納品物へ含める範囲と、顧客が再利用するときの条件
ここまで残しておくと、あとから顧客に聞かれたときも、その場で説明できます。
似ている作品を探すときは、画像検索や名称の検索が助けになります。
ただし、検索で見つからなかったからといって、権利上の問題がないと証明できるわけではありません。
ロゴ、キャラクター、広告の中心に置く素材など、影響の大きい用途ではとくに慎重に確認しましょう。
既存作品と似ていないか、商標として登録されていないか、契約条件に反しないかを調べてください。
とはいえ、権利の線引きをすべて自分で見極める必要はありません。
判断しきれないと感じたら、著作権や商標に詳しい専門家へ相談しましょう。
ブランドとの整合は、色や形が合っているかだけの問題ではありません。
写真に写る人物の雰囲気、文章の語調、誇張した表現が、顧客の事業の価値観と矛盾していないかまで、人の目で確かめましょう。
AIが作ったものだから自由に使えると判断せず、入力した素材、サービスの利用規約、既存作品との類似、顧客との契約条件を、公開前に必ず確認してください。
まとめ
WebデザイナーがAIを使うときの要点を振り返ります。
- 打ち合わせメモを確定事項、仮説、未確認事項へ分ける
- AIには方向性の違う案と、比べるための観点を出してもらう
- 仮原稿には印を付け、本番に近い文章量で表示の崩れを確認する
- アクセシビリティは実際の画面と操作で人が確かめる
- AIで作った素材の利用条件、既存作品との類似、権利、ブランドとの整合を確認する
- 採用理由、参照させた素材、人が加えた修正、顧客の承認を記録する
項目が多く見えるかもしれませんが、全部を一度に始めなくて大丈夫です。
まずは次の案件で、打ち合わせメモを「確定事項・仮説・未確認事項」の三つに分けるところから試してみてください。
そしてAIには、顧客へ追加で聞くべき質問だけを出してもらいましょう。
この一手間だけでも、判断を自分の手に残したまま、下ごしらえを軽くできます！
関連記事
