ITTO PORTFOLIO

ダークポップという世界観 - サイバーパンクとネオポップの融合

Design H/Jackデザイン哲学UI/UXビジュアルデザイン

ダークポップという世界観 - サイバーパンクとネオポップの融合 -

はじめに

Design H/Jack の世界観「ダークポップ」は、サイバーパンクとネオポップという2つの異なるデザインスタイルを融合させた独自のアプローチです。ターゲットユーザーの特性を徹底的に分析した結果、「かっこいいけど怖くない」「プロっぽいけど敷居が高くない」という絶妙なバランスが必要だと分かりました。

この記事では、ダークポップという世界観をどう定義し、なぜこの配合比率にしたのかを解説します。

ダークポップとは何か

定義

ダークポップ = サイバーパンク40% × ネオポップ60%

サイバーパンクの「かっこよさ・未来感・プロフェッショナル感」と、ネオポップの「親しみやすさ・楽しさ・エネルギー」を組み合わせた独自の世界観です。

なぜ両方が必要なのか

サイバーパンクだけだと:

  • 冷たすぎる
  • 攻撃的で怖い
  • 初心者が近寄りがたい
  • 孤独感が強い

ネオポップだけだと:

  • 軽すぎる
  • 子供っぽい
  • プロフェッショナル感が薄い
  • デザインアプリとしての信頼感が欠ける

ダークポップ（融合）なら:

  • かっこいい + 親しみやすい
  • プロっぽい + 初心者歓迎
  • クール + 温かい
  • 刺激的 + 安心感

サイバーパンク要素（40%）- かっこいい

採用した要素

1. ダーク背景（#0e0e0e）

なぜ必要か:

  • 夜に使うアプリとして最適
  • 長時間使っても目が疲れない
  • ターゲットの70-82%がダークモード使用
  • 投稿画像を際立たせる（白マット方式との対比）

実装:

background-color: #0e0e0e; /* 完全な黒ではなく、少し明るい */

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

2. ネオンアクセント

なぜ必要か:

  • ダーク背景に映える
  • 視線誘導ができる
  • エネルギッシュな印象
  • 若者に刺さる

実装:

--theme-color-red-primary: #ff1a1a;
--theme-color-blue-primary: #1738ff;
--theme-color-red-accent: #33ff99;
--theme-color-blue-accent: #39ff14;

Red（グラフィックデザイン）とBlue（Webデザイン）という2つの世界を象徴。

3. 未来的なタイポグラフィ

なぜ必要か:

  • ブランドの個性を表現
  • プロフェッショナルな印象
  • デザインアプリとしての信頼感

実装:

  • Orbitron: 見出し、ロゴ（幾何学的、SF的）
  • Noto Sans JP: 本文、UI全般（読みやすさ優先）

4. グロー効果（控えめに）

なぜ必要か:

  • ネオン感を強調
  • 重要な要素を目立たせる
  • ダークポップらしさ

実装:

text-shadow: 0 0 20px rgba(255, 26, 26, 0.5);
box-shadow: 0 0 20px rgba(255, 26, 26, 0.3);

使用箇所はロゴ、メインCTA、特別な見出し、ホバー時の演出に限定。

採用しなかった要素

真っ黒な背景（#000000）

なぜ不要か:
重すぎる、威圧感がある、初心者が怖がる、長時間使うと目が疲れる

青・紫中心のネオン

なぜ不要か:
冷たすぎる、親しみが薄い、グラフィックデザイン（赤系）が表現できない

過度なグリッチエフェクト

なぜ不要か:
可読性が下がる、うるさい、気が散る、アクセシビリティに悪影響

反体制的・攻撃的なトーン

なぜ不要か:
初心者を怖がらせる、コミュニティに合わない、学習アプリには不適切

ネオポップ要素（60%）- 親しみやすい

採用した要素

1. ビビッドなアクセントカラー

なぜ必要か:

  • エネルギーを感じる
  • 楽しい雰囲気
  • 親しみやすさ
  • 若者に刺さる

実装:

Red: #ff1a1a
Blue: #1738ff
Green: #33ff99, #39ff14
Yellow: #ffe924
Orange: #ff6733
Violet: #e46cff
Aqua: #5ff2ea

カラフルで元気な印象を与えつつ、ダーク背景で落ち着きを保つ。

2. 親しみやすい言葉遣い

なぜ必要か:

  • 初心者が入りやすい
  • 怖くない
  • コミュニティ感
  • 継続したくなる

実装:

「その衝動を言葉で刻め」
「なんか好き」
「一緒に頑張ろう」
「君もできる！」
「見つけた！」

3. 絵文字の使用

なぜ必要か:

  • 親しみやすさ
  • 視覚的に分かりやすい
  • SNS世代に自然
  • 柔らかい印象

実装:

📸 Snap
🔓 H/Jack
✨ Create
❤️ いいね
💬 コメント
⭐ お気に入り

4. ポジティブなメッセージ

なぜ必要か:

  • 背中を押す
  • 挑戦を促す
  • 失敗を恐れない雰囲気
  • 成長マインドセット

実装:

成功メッセージ:
「素敵な発見をシェアしてくれてありがとう！」

エラーメッセージ:
「おっと！この形式は使えないみたい。JPEGかPNGで試してね」

オンボーディング:
「一緒にデザインの世界を冒険しよう！」

採用しなかった要素

白・明るい背景

なぜ不要か:
ターゲットの82%がダークモード使用、夜に使うと眩しい、目が疲れる

過度なグラデーション

なぜ不要か:
うるさくなる、投稿画像の邪魔、ごちゃごちゃする

手書き風フォント

なぜ不要か:
可読性が低い、カジュアルすぎる、デザインアプリとして信頼感が薄い

パステルカラー

なぜ不要か:
ダーク背景に合わない、エネルギー感が弱い、ネオン感が出ない

配合比率：40:60 が最適である理由

ターゲットのニーズ

求めているもの:
├── かっこいい（憧れ、プロっぽい）
│   → サイバーパンク要素で実現
│
└── 親しみやすい（安心、仲間、楽しい）
    → ネオポップ要素で実現

バランスの理由

サイバーパンク40%:

  • これ以上増やすと: 冷たくなる、怖くなる、敷居が高くなる
  • これ以下だと: かっこよさが足りない、差別化できない

ネオポップ60%:

  • これ以上増やすと: 軽すぎる、子供っぽい、信頼感が薄れる
  • これ以下だと: 親しみが足りない、初心者が入りにくい

40:60 が最適バランス:

  • かっこいいけど怖くない
  • プロっぽいけど敷居が高くない
  • 真剣だけど楽しい
  • クールだけど温かい

→ ターゲット（デザイン学習中の若者）に完璧に合致

採用要素マトリックス

| 要素 | サイバーパンク | ネオポップ | Design H/Jack | |------|--------------|----------|--------------| | ダーク背景 | ✅ 真っ黒 | ❌ 白・明るい | ✅ #0e0e0e（柔らかい黒） | | ネオンカラー | ✅ 青・紫中心 | ✅ カラフル | ✅ 赤・青・緑・黄（多色） | | タイポグラフィ | ✅ 未来的 | ❌ 手書き風 | ✅ Orbitron + Noto Sans | | グロー効果 | ✅ 強烈 | ❌ なし | ✅ 控えめに | | 言葉遣い | ❌ 攻撃的 | ✅ カジュアル | ✅ 親しみやすい | | 絵文字 | ❌ なし | ✅ 多用 | ✅ 適度に | | グリッチ | ✅ 多用 | ❌ なし | ✅ アクセント的に | | トーン | ❌ 冷たい | ✅ 温かい | ✅ かっこいい+温かい | | コミュニティ感 | ❌ 孤独 | ✅ 繋がり | ✅ 仲間意識 |

媒体別の表現強度

Web サイト（LP）

世界観: 100% フル表現

初見のユーザーにアプリの個性と魅力を伝えるため、ダークポップの世界観を最大限に表現。

  • Spotify Wrapped風グラデーション
  • ダイナミックな図形・アニメーション
  • 大胆な配色・タイポグラフィ
  • ストーリーテリング

アプリ

世界観: 30% 控えめアクセント

毎日使うツールとして、使いやすさを最優先。投稿画像が主役になるよう、世界観は邪魔しない程度に。

  • Discord/Notion風レイアウト（慣れている）
  • ダークモード基調（ブランドカラー維持）
  • ネオンアクセント（世界観の名残）
  • シンプルなUI（機能性優先）

まとめ

ダークポップは、サイバーパンクとネオポップを40:60で融合した独自の世界観です。

サイバーパンク（40%）:
ダーク背景、ネオンアクセント、未来的タイポグラフィ → かっこよさ、プロフェッショナル感

ネオポップ（60%）:
ビビッドカラー、親しみやすい言葉遣い、絵文字、ポジティブメッセージ → 親しみやすさ、楽しさ

この配合により、「かっこいいけど怖くない」「プロっぽいけど敷居が高くない」というターゲットに最適なバランスを実現しました。

関連記事:

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