visual-direction

ビジュアルディレクション

現在のビジュアルディレクション：カラーパレット、フォントの組み合わせ、レイアウト構成、ビジュアル言語（2026 年第 1 四半期／第 2 四半期時点）。定期的な更新を前提に構成されています。

対象範囲

以下の場合にこのスキルを使用します：

• 新しいプロジェクトのカラーパレットを定義するとき
• フォントの組み合わせを選ぶとき
• レイアウト構成と視覚的なリズムを計画するとき
• 一貫したビジュアル言語を確立するとき
• ダーク／ライトテーマを実装するとき

原則

1. 色で伝えるのはブランドであり、トレンドではありません

ブランドアイデンティティをもとにパレットを導き出します。トレンドは枠組みの参考にし、実際の表現はブランドに合わせます。

2. タイポグラフィが雰囲気を決めます

フォントの選択は、ほかのどの要素よりも強く感情的なトーンを定義します。グロテスク体＝モダン、セリフ体＝信頼感、ディスプレイ体＝クリエイティブです。

3. 余白もデザインの一部です

余白は視線を誘導し、階層を生み出し、上質さを伝えます。

4. 創造性より一貫性が大切です

まとまりのあるビジュアルシステムは、散発的なひらめきよりもプロフェッショナルに見えます。

5. コントラストが階層を生み出します

視覚的なコントラスト（サイズ、色、ウェイト、余白）は、情報の階層を作るための主要な手段です。

ルール

カラーパレット

• 推奨：明確な役割を持つ、構造化されたパレットを定義します：
  • プライマリー：ブランドカラー。控えめに使用します（CTA、アクティブ状態）
  • ニュートラル：グレーのグラデーション（最低 5 段階）
  • セマンティック：成功（緑）、警告（黄／オレンジ）、エラー（赤）、情報（青）
  • アクセント：任意。強調に使用します
• 推奨：テック／SaaS には深いダークカラーを使用します：#0A0A0A ～ #1A1A1A（#000000 は使用しません）。
• 推奨：ライフスタイル／ブランド向けには温かみのあるニュートラルカラーを使用します：オフホワイト（#FAFAF5 ～ #F5F0EB）。
• 推奨：アクセントはモノクロームにします。強い色は 1 色で十分です。
• 非推奨：メインパレットに有彩色を 2 色以上使うこと。
• 非推奨：広い面積に彩度の高い色を使うこと。高彩度の色は小さなアクセントに限ります。
• 非推奨：テキストのコントラスト比を 4.5:1 未満にすること（WCAG AA）。

フォントの組み合わせ

• 推奨：フォントファミリーは最大 2 種類にします：
  • オプション A：ジオメトリック・グロテスク体＋ヒューマニスト・サンセリフ体（例：Inter + DM Sans）
  • オプション B：モダンなセリフ体＋ニュートラルなサンセリフ体（例：Fraunces + Inter）
  • オプション C：開発者ツール向けに等幅フォント＋サンセリフ体（例：JetBrains Mono + Inter）
• 推奨：サイズに大きなコントラストをつけます。ディスプレイテキストは本文の少なくとも 3 倍のサイズにします（72-120px 対 16-18px）。
• 推奨：可能であれば可変フォントを使用します。1 つのファイルで複数のウェイトに対応できます。
• 非推奨：似た特徴のフォントを組み合わせること。コントラストが不可欠です。
• 非推奨：書体ごとに 4 段階を超えるウェイトを使うこと。
• 非推奨：本文の文字サイズを 16px 未満にすること。

レイアウト構成

• 推奨：非対称のバランスにします。すべてを中央揃えにする必要はありません。
• 推奨：縦方向にゆとりのあるリズムを設けます。デスクトップではセクション間隔を 120-200px にします。
• 推奨：12 列または 16 列のグリッドを土台にし、意図的に崩します。
• 推奨：画像は全幅にし、テキストは幅を制限します（最大 720px、1 行あたり 65-75 文字）。
• 非推奨：変化のない均等な列。50/50 の分割は静的に見えます。
• 非推奨：1 ページで 3 種類を超えるコンテナ幅を使うこと。

ビジュアル言語

• 推奨：画像の処理を統一します。同じフィルター、遠近感、スタイルを使用します。
• 推奨：3D 要素は選択的かつ控えめに使用します。
• 推奨：ブランド固有のイラストを使用します（汎用ライブラリは使用しません）。
• 推奨：自然光を使った、本物らしさのある写真を使用します。
• 非推奨：AI 生成画像を主要なビジュアルにすること。
• 非推奨：画像を圧縮せずに使用すること。遅延読み込みと WebP/AVIF を使用します。
• 非推奨：代替テキストのない画像。

パレットの類型とタイポグラフィのトレンドについては、references/archetypen.md を参照してください。

パターン

ダークモードファースト

対象： テック製品、開発者ツール、プレミアムブランド。 内容： ダークモードからデザインを始めます。ライトモードはそこから派生させます。テーマの切り替えには CSS Custom Properties を使用します。

タイポグラフィ主体のヒーロー

対象： メッセージ性の強いランディングページ、エージェンシーのサイト、ポートフォリオ。 内容： 画像を使わず、タイポグラフィのみを使用します。見出しは 100px 以上にし、ネガティブスペースをデザイン要素として活用します。

視覚的リズムのあるセクション

対象： 複数のセクションで構成される長いランディングページ。 内容： 背景色を交互に切り替えます：ダーク ＞ ライト ＞ ダーク。同じパレットを使い、温度感を変えます。

モノクロ＋アクセント

適用場面： ミニマルな製品、高級ブランド。 概要： 白黒／グレースケールに、CTA やハイライト用のアクセントカラーを 1 色加えます。

特大タイポグラフィのグリッド

適用場面： ポートフォリオ、クリエイティブエージェンシー、エディトリアル。 概要： 大きなタイポグラフィをグリッド要素として使います。文字がカラムをまたぎ、テキストが視覚的なパターンになります。

避けるべきパターン

1. トレンドの寄せ集め -- グラスモーフィズム＋ニューブラタリズム＋ニューモーフィズムを 1 つのページに混在させること。プロジェクトごとにスタイルは 1 つにします。
2. 彩度が高すぎるグラデーション -- 2023 年に流行した紫・ピンク・オレンジの組み合わせは、2026 年にはありきたりに見えます。代わりに、控えめなモノクロのグラデーションを使います。
3. ストックフォトの混在 -- 美的な統一感のない、異なる出典の画像を使うこと。
4. フォントの使いすぎ -- 4 種類以上のフォントファミリーを使うと、まとまりがなくなります。
5. アイコンの不統一 -- アウトライン、塗りつぶし、デュオトーンを混在させること。スタイルとセットを統一します。
6. シャドウの使いすぎ -- レベルや方向を増やしすぎること。3～5 レベルで十分です。
7. 装飾だけを目的とした要素 -- 目的のない図形を使うこと。すべての要素は階層構造か雰囲気を支える必要があります。
8. コントラスト不足 -- オーバーレイを使わず、画像の上にテキストを載せること。コントラストを自動でチェックします。

チェックリスト

• カラーパレットの役割を定義している：プライマリ、ニュートラル（5 段階以上）、セマンティック、アクセント
• すべてのテキストと背景の組み合わせが WCAG AA（4.5:1）を満たしている
• プロジェクトで使用するフォントファミリーは最大 2 種類
• 本文テキストは 16px 以上
• ディスプレイテキストは本文の 3 倍以上の大きさ
• セクション間の余白が一貫している（例：デスクトップでは 120px、モバイルでは 64px）
• 画像の処理（フィルター、遠近感、スタイル）が一貫している
• すべての画像を WebP/AVIF 形式にし、遅延読み込みを使っている
• アイコンセットのスタイルが統一されている
• シャドウシステムは最大 5 レベル
• ダークモードを実装しているか、プライマリテーマとして使用している
• カラーシステムで CSS Custom Properties を使用している
• ヒーローセクションや特徴紹介セクションにストックフォトを使用していない

関連項目

• design-trends -- このビジュアルデザインの方向性を形作る全体的なトレンド
• ui-patterns -- このビジュアルデザインの方向性に沿って設計されたパターン
• component-patterns -- コンポーネントのテーマ設定に使うトークンシステム
• color-theory -- カラーシステムの基礎とトークン構造
• web-typography -- タイポグラフィシステムとスケーリング
• branding-identity -- ビジュアルデザインの方向性の基盤となるブランドアイデンティティ
• images-media -- 画像の最適化とフォーマット