開発komatsu-sos

3業種（和菓子舗・美容室・飲食店）のランディングページが、全部同じテンプレートをかぶせただけで「どこかで見た角丸カード3枚並び」になっていた。ワークショップの題材として配るものなので、そのまま渡すと受講者が同じ顔のサイトを量産することになる。今日はここを業種ごとに分解して、ついでに今回効いた指示をワークショップのサイト作成プロンプトに焼き直すところまで持っていった。

出発点: 「AIっぽい」をまず言語化する

最初に Claude Code へ渡した指示が、今日いちばん効いた。フワッと「いい感じに」と頼むと、結局またAI定番のグラデが出てくる。回避リストを先に細かく書き下した。

避けたいパターンとして列挙したもの:

  • 濃紺背景＋青〜紫グラデーション
  • ネオン発光、抽象的な球体・粒子・波形・ニューラルネット風ライン
  • 右側にダッシュボード／チャットUIモックを置いたヒーロー
  • 均一な3カラム構成
  • 角丸カードを並べただけのセクション
  • ガラスモーフィズム、青紫グラデ背景の上に半透明カード

「AIで作ったとひと目で分かるサイト」の輪郭が、こうやって書き出すと一気にハッキリした。あとは「業種・対象ユーザー・利用シーンを想定した独自性の高いデザインで」と添えて、frontend-designスキルを適用させて投げた。

3業種を独立デザインで全面リライト

共通テンプレートを廃止して、3ページとも業種固有の構成に書き直してもらった。ヒーローの方向性だけメモしておく:

  • 和菓子舗: 和の佇まいに振った構成。余白を取り、書体と縦組み的なリズムで落ち着かせる
  • 美容室: 風の音を連想させる軽やかな縦配置。カードを並べない
  • 飲食店: 青海波（あおみのは）のモチーフを織り込んだ和食店らしい構図

完成後は、デバッグChromeを立ち上げて3ページともデスクトップ幅とモバイル幅でスクショ確認。コンソールエラーゼロ、レイアウト崩れなし。「悪くないですね」が出たところで止めて、次の工程に進んだ。

効いたプロンプトはワークショップ用に一般化して還流する

ここで自分のなかで切り替わったのが、「この指示はワークショップの題材プロンプト本体に組み込んだほうがいい」という判断だった。受講者ごとに毎回「AIっぽい定番を避けて」と書き直すのは無駄だし、書き忘れた人のサイトだけ既視感まみれになる。

apps/web/app/pages/index.vue の sitePrompt（題材として配られるサイト作成プロンプト）を更新して、今日の回避リストを一般化した形で組み込んだ。コピーボタンの文面も、内部で参照しているのでそのまま新版に置き換わる。

プロンプト側に正解を寄せるほど、同じ素材で別の業種を作っても再現性が出る。これが今日の一番大きい学び。

Google マップ埋め込み: APIキー不要の output=embed で

「住所を調べたら埋め込めるよね？」と振られたので、3店舗それぞれにGoogleマップを差し込んだ。APIキー不要の https://maps.google.com/maps?q={店名+住所}&output=embed 方式のiframe。

<iframe
  src="https://maps.google.com/maps?q=店名+住所&output=embed"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
></iframe>

枠線・余白・角丸は各ページのデザインに合わせて変えた。飲食店ページでは、藍ベースの店舗情報セクションのなかに朱のアクセントで枠を作って差し込む、といった具合。3店舗ともピンの位置が正しいことをブラウザで確認した。

ここもサイト作成プロンプトに1行加えて「地図はAPIキー不要のembedで入れること」を恒常化した。

ヒーロー写真の差し替え: 薄めのプレースホルダーで

ユーザーから実店舗の写真（ショーケースと地域絵地図が写っているもの）が送られてきた。「もっといい写真は後で撮るから、いまは薄めのプレースホルダーとして入れて」という指示。

PNGをそのまま public/ に置いて、ヒーロー背景に低めの不透明度で重ねた。文字が読めるコントラストは確保しつつ、写真の存在感が前に出すぎない塩梅に調整。差し替え予定の素材だと分かっているので、CSSの数値を変えるだけで本番写真に切り替わるよう、画像パスとオーバーレイの透過率を分離しておいた。

電話ボタン: 右上固定の tel: リンク

「よくあるランディングページみたいに、右上に電話番号置けない？ クリックで電話かかるやつ」と振られた。3ページとも右上固定の電話ボタンを、各ページのデザイントーンに合わせて追加。

<a href="tel:0972XXXXXX" class="cta-phone">
  <span class="cta-phone__label">お電話でのご予約</span>
  <span class="cta-phone__number">0972-XX-XXXX</span>
</a>

和菓子舗は墨色＋朱、美容室は明るいニュートラル、飲食店は藍＋朱、と業種別の色から外さない範囲で組んだ。ここも忘れずサイト作成プロンプトに「電話番号は右上固定の tel: リンクで入れる」を1行追加。

飲食店ページの作り直し: ベストプラクティス＋クチコミ調査

飲食店ページだけは、デザインを変えただけでは中身が物足りなかった。agent-browser で Google マップの店舗ページを開いて、口コミとメニューを抽出。

得られたもの:

  • 看板メニューの価格帯（ひゅうが丼 1,100円 など実数値）
  • 客が繰り返し言及しているポイント（魚の鮮度、店主の人柄など）
  • ランチ／ディナーの構成

これをもとに「即答ストリップ」（人気メニューを一発で見せるセクション）と、写真＋クチコミ要約を組み合わせたブロックを追加。デザインだけ整えるより、実データが乗ったときに初めてLPの説得力が出ることを再確認した。

この調査工程も「業態別のベストプラクティス調査＋クチコミ抽出をやってから作る」という1ステップとしてサイト作成プロンプトに組み込んだ。

今日の流れと学び

  1. AIっぽい定番パターンを言語化して回避リスト化
  2. 3業種を独立デザインで全面リライト、frontend-designスキル適用
  3. 効いた指示をワークショップのサイト作成プロンプトに還流
  4. APIキー不要の地図埋め込みを3ページに追加
  5. 実店舗写真をプレースホルダーとしてヒーロー差し替え
  6. 右上固定の tel: 電話ボタンを3ページに統一追加
  7. 飲食店はクチコミ・メニュー調査をしてから書き直し

一番大きい学びは、「一回うまく効いた指示は、その場の成果物だけでなくプロンプト本体に焼き直す」 の感覚を3回連続で実行できたこと。同じワークショップ題材を別の業種で再利用したときに、今日と同じ品質が再現される。プロンプトを更新したぶんだけ、未来の自分と受講者の手間が減っている。

逆に言えば、今日 Claude Code に何度も「AIっぽいの避けて」「地図入れて」「電話ボタン右上に」と口頭で投げ続けていたら、それは全部「プロンプト本体に書いておくべきだったこと」のシグナルだった。会話のたびに同じ指示が出てきたら、source（プロンプト本体）を直す合図、というルールを自分のなかに置く。