個人でWebサービスを運営していると、サイトの改善はずっと続きます。
新しいページをゼロから作ることもありますが、実際にはそれ以上に多いのが、
「このページ、昔作ったままだな」
「内容は悪くないけど、なんとなく古く見える」
「もう少し申込みまで迷わないページにできそう」
という既存ページの改善です。
今回、僕が運営している英語サービスの無料体験LPを、AIと一緒にかなり細かくリニューアルしました。
最初から完璧なデザインを作ったわけではありません。
むしろ、
- 余白が広すぎる
- ボタンが大きすぎる
- STEPの文字が目立たない
- リンク位置がおかしい
- WordPressテーマ側のCSSと干渉する
- 文字が枠の中央に見えない
- 少しHTMLを触ると別の場所が崩れる
といった問題を、実際の画面を見ながら一つずつ修正していきました。
最終的には「100点ではないけど、90点くらいまで来た」と思えるところまで改善できました。
今回は、その一連の作業で感じたことをまとめます。
- 1 昔作ったLPは、内容より「見せ方」が古くなっていた
- 2 最初に決めたのは「英会話スクールっぽくしすぎない」
- 3 ファーストビューでは「何が分かるのか」を先に伝えた
- 4 実際に時間がかかったのは、派手なデザインではなく細かい余白だった
- 5 AIにコードを書かせるだけでは完成しなかった
- 6 「CSSを足し続ける」やり方には限界がある
- 7 WordPressでは、リンクを変えただけでも見た目が崩れることがある
- 8 LPに「入会後の成果」を入れるかも悩んだ
- 9 実際のレビューは、マーケティングコピーより強かった
- 10 AIとのWeb制作は「一発生成」より対話型が向いている
- 11 ノマドや個人事業者ほど、AIとの相性はいいと思う
- 12 90点までAIと作り、最後は自分の違和感で直す
- 13 まとめ
昔作ったLPは、内容より「見せ方」が古くなっていた
今回修正したのは、無料体験レッスンへ案内する固定ページです。
もともと必要な情報は一通り入っていました。
ただ、長年運営しているサイトによくあるように、少しずつ要素を足してきた結果、
- 色が多い
- ボックスのデザインが統一されていない
- CTAの存在感がバラバラ
- 画像を使った古い案内が残っている
- 説明が縦に長い
- どこを見ればいいのか分かりにくい
という状態になっていました。
サービス内容そのものは変わっていなくても、Webページの見え方だけで古いサービスに感じられてしまうことがあります。
これはかなりもったいないです。
そこで今回は、内容を全部捨てるのではなく、既存の文章を活かしながらデザインと導線を整理することにしました。
最初に決めたのは「英会話スクールっぽくしすぎない」
今回かなり意識したのが、デザインの方向性です。
英語サービスのLPというと、
- 明るい黄色
- 赤
- ピンクのCTA
- 人物写真
- 大きな吹き出し
- アイコン大量
といった、かなりポップなデザインも多いです。
ただ、僕のサービスには少し違うと思いました。
実際に来られる方には、仕事で英語を使う方や、英語会議、海外勤務、外資系企業などを意識している方も多くいます。
そのため今回は、
白・ネイビー・ブルー・淡いブルーグレー
を中心にして、少しSaaSやコーチングサービスに近い見た目に寄せました。
「楽しそう」より、
ちゃんと分析してくれそう
自分の課題が分かりそう
という印象を優先しました。
ファーストビューでは「何が分かるのか」を先に伝えた
今回のLPで中心に置いたメッセージは、
「無料体験で、あなたの『話せない原因』を見える化。」
です。
無料体験というと、
「講師と25分話せます」
「英会話を無料で体験できます」
という説明になりがちです。
でも、それだけだと他社と大きな違いがありません。
僕のサービスでは、実際に話した内容を文字として見える化し、その場で添削したり、改善点をフィードバックしたりします。
そのため、
「無料で英会話できます」
ではなく、
「自分がなぜ話せないのかが分かる」
という価値を前に出しました。
さらに、その下に、
01 現在地がわかる
02 弱点が見える
03 改善方法がわかる
という3つのカードを配置しました。
これだけでも、以前よりかなり「体験する意味」が伝わりやすくなりました。
実際に時間がかかったのは、派手なデザインではなく細かい余白だった
今回かなり面白かったのが、ページ全体の構成よりも、最後の10〜20％の細かい調整に時間がかかったことです。
たとえばCTAボタン。
最初は見栄えを良くしようとして、上下の余白を少し大きめにしていました。
でも実際の画面で見ると、
「ちょっと箱が大きすぎるな」
と感じました。
そこでpaddingを数pxずつ減らしていく。
また、
「毎月先着5名限定」
というバッジも、最初は少し小さすぎました。
今度は文字サイズとpaddingを少し大きくする。
さらに、
「もっと相談したい方へ」
という注意ボックスも、上の余白が少し広すぎる。
そこも数px調整する。
こうした修正は一つひとつを見ると小さいです。
でも、ページ全体で見るとかなり違います。
Webデザインは、派手な装飾よりも、
数pxの余白を何度も調整する方が、最終的な完成度に効く
というのを改めて感じました。
AIにコードを書かせるだけでは完成しなかった
今回、HTMLやCSSの多くはAIと相談しながら作りました。
これはかなり便利です。
たとえば、
「このカードの上余白をもう少し減らしたい」
と伝えれば、すぐにCSS案が出てきます。
「このSTEPをもっと目立たせたい」
と伝えれば、ラベル化するコードも作れます。
ただ、実際にWordPressへ入れると、毎回その通りになるわけではありません。
今回使っているWordPressテーマはSTORK19です。
テーマ側にも、
- 見出し
- リンク
- リスト
- 外部リンクアイコン
- 目次
- margin
- padding
などのCSSが存在しています。
そのため、自分で書いたCSSだけを見ると正しくても、実際の画面ではテーマ側のCSSが干渉することがあります。
AIがコードを出す
↓
WordPressに入れる
↓
実際の画面を見る
↓
違和感をスクショで確認する
↓
またAIと修正する
この繰り返しになりました。
「CSSを足し続ける」やり方には限界がある
途中で一つ問題になったのが、修正するたびにCSSをページ下部へ追加していったことです。
最初は、
padding: 18px;だったものを、
後から、
padding: 16px;さらに、
padding: 14px !important;と上書きしていく。
これを繰り返すと、最終的には、
「今どのCSSが効いているのか分からない」
状態になります。
そこで途中で一度、CSS全体を見直し、
後から追加した修正を本体側へ統合する
作業をしました。
これはかなり重要でした。
AIを使ったコーディングでは、つい、
「とりあえず一番下にこれを追加してください」
になりやすいです。
でも長く続けるなら、
一定のタイミングでコードを整理し直す
必要があります。
WordPressでは、リンクを変えただけでも見た目が崩れることがある
今回ちょっと意外だったのが、リンク周りです。
体験者レビューの下に、
「受講生の成果をさらに見る」
というリンクを置いていました。
内容としては、
体験者の声
↓
その後の受講生の成果
という流れでした。
ただ、体験者と受講生は意味が違います。
そこで、
「実際の体験レビューをもっと見る」
というリンクに変更しようとしました。
ところが、HTMLやリンクの構造を触ると、なぜかページ内の別の場所の位置まで崩れるケースが出ました。
最終的には、
無理に構造を触らず、リンク文字だけ変更する
という判断をしました。
これはWordPress運営ではよくある話だと思います。
理論上もっときれいなコードにできても、すでにテーマやプラグインが動いているサイトでは、
壊さないことの方が重要
な場合があります。
LPに「入会後の成果」を入れるかも悩んだ
途中で、
「体験者レビューだけでなく、入会後にどれくらい伸びたかも掲載した方がいいのでは？」
という案も出ました。
実際、受講生の成果事例はあります。
ただ、このLPの目的を改めて考えると、
無料体験へ申し込んでもらうこと
です。
ここで長期受講後の成果を大量に入れると、今度は本コースの販売ページに近くなります。
そのため今回は、
無料体験で何が分かるのか
↓
実際に体験した人はどう感じたか
↓
興味があれば受講生の成果も見られる
くらいに留めました。
LPを作ると情報をどんどん足したくなりますが、
そのページのゴールに直接必要かどうか
で判断した方がいいと思います。
実際のレビューは、マーケティングコピーより強かった
今回かなり参考になったのが、過去の体験者レビューです。
たとえば、
「その場で添削してもらえるのが、自分が思っていた以上に効果があると感じた」
「自分の話した英語が目に見えることで、自分がどんなミスをしたのか明確に理解できた」
「英語の発言すべてを文字起こしされるのは初めてで、かなり勉強になった」
といった声がありました。
こちら側が、
「弱点が分かります」
「アウトプット力が伸びます」
と書くより、実際の体験者の言葉の方が圧倒的に具体的です。
そこで、
「体験後、こんな変化を実感される方が多いです」
という一般的な表現も見直し、
「体験された方が実際に感じたこと」
という見せ方に変えることにしました。
これはLP改善の中でもかなり重要な修正だったと思います。
AIとのWeb制作は「一発生成」より対話型が向いている
今回の作業を通して感じたのは、AIに、
「LPを作って」
と一度だけ頼んで完成させるよりも、
実際の画面を見ながら一緒に詰めていく方が強い
ということです。
1回目で80点くらいまで作る。
そこから、
「ここが広い」
「この文字が小さい」
「このリンクは不自然」
「この文章は実際のユーザーの声と違う」
「このページでは目次はいらない」
と修正していく。
これはかなり人間のデザイナーとのやり取りに近いです。
しかもスクリーンショットを見せながら、
「この部分」
と伝えられるので、以前よりWeb制作のハードルはかなり下がりました。
ノマドや個人事業者ほど、AIとの相性はいいと思う
僕はWebサイトの運営も自分でやっています。
以前なら、
ちょっとしたCSS修正
↓
検索
↓
似たコードを探す
↓
WordPressへ入れる
↓
失敗
↓
また検索
という流れでした。
今は、
「この部分をこうしたい」
とAIに伝えれば、かなりのところまで一緒に進められます。
デザイナーやエンジニアが不要になる、という話ではありません。
むしろ、
外注するほどではない細かな改善を、自分ですぐ試せる
ことの価値が大きいと思っています。
ノマドや一人会社、小規模事業者にとっては、ここがかなり強いです。
90点までAIと作り、最後は自分の違和感で直す
今回、途中で自分の感覚として、
「今90点くらい」
というところまで来ました。
おそらくAIだけで、
「これで完成です」
と判断していたら、もっと早く終わっていたと思います。
でも実際にサイトを見ると、
「ここ、あと少し詰めたい」
という部分が必ず出てきます。
その違和感は、サービスを長く運営している本人だからこそ分かる部分でもあります。
AIは、
コードを書く
代案を出す
整理する
修正案を高速で出す
ところは非常に得意です。
一方で、
「この余白、なんか気持ち悪い」
という最後の判断は、まだ人間側の感覚がかなり重要です。
今回のLP改善は、まさにその組み合わせでした。
まとめ
今回、AIと一緒に既存のWordPress LPをリニューアルしてみて、改めて感じたのは、
AIを使えばWeb制作が一瞬で終わるわけではない。でも、改善のスピードは圧倒的に上がる
ということです。
特に個人でWebサービスを運営していると、
「ここを少し変えたい」
という作業は無数にあります。
そのたびに外注するのは現実的ではありません。
AIと一緒に、
作る
↓
見る
↓
違和感を見つける
↓
直す
を繰り返せるようになると、自分のWebサイトを以前よりずっと細かく改善できるようになります。
今回のLPも、一気に完成したわけではありません。
余白を数px変えたり、リンク文を変えたり、レビューの見せ方を見直したり。
そうした小さな改善を積み重ねて、ようやく「これならかなり良い」と思えるところまで来ました。
個人的には、AI時代のWeb制作は、
「AIに全部作ってもらう」より、「AIを隣に置いて自分で改善を回す」
という使い方が、一番実践的なのではないかと思っています。
The Remote Digital Hubをもっと見る
購読すると最新の投稿がメールで送信されます。
コメントを残す