ITTO PORTFOLIO

Design H/Jack 開発記録 - 全体像

Design H/Jack開発記録プロジェクト管理UX

Design H/Jack 開発記録 - デザイン学習特化型SNSアプリの全体像 -

プロジェクト概要

Design H/Jack は、デザイン初学者が「見る力」と「言語化する力」を育てるための学習特化型SNSアプリです。街やWebで見つけたデザインを投稿し、コミュニティで視点を学び合うことで、独学でも質の高い学習体験を得られる場を目指しました。

  • 開発期間: 2024年XX月 - 2025年XX月（継続中）
  • 技術スタック: Next.js 15, TypeScript, Supabase, Cloudflare Workers
  • 役割: プロダクトデザイナー、フロントエンドエンジニア

課題発見：デザインスクールでの気づき

デザインスクールの授業で、作品を見ながら意見を交換し合う体験に強い価値を感じました。同じデザインでも、人によって見ているポイントが全く違う。その多様な視点に触れることで、自分の観察力が飛躍的に向上しました。

しかし、スクール外ではこの体験を得られない。

独学でデザインを学ぶ人は、自分の視点の偏りに気づけず、感覚的な判断から抜け出せません。この課題を解決するため、オンラインで同様の学習体験を提供するアプリを開発することにしました。

解決すべき3つのペインポイント

  1. 良いデザインを見ても、なぜ良いか分からない
    デザイン初学者は「きれい」「かっこいい」で終わってしまい、何を見るべきか、どう観察すべきかが分かりません。

  2. 一人では気づけない視点がある
    独学だと自分の観点の偏りに気づきにくく、新しい視点を得る機会が限られています。

  3. 良いデザインを見つけても忘れてしまう
    その場では「いいな」と思っても後で思い出せず、スマホのカメラロールに埋もれてしまいます。

ターゲット設定：3つのペルソナ

メインターゲットはデザイン学習中の18-28歳。3つのペルソナを設定し、それぞれの課題・感情・行動パターンを深掘りしました。

ペルソナ1: 美大生の佐藤あかり（22歳）
言語化できない悩みを抱え、作品講評で「なぜそうしたの？」と聞かれると答えられない。同じ目標を持つ仲間がほしいと感じている。

ペルソナ2: 独学デザイナーの田中健太（26歳）
IT企業でWebマーケターをしながら副業でデザインを学ぶ。フィードバックをもらえる場がなく、参考資料が散らばっていて管理できない。

ペルソナ3: デザイン初心者の山田ゆい（19歳）
専門学校1年生。デザインの勉強を何から始めればいいか分からず、センスがないと思い込んでいる。失敗しても大丈夫という安心感がほしい。

カスタマージャーニーマップを作成し、各ペルソナの感情の流れを可視化。どのタイミングでどんな体験を提供すべきかを設計しました。

ブランド戦略：「ダークポップ」の定義

ターゲットユーザーの70-82%がダークモードを使用している事実から、ダーク基調を選択。しかし、サイバーパンクのように「冷たく攻撃的」では初心者が怖がります。

そこで、サイバーパンクとネオポップを融合した独自の「ダークポップ」を定義しました。

配合比率：サイバーパンク40% × ネオポップ60%

サイバーパンク要素（かっこいい）:

  • ダーク背景（#0e0e0e）
  • ネオンアクセント
  • 未来的タイポグラフィ（Orbitron）

ネオポップ要素（親しみやすい）:

  • ビビッドなアクセントカラー（Red, Blue, Green, Yellow）
  • 親しみやすい言葉遣い（「なんか好き」「一緒に学ぼう」）
  • 絵文字の使用

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

カラーパレット：2つのデザイン世界を象徴

グラフィックデザイン（Red系）とWebデザイン（Blue系）という2つの異なる世界を、対極的な色で表現。

  • Red系: #ff1a1a + #33ff99（Accent）
  • Blue系: #1738ff + #39ff14（Accent）
  • Yellow: #ffe924（ハイライト）

技術選定とアーキテクチャ

技術スタック

フロントエンド:

  • Next.js 15（App Router）
  • TypeScript
  • CSS Modules（Tailwind非依存でブランド独自性を維持）
  • React Aria

バックエンド（予定）:

  • Supabase PostgreSQL
  • Supabase Auth
  • Supabase RLS

デプロイ:

  • Cloudflare Workers（OpenNext）

選定理由

Next.js 15: App Routerによる直感的なルーティング、Server Componentsでパフォーマンス最適化、Cloudflare Workers対応。

Supabase: PostgreSQLベースで柔軟なデータモデリング、RLSによるセキュアなデータアクセス制御、認証機能が標準装備。

CSS Modules: スコープ付きスタイリングで保守性向上、Tailwind非依存でブランド独自性を維持。

アーキテクチャ方針

MVP段階では最小構成でスタートし、成長に応じて段階的に拡張する方針を採用。詳細な設計は実装時に決定していく柔軟なアプローチを取りました。

MVP実装：マーケティングサイト

デザイン実装のこだわり

Spotify Wrapped風グラデーション:
トレンド感と親しみやすさを出すため、Spotify Wrappedスタイルのグラデーションを各セクションに採用。

ネオングロー効果:
ロゴやCTAボタンに控えめなグロー効果を適用し、ダークポップの世界観を表現。

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

レスポンシブ対応:
モバイルファーストで設計し、全セクションで快適な閲覧体験を実現。

学びと今後の展開

開発中の学び

1. ユーザーリサーチの重要性
ペルソナ設定とカスタマージャーニーマップを作成したことで、機能の優先順位が明確になりました。

2. 世界観設計の価値
「ダークポップ」という独自の世界観を定義したことで、デザイン判断がスムーズになり、一貫性のあるブランド体験を構築できました。

3. 段階的実装の効率性
最初から完璧を目指さず、MVPで検証しながら進める方針が、スピード感のある開発につながりました。

今後の実装予定

  • ユーザー認証・デザイン投稿機能
  • 検索・フィルター機能
  • コミュニティ機能（いいね、コメント、フォロー）
  • ブログ機能（Tiptapエディタ）
  • 有料機能（お気に入りフォルダ分け、非公開投稿）

まとめ

Design H/Jackは、デザインスクールでの学びの体験をオンラインで再現し、独学でも質の高いデザイン学習を可能にするアプリです。UXリサーチ、ブランド戦略、技術選定、フロントエンド実装まで、プロダクト開発の全体像を経験することができました。

詳細記事:

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