Ruminbo工房 コーポレートサイト

開発の受注につながるコーポレートサイトを、外注せず自分でつくる。「木の温かみ × 技術の精密さ」という相反しがちな空気感を両立しつつ、表示性能・アクセシビリティ・運用のしやすさまで一人で担保する必要がありました。

確定仕様書とデザインガイドラインを先に固め、デザインカンプをコンポーネントへ分解。色・余白・角丸・影・書体はすべてデザイントークン（CSS変数）に集約し直書きを禁止。実績は1作品=1Markdownで増やせるコンテンツコレクション構成にして、運用を軽くしています。

• デザイントークンで一貫性と変更容易性を両立

  色・余白・角丸・影・書体を CSS変数に集約し、コンポーネントへの直書きを禁止。全ページで一貫したトーンを保ちつつ、トークン1箇所の変更で全体に反映できる構造。

• Markdownを1枚足すだけで増える実績基盤

  Astro コンテンツコレクション＋zod スキーマで、実績の追加を1ファイルに。型検証がビルドで効くため、必須項目の抜けや表記ゆれをそのまま落とせる。

• 日本語Webフォントの自己ホスト最適化

  @fontsource の per-weight 分割版を unicode-range で必要字形のみ読み込み、Google CDN非依存と表示性能（font-display: swap）を両立。

• アクセシビリティとモーション配慮

  コントラスト・フォーカス可視・見出し階層・キーボード操作・prefers-reduced-motion の尊重まで、公開前チェックを満たすよう実装。