業種別LP新規構築から全サイト一括デプロイまでの一日

Googleビジネスプロフィール用の新規LPを構築し、英語版の追加、フォームバリデーションの改善、全サイトの一括デプロイまでを一気に進めた。共通コンポーネントの修正が全業種に波及する構成なので、1箇所の改善が大きなリターンになる。

新規LPの構築

コンセプト設計

既存の業種別LPテンプレートをベースに、お問い合わせ特化型のシンプルなページを新たに作った。

ポイントは「本業そのものではなく、周辺の支援力を前面に出す」こと。日常的な実務は「まるっとお任せ」として安心感を伝えつつ、本当に打ち出したい強みとして経営支援・資金調達・事業計画・AI活用を据えた。

ヒーローセクションのメッセージは3ステップ構成にした。

資金を調達する → 仕組みをつくる → 売上を伸ばす

訪問者が「何をしてくれるのか」をひと目で理解できる構成を意識した。

プロフィールの反映

経歴・実績の情報を正確に反映した。曖昧なまま仮テキストを残さず、事実ベースで記載を埋めた。LPは信頼性が命なので、ここは手を抜けない。

英語版（/en）の追加

locale prop による多言語対応

全コンポーネントに locale prop を追加し、"ja" / "en" の切り替えに対応した。

<template>
  <HeroSection :locale="locale" />
  <ServiceSection :locale="locale" />
  <ContactForm :locale="locale" />
  <FooterSection :locale="locale" />
</template>

ヘッダーには言語切り替えボタン（EN / JP）を配置し、ページ遷移で言語が切り替わる仕組みにした。フォームのラベル・プレースホルダー・送信ボタン、フッターの文言まで含めて完全に英語化した。

i18nライブラリは入れず、各コンポーネント内で辞書オブジェクトを持つシンプルな方式を採用した。業種別LPはページ数が少ないので、この粒度で十分だった。

フォームバリデーションの追加

お問い合わせフォームにクライアントサイドのバリデーションを追加した。

追加したチェック項目

フィールドごとのエラーメッセージ

フォーム上部にまとめて表示するのではなく、各フィールドの直下にエラーメッセージを表示する方式にした。ユーザーがどこを直せばいいか迷わない。

<div class="form-group">
  <label>メールアドレス</label>
  <input v-model="form.email" type="email" />
  <p v-if="errors.email" class="error-message">
    {{ errors.email }}
  </p>
</div>

この修正は共通コンポーネント側に入れたので、既存の全業種LPにも自動的に反映された。

絵文字からモノクロSVGアイコンへの置換

サービス紹介セクションなどで使っていた絵文字を、モノクロのSVGアイコンに置き換えた。絵文字はOS・ブラウザによって見た目が変わるため、統一感を出すための対応。SVGならサイズ・色の制御も自由が利く。

全9サイトの一括デプロイ

devサーバーとビルドの競合問題

一括デプロイを実行したところ、ビルドが失敗するケースがあった。原因を調べると、開発サーバーが .nuxt/tsconfig.app.json をロックしており、ビルドプロセスが同じファイルに書き込めなくなっていた。

Windows環境ではファイルロックがUnix系より厳格なため、開発サーバーとビルドの同時実行で問題が起きやすい。

対策: デプロイスクリプトにdevサーバー停止処理を追加

デプロイスクリプトの冒頭で、開発サーバーが使うポートのプロセスを自動停止するようにした。

# デプロイ前にdevサーバーを停止
stop_dev_server() {
  local pid
  pid=$(powershell -Command "(Get-NetTCPConnection -LocalPort 3000 -ErrorAction SilentlyContinue).OwningProcess | Select-Object -Unique")
  if [ -n "$pid" ]; then
    powershell -Command "Stop-Process -Id $pid -Force"
    echo "Stopped dev server (PID: $pid)"
  fi
}

これで全9サイトを安定して連続デプロイできるようになった。

RESEND_API_KEY の設定

お問い合わせフォームからのメール送信にResendを使っている。新規サイト用にCloudflare Pagesの環境変数として RESEND_API_KEY を設定した。

振り返り

うまくいったこと

• 共通コンポーネントの設計が効いた。バリデーション追加が1箇所の修正で全業種に反映された
• locale propによる英語対応は、i18nライブラリなしでもページ数が少なければ十分に機能した
• devサーバーのファイルロック問題を発見し、デプロイスクリプトに恒久対策を入れられた

学び

• Windows環境でのファイルロックは、CI/CDやビルドスクリプトで予期せぬ失敗を引き起こす。デプロイ前の「お掃除」処理は最初から入れておくべきだった
• LPのメッセージは「何ができるか」より「どう変わるか」を伝えるほうが刺さる。3ステップの動詞始まりメッセージはその点で正解だった

まとめ

新規LP構築、英語版対応、バリデーション改善、アイコン統一、全サイトデプロイ、メール送信設定と、LP運用にまつわる一連の作業を1日で完了した。テンプレートベースの業種別LP構成は、こうした横展開がしやすい点が強みだと改めて感じた。