• #税理士LP
  • #デザインテンプレート
  • #Nuxt3
  • #Tailwind CSS
開発tax-lpメモ

税理士LP - 複数のデザインテンプレートを複数業種に一括適用した開発記録

前日に構築した業種別LPのサブドメイン基盤の上に、複数のHTMLテンプレートから各業種に合うデザインを選定し、複数の業種向けLPへ適用した1日の記録。テンプレートの「骨組み」だけを借りて、中身はすべて税理士事務所向けに書き直すというアプローチで、一日で全業種分のLPを仕上げた。

全体の作業フロー

今回の作業は以下の順序で進行した。

  1. テンプレートA -> 業種A: ミニマルなビジネスデザイン
  2. テンプレートB -> 業種B: セリフ体 + 雑誌風（途中で方針変更）
  3. テンプレートC -> 業種C: グラスモーフィズム + パーティクル背景
  4. テンプレートD -> 業種D: 黄色背景 + 太枠のポスター風（新規業種として新設）
  5. テンプレートE -> 業種E: サイドバー + スタッキングカード
  6. テンプレートF -> 業種E: ダーク系 + マーキー（テンプレートEから全面差替）

途中で業種カテゴリの分割判断や、全業種共通のUI改善（電話番号削除、絵文字をSVGアイコンに置換、ファビコン作成）も挟んでいる。

1. テンプレートA -> 業種A LP

テンプレートAの特徴

テンプレートAは余白を贅沢に使ったミニマルデザインのテンプレートで、以下の要素が特徴的だった。

  • 極端に大きな文字サイズと広い行間
  • モノトーン基調（白背景 + 黒テキスト + アクセント1色）
  • ローダー（ページ読み込み時のアニメーション）演出
  • スクロール連動のリビール（要素が浮かび上がる）アニメーション
  • Inter / Noto Sans JP のサンセリフフォント

実装手順

Step 1: スキーマ拡張

content.config.ts の Zod スキーマに、ヒーロースタイル（heroStyle）などテンプレートA固有のフィールドを追加した。

Step 2: コンテンツ更新

業種AのfrontmatterをテンプレートAのトーン&マナーに合わせて書き換え。ヒーローのキャッチコピーとフッターメッセージが呼応する構成にした。

Step 3: CSS基盤

main.css にテンプレートA固有のユーティリティクラスを追加。ローダーアニメーション、リビールアニメーション、大きな見出し用のタイポグラフィクラスなどを定義した。

Step 4: 8つの専用コンポーネント作成

業種A向けに8つの Vue コンポーネントを新規作成した。

  • ローダー付きフルスクリーンヒーロー
  • 悩み・課題セクション
  • サービス一覧（番号付きカード）
  • ご利用の流れ
  • 料金テーブル
  • よくある質問（アコーディオン）
  • 問い合わせ導線
  • フッター

Step 5: ヘッダーの heroStyle 対応

LpHeader.vue 共有コンポーネントに heroStyle: 'light' 対応を追加。テンプレートAは白背景のヒーローなので、未スクロール時のヘッダー文字色をダーク（text-gray-900）に切り替える isDarkText computed を導入した。ロゴ、ナビリンク、ハンバーガーメニューそれぞれの色を条件分岐させている。

Step 6: サービス詳細記事の作成

業種Aに関連するサービス詳細記事を複数作成して配置した。

苦労した点: ヘッダーの色制御

テンプレートAは白背景 + ダークテキストだが、他の業種LPはダーク背景 + 白テキストのヒーローを使っている。共有の LpHeader.vue で両方に対応するため、heroStyle プロップとスクロール状態の2軸で色を切り替える仕組みが必要だった。

特にロゴの primaryColor（赤）がヒーロー領域でそのまま表示されると目立ちすぎる問題があり、「未スクロール + light ヒーロー時はロゴも黒」「スクロール後のみ primaryColor を適用」というロジックに落ち着いた。

2. テンプレートB -> 業種B LP

方針変更の経緯

当初はテンプレートBを業種B向けLPに適用する計画だった。テンプレートBはセリフ体（Noto Serif JP + Lato）、温かみのあるベージュ系配色、ジグザグのグリッドレイアウト、パララックス効果が特徴の雑誌風テンプレートだ。

しかし、テンプレートを詳しく検証した結果、写真の占める領域が全体の7割以上あり、税理士事務所のLPとしては写真素材の用意が現実的でないと判断。テンプレートBの「骨組み」（セリフ体、装飾ライン、ジグザグレイアウト）だけを借りて、写真に頼らないデザインとして再構築する方針に切り替えた。

実装内容

テンプレートBの骨組みを活かしつつ、写真に依存しないLPとして以下を実装した。

  • Google Fonts に Noto Serif JP と Lato を追加
  • 6つの業種B専用コンポーネントを作成（Hero, PainPoints, Services, Flow, Faq, Contact）
  • ランディングページコンポーネントを新コンポーネント構成に書き換え
  • 業種B向けのダミー記事を3つ作成

共通修正: ヘッダー文字色

業種B LPでもヘッダーの文字が白背景に白テキストで見えない問題が発生。テンプレートAで導入した heroStyle の仕組みで対応済みだったが、業種B側の設定が漏れていたため追加で修正した。

3. テンプレートC -> 業種C LP

テンプレートCの特徴

テンプレートCは技術系・SaaS系を想定したモダンなデザインで、以下の要素が目を引いた。

  • グラスモーフィズム: 半透明 + ぼかし（backdrop-blur）のカード
  • パーティクル背景: Canvas上を浮遊するドットがゆっくり動くアニメーション
  • ダークグラデーション: ダーク紺からほぼ黒へのグラデーション背景
  • カード型グリッド: サービスや機能をカード形式で並べるレイアウト
  • プロフィールテーブル: スペック表のようなスタッフ紹介

実装手順

CSS ユーティリティの追加

main.css にグラスモーフィズム用のクラスを追加した。

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

パーティクル背景用のキーフレームアニメーション（particle-float）も追加。Canvas を使わず CSS アニメーションで擬似的にパーティクル効果を再現している。

コンポーネント群の並行作成

以下のコンポーネントを並行で作成した。

  • パーティクル背景 + グラスモーフィズムのCTAカード（Hero）
  • グラスカードの悩みリスト（PainPoints）
  • カード型グリッドのサービス一覧（Services）
  • ステップ表示の利用フロー（Flow）
  • アコーディオン形式のFAQ
  • CTA + フッター統合（Contact）

コンテンツの更新

業種CのfrontmatterをテンプレートCの配色に更新。業種Cのターゲット層に特化させ、キャッチコピーも調整した。

グラスモーフィズムの技術的なポイント

グラスモーフィズムで注意した点は以下の3つ。

  1. 背景のコントラスト: 半透明カードの後ろに十分な色味がないとぼかし効果が分からない。パーティクル背景やグラデーション背景と組み合わせることで効果を出した
  2. テキストの可読性: rgba(255, 255, 255, 0.05) だと白テキストが読みにくい場合がある。ボーダー（rgba(255, 255, 255, 0.1)）を入れてカードの境界を明示した
  3. パフォーマンス: backdrop-filter: blur() はGPU負荷が高い。カード数が多い場合はぼかし半径（12px）を抑えめにした

4. 業種カテゴリの分割

分割の判断

ここまでの作業中に、ある業種カテゴリが広すぎるという判断があった。ターゲット層によってペルソナが違いすぎるため、2つの業種に分割することにした。

  • 業種C: 論理的、スペック重視、ダーク系デザインが馴染む
  • 業種D: 感覚的、ビジュアル重視、ポップなデザインが馴染む

既存のサブドメインを業種C特化にリネームし、業種Dのサブドメインを新設することにした。

変更内容

  • industries.ts の業種名を変更
  • コンテンツのタイトル・説明文を業種C向けに修正
  • 業種Dを industries.ts に新規追加
  • サブドメインミドルウェアに業種Dのルーティングを追加

5. テンプレートD -> 業種D LP

テンプレートDの特徴

テンプレートDはポップでカジュアルなデザインで、以下の要素で構成されている。

  • 色付き背景の上に白コンテナ: ポスター風レイアウトの根幹
  • 太枠（3px border）+ シャドウ: カードやコンテナに厚みを出す
  • 傾き（rotate）のあるバッジ: 見出しに遊び心を加える
  • 黄色背景 + ピンク + 水色: 鮮やかな3色配色
  • Archivo Black: 極太のディスプレイフォント

実装の2段階

第1段階: 基本構造

最初の実装では、通常のLP構造（ヒーロー + セクション群）にテンプレートDの配色を乗せただけだった。マーキーバー（テキストが横にスクロールするアニメーション帯）をヒーロー上部に配置したが、ヘッダーと重なってしまい、pt-16 のパディングで回避した。

しかし確認の結果、「骨格がテンプレートDではない」というフィードバックがあった。

第2段階: テンプレートDの骨格に寄せたリビルド

テンプレートDの真の骨格は「色付き背景の上に白いコンテナ（太枠 + 影）で全体を包むポスター風レイアウト」にある。これを取り入れて全面リビルドした。

  • マーキーバーを削除
  • 全体を黄色背景で包み、コンテンツを白い枠付きコンテナ内に収める
  • 見出しバッジに -rotate-2 の傾きを適用
  • サービスカードに太枠 + ドロップシャドウ
  • CTAエリアをテンプレートDの「links-area」風に変更
  • FAQ もテンプレートD風のアコーディオンに書き換え

配色の調整

最初は紫背景で実装したが、フィードバックで黄色に変更。黄色背景（#ffde00）に白テキストは視認性が低いため、以下の調整を行った。

  • テキストを黒ベースに変更
  • バッジのアクセントを水色（#00d4ff）に
  • CTA ボタンは黒背景 + 白テキスト

共有ヘッダーの復活

テンプレートDのコンテナ内にヘッダーを含める設計も試したが、他の業種ページ（ブログ、コンタクト）との一貫性のために共有 LpHeader をコンテナ外（ページ最上部に固定）で復活させた。

サービス記事のトーン&マナー統一

業種Dでは、サービス記事（確定申告、記帳代行など）のページも黄色背景 + 白カードのポスター風レイアウトで統一した。記事一覧ページ（/articles）にも業種ごとのレイアウト切り替えを入れ、業種Dのときはポスター風デザインを適用する分岐を実装。

記事タイトルに赤いテキストシャドウがかかっていた問題も修正し、シンプルな太字表示に変更した。

コピーライティング: 「丸投げ」パターン

業種D向けのキャッチコピーについて、ターゲット層の本業に集中する妨げになっている税務を一緒に整理する方向性を検討。業種D向け税務サービスの実例をリサーチした結果、「丸投げ」パターンを採用した。

  • ヒーロー: 「税務は、丸投げでいい。」「本業に、集中しよう。」
  • サブコピー: 確定申告、記帳、経費整理 -- 本業の妨げになっている税務をまとめて引き受ける

「丸投げ」はターゲット層に刺さりやすい表現で、税理士業界でもよく使われるキーワードだ。

6. テンプレートE -> 業種E LP（計画策定のみ）

テンプレートEの特徴

テンプレートEは建築・設計事務所向けを想定したテンプレートで、以下が特徴。

  • 左サイドバー + 右メインのレイアウト: ナビゲーションが常に左に見える
  • スタッキングカード: スクロールするとカードが重なっていくアニメーション
  • モノクロ + アクセント1色: ミニマルな配色
  • Manrope フォント: ジオメトリック系サンセリフ

業種EにテンプレートEを適用する計画を立てたが、途中でテンプレートFに方針変更となった（次セクション参照）。ただしテンプレートEの計画は後に再利用されることになる。

7. テンプレートF -> 業種E LP（全面刷新）

テンプレートFの特徴

テンプレートFはダーク系の力強いデザインで、以下の要素を持つ。

  • ダーク背景 + ゴールド/オレンジのアクセント
  • マーキーテキスト: 画面幅いっぱいに流れるテキストアニメーション
  • Teko フォント: コンデンス系の縦長フォントで力強い印象
  • 大胆なヒーローライン: 3行に分けたインパクトのあるキャッチコピー

実装内容

テンプレートEの計画を破棄し、テンプレートFのトーン&マナーで業種E LPを全面作り替えた。

フォントとCSS

Google Fonts に Teko を追加し、main.css にテンプレートF固有のユーティリティ（マーキーアニメーション、グラデーションテキスト、セクション区切り）を追加。

コンテンツ更新

業種Eの配色をテンプレートFカラー（ダーク系）に変更。industries.ts のフォールバック設定も更新。

コンポーネントの一括書き換え

以下のコンポーネントをテンプレートFデザインで書き換えた。

  • ダーク背景のメインラッパー（Landing）
  • 3行ヒーロー + マーキーテキスト（Hero）
  • 課題セクション（PainPoints / Stats統合）
  • サービスカード（Services）
  • 事例セクション（後に削除）
  • 利用フロー（Flow / Profile統合）
  • 記事一覧（LatestArticles / FAQ統合）
  • CTA + フッター統合（Contact / 新規作成）

不要になったサイドバーコンポーネントは削除。

8. テンプレートEの再適用 -- スタッキングカードの実装

方針の再変更

テンプレートFで全面刷新した業種E LPだったが、その後テンプレートEのスタッキングカードを取り入れる方向に再度変更された。テンプレートEの計画書を再利用し、サイドバー + スタッキングカードのレイアウトを実装した。

スタッキングカードの仕組み

テンプレートEの目玉機能であるスタッキングカードは、position: sticky を使ったCSS実装だ。

.structure-card {
  position: sticky;
  top: 2rem;
}

.structure-card:nth-child(1) { z-index: 1; }
.structure-card:nth-child(2) { z-index: 2; }
.structure-card:nth-child(3) { z-index: 3; }

各カードに sticky を設定し、z-index を上げていくことで、スクロール時に後のカードが前のカードの上に重なるアニメーションを実現する。JavaScript は不要で、CSSだけで完結するのがポイント。

実装したセクション構成

6枚のカードをナンバリングして配置した。

  1. Hero -- ダーク背景のヒーロー
  2. 01 / Problems -- ターゲット層の課題（Stats統合）
  3. 02 / Services -- 提供サービス一覧
  4. 03 / Results -- 実績・事例
  5. 04 / Process -- ご利用の流れ（Profile統合）
  6. 05 / Resources -- 記事一覧（FAQ統合）
  7. 06 / Contact -- 問い合わせ（ダークカード）

スタッキングカードのスクロールバグと修正

実装後、スクロール時に致命的なバグが発覚した。

症状: スティッキーカード（Hero ~ CaseStudy）がページ末尾まで固定され続け、非スティッキーカード（Flow、LatestArticles、Contact）がその背後に隠れてしまう。

原因: 全てのカードがメインラッパーの直接の子要素で、position: sticky が設定されたカードはスクロールコンテナの終端まで固定され続ける。スティッキー対象でないカードがスティッキーカードの下に潜り込んでしまう。

修正: スティッキーカード群を <div class="stacking-wrapper"> で囲み、非スティッキーカードは別の <div class="flow-wrapper"> に分離した。stacking-wrapper の高さが確定すると、その中の sticky 要素はラッパーの範囲内でのみ固定される。これによりスティッキー領域が終わった後、通常のスクロールで Flow 以降のカードが表示される。

<div class="stacking-wrapper">
  <HeroComponent />
  <PainPointsComponent />
  <ServicesComponent />
  <CaseStudyComponent />
</div>
<div class="flow-wrapper">
  <FlowComponent />
  <LatestArticlesComponent />
  <ContactComponent />
</div>

このバグは position: sticky のスタッキングパターンでよくある落とし穴で、「sticky の親要素の高さ」がスティッキー動作の範囲を決めるという仕様を理解していないと嵌まる。

9. 業種E LPの最終調整

マーキーティッカーと事例セクションの削除

テンプレートFから持ち込んだマーキーティッカー（数字がスクロールするアニメーション）と事例セクションは、実際のデータがないため削除した。ダミーの実績を載せておくより、潔く外して中身ができてから追加する方がよい。

  • Statsコンポーネントを削除
  • CaseStudyコンポーネントを削除
  • Landingコンポーネントから両コンポーネントの参照を除去

見出しの修正

英語の見出しがLP訪問者には分かりにくいため、日本語の問いかけ表現に変更。ターゲット層に直接語りかける表現にした。

10. 全業種共通のUI/UX改善

テンプレート適用と並行して、全業種に跨る共通の改善も実施した。

電話番号の全削除

全サブドメイン共通で電話番号を削除。共有コンポーネント LpHeader.vue と LpFooter.vue から電話番号表示のロジックを条件付き（showPhone プロップ）にし、デフォルトを非表示に変更した。

絵文字からSVGアイコンへの置換

業種A LPで使っていた絵文字がチープだったため、ストロークベースのフラットSVGアイコンに差し替えた。

当初は TaxIcon.vue コンポーネントとして ~/components/icons/ に配置し、nuxt.config.ts の components 設定にパスを追加する作業が必要だった。Auto-import が効かずに表示されない問題があり、設定追加で解決している。

ファビコンの作成

ブラウザタブに表示されるファビコンがNuxtデフォルトのままだったため、税理士事務所向けのSVGファビコンを作成した。

  • 「税」の文字をSVGで描画
  • public/favicon.svg に配置
  • nuxt.config.ts の head で <link rel="icon" type="image/svg+xml" href="/favicon.svg"> を設定
  • 古い favicon.ico（Nuxtデフォルト）を削除

ブラウザのキャッシュが残っていて即座に反映されない場合があるが、新しいタブで開けば正しく表示される。

記事一覧ヒーローの配色修正

業種Aの記事一覧ページ（/articles）のヒーロー部分が primaryColor（#ff3300）のグラデーション背景になっており、赤がチカチカして目に痛い。白背景 + 黒テキストのシンプルな配色に変更した。

テンプレート選定の判断基準まとめ

業種テンプレート選定理由
業種AテンプレートAミニマル・信頼感。ターゲット層は「余計なものがない = 費用対効果が高い」と感じやすい
業種BテンプレートBセリフ体の上品さがブランディングに合う（写真依存は回避）
業種CテンプレートCグラスモーフィズム + ダーク系が技術者に馴染む。SaaSっぽいUIへの親和性
業種DテンプレートDポップで遊び心のあるデザインがターゲット層に刺さる。「丸投げ」の気軽さと合う
業種EテンプレートE + F堅実さ（テンプレートEのカード構造）+ 力強さ（テンプレートFのダーク配色）の組み合わせ

技術的な学び

1. 「骨組みだけ借りる」アプローチの有効性

テンプレートをそのまま使うのではなく、骨組み（レイアウト構造、CSS技法、アニメーションパターン）だけを借りて中身を書き直すアプローチは効率的だった。テンプレートのHTML/CSSをそのままコピーすると、不要なクラスや依存関係が大量に混入して保守が困難になる。構造を理解した上でゼロから書き直す方が、結果的にコード量が少なく、メンテナンスしやすいコードになった。

2. CSS のスタッキングカードは「親要素の高さ」が鍵

position: sticky のスタッキングパターンで嵌まりやすいのは、sticky 要素の動作範囲が親要素の高さで決まるという仕様。親が height: auto だと、sticky 要素は中身の高さ分しか動かない。逆に親の高さが十分にあると、意図した範囲を超えて固定され続ける。スティッキー対象を専用のラッパーで囲んで範囲を明示するのが安全な実装パターンだ。

3. サブドメイン方式のデザイン切り替えは共有コンポーネントの設計が肝

複数業種のLPを1つのNuxtアプリで管理する場合、共有コンポーネント（LpHeader.vue, LpFooter.vue）の柔軟性が重要になる。今回は heroStyle, showPhone, primaryColor などのプロップで業種ごとの差分を吸収した。ただし、プロップが増えすぎると共有コンポーネントが複雑化するリスクがあり、将来的にはスロットベースの設計に移行することも検討している。

成果物

1日で以下の成果物が揃った。

  • 業種A LP: テンプレートAベースのミニマルデザイン + サービス記事
  • 業種B LP: テンプレートBベースの雑誌風デザイン + ダミー記事
  • 業種C LP: テンプレートCベースのグラスモーフィズムデザイン
  • 業種D LP: テンプレートDベースのポスター風デザイン + サービス記事
  • 業種E LP: テンプレートE + Fベースのスタッキングカードデザイン
  • 共通改善: ファビコン、SVGアイコン、電話番号削除、配色修正