Rimo Brand Guidelines Design Decision Records

DDR-0016

サイトの技術スタックは Astro を採用

Status

Accepted

Date

2026-05-25

Context

ClaudeDesign が Figma を元に生成した初期サイトは、site/index.html（2501 行）と site/index-print.html（2555 行）の単一ファイル HTML + 単一 CSS で構成されている。レスポンシブ未対応、コンポーネント分割なし、コンテンツがハードコードされており、以下の問題がある。

  • ブランド文書（docs/brand/）と HTML が二重管理になる
  • 同じ UI 要素（カード、セクションヘッダー等）が複数箇所に展開されている
  • 修正時の影響範囲が広く、保守コストが高い
  • AI による読み取りやすさ（セマンティック HTML / JSON-LD / llms.txt）が未整備
  • レスポンシブ・アクセシビリティが不十分

DDR-0011 で GitHub Pages ホスティング、DDR-0015 で AI ファーストな情報構造が決定済み。これらと整合する技術スタックを選定する必要がある。

Decision

サイトの技術スタックとして Astro を採用する。

採用理由:

  1. ビルド出力はプレーンな HTML / CSS / JS で、AI 可読性に優れる（CLAUDE.md の設計原則と整合）
  2. .astro コンポーネント によりセクション・カード・タイポなど UI 要素を再利用可能
  3. Markdown / MDX のコンテンツコレクション をネイティブサポートしており、docs/brand/*.md をそのままサイトのコンテンツソースにできる
  4. Static Site Generation（SSG） で GitHub Pages と完全互換
  5. <slot> ベースのレイアウト合成 が直感的で、AI による生成・編集にも向いている
  6. JSON-LD / llms.txt の出力 も静的ファイルとして組み込みやすい
  7. ランタイム JavaScript は最小（Islands Architecture）

Alternatives Considered

  • Next.js: フルスタックフレームワークでオーバースペック。SSR を使わないなら Astro 優位
  • Eleventy (11ty): 軽量で静的サイトに向くが、コンポーネントモデルが弱い
  • Jekyll: GitHub Pages ネイティブだが、Liquid テンプレートは表現力に乏しく、Markdown コレクションの取り扱いも限定的
  • plain HTML + CSS（現状継続）: コンポーネント化できず、保守困難
  • Vue / React + Vite: SPA は AI 可読性で SSG に劣り、初回 HTML が空になる
  • SvelteKit: Astro と近い設計だが、コンテンツ駆動サイト向けの一級サポートでは Astro が優れる

Consequences

  • Positive:
    • .md を書くだけでサイトのページが追加できる
    • コンポーネント化により、デザイントークン（カラー・タイポ・スペーシング）の集約が容易
    • JSON-LD / llms.txt / メタデータを構造化して自動生成できる
    • GitHub Actions による自動デプロイが容易
  • Negative:
    • Node.js / npm の依存が発生する
    • 初期セットアップ（依存インストール、ビルドパイプライン）が必要
    • GitHub Pages 公開には Actions ビルドが必要（Jekyll のような自動ビルドではない）
  • Implications:
    • site/ 配下を Astro プロジェクト構造に置き換える
    • 既存の site/index.html / colors_and_type.css は参考資料として残し、段階的に Astro コンポーネントへ移行する
    • GitHub Actions ワークフロー（.github/workflows/deploy.yml）を別途整備する

Source

  • CLAUDE.md（設計原則）
  • DDR-0011: サイトホスティングは GitHub Pages
  • DDR-0015: AI ファーストな情報構造
  • Astro 公式: https://astro.build/
  • DDR-0008: ブランドガイドラインサイトを構築する
  • DDR-0011: サイトホスティングは GitHub Pages
  • DDR-0015: AI ファーストな情報構造（セマンティック HTML / JSON-LD / llms.txt）
Copied!