AIでサイトを作ると、公開までのスピードは、かなり上がります。
ただし、サイトは公開して終わりではありません。
むしろ、公開してから見つかることもあります。
今回、AIと一緒にコーポレートサイトを作ったあとも、公開環境で何度も確認し、細かく改善しました。
今回は、公開後にどのように確認し、どう修正していったのかを、実践メモとしてまとめます。
実際に制作したサイトはこちらです。
AIで作ったサイトは、公開後の改善も大切
AIでサイトを作ると、最初の完成形まではかなり早く進みます。
- 構成
- 文章
- デザイン
- HTML
- CSS
など、AIに相談しながら形にできます。
でも、公開してみると、実際の環境でしか分からないことがあります。
公開後に見つかりやすいこと
- スマホで見たときの違和感
- ブラウザごとの見え方の違い
- メニューの開閉不具合
- スクロール時のカクつき
- 画像やアイコンの画質
- フォームの入力しにくさ
- CSSや画像のキャッシュ
- 公開URLでのリンクや転送の問題
こうしたことは、制作中には気づきにくい場合があります。
だからこそ、公開後の確認と改善が大切です。
公開後、まず実際のURLで確認した
公開後は、まず実際のURLで確認しました。
ローカル環境で問題なく見えていても、公開環境では違う問題が出ることがあります。
公開URLで確認したこと
- トップページが、正しく表示されるか？
- 下層ページが、開けるか？
- CSSが、反映されているか？
- 画像が、表示されているか？
- フォントが、読み込まれているか？
- リンクが、正しく動くか？
- フォームが、表示されるか？
- スマホで、見た目が崩れていないか？
今回も、アップロード後に何度も公開URLを確認しました。
公開URLで確認することで、実際に読者が見る状態に近い形でチェックできます。
スマホ実機で確認した
公開後の確認で、特に大切だったのがスマホ実機です。
PCのブラウザで、スマホ幅を確認することはできます。
ただ、実際のスマホで見ると、印象が違うことがあります。
スマホ実機で確認したこと
- ファーストビューの見え方
- 見出しの改行
- メニューの開閉
- スクロールのなめらかさ
- フッターの見え方
- フォームの入力欄
- apple-touch-iconの画質
今回も、実機スマホで確認したことで、いくつかの問題に気づきました。
スマホファーストで考えるなら、実機確認はかなり大切です。
改善1：スマホメニューの表示を直した
公開後に気になったことのひとつが、スマホメニューの表示です。
右上のメニューボタンを押すと、メニューがコンテンツと重なって見えることがありました。
特に、ページを下にスクロールしてからメニューを開くと、表示が不自然になることがありました。
見つかった問題
- メニューが、背景コンテンツと重なる
- スクロール位置によって、見え方が変わる
- メニューを開いたときに、画面が落ち着かない
- スマホで、操作しづらく感じる
メニューは、スマホでは、かなり重要です。
ここが使いにくいと、サイト全体の印象に影響します。
改善したこと
- メニュー表示の重なりを、見直した
- スクロール位置に、影響されにくくした
- 背景との重なりを、避けた
- スマホで、自然に開閉できるようにした
修正後は、メニュー表示が安定しました。
小さな改善ですが、スマホでの使いやすさは、かなり変わります。
改善2：スクロール時のカクつきを直した
次に気になったのが、スマホでスクロールしたときのカクつきです。
上へスクロールしたり、下へスクロールしたりするときに、表示が少し引っかかるように見えました。
気になった症状
- 上から下へスクロールを切り替えると、カクつく
- 下から上へスクロールを切り替えると、表示が揺れる
- 一部の余白が、変動して見える
- ブラウザによって、見え方に差がある
こうした症状は、PCでは気づきにくいものです。
でも、スマホで見ると、気になります。
改善したこと
- スクロール時の表示処理を、見直した
- スマホで重くなりそうな演出を、調整した
- 余白が不自然に変動しないようにした
- 実機で、スクロールを再確認した
修正後は、カクつきがなくなり、スクロールが自然になりました。
サイトは、止まった画面だけでは判断できません。
動かしたときの気持ち良さも、大切です。
改善3：スマホの余白を調整した
スマホで見ていると、余白の違和感も見つかりました。
特定のボタンやリンクの下に、少し余白が足りないように見える場面がありました。
気になったこと
- ボタン下の余白が、少なく見える
- セクション同士が、近く見える
- ブラウザによって、余白の印象が違う
- スマホで見ると、PCより詰まって見える
余白は、サイトの印象に大きく関わります。
少し詰まっているだけで、読みにくく感じることがあります。
改善したこと
- スマホ表示での余白を、見直した
- ボタン下のスペースを、調整した
- セクション間の見え方を、確認した
- 実機スマホで、再確認した
余白の調整は、地味です。
でも、サイト全体の美しさには大きく関わります。
改善4：日本語の改行を整えた
公開後に、スマホでの日本語改行も調整しました。
見出しや短いコピーが、不自然な位置で改行されることがあったからです。
気になった改行
- 「ちょうどいい」が、途中で分かれる
- 「小さな型から」が、不自然に分かれる
- 「自分で育てる」が、途中で分かれる
- 「テンプレート」が、途中で分かれる
- 「改善できる」が、途中で分かれる
読めないわけではありません。
でも、見た目として少し気になります。
特に、スマホでは画面が小さいため、改行の違和感が目立ちます。
改善したこと
- 意味のまとまりで、改行するようにした
- 言葉の途中で、切れないようにした
- PC表示とスマホ表示を、分けて考えた
- 実機で、自然に読めるか確認した
日本語の改行は、AIだけでは判断しきれない部分があります。
最後は、人間の違和感が大切でした。
改善5：フッターの見え方を整えた
フッターも、公開後に調整しました。
以前あったロゴを削除した影響で、余白が詰まって見える部分がありました。
また、スマホでは規約リンクが2列のように見えて、少し美しくありませんでした。
気になったこと
- ロゴ削除後のスペースが、詰まって見える
- フッターコピーの改行が、不自然に見える
- スマホで規約リンクが、2列のように見える
- 全体として、少し窮屈に感じる
改善したこと
- フッター上部の余白を、調整した
- コピーの改行を、自然にした
- スマホの規約リンクを、1列表示に戻した
- 全体の見え方を、実機で確認した
フッターは、ページの最後に見られる部分です。
ここまで整っていると、サイト全体の印象も良くなります。
改善6：フォームの見た目をそろえた
お問い合わせフォームでも、公開後に気になる部分がありました。
特に、ホームページURLと電話番号の入力欄が、他の項目と少し違って見えました。
気になったこと
- 一部の入力欄だけ、質素に見える
- 他の項目と、デザインがそろっていない
- スマホで見ると、違いが目立つ
- フォーム全体の統一感が、少し弱くなる
改善したこと
- 入力欄の見た目を、そろえた
- 余白や枠線を、調整した
- ボタンやラベルとのバランスを、見直した
- スマホで、入力しやすいか確認した
フォームは、個人情報を入力する場所です。
そのため、見た目の安心感も大切です。
改善7：reCAPTCHAの表示を整えた
フォームでは、reCAPTCHAも使っています。
reCAPTCHAは、迷惑送信を防ぐための仕組みです。
ただし、バッジや案内文の表示が、デザイン上、気になることがあります。
調整したこと
- reCAPTCHAバッジの表示を、確認した
- 必要な案内文を、フォーム下に表示した
- 英語の案内文を、日本語にした
- Googleのプライバシーポリシーと利用規約へのリンクを、残した
デザインだけを優先して、必要な案内を消すのは良くありません。
見た目とルールの両方を考えて調整しました。
改善8：apple-touch-iconの画質を見直した
iPhoneでホーム画面に追加したとき、apple-touch-iconの画質が気になりました。
PCで見ているだけでは、気づきにくい部分です。
気になったこと
- iPhoneで見ると、画質が荒い
- 小さな画像を拡大して、ぼやけて見える
- ホーム画面で、印象が弱くなる
- 実際に追加してみるまで、気づきにくい
改善したこと
- 画像素材を、見直した
- PNG形式で、apple-touch-iconを用意した
- 180×180pxのサイズを、意識した
- iPhone実機で、表示を確認した
小さなアイコンですが、実際に見ると印象に関わります。
公開後に気づけて、良かった部分です。
改善9：CSSの反映とキャッシュを確認した
公開後の改善で、何度も関係したのがキャッシュです。
修正したはずなのに、見た目が変わらないことがあります。
その場合、ファイルの修正漏れではなく、キャッシュが原因のこともあります。
確認したキャッシュ
- ブラウザキャッシュ
- サーバーキャッシュ
- CSSファイルのキャッシュ
- 画像ファイルのキャッシュ
- 高速化機能の影響
対応したこと
- キャッシュを、削除する
- CSSの読み込みURLに、バージョン番号を付ける
- 別ブラウザで、確認する
- スマホ実機で、再確認する
- 公開URLで、読み込み状態を見る
キャッシュは、表示速度には役立ちます。
ただし、更新直後は確認を難しくすることがあります。
公開後改善で、AIに依頼したこと
公開後の改善でも、AIは役立ちました。
特に、原因の切り分けや、修正案の整理で助かりました。
AIに依頼したこと
- 表示崩れの原因を、調査してもらう
- 修正前に、改善策を出してもらう
- スマホ表示の不自然な点を、整理してもらう
- CSSの調整案を、出してもらう
- 公開後の確認項目を、洗い出してもらう
- アップロード後の反映状況を、確認してもらう
ここで大切だったのは、いきなり直させないことです。
- まず原因を確認する。
- 改善策を出す。
- 納得してから適用する。
この流れが、安心でした。
公開後改善で使いやすかった指示文
公開後にAIへ相談するときは、指示文も大切です。
使いやすい指示文
- まだ変更しないで、原因を調査してください。
- 原因が分かったら、改善策を出してください。
- スマホ表示だけで起きている問題として、考えられる原因を整理してください。
- 公開環境で、反映されているか確認してください。
- 修正したファイルを、最後に教えてください。
- PC表示は変えず、スマホ表示だけ調整してください。
「まだ変更しないで」と伝えるだけでも、進め方が安全になります。
原因と対策を確認してから直せるからです。
公開後に改善して感じたこと
公開後に改善してみて、あらためて感じたことがあります。
サイト制作は、公開がゴールではありません。
公開後に見えてくることがあります。
そして、直せる状態にしておくことが大切です。
感じたこと
- 実機で見ないと、分からないことがある
- スマホ表示は、最後まで確認した方が良い
- キャッシュは、更新確認の落とし穴になりやすい
- 小さな違和感を直すと、完成度が上がる
- AIがあると、公開後の改善も進めやすい
AIで作ったサイトだからこそ、公開後も改善しやすい。
これは、今回の大きな発見でした。
公開後改善のチェックリスト
最後に、公開後改善のチェックリストをまとめます。
表示確認
- 公開URLで、トップページを見る
- 主要な下層ページを見る
- CSSが、反映されているか確認する
- 画像やフォントが、表示されているか確認する
スマホ確認
- 実機スマホで、トップページを見る
- メニューを、開閉する
- 上下に、スクロールする
- 見出しの改行を、確認する
- フォーム入力欄を、確認する
フォーム確認
- お問い合わせフォームを、見る
- テンプレート申込フォームを、見る
- 入力欄の見た目を、確認する
- reCAPTCHAの案内文を、確認する
細部確認
- フッターの余白を、確認する
- 規約リンクの並びを、確認する
- faviconを、確認する
- apple-touch-iconを、実機で確認する
- OGP画像を、確認する
キャッシュ確認
- 修正後に、CSSが反映されているか見る
- ブラウザキャッシュを、疑う
- サーバーキャッシュを、確認する
- 必要に応じて、バージョン番号を更新する
まとめ
今回は、AIで作ったサイトを公開後に改善した話をしました。
要点をまとめます。
- AIで作ったサイトも、公開後の確認が大切
- 公開環境でしか分からない問題がある
- スマホ実機で見ると、違和感に気づきやすい
- メニュー、スクロール、改行、余白は、特に確認したい
- フォームやreCAPTCHAも、公開後に確認する
- faviconやapple-touch-iconは、実機で見ると違いが分かる
- キャッシュの影響で、修正が反映されないように見えることがある
- AIには、原因調査と改善案の整理を依頼すると良い
サイトは、公開して終わりではありません。
- 公開してから、実際の環境で確認する。
- 気になったところを、ひとつずつ直す。
その積み重ねで、サイトは良くなります。
実際に制作したコーポレートサイトはこちらです。
あなたがAIでサイトを作る場合も、公開後にもう一度、実機で確認してみてください。
- メニューは、自然に開くか？
- スクロールは、なめらかか？
- スマホで、言葉はきれいに読めるか？
公開後の小さな確認が、サイトの完成度を上げてくれます。
