前回は、WordPressではなく、HTMLサイトにした理由についてお話ししました。
前回の記事は、こちらです。
WordPressからHTMLサイトへ移行してみた。コーポレートサイト制作ではどちらが良い？
今回は、その続きです。
テーマは、細部調整です。
AIでサイトを作ると、大枠はかなり早く形になります。
- 構成も作れます。
- 文章も作れます。
- デザインも作れます。
- コードも作れます。
ただし、そこで終わりではありません。
本当に大切なのは、そこからです。
細部を整えることで、サイトの印象は大きく変わります。
今回作ったコーポレートサイトはこちらです。
AIで作ったサイトは、細部調整が大切
AIを使うと、サイト制作のスピードは上がります。
でも、AIが出したものをそのまま公開すれば良い、というわけではありません。
特に、次のような部分は、人間の確認が必要です。
- スマホで読みやすいか？
- 見出しの改行は自然か？
- 余白は詰まりすぎていないか？
- フォントは雰囲気に合っているか？
- フォームは入力しやすいか？
- 画像は重すぎないか？
- リンクは分かりやすいか？
- ページ全体に統一感があるか？
AIは、かなり良いところまで作ってくれます。
でも、最後の違和感に気づくのは、人間の感覚です。
ここが重要です。
サイトの完成度は、細部で決まります。
今回、細部調整したポイント
今回のコーポレートサイトでは、かなり多くの細部を調整しました。
主に見直したのは、次の部分です。
- スマホ表示
- 日本語の改行
- フォント
- 余白
- フッター
- メニュー
- フォーム
- reCAPTCHA表示
- OGP画像
- favicon
- apple-touch-icon
- 画像形式
- URL形式
- サイトマップ
- 構造化データ
こうして並べると、かなり地味です。
でも、こうした地味な部分が、サイトの印象を支えます。
スマホ表示を優先して確認した
今回、特に重視したのがスマホ表示です。
今は、多くの人がスマホでサイトを見ます。
PCではきれいでも、スマホで読みにくければ、良いサイトとは言えません。
そのため、スマホ表示は何度も確認しました。
スマホで確認したこと
- ファーストビューが自然に見えるか？
- 見出しが読みにくくないか？
- 本文の行間は十分か？
- ボタンは押しやすいか？
- メニューは開きやすいか？
- フォームは入力しやすいか？
- フッターは詰まっていないか？
- スクロール時にカクつかないか？
実際、制作中にはいくつか問題も見つかりました。
- スマホメニューがコンテンツと重なって見える
- スクロール時に表示がカクつく
- 一部の余白が不自然に見える
- フッターのリンクが見づらい
- 見出しの改行が不自然になる
これらを、ひとつずつ修正しました。
スマホ表示は、PCの縮小版ではありません。
スマホには、スマホの読みやすさがあります。
日本語の改行を調整した
今回、一番細かく調整した部分のひとつが、日本語の改行です。
日本語は、単語ごとにスペースで区切られていません。
そのため、スマホでは不自然な位置で改行されることがあります。
気になった改行
例えば、制作中には次のような改行が気になりました。
- 「ちょうどいい」が途中で分かれる
- 「小さな型から」が不自然に分かれる
- 「自分で育てる」が途中で分かれる
- 「テンプレート」が途中で分かれる
- 「改善できる」が途中で分かれる
- 「独自の言葉と考え方」が読みにくく分かれる
読めないわけではありません。
でも、読んだときに少し引っかかります。
この引っかかりが積み重なると、サイト全体の印象に影響します。
スマホだけ改行を調整した
今回の調整では、PC表示はそのままにして、スマホ表示だけ改行を整えた部分もあります。
例えば、次のような考え方です。
- 意味のまとまりで改行する
- 言葉の途中で切れないようにする
- 強調したい言葉を見やすくする
- スマホで読みやすい行数にする
- PC表示では不自然にならないようにする
これは、かなり人間的な判断が必要でした。
AIに候補を出してもらうことはできます。
でも、最後に「この改行は自然か？」を判断するのは人間です。
フォントを自社配信にした
今回のサイトでは、フォントにもこだわりました。
最終的には、公式フォント・オープンライセンスのフォントを自分たちのドメインから配信する形にしました。
いわゆる、フォントの自社配信です。
フォントで印象が変わる
フォントは、サイトの印象に大きく関わります。
今回のサイトでは、次のような役割でフォントを使っています。
- 見出し：落ち着き、思想感、余韻
- 本文：読みやすさ、自然さ、安定感
- 英字：モダンさ、整った印象
- 約物：日本語としての読みやすさ
フォントは、目立つようで目立ちません。
でも、サイト全体の空気を作ります。
自社配信にした理由
フォントを自社配信にした理由は、主に次の通りです。
- 読み込みを管理しやすくするため
- 外部サービスへの依存を減らすため
- 表示速度を安定させるため
- サイト全体の完成度を上げるため
もちろん、フォントの扱いには注意が必要です。
ライセンスを確認する必要があります。
配信して良い形式かどうかも確認する必要があります。
今回は、商用利用や配信条件に注意しながら進めました。
余白を調整した
余白も、何度も調整しました。
- 余白は、サイトの印象を大きく左右します。
- 詰まりすぎると、窮屈に見えます。
- 広すぎると、間延びして見えます。
ちょうど良い余白にすることが大切です。
調整した余白
- ヒーロー部分の余白
- セクション間の余白
- 見出しと本文の余白
- カード内の余白
- フッターの余白
- フォームまわりの余白
- スマホ表示での上下余白
特にスマホでは、余白の見え方が変わります。
- PCでは良く見えても、スマホでは詰まって見えることがあります。
- 反対に、スマホで良く見えても、PCでは広すぎることがあります。
そのため、表示幅ごとに確認しました。
メニュー表示を調整した
スマホメニューも調整しました。
制作中、スマホで右上のメニューボタンを押すと、コンテンツと重なって見える問題がありました。
特に、ページを下にスクロールしてからメニューを開くと、表示が不自然になることがありました。
メニューで確認したこと
- メニューが画面全体に自然に表示されるか？
- 背景のコンテンツと重ならないか？
- スクロール位置に影響されないか？
- 閉じる操作が分かりやすいか？
- リンクが押しやすいか？
メニューは、スマホでかなり重要です。
ここが使いにくいと、サイト全体の印象が下がります。
目立たない部分ですが、しっかり確認しました。
スクロール時のカクつきを修正した
スマホで確認していると、スクロール時にカクつく問題も見つかりました。
上にスクロールしたり、下にスクロールしたりするときに、表示が少し引っかかる感じです。
こうした小さな違和感も、放置しないようにしました。
スクロールまわりで見直したこと
- 表示演出が重くないか？
- スマホで余計な処理が走っていないか？
- 画像や背景の表示が負担になっていないか？
- ヘッダーの動きが不自然でないか？
- 余白がスクロールに合わせて変動していないか？
結果として、スマホでの見え方はかなり安定しました。
サイトは、止まっている画面だけで判断できません。
スクロールしたときの気持ち良さも大切です。
フォームの見た目を整えた
お問い合わせページとテンプレート申込ページには、フォームがあります。
フォームは外部サービスを使っているため、完全に自由にデザインできるわけではありません。
それでも、できる範囲で見た目を整えました。
お問い合わせフォーム
お問い合わせページはこちらです。
調整したのは、主に次の部分です。
- 入力欄のデザイン
- ラベルの見え方
- 入力欄同士の余白
- 送信ボタン
- スマホでの入力しやすさ
- reCAPTCHAの案内文
フォームは、読者が実際に行動する場所です。
ここが雑に見えると、不安になります。
だから、サイト全体の雰囲気に合わせて整えました。
テンプレート申込フォーム
テンプレート申込ページはこちらです。
このページでは、メールアドレスを入力して、無料テンプレートを受け取れるようにしています。
調整したのは、次のような部分です。
- フォームの余白
- ボタンの見た目
- 説明文の読みやすさ
- スマホでの見え方
- reCAPTCHA表示
フォームは機能だけでなく、見た目の安心感も大切です。
reCAPTCHAの表示を整えた
フォームには、reCAPTCHAを使っています。
迷惑送信を防ぐための仕組みです。
ただ、reCAPTCHAを使うと、画面上にバッジが表示されることがあります。
今回のサイトでは、表示の見え方を確認しながら調整しました。
reCAPTCHAで確認したこと
- バッジがデザインを邪魔しないか？
- 必要な案内文が表示されているか？
- 案内文が日本語になっているか？
- Googleのプライバシーポリシーと利用規約へのリンクがあるか？
- スマホで読みづらくないか？
デザインだけを優先して、必要な表示を消してしまうのは良くありません。
見た目と必要な案内の両方を考えて調整しました。
OGP画像を設定した
OGP画像も整えました。
OGP画像とは、SNSやチャットなどでページを共有したときに表示される画像です。
サイト本体では見えにくい部分ですが、印象に関わります。
OGP画像で確認したこと
- ページ内容に合っているか？
- 文字が読みやすいか？
- 画像サイズは適切か？
- トップページ用と下層ページ用が設定されているか？
- SNSで共有されたときに違和感がないか？
今回のサイトでは、下層ページにも専用のOGP画像を設定しました。
ただし、規約や問い合わせ系のページには、専用画像は不要と判断しました。
必要なところに、必要な分だけ設定する。
これも大切です。
faviconとapple-touch-iconを調整した
faviconとapple-touch-iconも調整しました。
faviconは、ブラウザのタブなどに表示される小さなアイコンです。
apple-touch-iconは、iPhoneでホーム画面に追加したときなどに表示されるアイコンです。
確認したこと
- ブラウザのタブで自然に見えるか？
- iPhoneでホーム画面に追加したときに見えるか？
- 画質が荒くないか？
- サイズは適切か？
- ファイル形式は適切か？
実際にiPhoneで確認したところ、画質が気になる場面もありました。
そのため、画像を見直して調整しました。
小さなアイコンですが、意外と印象に残ります。
画像形式を見直した
画像形式も調整しました。
今回のトップページでは、ヒーロー画像に複数の形式を用意しています。
- JPEG
- WebP
- AVIF
軽い形式を優先して使えるようにしました。
特にAVIFは、かなり軽量でした。
画像で確認したこと
- 画質は十分か？
- ファイルサイズは重すぎないか？
- スマホで自然に表示されるか？
- PCで荒く見えないか？
- 代替形式も用意されているか？
画像は、見た目と速度の両方に関わります。
美しさだけを優先すると重くなります。
軽さだけを優先すると、見た目が弱くなります。
今回は、そのバランスを見ながら調整しました。
URL形式も整えた
HTMLサイトでは、通常、URLに「.html」が出ます。
ただ、今回は「.html」を出さない形にしました。
変更前のイメージ
- https://conohaya.com/guide.html
- https://conohaya.com/company.html
- https://conohaya.com/inquiry.html
変更後のURL
この方が、URLとして自然です。
見た目もすっきりします。
サイト内リンクも、この形式にそろえました。
サイトマップと構造化データも確認した
見た目だけでなく、検索エンジン向けの設定も確認しました。
確認した設定
- robots.txt
- sitemap.xml
- canonicalタグ
- titleタグ
- meta description
- OGPタグ
- 構造化データ
サイトを公開するだけでは不十分です。
検索エンジンに正しく伝わるようにすることも大切です。
今回は、Search Consoleでサイトマップ送信やURL検査も行いました。
リッチリザルトテストで構造化データも確認しました。
細部調整で感じたこと
今回、細部を調整して感じたことがあります。
AIは、かなり頼れます。
ただし、完成度を上げるには、人間の違和感が必要です。
AIが得意なこと
- 修正案を出す
- コードを書く
- 原因を整理する
- 複数案を比較する
- 技術的な選択肢を出す
- 確認項目を洗い出す
人間が判断すること
- 自然に見えるか？
- 読みやすいか？
- このは屋らしいか？
- 違和感がないか？
- 安心して使えるか？
- 公開して問題ないか？
この役割分担が大切です。
- AIに任せきりにしない。
- でも、ひとりで抱え込まない。
このバランスが、AI時代のサイト制作では重要だと感じました。
まとめ
今回は、AIで作ったサイトを細部調整した話をしました。
要点をまとめます。
- AIでサイトの大枠は作れる
- ただし、公開前の細部調整が大切
- スマホ表示は必ず確認する
- 日本語の改行は、人間の違和感で調整する
- フォントはサイト全体の印象に関わる
- 余白は読みやすさと美しさに影響する
- フォームは見た目と安心感が大切
- OGP画像やfaviconも印象に関わる
- URLや構造化データなど、見えない部分も整える
サイト制作は、大きなデザインだけで決まるわけではありません。
小さな違和感を、ひとつずつ直す。
その積み重ねで、完成度が上がります。
今回のコーポレートサイトも、そうやって整えていきました。
あなたがAIでサイトを作る場合も、大枠ができたところで安心しすぎないことをおすすめします。
- 最後に、スマホで見てください。
- 実際にスクロールしてください。
- フォームを見てください。
- 見出しを読んでください。
そこに小さな違和感があれば、直す価値があります。
次回は、AIでサイト制作をして実際に大変だったことについてお話しします。
便利だったことだけでなく、詰まったこと、迷ったこと、注意した方が良いことも整理します。
