• #日記
  • #LP
  • #SSG
  • #Cloudflare Pages
  • #デザインテンプレート
daily-log

2026年2月8日の開発日記

LPプロジェクトに集中した1日だった。朝6時半から夜まで、デザインテンプレート適用→SSG移行→SEO実装→FAQ共通化→お問い合わせフォーム→UI/UX調整と、LP公開に必要な工程をほぼ全て完了させた。

今日やったこと

1. 複数のデザインテンプレートを各業種に適用

朝一番から取り組んだのがデザインテンプレートの適用作業。複数のデザインテンプレートを、各業種のLPにそれぞれ割り当てた。

主な成果:

  • 各業種LPにそれぞれ異なるデザインテンプレートを適用
  • グラスモーフィズムやパーティクル背景などテンプレート固有の演出を実装
  • スタッキングカードのスクロールバグ（position: stickyの親要素問題）を修正
  • 業種カテゴリの分離・再編成

詳細: LP - 複数デザインテンプレートを各業種に一括適用した開発記録

2. SSR→SSG移行とCloudflareデプロイ

各業種のLPをSSRからSSGに切り替えた。サブドメインでの業種判定をビルド時の環境変数に置き換え、業種ごとのCloudflare Pagesプロジェクトにそれぞれデプロイする構成にした。

主な成果:

  • useSubdomain composableに環境変数フォールバックを追加
  • Nitro preset を cloudflare_pages_static に変更
  • PowerShell/Bash両対応のバッチデプロイスクリプト作成
  • 各業種分のCloudflare Pagesプロジェクトを一括作成

詳細: Nuxt3 LPをSSRからSSGに移行

3. SEO全ページ実装

canonical URL、JSON-LD構造化データ、動的sitemap.xml、OG画像を全ページに実装した。事務所名の統一もこのタイミングで実施。

主な成果:

  • SEO定数とcanonical URL composableの設計
  • トップページ/記事一覧/記事詳細の全ページにJSON-LD構造化データ
  • 動的sitemap.xml/robots.txt生成（SSGプリレンダリング対応）
  • OG画像SVGプレースホルダー作成

詳細: Nuxt3 LPのSEO実装

4. FAQ共通化と業種別質問カード

FAQをapp/config/faq.tsで一元管理する設計に変更し、業種別の質問カードコンポーネントも複数業種分作成した。また誤解を招く表現を全コンテンツから削除した。

主な成果:

  • FAQ共通化アーキテクチャ（一元管理 + JSON-LD構造化データ）
  • 業種別質問カード（IndustryQuestions）複数業種分
  • 倫理の観点から誤解を招く表現を全面削除
  • 業種別favicon SVG作成

詳細: LP FAQ共通化と業種別質問カード

5. お問い合わせフォーム（Resend連携）

Cloudflare Pages FunctionsとResendを使ったお問い合わせフォームを実装。全業種でメール送信テストに成功した。

主な成果:

  • Cloudflare Pages Functions（functions/api/contact.ts）でResend API連携
  • ContactForm.vue（Vuelidateバリデーション付き）
  • 送信元ドメイン問題の解決（認証済みドメイン使用）
  • 全業種でフォーム送信テスト成功

詳細: Cloudflare Pages FunctionsとResendでお問い合わせフォームを実装

6. UI/UX最終調整と運用整備

英語テキストの日本語化、favicon修正、デザインシステムドキュメント整備、CLAUDE.md作成など、公開前の最終調整を実施した。

主な成果:

  • 全業種の英語テキスト日本語化（PainPoints/Services/Process等）
  • Faviconテーマカラー修正
  • デザインシステムドキュメント作成
  • CLAUDE.md作成（業種独立運営ルール含む）
  • マークダウンh1重複削除（全14記事）

詳細: LP UI/UX最終調整

7. その他プロジェクト

LP以外にも3つのプロジェクトで作業した。

  • Chrome拡張機能: Twitter/Xに「フォロー中のリツイート」カスタムタブを追加。タブバー挿入位置のバグ修正
  • schliemann: Node 22→Volta経由でNode 14に切り替えてNuxt 2プロジェクトを起動
  • mdx-playground: /make-diaryコマンドで2026-02-07の日記を自動生成（5本の詳細記事）

詳細: 2026年2月8日のサイドプロジェクト

今日の学び

  • テンプレート適用は「骨組みだけ持ってきて中身を差し替える」アプローチが効率的。完成品を丸コピーすると業種固有の調整で苦労する
  • SSR→SSG移行は、複数バリエーションでも環境変数+バッチビルドで対応できる。D1データベースが不要になる分、インフラがかなりシンプルになった
  • position: sticky は親要素に overflow: hidden があると動作しない。CSSレイアウトの基本だが、テンプレート適用時に見落としやすい
  • LPでの表現には注意が必要。誇大広告と取られるリスクがある表現は避けるべき
  • sync-once.sh にバグがあり、ユーザーメッセージの配列型contentを処理できていなかった。修正済み

明日やること

  • お問い合わせフォームの文字化け問題を修正
  • Cloudflareシークレット（RESEND_API_KEY）の本番設定
  • 各業種のカスタムドメイン設定
  • OG画像の本番用デザイン作成

関連記事