Brand & Design System
FASTPLAN
Design Guidelines
FASTPLANマーケティングサイトの見た目・動き・画像の扱いに関する唯一の基準。角は直角、深い青、ひとつの鋭い黄色、そしてANTONで叫ぶ見出し。迷ったら、すでにページにあるものに合わせる。
01 — Foundations
Color
5つのトークンがすべてを担う。深い青はどこでも背景となる地。ブランドイエローは唯一のアクセントで、1画面につきひとつの焦点にだけ惜しんで使う。それ以外はすべて不透明度を変えた白。トークンは src/app/globals.css の @theme にある。
ページ背景。すべてのセクションはこの上に乗る。
唯一のアクセント。見出し・CTA・焦点となる図形に。テキストの多い面の背景には使わない。
浮いた面・抑えたパネル。
黄色帯の上のテキスト、ソリッドボタン、black/20 の画像ウェル。
本文。抑えた派生: white/85 リード、white/60 キャプション、white/10 ボーダー。
コントラスト: 深い青の上の白文字はAAを満たす。深い青の上のブランドイエローは大きな見出しと非テキストUI専用 — 本文には低コントラストすぎる。黄色のCTA帯では、すべてのテキストとボタンをソリッドの黒に反転させる。
02 — Foundations
Typography
2つのファミリー。Anton（font-heading）はすべての見出しに — 重く、圧縮され、常に大文字、詰めたトラッキング。Geist（font-sans）は本文とUIに。ラベルとボタンは広い字間、流れる見出しは詰めた負のトラッキング。
Do
- ▸すべての見出しはAnton・大文字・詰めたトラッキングで組む。
- ▸ヒーローの文字は流動的な clamp / vw サイズでビューポートを満たす。
- ▸白の不透明度ランプで階層をつくる。新しい色を足さない。
- ▸本文は .blog-content 内で非大文字・可読な行長を保つ。
Don't
- ✕本文段落をAntonや全大文字で組まない — 可読性を殺す。
- ✕3つ目の書体やセリフ体を持ち込まない。
- ✕テキストにドロップシャドウやグラデーションをかけない。
- ✕長文にブランドイエローを使わない。
03 — Foundations
Layout & Space
すべては直角: --radius: 0rem。角丸はどこにもない。セクションは全幅で積み重なり、1本のヘアライン（border-t border-white/10）で区切る。コンテンツは中央寄せの container に px-6。縦のリズムはゆったり、py-24 / py-32。
常に直角
ボーダー・カード・ボタン・画像すべてが90°の角。システムで最も重要な規則 — 角丸ひとつでオフブランドに見える。
ヘアラインの区切り
セクションとカードは影や塗りではなく rgba(255,255,255,0.1) のボーダーで分ける。グリッドは隙間なくボーダーを共有する。
コンテナと余白
中央寄せ container mx-auto、ラップに px-6、セクションごとに py-24 以上。カードは密度に応じて p-5〜p-12。
カード
bg-black/20 + border border-white/10、角丸なし、overflow-hidden。ヘッダー / キャプションは内側の上ボーダーで分ける。
04 — Patterns
Components
新しいものを発明する前に、この3つのボタンスタイルとセクションヘッダーのパターンを再利用する。
Buttons
ソリッド黒 — 黄色帯の上の主要CTA。 ゴースト黄 — 青地の上の副次アクション（ホバーで黄色に反転）。 ソリッド黄 — 青セクションの主要CTA。すべて大文字Anton、すべて直角、すべてホバーで色が入れ替わる。
Section header
FASTPLANで出来ること
任意のeyebrow → 黄色のAntonタイトル → 抑えた補足行（デスクトップでは右寄せ）。全セクション共通。
Accent rule & list marker
説明できるよう準備
強調したい宣言には左のブランドルール（border-l-2 border-brand pl-6）。
- 1-5年の予測
- 収益ストリーム構築
- キャッシュフロー追跡
機能リスト: 小さな四角い黄色の点 + 太字の黄色ラベル。
05 — Patterns
Motion
アニメーションはクライアントセクションのみで motion/react を使う。控えめで、常に付加的 — 何も動かなくてもページは完全に読める。
スクロールで出現
セクションはフェード + 上昇: initial opacity:0, y:20 → whileInView、viewport once:true。グリッドの子は delay: i * 0.05–0.1 でずらす。
ヒーロー & 環境
ヒーロータイトルは0.8秒でスケールイン。装飾図形は無限のease-in-outでゆっくり漂う。スクリーンショットはホバーで700msかけて1.02–1.04に拡大。
デュレーション
出現0.6秒、ヒーロー0.8–1秒、ホバー遷移200–700ms。入場はease-out、ループはease-in-out。
抑制
1セクションにつき演出はひとつ、競合させない。アニメーションするファイルは "use client"、それ以外はサーバーコンポーネントのまま。
06 — Patterns
Voice & Copy
日本語、断定的、自信をもって。短い命令形の見出し。読み手の知性を尊重する補足。製品名 FASTPLAN は日本語の文中でも常にラテン大文字。
Do
- ▸主張から入る: 「推測を止め、思考を始めよう。」
- ▸長い日本語見出しの改行は <wbr> で制御する。
- ▸CTAは動詞から: 「プラン作成を開始」。
Don't
- ✕ヒーローで言い訳や説明過多をしない。
- ✕1セクション内でカジュアルと丁寧を混ぜない。
- ✕FASTPLANのワードマークを小文字化・分割しない。
07 — Imagery
Image Handling
画像をサイトに組み込む方法。すべてのラスター画像は next/image を通す。プロダクト画像は public/screenshots/、ブログのアイキャッチはmicroCMS由来で、リモートパターンに許可登録が必要。
枠は固定、画像が満たす
画像は常にアスペクト比を固定したボーダー付きのウェルの中に置く。画像は object-cover object-top で枠を満たし、下からトリミングする — スクリーンショットのヘッダー / タイトルを保つため。レイアウト内で画像に高さを決めさせない。
戦略サマリー
事業計画 / 課題とソリューション
損益計算書
月次パフォーマンス / AIアシスタント
標準アスペクト比
16 / 9特集ヒーロー画像とブログアイキャッチ（aspect-video）。16 / 10スクリーンショットのグリッドとインライン画像。1200 × 630OGP / ソーシャルカード（/opengraph-image）。基本パターン
// ボーダー付きウェル、比率固定、画像が満たして上からトリミング
<div className="relative aspect-[16/10] border border-white/10 bg-black/20 overflow-hidden">
<Image
src="/screenshots/cashflow.png"
alt="キャッシュフロー予測ダッシュボード" // 内容を日本語で説明
fill
className="object-cover object-top"
sizes="(max-width: 768px) 100vw, 600px" // fill には必ず sizes
priority // ファーストビューのみ
/>
</div>Do
- ▸レイアウト画像は fill + relative な比率ラッパー。内容画像（ブログアイキャッチ）は明示的な width / height。
- ▸fill を使うときは常に sizes を設定し、適切な解像度を配信する。
- ▸priority はファーストビューのヒーロー画像1枚だけに付ける。
- ▸画面内容を説明する意味のある日本語 alt を書く。
- ▸新しいリモートホストは使う前に next.config.ts の images.remotePatterns に追加する。
Don't
- ✕素の <img> タグを使わない — 最適化とレイアウト安定性を失う。
- ✕画像の角を丸めたり影を付けたりしない。四角い white/10 ボーダーを保つ。
- ✕priority をヒーロー1枚より多くに付けない。
- ✕alt なし、または「画像」のような無意味な alt で出さない。
- ✕remotePatterns に無いホストの画像を直リンクしない — 描画に失敗する。
ファイル規約: スクリーンショットは public/screenshots/ の kebab-case.png（例: strategy-summary.png）。public からの絶対パス /screenshots/… で参照する。CMS画像用に images.microcms-assets.io への preconnect が layout.tsx に一度だけ設定されている。
08 — Imagery
Image Creation
FASTPLANに馴染むよう、新しい画像はどう見えるべきか。画像は2種類: プロダクトのスクリーンショット（実際のアプリUI）と ブランドグラフィック（青地に黄色の幾何学図形）。写真はこのシステムに含まない。
プロダクトスクリーンショット
実際のFASTPLANアプリUIを高解像度（表示サイズの2倍以上）でキャプチャ。下からトリミングされるため、画面上部（タイトル・ヘッダー・KPI）を収める。チャート・P&L表・AIコパイロットなどデータの濃いビューを選ぶ。可逆圧縮の .png で書き出す。アプリは青系テーマのまま、深い青の地に自然に乗せる。
ブランドグラフィック
フラットで幾何学的、アイソメトリック。深い青の上にソリッドのブランドイエローと黒のボリュームを rotateX(45deg) rotateZ(-45deg) skewX(10deg) で投影し、鋭いオフセットシャドウ（20px 20px 0 rgba(0,0,0,0.3)）を付ける — ソフトなグラデーションは使わない。可能な限りラスターでなくCSS / SVGで作る。このページのヒーロー背景の図形を参照。
Do
- ▸生成グラフィックは2つのブランドカラー + 黒のみを使う。
- ▸すべてフラットで幾何学的に — 鋭いエッジ、90°の角、アイソメトリック投影。
- ▸スクリーンショットは2倍で書き出し、実データで密度を保つ。
- ▸PNGは圧縮する。ベクター図形はSVG / CSSで鮮明かつ軽く。
- ▸下からのトリミングと四角い white/10 の枠を前提に設計する。
Don't
- ✕ストック写真・人物写真・3Dレンダーのグラデーションを使わない。
- ✕パレット外の色やソフト / パステルの塗りを持ち込まない。
- ✕角丸・グロー・ベベル・鋭いオフセットより柔らかい影を足さない。
- ✕偽物 / プレースホルダーのUIを作らない — スクリーンショットは実物であること。
- ✕ぼやけた・低解像度・過圧縮のスクリーンショットを出さない。
AI生成画像: ツールでブランドグラフィックを生成するときは明示的にプロンプトする — 「flat isometric vector, solid #fedd19 yellow and black shapes on #003399 blue background, hard offset shadow, no gradients, no photography」。その後パレットに手で合わせる。生成器に新しい色やソフトで光沢のある3D調を持ち込ませない — 一瞬でオフブランドに見える。
FASTPLAN
デザインガイドライン · 深い青 #003399 · ブランドイエロー #fedd19 · Anton + Geist · Radius 0。サイトに追加するときは、新しいものを発明する前にこれらのパターンに合わせる。基準となるソース: src/app/globals.css、src/lib/site.ts、next.config.ts。