ITTO PORTFOLIO

ブランディングとデザインシステム

Design H/JackブランディングデザインシステムUI/UX

ブランディングとデザインシステム - Design H/Jack のカラーパレットとタイポグラフィ戦略 -

はじめに

ダークポップという世界観を定義した後、次に取り組んだのが具体的なデザインシステムの構築です。カラーパレット、タイポグラフィ、ブランドパーソナリティを体系的に設計することで、一貫性のあるブランド体験を実現しました。

この記事では、Design H/Jack のブランディング戦略と、実装レベルまで落とし込んだデザインシステムを解説します。

ブランドパーソナリティ：4つの柱

1. 挑戦的

メッセージ:

  • 「その衝動を言葉で刻め」
  • 「デザインをハックして攻略する」
  • 「一歩を踏み出す勇気を」
  • 「君もできる！」

感情効果:
やる気が出る、背中を押してくれる、勇気をもらえる、挑戦したくなる

2. 前衛的

メッセージ:

  • 「新しいデザインを常に学ぶ」
  • 「視点を広げる」
  • 「固定観念を壊す」
  • 「進化し続ける」

感情効果:
刺激を受ける、好奇心が湧く、探求心が生まれる、成長を実感できる

3. 刺激的

メッセージ:

  • 「発見を共有する」
  • 「視点を比較する」
  • 「気づきを得る」
  • 「観察力を磨く」

感情効果:
ワクワクする、楽しい、もっと知りたくなる、継続したくなる

4. 親しみやすい

メッセージ:

  • 「なんか好き」でOK
  • 「初心者でも大丈夫」
  • 「一緒に学ぼう」
  • 「仲間がいるよ」

感情効果:
安心する、怖くない、失敗してもOK、居心地がいい

カラーパレット設計

Design H/Jack のカラーシステムは、グラフィックデザイン（赤系）とWebデザイン（青系）を象徴する2つのテーマカラーを軸に、ネオンカラーのアクセントで挑戦的な印象を強調しています。

ベースカラー

Colored Black

HEX: #0e0e0e
RGB: rgb(14, 14, 14)
CSS変数: --colored-black
用途: 背景、ダークモードのベース

真っ黒（#000000）は重すぎるため、少し明るい#0e0e0eで柔らかさを保ちました。

Colored White

HEX: #f5f5f5
RGB: rgb(245, 245, 245)
CSS変数: --colored-white
用途: テキスト、カード背景、画像マット

メインテーマカラー（アプリ・LP共通）

Red（グラフィックデザイン）

Primary:

HEX: #ff1a1a
RGB: rgb(255, 26, 26)
CSS変数: --theme-color-red-primary
用途: メインCTA、ボタン、重要な強調

Accent:

HEX: #33ff99
RGB: rgb(51, 255, 153)
CSS変数: --theme-color-red-accent
用途: Red系統のアクセント、ホバー効果

Shadow:

CSS変数: --theme-color-red-shadow
実装: 0 0 20px var(--theme-color-red-primary), 
      inset 0 0 20px rgba(255, 26, 26, 0.2)
用途: ネオングロー効果

Blue（Webデザイン）

Primary:

HEX: #1738ff
RGB: rgb(23, 56, 255)
CSS変数: --theme-color-blue-primary
用途: リンク、情報表示、Webデザイン系タグ

Accent:

HEX: #39ff14
RGB: rgb(57, 255, 20)
CSS変数: --theme-color-blue-accent
用途: Blue系統のアクセント

Shadow:

CSS変数: --theme-color-blue-shadow
実装: 0 0 20px var(--theme-color-blue-primary),
      inset 0 0 20px rgba(23, 56, 255, 0.2)
用途: ネオングロー効果

Yellow（ハイライト）

Highlight:

HEX: #ffe924
RGB: rgb(255, 233, 36)
CSS変数: --theme-color-yellow-highlight
用途: お気に入り、警告、特別な強調

両テーマ（Red/Blue）に対応できる中立的なハイライトカラーとして設計。

拡張テーマカラー（主にLP用）

Violet

Primary: #e46cff
Accent: #3dffe6

Aqua

Primary: #5ff2ea
Accent: #d4ff1f

Orange

Primary: #ff6733
Accent: #ffd633

これらの拡張カラーは、ランディングページでの多様な表現や、Spotify Wrapped風グラデーションに使用。

グラデーション定義（Spotify Wrapped風）

red-to-orange: 
linear-gradient(135deg, #ff1a1a 0%, #fb5607 100%)
用途: Step 1（情熱から行動へ）

blue-to-purple: 
linear-gradient(135deg, #1738ff 0%, #8338ec 100%)
用途: Step 2（論理から創造へ）

green-to-cyan: 
linear-gradient(135deg, #33ff99 0%, #00f5ff 100%)
用途: Step 3（成長から発見へ）

multi-gradient: 
linear-gradient(135deg, #ff006e 0%, #fb5607 50%, #ffbe0b 100%)
用途: Hero section（トロピカル・ビビッド）

タイポグラフィ戦略

Design H/Jack のタイポグラフィは、ダークポップの未来的な雰囲気と、実用的なUIの読みやすさを両立させる設計です。

フォント構成

Orbitron（アクセントフォント）

特徴:

  • 幾何学的なサンセリフ
  • SF的な印象
  • 未来的でダークポップの世界観に合致

用途:

  • 見出し
  • 強調したいキャッチコピー
  • 数値表示
  • 特別なUI要素

理由:
ブランドの個性を強く打ち出し、プロフェッショナルな印象を与える。

Noto Sans JP（メインフォント）

特徴:

  • 視認性の高いゴシック体
  • 日本語に最適化
  • 長文の可読性が高い

用途:

  • 本文
  • UI要素全般
  • 説明文
  • ボタンテキスト

理由:
長文の可読性とアプリUIの使いやすさを担保。ユーザーが毎日使うツールとして、読みやすさは最優先。

グリッチエフェクト

用途:
見出しや装飾の一部に適用

目的:
ダークポップの世界観を強調、挑戦的な印象を与える

注意点:
多用せず、アクセント的に使用。可読性を損なわないよう配慮。

セマンティックカラー

UIの実装時に使用する、意味を持ったカラー定義。

/* 前景色 */
--theme-color-fg: var(--colored-white);

/* 背景 */
--theme-color-surface: var(--colored-black);

/* 薄いテキスト */
--theme-color-muted: var(--gray-30);

/* 反転前景色 */
--theme-color-fg-inverse: var(--colored-black);

/* 反転背景 */
--theme-color-surface-inverse: var(--colored-white);

/* 反転薄いテキスト */
--theme-color-muted-inverse: var(--gray-70);

これにより、ダークモード/ライトモードの切り替えや、テーマ変更が容易に。

媒体別の表現強度

Web サイト（LP）

世界観をフルに表現

初見のユーザーにアプリの個性と魅力を伝えます。

  • Spotify Wrapped風グラデーション
  • ダイナミックな図形・アニメーション
  • 大胆な配色・タイポグラフィ
  • ストーリーテリング
  • 数字で見せるインパクト
  • SNS映えする構図

アプリ

ダークポップの世界観を保ちながら、投稿画像が主役に

投稿閲覧エリアでは画像を際立たせる工夫（白マット方式など）を施し、それ以外のエリアではネオンアクセントやダーク背景で世界観を表現。機能性と世界観の両立を実現。

  • Discord/Notion風レイアウト
  • ダークモード基調
  • ネオンアクセント（控えめ）
  • シンプルなUI
  • 投稿画像が主役

デザインシステムの実装

CSS変数による管理

すべてのカラーとタイポグラフィをCSS変数で管理することで、保守性と拡張性を確保。

:root {
  /* Base Colors */
  --colored-black: #0e0e0e;
  --colored-white: #f5f5f5;
  
  /* Theme Colors - Red */
  --theme-color-red-primary: #ff1a1a;
  --theme-color-red-accent: #33ff99;
  
  /* Theme Colors - Blue */
  --theme-color-blue-primary: #1738ff;
  --theme-color-blue-accent: #39ff14;
  
  /* Typography */
  --font-heading: 'Orbitron', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
}

コンポーネント設計

各UIコンポーネントで一貫したスタイルを適用。

.button-primary {
  background: var(--theme-color-red-primary);
  color: var(--colored-white);
  font-family: var(--font-body);
  box-shadow: var(--theme-color-red-shadow);
}

.heading-large {
  font-family: var(--font-heading);
  color: var(--theme-color-red-primary);
  text-shadow: var(--theme-color-red-shadow);
}

アクセシビリティへの配慮

コントラスト比

WCAG 2.1 AA基準を満たすコントラスト比を確保。

  • テキスト（本文）: 最低4.5:1
  • 大きなテキスト（見出し）: 最低3:1

ダークモードでの配慮

  • 完全な黒（#000000）を避け、#0e0e0eを使用
  • 長時間使用しても目が疲れにくい
  • テキストと背景のコントラストを適切に調整

まとめ

Design H/Jack のブランディングとデザインシステムは、ダークポップという世界観を具体的な実装レベルまで落とし込んだものです。

カラーパレット:
Red（グラフィックデザイン）とBlue（Webデザイン）という2つの世界を象徴。ネオンアクセントで挑戦的な印象を強調。

タイポグラフィ:
Orbitron（未来的・個性）とNoto Sans JP（読みやすさ）の使い分けで、世界観と機能性を両立。

セマンティックカラー:
CSS変数による体系的な管理で、保守性と拡張性を確保。

媒体別の表現強度:
LP（100%）とアプリ（30%）で世界観の表現度を調整し、それぞれの目的に最適化。

このデザインシステムにより、一貫性のあるブランド体験を提供しながら、毎日使うツールとしての使いやすさも実現しました。

関連記事:

GitHub: [リンク]
Live Demo: [リンク]