前回は、AIで作ったサイトを細部調整した話をしました。
前回の記事はこちらです。
AIで作ったサイトを細部調整してみた。スマホ表示・フォント・改行の整え方とは？
今回は、その続きです。
テーマは、AIでサイト制作をして大変だったことです。
AIを使うと、サイト制作はかなり進めやすくなります。
ただし、すべてが簡単になるわけではありません。
- 実際にやってみると、迷うこともありました。
- 詰まることもありました。
- 不安になることもありました。
今回は、便利だった話だけではなく、実際に大変だった部分をまとめます。
今回制作したコーポレートサイトはこちらです。
AIでサイト制作をして大変だったこととは？
AIでサイト制作をしてみて、大変だったことは、主に次の部分です。
- AIに、意図を正しく伝えること
- デザインの方向性を、具体的に決めること
- スマホ表示を、実機で確認すること
- 日本語の改行を、自然に整えること
- フォントや画像の扱いを、確認すること
- フォームまわりを、見た目も含めて調整すること
- サーバー設定やキャッシュを、切り分けること
- 著作権や商用利用について、不安を解消すること
こうして見ると、AIそのものよりも、AIと一緒に進める人間側の判断が大切だったと感じます。
AIは、かなり助けてくれます。
でも、最後に判断するのは、自分です。
ここが、今回の制作で一番大きな学びでした。
大変だったこと1：AIに意図を伝えること
まず大変だったのは、AIに意図を伝えることです。
AIは、こちらの言葉をもとに提案してくれます。
そのため、こちらの指示があいまいだと、出てくる案もあいまいになります。
あいまいな指示では、方向性がズレる
例えば、次のような指示だけでは、少し足りません。
- モダンにしてください
- 美しくしてください
- 良い感じにしてください
- おしゃれにしてください
もちろん、最初の方向性としては使えます。
ただ、それだけでは、AIも解釈に迷います。
「モダン」といっても、人によって意味が違うからです。
具体的に伝えるほど、良くなる
今回の制作では、なるべく具体的に伝えるようにしました。
- 余白を広めにしたい
- 売り込み感を弱くしたい
- 静かで落ち着いた印象にしたい
- WordPress感を出したくない
- スモールビジネス向けにしたい
- AI時代のDIYを、実物で示したい
このように伝えると、AIの提案もかなり近づきます。
つまり、AIに任せるというより、AIに伝える力が必要でした。
大変だったこと2：デザインの判断
次に大変だったのは、デザインの判断です。
AIは、いろいろな案を出してくれます。
ただし、その中から何を選ぶかは、自分で決める必要があります。
見た目の正解は、ひとつではない
デザインには、絶対の正解がありません。
- 色を濃くするのか、薄くするのか？
- 余白を広くするのか、少し詰めるのか？
- 文字を大きくするのか、小さくするのか？
どれも、状況によって変わります。
だからこそ、迷いました。
今回、判断したこと
今回のサイトでは、次のような判断をしました。
- ロゴは使わず、文字と余白で見せる
- 深い緑と朱色を、アクセントにする
- 見出しには、明朝体を使う
- 本文は、読みやすさを優先する
- CTAは、強く出しすぎない
- コーポレートサイトとして、売り込み感を抑える
この判断は、AIが勝手に決めてくれたわけではありません。
AIの提案を見ながら、こちらで選びました。
デザインを良くするには、選ぶ力が必要です。
大変だったこと3：スマホ実機での確認
今回、かなり大変だったのが、スマホでの確認です。
PCのブラウザで、スマホ表示を確認することはできます。
でも、実機で見ると、印象が違うことがあります。
実機で見つかった問題
スマホ実機では、次のような問題が見つかりました。
- メニューを開いたときに、コンテンツと重なって見える
- スクロール時に、表示がカクつく
- 見出しの改行が、不自然に見える
- フッターのリンクが、窮屈に見える
- 余白が、ブラウザによって違って見える
PC上では気づきにくいことも、実機では気になります。
特にスマホは、毎日使う画面です。
少しの違和感でも、かなり目立ちます。
スマホファーストで確認した
今回のサイトでは、スマホ表示をかなり重視しました。
確認したのは、次のような部分です。
- ページを開いた直後の印象
- スクロールしたときの動き
- 見出しの読みやすさ
- 本文の行間
- メニューの開閉
- フォームの入力しやすさ
- フッターの見え方
AIで作ったからこそ、最後は実機で確認することが大切でした。
大変だったこと4：日本語の改行
日本語の改行も、かなり大変でした。
これは、実際にやってみないと分かりにくい部分です。
スマホでは、画面幅が限られます。
そのため、見出しや短いコピーが、不自然な位置で改行されることがあります。
不自然に見えた改行
制作中には、次のような改行が気になりました。
- 「ちょうどいい」が、途中で分かれる
- 「小さな型から」が、不自然に分かれる
- 「自分で育てる」が、途中で分かれる
- 「テンプレート」が、途中で分かれる
- 「改善できる」が、途中で分かれる
- 「独自の言葉と考え方」が、読みにくく分かれる
読めないわけではありません。
でも、見た目としては気になります。
特に、短い見出しで言葉が途中で切れると、かなり不自然です。
意味のまとまりで、改行を調整した
今回の調整では、意味のまとまりを意識しました。
- 言葉の途中で、切らない
- 強調したい言葉を、まとまりで見せる
- スマホだけ、自然な改行にする
- PC表示は、できるだけ崩さない
これは、AIだけでは判断しきれません。
最終的には、人間が見て、自然かどうかを決める必要があります。
大変だったこと5：フォントの扱い
フォントの扱いも、少し大変でした。
今回のサイトでは、公式フォント・オープンライセンスのフォントを自分たちのドメインから配信する形にしました。
フォントの自社配信です。
確認が必要だったこと
フォントでは、次のような点を確認しました。
- 商用利用できるか？
- 自社ドメインから配信して良いか？
- ファイル形式は適切か？
- 読み込み速度に問題はないか？
- ブラウザで正しく表示されるか？
- 今後、更新管理をどうするか？
フォントは、見た目に関わる重要な要素です。
ただし、権利や配信条件も関係します。
ここは、慎重に進める必要がありました。
表示速度とのバランスも見た
Webフォントは、見た目を整える一方で、読み込みが重くなることもあります。
今回は、表示速度も確認しました。
結果として、ページ速度測定でも高得点を確認できました。
見た目と軽さは、両立できる場合があります。
ただし、そのためには、読み込み方やキャッシュ設定を考える必要があります。
大変だったこと6：画像の扱い
画像の扱いも、気を使いました。
OGP画像やapple-touch-iconも設定しました。
画像で気になったこと
画像については、次の点を確認しました。
- 商用利用して問題ないか？
- 他社と被りにくいか？
- サイトの雰囲気に合うか？
- ファイルサイズが重すぎないか？
- スマホで荒く見えないか？
- SNSで共有したときに、自然に見えるか？
特に、商用利用や著作権まわりは、不安になりやすい部分です。
今回も、かなり慎重に確認しました。
不安がある場合は、画像の出どころや利用条件を確認することが大切です。
画像形式も比較した
画像形式も、複数用意しました。
- JPEG
- WebP
- AVIF
特にAVIFは、かなり軽量でした。
ただし、対応状況も考える必要があります。
そのため、複数形式を用意して、環境に合わせて表示できるようにしました。
大変だったこと7：フォームのデザイン
お問い合わせフォームやテンプレート申込フォームも、調整が必要でした。
フォームは、外部サービスを利用しています。
そのため、自由にデザインできる部分と、できない部分があります。
フォームで調整したこと
フォームでは、次の点を確認しました。
- 入力欄の見た目
- ラベルの読みやすさ
- 入力欄の余白
- ボタンのデザイン
- スマホでの入力しやすさ
- reCAPTCHAの表示
- 送信に必要な設定
フォームは、読者が実際に行動する場所です。
ここが使いにくいと、サイト全体の印象にも影響します。
お問い合わせページはこちらです。
無料テンプレート申込ページはこちらです。
大変だったこと8：サーバー設定とキャッシュ
サーバー設定やキャッシュも、少し大変でした。
今回のサイトは、エックスサーバーで公開しています。
表示を速くするための機能もあります。
ただし、制作中や確認中は、キャッシュが原因で反映が遅れて見えることがあります。
確認したこと
サーバーまわりでは、次の点を確認しました。
- アップロードしたファイルが、反映されているか？
- CSSが、古いまま読み込まれていないか？
- キャッシュが、表示確認の邪魔をしていないか？
- URLから「.html」を外せているか？
- 404ページが、正しく表示されるか？
- サイトマップが、正常に読めるか？
キャッシュは、便利です。
ただし、制作中は、少しややこしくなります。
直したはずなのに、直っていないように見えることがあるからです。
切り分けが大切だった
表示がおかしいときは、原因を切り分ける必要があります。
- ファイルの修正漏れなのか？
- アップロード漏れなのか？
- ブラウザキャッシュなのか？
- サーバーキャッシュなのか？
- CSSの読み込み順なのか？
この切り分けは、少し地味です。
でも、公開サイトではとても大切です。
大変だったこと9：著作権や商用利用の不安
今回、意外と大きかったのが、著作権や商用利用への不安です。
- 画像。
- フォント。
- アイコン。
- 画像形式。
こうしたものを使うとき、安心して使えるかどうかが気になります。
確認したこと
権利面では、次のような点を確認しました。
- 商用利用できる素材か？
- 配布元のライセンスは問題ないか？
- 自社サイトで使って良いか？
- 他社と被りにくいか？
- 今後も安心して使えるか？
このあたりは、心配性でなくても気になる部分です。
特に、会社サイトで使うものは、安心感が大切です。
少しでも不安がある場合は、確認することをおすすめします。
AIでサイト制作をするときの注意点
今回の実践を通じて、AIでサイト制作をするときの注意点も見えてきました。
1. AIに丸投げしない
AIは、便利です。
でも、丸投げでは良いサイトになりません。
方向性を決めるのは、自分です。
- 誰に見てもらうのか？
- 何を伝えるのか？
- どんな印象にしたいのか？
- どこまで作り込むのか？
ここを考える必要があります。
2. 実物を確認する
AIの提案だけで判断しないことも大切です。
実際にサイトを開いて、確認します。
- PCで見る
- スマホで見る
- スクロールする
- リンクを押す
- フォームを見る
- SNS共有時の見え方を確認する
実物を見ると、文章だけでは分からない違和感が見つかります。
3. 不安な部分は、確認する
AIが言ったことを、そのまま信じすぎないことも大切です。
特に、次の部分は確認が必要です。
- 権利関係
- サーバー設定
- SEO設定
- フォーム送信
- 表示速度
- スマホ表示
AIは、頼れる相談相手です。
ただし、最終確認は自分で行う必要があります。
大変だったけれど、得られたものも大きい
ここまで、大変だったことを並べました。
ただ、やって良かったと感じています。
理由は、自分たちで扱えるサイトになったからです。
得られたもの
- 自分たちの考え方を、サイトに反映できた
- デザインの細部まで、納得して調整できた
- スマホ表示を、自分たちで確認できた
- AIと一緒に、修正を重ねられた
- 公開後も、自分たちで改善できる感覚が持てた
これは、外注に丸投げした場合とは違う感覚です。
自分の商売を、自分で育てている感覚があります。
このは屋が大切にしてきたDIYの考え方とも、つながっています。
まとめ
今回は、AIでサイト制作をして大変だったことについてお話ししました。
要点をまとめます。
- AIでサイト制作をしても、すべてが簡単になるわけではない
- AIに意図を伝える力が必要
- デザインは、人間が判断する必要がある
- スマホ実機での確認は、とても大切
- 日本語の改行は、細かく調整した方が良い
- フォントや画像は、権利面も確認する
- フォームやサーバー設定は、切り分けが必要
- AIは、代行業者ではなく共同制作者として使う
AIを使うと、サイト制作の可能性は広がります。
ただし、AIに任せれば終わりではありません。
- 自分で考える。
- 自分で確認する。
- 自分で判断する。
- そのうえで、AIに手伝ってもらう。
この順番が大切です。
今回作ったコーポレートサイトはこちらです。
あなたがAIでサイト制作をする場合も、便利さだけでなく、確認する部分まで含めて進めてみてください。
大変な部分はあります。
でも、その分、自分で育てられるサイトに近づきます。
次回は、AI時代のサイト自作が、スモールビジネスにとってどんな意味を持つのかをお話しします。
