- 教室のLP(Landing Page:ランディングページ)を、AIと対話しながら2日で全面的に作り直しました。
- 新しいコピーの大半は、6年分の日報やチラシなど、すでにある記録から掘り出したものです。
- 配色は感覚ではなくコントラスト比の計算で決めました。いちばん鮮やかな赤が、いちばん基準に適合していました。
- 生徒さんの顔が写る写真は使わず、実写を参考にした架空の人物イラストに置き換えています。
1. LPの素材は、ぜんぶ教室の中にあった
最近、教室のLPをClaude Fable 5と作り直しました1。
LPというのは、検索や紹介でたどり着いた人に教室を紹介して、体験レッスンの予約までを案内する1枚のウェブページのことです。
以前のページは自分で書いたもので、悪くはないけれど、どこか「教室側の言いたいこと」ばかりが並んでいる気がしていました。
最初にAIへ頼んだのは、デザインではなくビジネスモデルの分析でした。
教室のサイトやブログを読み込ませて、収益の仕組み、客層、予約までの導線を整理してもらう。
その上で「LPに何を書くべきか」を考える順番です。
作業を進めて気づいたのは、必要な言葉がほとんど手元にそろっていたことです。
毎日書いてきた日報。
配りつづけてきたチラシとパンフレット。
店先の黒板に書いた「今日のひとこと」。
どれもLPのために書いたものではありませんが、6年分の記録には、生徒さんの悩みも、うれしかった瞬間も、教室のこだわりも残っていました。
AIがやったのは、それを掘り出して並べ直すことでした。
ゼロから言葉を発明したのではない。
AIに文章を頼むと「それらしい嘘」を書かれるのを心配していたのですが、実際の作業は発掘に近いものでした。
2. AIとの開発は、往復運動でできている
開発の進め方は、チャットで指示を出して、AIがHTMLを書き換えて、結果を確認して、また指示を出す、の繰り返しです。
指示を投げる。
形になって返ってくる。
それを見て、次の指示を考える。
では、AIはどうやって自分の書き換えた画面を確かめるのか。
ここが今回、いちばん感心したところでした。
2.1. スクリーンショットで自分の仕事を確かめる
AIはHTMLを書き換えるたびに、ヘッドレスブラウザという画面表示を持たないブラウザをコマンドで動かして、ページ全体のスクリーンショットを撮ります2。
スマホ幅とパソコン幅の2枚を撮り、その画像を自分で見て、レイアウトの崩れを探す3。
人間のデザイナーがブラウザで確認するのと同じことを、機械なりの方法でやっているわけです。
一度、ギャラリーの写真が全部真っ白に写っていて、慌てたことがありました。
調べてみると、ページ側は正常で、原因は撮影のほうにありました。
画像に「画面に入るまで読み込まない」という遅延読み込みの設定をしていたため、スクロールせずに全体を撮ると、画面外の画像が読み込まれる前に写ってしまっていたのです4。
バグはページではなく、検査のほうにあった。
撮影前にページの下まで自動でスクロールする一手間を足して解決しましたが、テストが間違っていて本体が正しいというのは、開発ではよくあることのようです。
2.2. 色は目で選ばず、計算で選ぶ
配色を決めるとき、AIは色見本を眺めません。
代わりに、文字色と背景色のコントラスト比を計算します5。
WCAG(Web Content Accessibility Guidelines:ウェブコンテンツ・アクセシビリティ・ガイドライン)という指針があり、普通の文字なら背景との明暗差が4.5対1以上必要と決まっています6。
たとえば予約ボタン。
「鮮やかな赤にしたい」と伝えると、AIは赤の候補を6つ並べて、それぞれ白い文字との比を計算しました。
面白いことに、候補の中でいちばん鮮やかな赤である#E60012が、4.80対1で合格。
派手さと読みやすさは、必ずしも交換条件ではないようです。
逆に、諦めた色もあります。
予約がLINEで完結するので、ボタンをLINEの緑にする案を試したのですが、あの緑は白文字との比が2.26対1しかありません7。
みんなが見慣れたあの緑のボタンは、実は読みやすさの基準を満たしていない。
シニアの生徒さんが読むページなので、ここは計算に従いました。
3. 「できた」より「わかった」
言葉の面でいちばん大きな変更は、ページの構成を逆さにしたことでした。
以前の構成は、教室の紹介、実績、特徴、と教室の話が先。
新しい構成は、読者の悩みのチェックリストから始まります。
自己紹介から始めるか、相手の話から始めるか。
キャッチコピーも変えました。
以前は「機械はニガテ……そんなあなたのための、ほっこりスマホ教室」。
今は「わからない画面が出ても、もう、あわてなくて大丈夫。」です。
教室のカテゴリ名で締めるより、読者が困っているその場面から入るほうが強い。
そして、書きながら一つの言葉に引っかかりました。
当初のコピーは「自分でできた！」を掲げていたのですが、教室で大事にしてきたのは、操作が「できる」ことより先に、仕組みが「わかる」ことです。
わからないまま手順を暗記しても、画面が少し変わればまた困ってしまう。
コピーは「自分でわかった！」に置き換えました。
実際、生徒さんからよくいただく言葉も「スマホでよくわからない画面が出てきても、教室で聞けるから、あわてなくなりました」というものです。
できるようになった、ではなく、あわてなくなった。
6年分の記録を掘り返して、この教室が何の教室だったのかを、逆に教わった気がします。
完成したページは、昔ながらのFTP(File Transfer Protocol:ファイル転送プロトコル)でサーバーに上げるだけの、1枚のHTMLです8。
仕組みは古風でも、軽量です。
- 今回使ったのはAnthropic社のClaude Codeです。ターミナル上で動き、ファイルの編集やコマンド実行までを自律的に行うコーディングエージェントです。 – 概要 – Claude Code Docs
- Chromeには–headlessフラグで起動する、UIを表示せず自動化用途で動かすモードが公式に用意されています。 – Chrome Headless mode | Chrome for Developers
- 撮影にはブラウザ自動化ツールのPlaywrightを使いました。fullPageオプションを指定すると、表示中の画面ではなくスクロール可能なページ全体を撮影します。 – Screenshots | Playwright
- img要素にloading=”lazy”を指定すると、ユーザーがスクロールして近づくまで画像の読み込みが延期されます。 – 遅延読み込み – MDN Web Docs
- コントラスト比は、2つの色それぞれの相対輝度を求め、(L1+0.05)÷(L2+0.05)という式で算出します。 – 【WCAG2.2】コントラスト比の計算方法を学ぶ
- WCAG 2.1の達成基準1.4.3(レベルAA)です。通常のテキストは4.5対1以上、大きな文字(太字ならおよそ18.5px以上)は3対1以上と定められています。 – 達成基準 1.4.3: コントラスト (最低限)を理解する
- LINEのブランドカラーは、公式ブランドガイドラインで#06C755と定義されています。 – LY Corporation DESIGN ブランドガイドライン カラー
- MDNの用語集は、FTPが長年ファイル転送の事実上の標準だった一方、暗号化されないため現在はSFTPなどの安全な代替が推奨されると注記しています。 – FTP – MDN Web Docs 用語集