Rimo Brand Guidelines Design Decision Records

DDR-0020

サイト構造を「1 ページ = 1 Figma 当て」に再設計

Status

Accepted

Date

2026-05-27

Context

現在のブランドガイドラインサイトのトップ（site/src/pages/index.astro）は、「Our brand / How we speak / How we look / Resources / AI」を 1 枚に集約した長大なシングルスクロール構造になっている。一方、Figma の設計はセクションごとに独立したアートボード（ページ単位）で進められており、サイトと Figma の構造がズレてしまっている。

2026-05-27 のブランド&クリエイティブ定例で、

  • 左ナビ（タブ）で切り替えて 1 ページずつ シングルページとして閲覧できる構造にしたい
  • 「最初にサイト構造だけ決めて、それに対して Figma を当てていく」フローにしたい
  • トップには 「AI 向けリソース」と「AI ブランドチェック」 を上位導線として残す
  • “How you look” の特定セクションは 左固定 / 右スクロール の two-pane レイアウトに

ことが合意された。

DDR-0010（Material Design 参照）と整合する形で、Material 3 の Navigation Rail + 詳細ページの組み合わせをそのまま生かす。

Decision

サイトのトップを「各論ページへの入口 + AI 連携の入口 + ビジョン」に再編し、詳細は各 /[slug]/ ページに集約する。

  • トップ（/）の構成
    1. Hero（コーポレート文脈なのでタイル基調グラフィック）
    2. Vision / Mission の要約 + 各論ページへのリンク
    3. AI Integration（AI 用リソース・AI ブランドチェックの導線）を上位に昇格
    4. Resources の入口（プレゼンテンプレート、Logo kit、Type pack 等）
  • 各論ページ（/logo/, /color/, /typography/, /graphic-elements/, /dna-personality/, /how-we-speak/ 等）
    • 1 ページ = 1 Figma アートボードに対応するスコープに整理する
    • 各ページは Figma を一次ソースとし、ガイドライン本文（docs/brand/*.md）と Showcase コンポーネントで構成する
  • “How you look” の two-pane レイアウト
    • 左サイドにセクション目次（sticky）、右に本文をスクロールできる構造を採用する
  • 既存の Sidebar（Material Rail）は維持し、グループ階層は据え置く

Alternatives Considered

  • 現状のシングルページ構造を維持: Figma との対応が取れず、保守と AI 出力指示の両面でコストが高い
  • 完全な SPA に置き換える: SSG + Astro の AI 可読性（DDR-0015 / DDR-0016）を毀損する
  • タブ式 UI（Material Tabs）で 1 ページ内切替: ディープリンクと AI 参照の単位がぼやけるため不採用

Consequences

  • Positive:
    • 1 ページ = 1 Figma で、デザインと実装のズレが構造的に起きにくくなる
    • 各ページがディープリンク可能で、AI 連携・社内共有時の参照単位が明確になる
    • トップに AI 入口を集約することで「AI と働く」メッセージを強調できる
  • Negative:
    • トップの大改造（長大セクションの再配置 / 移動）が必要
    • 既存のトップ内アンカーリンク（#logo, #color 等）の URL 互換性を別途整理する必要がある
  • Implications:
    • site/src/pages/index.astro を入口集約型に書き換え
    • site/src/pages/[slug].astro 側に各論コンテンツを寄せる（既に骨格はある）
    • 必要に応じて two-pane レイアウト用コンポーネントを追加する
    • Sidebar の AI 系項目を上位階層へ昇格する

Source

  • 会議録: ブランド&クリエイティブ定例 2026-05-27 — Rimo Voice ノート XyeQgBI0WlBFXD1stcYV
  • DDR-0008: ブランドガイドラインサイトを構築する
  • DDR-0010: サイト UI の参照先として Material Design を採用
  • DDR-0015: AI ファーストな情報構造
  • DDR-0016: サイトの技術スタックは Astro を採用
  • DDR-0019: グラフィックエレメントの用途定義（タイル＝コーポレート / マイク＝サービス）
Copied!