AIでサイトを作ると、かなり早く形になります。
- 構成を考え、
- 文章を作り、
- デザインを整え、
- HTMLやCSSも用意できます。
ただし、サイトは作っただけでは終わりません。
公開前の確認が、とても大切です。
特に、会社のコーポレートサイトとして公開する場合は、見た目だけでなく、
- リンク
- フォーム
- SEO設定
- スマホ表示
まで確認しておきたいところです。
今回は、AIで作ったHTMLサイトを公開する前に確認したことを、チェックリストとしてまとめます。
実際に制作したサイトはこちらです。
AIで作ったサイトの公開前チェックリストとは？
AIでサイトを作った場合でも、公開前チェックは必要です。
AIが作ったからといって、すべてが自動で正しくなるわけではありません。
むしろ、公開前に人間が確認することで、安心して出せる状態に近づきます。
公開前に確認したい大きな項目
- ページが、正しく表示されるか？
- スマホで、読みやすいか？
- リンクが、正しく動くか？
- フォームが、使いやすいか？
- 画像やフォントが、表示されるか？
- SEO設定が、入っているか？
- OGP画像が、設定されているか？
- faviconやapple-touch-iconが、設定されているか？
- sitemap.xmlやrobots.txtが、用意されているか？
- 公開後に、確認する手順が決まっているか？
すべてを完璧にしようとすると、少し大変に見えます。
でも、ひとつずつ確認すれば、大丈夫です。
1. すべてのページが表示されるか？
まずは、ページが正しく表示されるかを確認します。
HTMLサイトの場合、各ページのファイルをサーバーにアップロードする必要があります。
アップロード漏れがあると、ページが表示されません。
確認したいページ
- トップページ
- 主要な下層ページ
- 会社概要
- お問い合わせ
- サービス紹介ページ
- FAQページ
- 規約ページ
- 404ページ
今回のコーポレートサイトでは、主要ページをひとつずつ確認しました。
まずは、ページが開けること。
ここが、いちばん基本です。
2. CSSとJavaScriptが読み込まれているか？
ページが開いても、CSSが読み込まれていないと、デザインが崩れます。
JavaScriptが読み込まれていないと、メニューや動きが正しく動かないことがあります。
確認したいこと
- デザインが、崩れていないか？
- フォントが、反映されているか？
- スマホメニューが、開閉できるか？
- スクロール演出が、不自然でないか？
- ボタンやリンクの動きが、自然か？
HTMLだけでなく、CSSやJavaScriptもサイトの一部です。
ファイルが読み込まれているか、必ず確認します。
3. スマホ表示を確認する
公開前チェックで、特に大切なのがスマホ表示です。
PCで良く見えても、スマホで読みにくいサイトは、もったいない。
今は、多くの人がスマホでサイトを見ます。
そのため、スマホ表示は、必ず確認した方が良いでしょう。
スマホで確認したいこと
- ファーストビューが、自然に見えるか？
- 見出しが、読みやすいか？
- 本文の文字サイズは、小さすぎないか？
- 行間は、詰まりすぎていないか？
- ボタンは、押しやすいか？
- メニューは、開きやすいか？
- フッターは、読みやすいか？
- 横スクロールが、発生していないか？
できれば、実機スマホで確認するのが、おすすめです。
PCのレスポンシブ表示だけでは、気づきにくい違和感もあります。
4. 日本語の改行が不自然でないか？
日本語サイトでは、スマホの改行も確認した方が良いでしょう。
日本語は、英語のように単語ごとにスペースで区切られていません。
そのため、スマホで不自然な位置に改行が入ることがあります。
確認したい改行
- 見出しの言葉が、途中で切れていないか？
- キャッチコピーが、読みにくくないか？
- CTAの見出しが、自然に読めるか？
- フッターのコピーが、詰まっていないか？
- 意味のまとまりで、改行されているか？
例えば、「ちょうどいい」が途中で分かれると、少し気になります。
「小さな型から」が、不自然に分かれることもあります。
読めないわけではありません。
でも、見た目の印象には影響します。
5. リンクが正しく動くか？
リンク確認も大切です。
ページ内のリンクが間違っていると、読者が目的のページへ進めません。
確認したいリンク
- ヘッダーメニュー
- フッターメニュー
- トップページ内のリンク
- CTAボタン
- お問い合わせへのリンク
- 規約ページへのリンク
- 外部サイトへのリンク
- ブログ記事からのリンク
今回のサイトでは、URLから「.html」を消しています。
そのため、リンクも拡張子なしURLにそろえました。
確認したいURL形式
- /guide.html ではなく、/guide になっているか？
- /company.html ではなく、/company になっているか？
- /inquiry.html ではなく、/inquiry になっているか？
- 古いURLから、正しいURLへ転送されるか？
リンクは、目に見える部分だけでなく、サイト全体の管理にも関わります。
6. お問い合わせフォームを確認する
フォームは、特に慎重に確認したい部分です。
フォームが使いにくいと、最後の行動で、手が止まってしまう可能性があります。
フォームで確認したいこと
- 入力欄が、表示されているか？
- ラベルが、分かりやすいか？
- 必須項目が、分かるか？
- スマホで、入力しやすいか？
- 送信ボタンが、押しやすいか？
- reCAPTCHAが、表示や動作に影響していないか？
- フォーム下の案内文が、読めるか？
今回のサイトでは、お問い合わせフォームと、テンプレート申込フォームを確認しました。
フォームは、見た目だけでなく、実際に使えるかが大切です。
7. reCAPTCHAの案内文を確認する
フォームでreCAPTCHAを使う場合は、案内文も確認します。
reCAPTCHAは、迷惑送信を防ぐための仕組みです。
ただし、表示や案内の扱いには注意が必要です。
確認したいこと
- reCAPTCHAで保護されていることが、表示されているか？
- Googleのプライバシーポリシーへ、リンクしているか？
- Googleの利用規約へ、リンクしているか？
- 日本語として、自然な文言になっているか？
- スマホで、読みづらくないか？
デザインだけを優先して、必要な案内を消すのは良くありません。
必要な情報を残しつつ、見た目も整えることが大切です。
8. 画像が表示されるか？
画像の確認も必要です。
画像ファイルのアップロード漏れや、パスの間違いがあると、画像が表示されません。
確認したい画像
- トップページのヒーロー画像
- OGP画像
- favicon
- apple-touch-icon
- その他、ページ内で使う画像
今回のサイトでは、ヒーロー画像に複数の形式を用意しました。
- JPEG
- WebP
- AVIF
軽い形式を優先しつつ、対応環境にも配慮しました。
9. Webフォントが読み込まれているか？
Webフォントを使っている場合は、フォントの読み込みも確認します。
フォントが読み込まれないと、サイトの印象が変わります。
確認したいこと
- 見出しのフォントが、反映されているか？
- 本文のフォントが、読みやすいか？
- フォントファイルが、アップロードされているか？
- フォントのパスが、正しいか？
- 表示速度に、大きな影響がないか？
今回のサイトでは、フォントを自社配信しました。
そのため、フォントファイルのアップロード漏れや、キャッシュ設定も確認しました。
10. titleタグとdescriptionを確認する
SEO設定として、titleタグとdescriptionも確認します。
これらは、検索結果やページ内容の理解に関わります。
確認したいこと
- ページごとに、titleタグが入っているか？
- 全ページが、同じtitleになっていないか？
- 検索結果で、不自然に見えないか？
- descriptionが、ページ内容に合っているか？
- キーワードを、詰め込みすぎていないか？
今回のサイトでは、検索結果で既存サイトと区別しやすいように、「このは屋合同会社」という表記も使いました。
本文中やヘッダーでは、「このは屋」のままです。
このように、検索結果での見え方も意識しました。
11. canonicalタグを確認する
canonicalタグは、検索エンジンに正規URLを伝えるためのタグです。
今回のサイトでは、URLから「.html」を消しています。
そのため、canonicalタグも、拡張子なしURLにそろえました。
確認したいこと
- canonicalタグが、入っているか？
- URLが、拡張子なしになっているか？
- サイト内リンクと、URL形式がそろっているか？
- sitemap.xmlのURLとも、そろっているか？
URLの表記がそろっていると、サイト全体が整理されます。
12. OGPタグとOGP画像を確認する
OGPは、SNSやチャットで共有されたときの見え方に関わります。
ページが共有されたときに、画像やタイトルが自然に表示されるかを確認します。
確認したいこと
- og:titleが、入っているか？
- og:descriptionが、入っているか？
- og:urlが、正しいか？
- og:imageが、正しい画像を指しているか？
- 画像サイズが、適切か？
- Twitterカードも、設定されているか？
今回のサイトでは、ページごとに専用OGP画像も用意しました。
ただし、規約や問い合わせ系は、共通画像で十分と判断しました。
13. faviconとapple-touch-iconを確認する
faviconとapple-touch-iconも、公開前に確認します。
小さなアイコンですが、サイトの印象に関わります。
確認したいこと
- faviconが、ブラウザタブに表示されるか？
- favicon.icoが、用意されているか？
- favicon.svgが、用意されているか？
- apple-touch-icon.pngが、設定されているか？
- iPhoneでホーム画面に追加したとき、きれいに見えるか？
今回、apple-touch-iconは実機iPhoneでも確認しました。
PC上では気づきにくい画質の違いが、スマホでは目立つことがあります。
14. robots.txtとsitemap.xmlを確認する
検索エンジン向けのファイルも、公開前後に確認します。
確認したいこと
- robots.txtが、表示されるか？
- sitemap.xmlの場所が、robots.txtに書かれているか？
- sitemap.xmlが、ブラウザで開けるか？
- 必要なURLが、サイトマップに入っているか？
- URL形式が、拡張子なしにそろっているか？
静的HTMLサイトでは、これらのファイルも自分で用意します。
WordPressプラグイン任せではないため、確認しておくと安心です。
15. 構造化データを確認する
構造化データとは、ページ情報を検索エンジンに分かりやすく伝えるための記述です。
少し専門的ですが、設定した場合は必ず確認します。
確認したいこと
- JSON-LDの形式に、エラーがないか？
- WebSiteやOrganizationが、正しく設定されているか？
- BreadcrumbListが、ページ内容に合っているか？
- FAQページでは、FAQPageが正しく入っているか？
- リッチリザルトテストで、問題が出ないか？
構造化データは、書けば終わりではありません。
実際のテストツールで、確認することが大切です。
16. 404ページを確認する
存在しないURLにアクセスしたときの表示も、確認しておきたいところです。
404ページがあると、読者が迷いにくくなります。
確認したいこと
- 存在しないURLで、404ページが表示されるか？
- トップページへのリンクが、あるか？
- サイト全体のデザインと、違和感がないか？
- サーバーの標準エラー画面が、出ていないか？
404ページは、普段は見られないかもしれません。
でも、あると安心です。
17. キャッシュを確認する
公開前後では、キャッシュにも注意します。
キャッシュは、表示を速くするための仕組みです。
ただし、更新直後は、古い表示が残ることがあります。
確認したいキャッシュ
- ブラウザキャッシュ
- サーバーキャッシュ
- CSSや画像のキャッシュ
- フォントファイルのキャッシュ
- 高速化機能の影響
修正したのに変わらない場合は、まずキャッシュを疑います。
今回も、CSSの読み込みURLにバージョン番号を付けて、反映確認しやすくしました。
18. Search Consoleで確認する
公開後は、Search Consoleでも確認します。
Search Consoleは、Googleにサイトの状態を確認するためのツールです。
Search Consoleで確認したいこと
- サイトマップを、送信する
- URL検査を、行う
- インデックス登録の状態を、見る
- エラーが、出ていないか確認する
公開して終わりではなく、検索エンジン側でどう認識されているかも確認します。
19. 実際の公開URLで確認する
ローカル環境で問題なく見えていても、公開環境では違う問題が出ることがあります。
そのため、最後は必ず公開URLで確認します。
公開URLで確認したいこと
- トップページが、表示されるか？
- 下層ページが、表示されるか？
- CSSが、反映されているか？
- 画像が、表示されるか？
- フォントが、読み込まれているか？
- フォームが、表示されるか？
- スマホで、問題なく見えるか？
公開後の確認は、かなり大切です。
「アップロードしたから完了」ではなく、「公開URLで見て問題ない」まで確認します。
20. 公開前チェックリストまとめ
最後に、公開前チェックリストをまとめます。
表示まわり
- 全ページが、表示されるか？
- CSSが、反映されているか？
- JavaScriptが、動いているか？
- 画像が、表示されているか？
- フォントが、読み込まれているか？
スマホまわり
- スマホで、読みやすいか？
- 見出しの改行は、自然か？
- メニューは、使いやすいか？
- フォームは、入力しやすいか？
- 横スクロールが、出ていないか？
リンクまわり
- ヘッダーリンクは、正しいか？
- フッターリンクは、正しいか？
- CTAリンクは、正しいか？
- 外部リンクは、開けるか？
- .htmlなしURLに、統一されているか？
SEOまわり
- titleタグは、ページごとに入っているか？
- descriptionは、ページ内容に合っているか？
- canonicalタグは、正しいか？
- OGPタグは、入っているか？
- 構造化データに、エラーはないか？
- robots.txtは、あるか？
- sitemap.xmlは、あるか？
公開後チェック
- 公開URLで、表示確認したか？
- スマホ実機で、確認したか？
- Search Consoleで、サイトマップを送信したか？
- URL検査を、行ったか？
- キャッシュの影響を、確認したか？
まとめ
今回は、AIで作ったサイトの公開前チェックリストについてお話ししました。
AIを使うと、サイト制作は、かなり進めやすくなります。
ただし、公開前の確認までAIに丸投げするのはおすすめしません。
最終的には、人間が見て、触って、確認することが大切です。
要点をまとめます。
- AIで作ったサイトでも、公開前チェックは必要
- ページ表示、CSS、画像、フォントを確認する
- スマホ表示と日本語改行を、必ず見る
- フォームやreCAPTCHAも、確認する
- SEO設定、OGP、favicon、sitemap.xmlも、確認する
- 公開後は、実際のURLとSearch Consoleで確認する
公開前チェックは、少し地味です。
でも、この地味な確認が、サイトの安心感につながります。
実際に制作したコーポレートサイトはこちらです。
あなたがAIでサイトを作る場合も、公開前にひとつずつ確認してみてください。
作ることと同じくらい、確認することも大切です。
