Rimo Brand Guidelines Design Decision Records

DDR-0017

ブランド資産・サイト全体でドロップシャドウを使用しない

Status

Accepted

Date

2026-05-27

Context

DDR-0005（ロゴ）および docs/brand/logo.md では、ロゴへのドロップシャドウ適用を禁止していた。一方、ブランドガイドラインサイト（site/）の UI コンポーネント（Hero、Sidebar、カード類、GraphicShowcase など）には装飾目的の box-shadow / filter: drop-shadow が複数箇所に残っていた。

2026-05-27 のブランド&クリエイティブ定例で、視認性と「引き算で作るデザイン」の徹底のため、ブランドガイドライン全体・サイト UI からドロップシャドウを すべて削除 する方針が合意された。

Decision

ブランドのすべての資産・UI で、装飾としてのドロップシャドウを使用しない。

  • ロゴ・グラフィックエレメント・カード・ボタン・ナビ・ヘッダー等、いかなる UI 要素にも box-shadow / filter: drop-shadow を付与しない
  • ホバー時の浮き上がり表現も影ではなく、border / background / transform（translateY など）で表現する
  • 影で立体感を出す代わりに、罫線（hairline）・面の塗り分け・余白で階層を表現する

Alternatives Considered

  • ロゴのみ禁止、UI には残す: 既存ガイドラインだが、ブランド全体のトーン（静かな情報密度・引き算）と矛盾する箇所が残る
  • 限定的に許容（例: モーダルだけ）: 例外運用は遵守コストが高く、生成 AI への指示も複雑化する

Consequences

  • Positive:
    • ブランド全体で「装飾を引き算する」トーンが一貫する
    • 視認性が安定し、コントラスト比の評価がしやすい
    • AI 生成物に対しても「ドロップシャドウなし」の一律ルールとして指示できる
  • Negative:
    • 既存の Hero / Sidebar / GraphicShowcase / sections.css などの box-shadow を削除する改修が必要
    • 立体感を出していた箇所は罫線・面の処理に置き換える設計が必要
  • Implications:
    • サイト CSS のホバー演出は border / background / transform で再設計する
    • 今後の Figma デザインでも drop-shadow / inner shadow を使わない前提でレビューする

Source

  • 会議録: ブランド&クリエイティブ定例 2026-05-27 — Rimo Voice ノート XyeQgBI0WlBFXD1stcYV
  • DDR-0005: ロゴ方向性 — C 案（R のみ大文字）をベース（ロゴ単体への drop-shadow 禁止規定の格上げ元）
  • DDR-0005: ロゴ方向性（ロゴ単体への drop-shadow 禁止規定が本 DDR に統合される）
  • DDR-0016: サイトの技術スタックは Astro を採用（実装側の影響対象）
Copied!