ドキュメント

カスタマイズガイド

このガイドは、テーマをカスタマイズするための手順を説明しています。パート1は非開発者向けのコンテンツ編集、パート2は開発者向けの技術情報に分かれています。

English Docs

動作環境

  • Node.js 22.12.0 以上
  • npm 9.0.0 以上
  • Astro（バージョンは package.json をご確認ください）

ディレクトリ構成

/
├── src/
│   ├── config/         # JSON設定ファイル（サイト情報、メニュー、FAQ など）
│   ├── data/           # Markdown コンテンツ
│   ├── assets/         # 画像、アイコン、メディアファイル（Astro v6 テーマでは fonts/ を含む）
│   ├── components/
│   │   ├── layout/     # Header、Footer など
│   │   ├── sections/   # 事前実装済みのセクション
│   │   ├── ui/         # 再利用可能な UI コンポーネント
│   │   └── util/       # ユーティリティコンポーネント
│   ├── layouts/        # ページレイアウト
│   ├── pages/          # ページファイル（ルーティング）
│   ├── styles/         # デザイントークン、グローバルスタイル
│   └── types/
│       └── index.d.ts  # TypeScript 型定義
├── public/
│   ├── fonts/          # Webフォント（Astro v6 テーマでは src/assets/fonts/ に移動）
│   ├── images/         # 静的画像
│   └── robots.txt
├── astro.config.mjs
├── tsconfig.json
└── eslint.config.js

パート1：コンテンツ編集

コンテンツの編集方法

サイト内のテキストやコンテンツを編集する場合は、以下の手順で進めてください。

ステップ1：コンテンツの場所を特定する

  • JSON で管理されているコンテンツ：src/config/ 内のファイル（サービス、FAQ、チーム、メニューなど）
  • セクション固有のコンテンツ：src/components/sections/[セクション名].astro
  • ページコンテンツ：src/pages/[ページ名]/index.astro

ステップ2：テキストを検索する

コードエディタの検索機能（Cmd/Ctrl + Shift + F）を使って、変更したいテキストを検索します。

ステップ3：編集して保存

  • JSON ファイルの場合：値を編集して保存
  • .astro ファイルの場合：HTML セクション内のテキストを直接編集

例：Hero のキャッチコピーを編集する

  1. 現在のテキスト（例：「体験をデザインし」）を検索
  2. src/components/sections/Hero.astro（13、17行目）で見つける
  3. <span> の内容を編集：
<h1 class="hero-title">
  <span class="hero-title-line fade" data-animate data-animate-delay="0">
    新しいキャッチコピーをここに
  </span>
  <br />
  <span class="hero-title-line fade" data-animate data-animate-delay="200">
    2行目のテキスト
  </span>
</h1>

ブランドカラーの変更

src/styles/tokens.css を編集：

:root {
  --c-primary: #your-color; /* メインカラー */
  --c-primary-light: #your-color; /* 明るいバージョン */
  --c-primary-dark: #your-color; /* 暗いバージョン */
}

JSON 設定ファイル一覧

コンテンツは src/config/ 内の JSON ファイルで管理されています。

共通設定ファイル:

  • site.config.json - サイト情報、SEO、会社詳細
  • menu.json または menu.config.json - ナビゲーションメニュー（テーマによってファイル名が異なります）
  • social.json または social.config.json - SNS リンク（テーマによってファイル名が異なります）
  • pages.config.json - 全ページのラベル・パスを一元管理（テーマによって利用可能）

pages.config.json が存在するテーマでは、menu.config.json でページIDを参照する形でメニューを構成します。各ページのラベルやパスを変更したい場合は pages.config.json を編集してください。

テーマ固有の設定ファイル:

利用可能な設定ファイルはテーマによって異なります。src/config/ ディレクトリを確認して、以下のような設定ファイルを探してください：

  • サービス・機能紹介（service.json、benefits.json など）
  • チーム・メンバー情報（team.json など）
  • FAQ（faq.json など）
  • カテゴリー設定（category.json、category.config.json など）
  • その他テーマ専用の設定

ヒント：各 JSON ファイルを開いて、利用可能なフィールドと構造を確認してください。

サイト基本情報の編集

src/config/site.config.json を編集：

  • 基本情報：title、description、company_name
  • SEO：og_image、favicon、themeColor
  • 言語：lang（en、ja など）
  • 会社詳細（テーマによって利用可能）：company セクション（住所、電話、代表者名など）

重要：本番環境では astro.config.mjs 内の site URL も必ず更新してください。

ヘッダー・フッターメニューの編集

メニューの管理方法はテーマによって異なります。src/config/ を確認して、どちらのパターンか判断してください。

パターン A：menu.json（pages.config.json がない場合）

パスとラベルをメニューファイルに直接記述します。

  • main：ヘッダーナビゲーション項目
  • footer：フッターメニューセクション

ドロップダウンは children 配列で追加します：

{
  "title": "サービス",
  "path": "/services/",
  "children": [{ "title": "Web開発", "path": "/services/#web" }]
}

パターン B：menu.config.json + pages.config.json（pages.config.json がある場合）

ページ情報（ラベル・パス）は pages.config.json で一元管理されており、メニューはページ ID を指定するだけで構成されます。

// pages.config.json — ページのラベル・パスを定義
[
  { "id": "services", "label": "サービス", "href": "/services/" },
  { "id": "contact", "label": "お問い合わせ", "href": "/contact/" }
]
// menu.config.json — ID で参照するだけ
{
  "main": ["services", "pricing", "about", "news", "faq", "contact"],
  "footer": [
    { "pageId": "services", "source": "services" },
    { "name": "会社情報", "menus": ["pricing", "about"] },
    { "name": "サポート", "menus": ["faq", "contact"] }
  ]
}

メニューのラベルやパスを変更する場合は、menu.config.json ではなく pages.config.json を編集してください。

サービス詳細のドロップダウンについて（パターン B）

main に "services" を含めると、サービス詳細ページへのドロップダウンが自動生成されます。コンテンツ（src/data/services/ など）にファイルを追加・削除するだけでメニューに自動反映されるため、手動でメニューを編集する必要はありません。

画像の差し替え（ロゴ・OGP他）

共通の画像ファイル：

  • ロゴ：src/assets/logo.svg を差し替え
  • OGP 画像：public/images/ogp.png を差し替え（推奨サイズ：1200×630px）
  • ファビコン：public/images/favicon.svg を差し替え

テーマ固有の画像：

各セクションで使用されている画像は、テーマによって配置場所や種類が異なります。

画像ファイルを探す方法：

  1. src/assets/ ディレクトリを確認
  2. 各セクションコンポーネント（src/components/sections/）を開き、使用している画像パスを確認
  3. JSON 設定ファイル（src/config/）内の image フィールドを確認

ヒント：コードエディタの検索機能（Cmd/Ctrl + Shift + F）で差し替えたい画像ファイル名を検索すると、使用箇所を特定できます。

セクションの追加・削除

セクションを削除する場合は、ページファイルからインポートと使用箇所を削除：

---
- import Team from "@/components/sections/Team.astro";
import CTA from "@/components/sections/CTA.astro";
---

<Layout title="About">
-  <Team />
  <CTA />
</Layout>

セクションを追加する場合は、インポートして配置：

---
+ import Team from "@/components/sections/Team.astro";
import CTA from "@/components/sections/CTA.astro";
---

<Layout title="Services">
+  <Team />
  <CTA />
</Layout>

利用可能なセクションの確認方法：

src/components/sections/ ディレクトリを開いて、利用可能なセクションコンポーネントを確認してください。セクションの種類と機能はテーマによって異なります。

コンテンツの追加（Content Collections）

テーマは Astro の Content Collections を使用してコンテンツを管理しています。利用可能なコレクションの種類はテーマによって異なります。

コンテンツの確認方法：

  1. src/data/ または src/content/ ディレクトリを確認して、利用可能なコレクション（例：news/、works/、blog/ など）を確認
  2. src/content.config.ts を開いて、各コレクションのファイル形式（Markdown または JSON）とスキーマを確認

コンテンツの追加例：

各コレクション内のファイル形式に従ってファイルを作成します。

Markdown ファイルの場合（.md）：

---
title: "記事タイトル"
category: "カテゴリー"
pubDate: 2025-01-20
# その他のフィールドはコレクションによって異なります
---

コンテンツ本文...

JSON ファイルの場合（.json）：

{
  "title": "記事タイトル",
  "category": "カテゴリー",
  "pubDate": "2025-01-20"
}

ヒント：既存のファイルを開いて、必要なフィールドとファイル形式を確認してください。コレクション内のファイル形式は統一する必要があります。

Markdown ページの作成（テーマによって利用可能）

一部のテーマでは、src/pages/ 内に Markdown ファイル（.md）を直接配置してページを作成できます。

例：利用規約ページ（src/pages/terms.md）

---
layout: ../layouts/MarkdownLayout.astro
title: "利用規約"
---

# 利用規約

ページ本文...

特徴：

  • Markdown で記述したコンテンツが自動的にページとしてレンダリングされます
  • frontmatter の layout で専用レイアウトを指定できます（MarkdownLayout.astro など）
  • テーマによっては src/layouts/MarkdownLayout.astro が含まれています

確認方法：

  1. src/pages/ ディレクトリ内に .md ファイルが存在するか確認
  2. src/layouts/MarkdownLayout.astro が存在するか確認

詳細は Astro の Markdown ページガイドを参照してください。

パート2：開発者向けガイド

はじめに

インストール

npm install

開発

npm run dev

http://localhost:4321 で開発サーバーが起動します。

ビルドとデプロイ

npm run build    # ./dist/ を生成
npm run preview  # 本番ビルドをプレビュー

./dist/ フォルダを Cloudflare Pages、Netlify、Vercel などの静的ホスティングサービスにデプロイしてください。

注意：デプロイの設定方法は各サービスによって異なります。詳細は各ホスティングサービスのドキュメントを参照してください：

コード品質管理

npm run lint     # コードを Lint（自動修正）
npm run format   # Prettier でフォーマット
npm run check    # Lint + フォーマットチェック（自動修正なし）

コミット前に npm run check を実行してください。

設定値の説明

site.config.json > settings 内の設定（利用可能な設定項目はテーマによって異なります）：

{
  "pagination": 10, // 1ページあたりの表示件数（Pagination.astro が利用可能な場合）
  "header_height": "74px", // デスクトップのヘッダー高さ（Layout.astro の CSS 変数で使用）
  "header_height_mobile": "60px" // モバイルのヘッダー高さ（Layout.astro の CSS 変数で使用）
}

これらの値はサイト全体で使用されます：

  • header_height：Layout.astro で CSS カスタムプロパティとして使用され、スクロール位置の調整やレイアウト計算に利用
  • pagination：Pagination.astro コンポーネントが利用可能な場合、コンテンツ一覧ページの1ページあたりの表示件数を制御

画像の扱い方

Astro の Image コンポーネントを使う場合：

  • 画像パスが静的でビルド時に確定している
  • アセットから直接インポート
---
import { Image } from "astro:assets";
import heroImage from "@/assets/hero.jpg";
---

<Image src={heroImage} alt="Hero" width={1200} height={675} />

DynamicImage コンポーネントを使う場合：

  • 画像パスが動的（JSON/設定ファイルから取得）
  • パスが文字列変数

props の構造はテーマによって異なります。DynamicImage.astro をご確認ください。

public/ 内の画像：

  • 絶対パスで参照：/images/ogp.png
  • コンポーネント不要：<img src="/images/ogp.png" alt="..." />
  • 注意：public/ 内の画像は Astro による最適化が行われません。自動最適化を利用する場合は、src/assets/ に配置して Image または DynamicImage コンポーネントを使用してください。詳細は Astro 画像ガイド を参照してください。

セクションの管理

すべてのセクションは src/components/sections/ にあります。使用方法：

  1. ページファイルでインポート
  2. 必要な場所にコンポーネントを配置
  3. 必要に応じて props を渡す（コンポーネントファイルを確認）

多くのセクションは src/config/ 内の JSON ファイルをインポートしてデータを取得します。各セクションコンポーネントを開いて、データソースを確認してください。

Icon コンポーネント（テーマによって利用可能）

一部のテーマには Icon.astro コンポーネントが含まれています。このコンポーネントは SVG アイコンを表示するためのユーティリティです。

使用可能かどうかの確認：

src/components/ui/Icon.astro が存在するか確認してください。

基本的な使用例：

---
import Icon from "@/components/ui/Icon.astro";
---

<Icon name="check" />
<Icon name="arrow-right" width={32} height={32} />

Props：

  • name（必須）：アイコン名（利用可能なアイコンは Icon.astro 内の iconMap で確認）
  • width（任意）：アイコンの幅（デフォルトは各アイコンの元サイズ）
  • height（任意）：アイコンの高さ（デフォルトは各アイコンの元サイズ）

新しいアイコンの追加方法：

  1. SVG アイコンファイルを src/assets/ 内の適切なディレクトリに配置
  2. Icon.astro を開き、アイコンをインポート
  3. iconMap オブジェクトに追加
---
import WriterIcon from "@/assets/features/ai-writer.svg"; // 1. インポート
// ... 他のインポート

const iconMap: Record<string, IconComponentProps> = {
  // ... 既存のアイコン
  "ai-writer": WriterIcon, // 2. iconMap に追加
  // ...
};
---

これで <Icon name="ai-writer" /> として使用できるようになります。

フォームのカスタマイズ

src/components/sections/ContactForm.astro を編集して、フォームのフィールドや動作を変更できます。

フォーム送信の連携例：

お好みのフォームサービスや API と連携できます。以下は代表的な例です：

  • Netlify Forms：<form> タグに netlify 属性を追加
  • Formspree：action="https://formspree.io/f/YOUR_ID" を設定
  • 独自 API：独自のエンドポイントを作成
  • その他のサービス：標準的な HTML フォームを受け付けるサービスであれば利用可能

用途に合ったサービスを選択し、各サービスの連携ガイドに従ってください。

Google Analytics

src/config/site.config.json に GA4 測定 ID を追加：

{
  "google": {
    "analytics": "G-YOUR-ACTUAL-ID"
  }
}

レイアウト内の GoogleAnalytics コンポーネントが自動的にこの値を使用します。

トラブルシューティング

ビルドエラー

“Cannot find module” または依存関係エラー：

rm -rf node_modules package-lock.json
npm install
npm run build

TypeScript エラー：

  • src/types/index.d.ts の型定義を確認
  • JSON ファイルが TypeScript インターフェースと一致しているか確認

画像の問題

画像が表示されない：

  • src/assets/ 内の画像：Image または DynamicImage コンポーネントを使用する必要があります
  • public/ 内の画像：絶対パス（/images/file.jpg）で参照
  • ファイルパスが正しいか確認（大文字小文字を区別）

DynamicImage エラー “does not exist in glob”：

  • 画像パスが /src/assets/ で始まっているか確認
  • ファイル拡張子が .svg、.jpg、.jpeg、.png、.webp のいずれかか確認
  • ファイルが実際にそのパスに存在するか確認

JSON エラー

JSON パースエラーでビルドが失敗する：

  • jsonlint.com で JSON 構文を検証
  • カンマの過不足を確認
  • すべての括弧が閉じられているか確認
  • 配列やオブジェクトの末尾にカンマがないか確認

メニューの問題

ドロップダウンが表示されない：

  • メニュー項目に children 配列が存在するか確認
  • JSON 構文が正しいか確認

アクティブ状態が正しくない：

  • path の値が実際のページルートと一致しているか確認
  • パスは / で始まり / で終わる必要があります

パフォーマンスの問題

ビルドが遅い：

  • 画像サイズを確認（大きい画像を最適化）
  • WebP フォーマットの使用を検討

バンドルサイズが大きい：

  • 未使用のセクションを削除し、インポートを整理
  • 重複する依存関係がないか確認

よくある開発時の問題

開発サーバーが更新されない：

# 開発サーバーを再起動
npm run dev

デプロイ前チェックリスト

必須項目

  • site.config.json のサイト情報をすべて更新
  • astro.config.mjs の本番 URL を設定
  • ロゴ画像を差し替え（src/assets/logo.svg）
  • OGP 画像を差し替え（public/images/ogp.png）
  • ファビコンを差し替え（public/images/favicon.svg）
  • Google Analytics ID を追加（使用する場合）
  • プライバシーポリシーの連絡先情報を更新
  • サンプル画像をすべて差し替え
  • サンプルコンテンツを削除または差し替え（src/data/ または src/content/ 以下のコンテンツ）
  • プレースホルダーテキストを置換（{REPLACE: で検索）

公開前テスト

  • npm run check が成功することを確認
  • ビルドテスト：npm run build
  • ビルドプレビュー：npm run preview
  • モバイル端末でテスト
  • フォームが正常に動作することを確認
  • public/robots.txt を更新
  • すべてのリンクを確認
  • ページタイトルと説明文を確認
  • SNS での OGP 画像表示をテスト
  • XML サイトマップを設定

サポート

テーマに関する不具合、バグ、ご質問がありましたら、お気軽にお問い合わせページからご連絡ください。

ただし、HTML、CSS、Astro などのプログラミング言語そのものに関する学習サポートは提供しておりません。

ライセンス

テーマのライセンスについては、ライセンスページをご確認ください。

最終更新日： 2026年4月4日