AIで作ったWebサイトの確認方法｜初心者向けチェックリスト

前回の記事では、AIにWebデザインを伝えるときのコツや、指示文の作り方をご紹介しました。
AIを使うと、HTML・CSS・JavaScriptのコードやWebデザインを短時間で作ることができます。
しかし、AIが作ったコードをそのまま使うと、パソコンではきれいに見えても、スマートフォンではレイアウトが崩れてしまうことがあります。

私もWebサイトを制作するなかで、次のような問題を何度も経験しました。

• 文字と画像が重なる

• 写真の大きさがそろわない

• スマートフォンでメニューが使えない

• ボタンを押しても反応しない

• 画面を小さくすると横にはみ出す

• 画像がぼやけて見える

今回は、AIで作ったWebサイトを確認するときに、私が意識しているポイントを初心者目線でまとめます。

※専門的な検証方法ではなく、私が学習やポートフォリオ制作で実践している確認方法です。

1．最初にページ全体を見る

最初から細かい部分を直すのではなく、まずはページを上から下まで見て、全体の印象を確認します。

私が最初に見るのは、次のような部分です。

• 色に統一感があるか

• 文字が読みやすいか

• 写真の雰囲気が合っているか

• セクション同士の間隔が狭すぎないか

• 大切なボタンが見つけやすいか

• ページ全体が長すぎないか

細かい部分だけを見ていると、全体のバランスに気づきにくくなります。
一度ページから少し離れて見ると、「文字が大きすぎる」「写真が多すぎる」といった問題を見つけやすくなりました。

2．文字が読みやすいか確認する

デザインがおしゃれでも、文字が読みにくいと内容が伝わりません。

次の項目を確認します。

• 文字が小さすぎないか

• 見出しが大きすぎないか

• 文章の行間が狭すぎないか

• 背景と文字の色が似すぎていないか

• 写真の上の文字が見えにくくないか

• 文章が横に長くなりすぎていないか

写真の上に白い文字を置いたときは、明るい写真だと文字が見えなくなることがあります。
その場合は、写真を少し暗くしたり、文字の後ろに半透明の色を重ねたりすると読みやすくなります。

3．画像の大きさと画質を確認する

Webサイトでは、画像の印象がデザイン全体に大きく影響します。

特に確認したいのは、次の部分です。

• 画像がぼやけていないか

• 縦横の比率がおかしくないか

• 写真が不自然に引き伸ばされていないか

• 同じ並びの画像サイズがそろっているか

• 同じ写真を何度も使っていないか

• サイトの雰囲気に合った写真になっているか

カードが3枚並ぶデザインでは、写真の縦横比が違うと高さがそろわず、全体が不安定に見えることがあります。
CSSで画像の高さをそろえ、必要に応じて object-fit: cover; を使うと整えやすくなります。

4．ボタンとリンクを実際に押してみる

見た目だけではなく、実際に操作できるかどうかも確認します。

ページ内にあるボタンやリンクは、一度すべて押してみます。

• メニューから正しい場所へ移動できるか

• 「詳しく見る」ボタンが動くか

• トップへ戻るボタンが動くか

• 別ページへのリンクが正しいか

• 存在しないページにつながっていないか

• ボタンにマウスを重ねたときの変化があるか

ボタンのデザインが完成していても、リンク先が設定されていないことがあります。
AIが作ったコードだから大丈夫だと思わず、自分で実際に操作することが大切です。

5．スマートフォン表示を確認する

パソコンできれいに表示されていても、スマートフォンでは崩れることがあります。
私は、ブラウザの横幅を少しずつ狭くしながら確認しています。

特に、次の部分をチェックします。

• 文字や画像が画面からはみ出していないか

• 2列や3列の部分が縦並びになるか

• 画像が小さくなりすぎていないか

• ボタンが押しやすい大きさか

• 左右に不自然な余白がないか

• 横スクロールが発生していないか

パソコンとスマートフォンの中間くらいの画面幅でも崩れることがあるため、急に画面を小さくするのではなく、少しずつ幅を変えながら見るようにしています。

6．ハンバーガーメニューを確認する

スマートフォン用のハンバーガーメニューは、表示されているだけではなく、実際に使えるか確認します。

チェックする内容は次のとおりです。

• メニューボタンを押すと開くか

• もう一度押すと閉じるか

• メニュー項目が縦に並んでいるか

• 文字が画面の外に出ていないか

• メニューが画像や文字の後ろに隠れていないか

• ページをスクロールした後でも正しく開くか

• メニューのリンクを押すと移動できるか

私が制作したサイトでも、ページをスクロールしてからメニューを開くと、一部分しか表示されないことがありました。
このような問題は、メニューの位置や高さなどが原因になっている場合があります。

7．お問い合わせフォームを確認する

お問い合わせフォームや予約フォームがある場合は、入力欄も確認します。

• 名前やメールアドレスを入力できるか

• 入力欄の幅がそろっているか

• スマートフォンで画面からはみ出さないか

• テキストエリアが小さすぎないか

• 送信ボタンが見つけやすいか

• 必須項目が分かるようになっているか

• 項目名と入力欄の位置が合っているか

ポートフォリオ用の架空サイトでは、実際にメールを送信する機能を付けていない場合もあります。

その場合は、「このフォームはポートフォリオ用のサンプルです」などの説明を入れると、見る人に誤解されにくくなります。

8．誤字や内容の間違いを確認する

デザインとコードだけでなく、文章も見直します。

AIが作った文章には、架空の住所や存在しない電話番号、不自然な説明が入ることがあります。

確認する項目は次のとおりです。

• サイト名がすべて同じ表記になっているか

• 誤字や脱字がないか

• 住所や電話番号の形式がおかしくないか

• メニュー名と内容が合っているか

• 料金や時間の表記が統一されているか

• 別のサイトの文章が混ざっていないか

• 著作権表記の年が不自然ではないか

特に複数のページを作ったときは、前に作ったサイトの名前や文章が残っていないか確認するようにしています。

9．AIに修正を頼むときの指示文

問題を見つけたら、AIに「直してください」とだけ伝えるのではなく、場所・状態・希望する結果を具体的に伝えます。

たとえば、スマートフォンで画像がはみ出している場合は、次のように伝えます。

「スマートフォンで見ると、施術メニューの画像が画面の右側にはみ出します。パソコンのデザインは変更せず、画面幅768px以下ではカードが1列になるようにCSSを修正してください。変更するコードと追加する場所も教えてください。」

ハンバーガーメニューに問題がある場合は、次のように伝えます。

「ページをスクロールしてからハンバーガーメニューを開くと、メニューの下半分しか表示されません。メニュー全体が画面内に固定表示されるように修正してください。HTML・CSS・JavaScriptのどこを変更するのか、初心者にも分かるように説明してください。」

「パソコンのデザインは変えないでください」と伝えることも大切です。

一部分だけを直したいのに、AIがサイト全体のデザインを変更してしまうことを防ぎやすくなります。

公開前に使えるチェックリスト

最後に、公開前の確認項目をまとめます。

デザイン

• 色やフォントに統一感がある

• 文字が読みやすい

• 見出しが大きすぎない

• 余白が狭すぎない

• 写真の大きさがそろっている

• 画像がぼやけていない

操作

• すべてのボタンを押せる

• リンク先が正しい

• メニューが開閉できる

• トップへ戻るボタンが動く

• フォームに入力できる

スマートフォン

• 文字や画像がはみ出していない

• 横スクロールが発生していない

• カードが縦に並ぶ

• ボタンが押しやすい

• ハンバーガーメニューが正しく表示される

内容

• 誤字や脱字がない

• サイト名が統一されている

• 別サイトの文章が残っていない

• 料金や時間の表記が統一されている

• 架空サイトであることが必要に応じて分かる

まとめ

AIを使うと、初心者でもWebサイトの形を作りやすくなります。
しかし、AIが作ったものが最初から完成しているとは限りません。
パソコンとスマートフォンの両方で確認し、ボタンを実際に押して、文字・画像・リンク・メニューを一つずつ見直すことが大切です。

問題を見つけたときは、「どこで」「何が起きていて」「どのように直したいか」を具体的にAIへ伝えると、修正しやすくなります。

私もまだ勉強中ですが、制作と修正を繰り返しながら、少しずつ確認できる部分が増えてきました。

次回は、完成したWebサイトをポートフォリオに載せる方法や、制作実績の見せ方についてまとめる予定です。

最後まで読んでいただき、ありがとうございました。