Duolingo にインスパイアされたデザインシステム

Category: 生産性 & SaaS 語学学習プラットフォーム。明るいフクロウグリーン、ぶ厚いシャドウ、ゲーミフィケーションの喜び。

1. ビジュアルテーマと雰囲気

Duolingo はゲーミフィケーションをビジュアル言語として体現したデザインです。インターフェースは遠慮なく鮮やかで、フクロウグリーン（#58cc02）をブランドプライマリとし、すべてのインタラクティブ要素の下部に 4px のぶ厚いシャドウを持ち、まるで押されるのを待っている 3D ボタンのように見えます。ページは白（#ffffff）で、2〜3px の太いボーダーは深いグレー（#e5e5e5）、システム全体がより良い階層構造で生まれ変わった 2015 年の iOS アプリのように読めます。

タイポグラフィは、クロームに Feather Bold（カスタムの丸みを帯びたサンセリフ）、本文に Mona Sans（または Inter）を使用しています。ディスプレイサイズは大きく自信に満ちており——Duolingo は決してささやきません。見出しはグリーンのアンダーラインストロークを持つか、グリーンのピルの上に置かれることが多く、マスコットの Duo（緑のフクロウ）は静的なロゴではなく、アクティブなイラストキャラクターとして登場します。

形状言語は親しみやすく：カードは 16〜20px の角丸、ボタンは 12px、チップとプログレスバーは 9999px です。アイコノグラフィは塗りつぶし、丸みを帯び、スキルでカラーコード化されており——すべてのレッスン面には一目で識別できるカラーペアリングがあります。

主要な特徴：

• フクロウグリーン（#58cc02）が支配的なブランドカラーとして、サーフェスの 30% 以上を占める
• すべてのボタンに 4px のぶ厚いボトムシャドウ（「触覚的プレス」のアフォーダンス）
• 2〜3px のソリッドボーダー、ヘアラインは一切使わない
• Feather Bold（丸みのあるディスプレイ）＋ Mona Sans（本文）
• 大きく自信のあるテキスト——ディスプレイサイズは 48px から始まり上昇する
• マスコット＝キャラクター：Duo フクロウはオンボーディング、エラー、ストリークに登場
• ストリークオレンジ（#ff9600）とジェムピンク（#ce82ff）がセカンダリブランドカラー

2. カラーパレットと役割

プライマリ

• フクロウグリーン（#58cc02）：ブランドプライマリ、プライマリ CTA、正解。
• フクロウグリーンディープ（#58a700）：グリーンボタンのプレス/シャドウカラー。
• フクロウグリーンライト（#89e219）：ホバー、ソフトフィル。
• フクロウグリーンペール（#dbf8c5）：ソフトサーフェス、成功バナー。

セカンダリアクセント

• ストリークオレンジ（#ff9600）：ストリークカウンター、炎アイコン、プレミアムエネルギー。
• ストリークオレンジディープ（#cc7a00）：オレンジのプレス状態。
• ジェムピンク（#ce82ff）：ジェム通貨、Super Duolingo。
• ウナギブルー（#1cb0f6）：ヒントボタン、情報リンク。
• カーディナルレッド（#ff4b4b）：不正解、ライフ喪失。
• ビーイエロー（#ffc800）：プロバッジ、実績。

サーフェス

• スノー（#ffffff）：プライマリ背景。
• ウナギ（#f7f7f7）：セクション区切り、セカンダリサーフェス。
• スワン（#e5e5e5）：無効化背景、インセットブロック。
• ウルフ（#777777）：ダークディバイダー、セカンダリテキスト。

インクとテキスト

• ウナギブラック（#3c3c3c）：プライマリテキスト。
• ウルフ（#777777）：セカンダリテキスト、キャプション。
• ヘア（#afafaf）：無効化、プレースホルダー。

ボーダー

• スワン（#e5e5e5）：標準 2px ボーダー。
• ヘア（#afafaf）：ホバー時の強調ボーダー。

3. タイポグラフィルール

フォントファミリー

• ディスプレイ / UI / 見出し：Feather Bold、フォールバック：'DIN Round Pro', 'Helvetica Neue', sans-serif
• 本文 / 長文：Mona Sans、フォールバック：'Helvetica Neue', system-ui, sans-serif
• コード（稀、学校/管理）：JetBrains Mono、フォールバック：ui-monospace, Menlo, monospace

階層

原則

• 800 がデフォルト：Feather Bold は見出しとボタンで 800 で動作します。700 はこのシステムでは弱く見えます。
• 大きなタイプ：見出しサイズは典型的なプロダクトブランドより 25〜40% 大きく——自信がアイデンティティです。
• 丸みのある字形：すべてのグリフにソフトなターミナルがあります。シャープなセリフは親しみやすさの契約を壊します。

4. コンポーネントスタイリング

ボタン

プライマリ（フクロウグリーン）

• 背景：#58cc02
• テキスト：#ffffff
• パディング：14px 24px
• 角丸：16px
• ボーダーボトム：4px solid #58a700（ぶ厚いシャドウ）
• ホバー：背景 #89e219
• アクティブ：translate-y 4px、ボーダーボトム 0（ボタンが「押される」）
• 使用：「続ける」、「確認」、メイン CTA。

セカンダリ（ボトムシャドウ付き白）

• 背景：#ffffff
• テキスト：#777777
• ボーダー：2px solid #e5e5e5
• ボーダーボトム：4px solid #e5e5e5
• 角丸：16px
• パディング：14px 24px
• ホバー：テキスト #3c3c3c、ボーダー #afafaf

ストリークオレンジ

• 背景：#ff9600
• テキスト：#ffffff
• ボーダーボトム：4px solid #cc7a00
• 使用：ストリークゴール、「ストリーク開始」

エラー（カーディナルレッド）

• 背景：#ff4b4b
• テキスト：#ffffff
• ボーダーボトム：4px solid #cc3b3b
• 使用：不正解フィードバック。

カード / レッスンタイル

• 背景：#ffffff
• ボーダー：2px solid #e5e5e5
• ボーダーボトム：4px solid #e5e5e5
• 角丸：16px
• パディング：16px
• ホバー：2px 浮上、シャドウ 0 4px 0 #d7d7d7

スキルツリーノード（レッスンバブル）

• サイズ：80×72px
• 背景：スキルカラー色調（アクティブは緑、ロック済みはグレー）
• ボーダーボトム：6px solid 暗いバリアント
• 角丸：50%（円形）
• アクティブ：1.6s ごとに 1.0 → 1.05 でパルス

入力

• 背景：#ffffff
• ボーダー：2px solid #e5e5e5
• 角丸：12px
• パディング：12px 16px
• フォーカス：ボーダー #1cb0f6（ウナギブルー）、リング 0 0 0 3px rgba(28, 176, 246, 0.2)

プログレスバー

• トラック：#e5e5e5
• フィル：#58cc02（またはストリーク時 #ff9600）
• 角丸：9999px
• 高さ：16px
• アニメーションフィル：増分時 320ms ease-out。

5. スペーシングとレイアウト

• ベースユニット：4px。スケール：4、8、12、16、24、32、48、64。
• コンテナ：最大 1080px、24px ガター。
• レッスンツリー列：幅 320px；デスクトップで中央配置。

6. モーション

• デュレーション：ボタンプレス 180ms；スキルノードアンロック 320ms；アクティブノードパルス 1.6s。
• イージング：cubic-bezier(0.34, 1.56, 0.64, 1)（バックアウト、わずかなオーバーシュート）アンロック用。
• マスコット：Duo は 4〜6s ごとにまばたきし、ストリークのマイルストーンでジャンプ（480ms ease-out スプリング）。

7. 使用ガイドライン

• 高彩度のフクロウグリーン、ぶ厚いボトムシャドウ、丸みのあるレッスンジオメトリは一緒に保ってください。フラットなグリーンボタン単体では Duolingo らしく読まれません。
• 特大の太字テキストは、プロダクトが励ましやフィードバックを必要とするレッスン、ストリーク、進捗の瞬間のために取っておいてください。
• プレイフルなモーションは進捗状態の変化の周りに控えめに使い、すべてのコントロールに汎用のバウンシーアニメーションを使うのは避けてください。