Design Guide
デザインガイド
このページはテーマカラー、フォント、ボタン、カードの基準を確認するための静的ガイドです。
Theme Colors
Primary Blue
#3f6fbbロゴとナビ、主要見出し、強調線に使用。
Accent Orange
#e36b2cロゴの山形に由来するCTA用アクセント。
Page Background
#eaf1ffページ背景。カード領域は白で分離する。
Card Surface
#ffffffカード、本文、ページヘッダーの背景。
Text
#1d2a44本文と主要テキスト。
Muted Text
#66738f補足説明、日付、メタ情報。
Typography
KATASHINA MOUNTAINS SERIES
HOTAKA SKYRUN
あの稜線へ
本文は macOS で読みやすい日本語サンセリフを優先し、英字ロゴはオリジナル画像を使用します。見出しは太め、本文は可読性重視です。
Buttons
記事本文のボタンは Markdown 内で post-buttons を使う。スマホでは1列表示。
Cards
2026.03.08
お知らせカード
カード背景は白。本文は5行までに制限し、一覧では詳細ページへのボタンを表示する。
詳しく見るAdvanced
6/7 SUN
01
レースカード
23 km / 1400 mD+
カード面は白。画像枠も白を基準にし、背景色とは明確に分離する。
Operational Notes
- テーマカラーは
shared/assets/css/tokens.cssを編集する。 - カードやレスポンシブの調整は
shared/assets/css/main.cssを編集する。 - カード背景は白を基本とし、ページ背景だけに青みを持たせる。
- お知らせ記事のCTAは
<div class="post-buttons">を使う。