Search Consoleや開発メモを判断材料にしてlanding pageを組み直した

校正さんのランディングページを、見た目だけでなく伝え方ごと刷新した
目的は、スマホで使える文章校正メモ という価値を一目で伝えること

前回の失敗 landing page並列案出し

commit with Codex CLI


このLPの主役はAIではなく文章校正
補助価値として校正さんに相談を見せる
最初から機能を並べるのではなく、どんな不安を減らせるかから入る

判断材料をCodex CLIに渡したhata6502
Microsoft Clarity MCP
スマホからの流入が意外と多い
Search Consoleのエクスポート
エンドユーザーが使ってくれる意図
強かった検索意図は、校正さん、誤字脱字チェック、スマホ、校正アプリ、無料
開発メモ
開発者hata6502が機能に込めた意図
オフライン、会員登録不要、スマホでも使える、書いた人の表現を残す、が重要だった

既存LPは、使う場面より抽象的な説明が先に立っていた

刷新の方針
ヒーローでスマホ、文章校正、無料、会員登録不要を言い切る
PC対応は残すが主役にはしない
AIですごい、ではなく、不安なところだけを静かに見直せる体験として見せる
相談機能は後半に置き、書き換えすぎないことを伝える

構成
1画面目で価値を言い切る
使う場面を先に見せる
そのあとで校正機能を説明する
後半で相談機能を見せる
最後にすぐ試せるCTAを置く

文言の直し方
実装説明より利用価値を優先した
抽象語を減らした
表記を揃えた
やわらかさは残しつつ、曖昧さを減らした
Codex CLIが書いた文言も校正させたhata6502
Codex CLIと校正さんの間でコピペしあう手間はあったかも
でも2~3往復で、十分いい仕上がりになってよかった

デザインの直し方
派手にするよりノイズを減らした
緑色 rgb(0, 133, 126) をテーマカラーにして、色相と彩度はそのまま明度を変えて色を作った
明朝体はやめてサンセリフに統一した
装飾や補助文を減らした
フッターの別パーツ感を減らした
お手本としてTailwind Plusのテンプレートを渡したら、スッキリした見た目に転換してくれたhata6502
前 / 後
AIっぽい飾り気がなくなってよかった

進め方
HTML / CSS / assets で静的に組む
修正は小さく刻む
変えるたびに build と playwright-cli で desktop / mobile を確認する
不自然な改行、余白、罫線、画像の見え方を詰める