生成AIでWebページを作ると、短時間で整った見た目を用意できます。しかし、見出し構造、キーボード操作、フォーム、レスポンシブ、表示速度まで正しいとは限りません。公開・納品前に人が確認したい10項目を整理します。
- ページの目的が最初に分かるか
ヒーロー部分を見て、誰向けの何のページか、次に何をすればよいか分かるか確認します。抽象的なキャッチコピーと装飾だけで、サービス内容が下へ隠れていないか見ます。
- 見出し構造が内容の順序と合っているか
文字サイズだけで見出しを表現せず、h1、h2、h3を内容の階層に合わせます。デザイン上小さく見せたい場合も、HTMLの意味と混同しません。
- リンクとボタンの役割が合っているか
別ページへ移動するものはリンク、送信や開閉など画面上の処理はボタンを基本にします。クリックできるdivを量産していないか確認します。
- キーボードだけで操作できるか
Tabキーでメニュー、ボタン、フォームへ移動し、現在位置が見えるか確認します。モーダルを閉じられない、メニューの中へ入れないといった問題を探します。
- 色とコントラストに無理がないか
薄いグレーの小さな文字、画像上の白文字、色だけで示すエラーに注意します。ダークモードや高コントラスト設定でも確認します。
- スマートフォンで横にはみ出さないか
複数の画面幅で、表、長いURL、ボタン、固定ヘッダーを確認します。PC画面を縮小しただけの設計になっていないか、実機でも操作します。
- フォームの入力とエラーが分かるか
ラベル、必須項目、入力例、エラー理由、送信完了を確認します。エラーを画面上部だけに表示せず、該当欄との関係を伝えます。
- 画像と文章の権利・事実を確認したか
AIが生成した人物、商品、ロゴに似た形、根拠のない実績や数字が含まれていないか確認します。代替テキストも画像の役割に合わせて設定します。
- 読み込み量と動きが過剰でないか
大きな画像、自動再生動画、アニメーション、外部スクリプトを棚卸しします。動きを減らす端末設定でも内容が欠けないか確認します。
- AIを外しても更新できるか
文章、画像、リンク、料金を担当者が変更できるか確認します。生成時にしか理解できない複雑なコードや、特定サービスへの依存を残さないようにします。
チェック結果を納品記録へ残す
合格・不合格だけでなく、確認したページ、端末、ブラウザ、日時、残っている注意点を記録します。自動テストの結果と、人が操作して確認した結果を分けます。
AIが作った部分だけ特別扱いせず、通常の制作と同じ品質基準を適用します。AIで制作時間が短くなった分を、確認時間まで削らないことが重要です。
まとめ
AIが作ったWebデザインは完成品ではなく、検査前の制作物です。目的、HTML構造、操作、色、スマートフォン、フォーム、権利、速度、更新性を人が確認して、初めて企業サイトとして公開できます。
