Duolingo
白い紙に描かれた、遊び心のあるクラスのマスコット
Duolingoのインターフェースは、まるで子供向けの絵本のようにデザインされています。白い紙のキャンバスに、ふっくらとした丸みを帯びたフォント、そして「正解」をすぐに連想させる鮮やかな緑色が使われています。メインテキストは落ち着いた中間色のグレーで、緑色とアクセントカラーの青色が感情的な効果を担っています。緑色は進捗状況や見出し、青色はクリック可能なリンクや追加操作を表しています。コンポーネントは錠剤のような形、または角が丸みを帯びた形状で、太い黒または色の枠線で囲まれているため、各ボタンは平面的なUIコントロールというより、ページに貼られたステッカーのように感じられます。
セクションはページの全幅を占め、それぞれ高さ約800ピクセルの単一列に縦に配置されます。コンテンツの最大幅は約1ピクセルで中央揃えです。左側のテキストと右側のイラストが交互に配置され、セクション間に十分な縦方向のスペース（80ピクセル）が確保されています。グリッドカードや複数列レイアウトはなく、各セクションは単一のテキストブロックと単一のイラストで構成されています。ナビゲーションは、ロゴと言語セレクターを備えたミニマルなトップバーで、セクション間に固定バーとして表示されます。フッターは、ページの全幅にわたる緑色の帯です。リズムは編集的で、見出し、段落、コールトゥアクション、イラスト、繰り返しという構成になっています。
本書のイラストは、丸みを帯びた幾何学的な形状、太い黒の輪郭線、そしてインターフェース自体には登場しないピンク、紫、黄色、オレンジ、青の補色パレットを用いた、平面的で2次元的なマスコットキャラクター（フクロウのデュエットや様々な人物像）を特徴としています。イラストは、各セクションの右側のテキストの横に、コンテナや背景のない純白の背景に配置されています。写真は一切使用されておらず、キャラクターが視覚的なコンテンツとして機能しています。アイコンは、マスコットのスタイルに合わせて太い輪郭線を使用しています。画像密度は中程度で、各セクションにはキャラクターの大きなイラストが1つ掲載され、ページの残りの部分はタイポグラフィと余白に充てられています。
パレット
ブランド
- Eager Green
#58cc02— 緑色は、リンク、タグ、短いフレーズを強調表示するために使用されます。行動喚起のメインカラーとして使用すべきではありません。 - Storybook Green
#d7ffb8— 明るい表面には柔らかなハイライト、フッターのナビゲーションラベルの背景には繊細なトーンが用いられている。
中性
- Spark Blue
#1cb0f6— 青色は、リンク、タグ、短いフレーズを強調表示するために使用されます。行動喚起のメインカラーとして使用すべきではありません。 - Fresh Leaf
#a5ed6e— 緑色は、リンク、タグ、短いフレーズを強調表示するために使用されます。行動喚起のメインカラーとして使用すべきではありません。 - Night Ink
#000437— リンク、タグ、および強調表示された短いフレーズは紫色で強調表示されます。 - Paper White
#ffffff— ページキャンバス、厚紙の表面、緑/暗い背景にボタンのテキスト。 - Charcoal
#4b4b4b— ヒーローヘッダーと本文テキスト - 色付きの見出しを際立たせる、汎用的なダークテキスト。 - Pencil Gray
#777777— 主要な段落は目立たない文字で強調表示され、補助的な説明文は背景に溶け込むように配置されることで、色付きの要素が前面に出るようになっている。
タイポグラフィ
13ピクセルから64ピクセルまで · 7ステップ
- feather — 交換： Inter · 概要 700 · 「無料。楽しい。効果的」や「Duolingo英語テスト」などのセクション見出しは、カスタムの丸みを帯びたフォントで表示され、ブランドに遊び心のあるフレンドリーなマスコットのようなスタイルを与えています。適切な太さの「Feather Bold」または「Nunito Black」に置き換えてください。文字間隔：-0.0200em
- duolingo-sans — 交換： Inter · 概要 500 · メイン段落とナビゲーションリンクは、17px/500の幾何学的なサンセリフフォントを使用します。このフォントは読みやすさを維持し、700の線幅で重要なポイントを強調できます。「DIN Next」、「Inter」、または「Nunito Sans」に置き換えてください。
- duolingo-sans — 交換： Inter · 概要 700 · すべてweight-700の値を使用しています。ナビゲーションラベルの大文字は15px（ls 0.0530em）、小見出しは19pxと32px、リンクの強調は13pxです。本文と同じフォントを使用しており、視覚的な違いはフォントの変更ではなく、太さによるものです。ナビゲーションラベルの大文字の文字間隔は0.0530emです。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 12px |
| ボタンの半径 | 12px |
| カード半径 | 12px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 80-120px |
| ページ幅 | 1200px |
AI がDuolingoスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Family — クリーム色の羊皮紙に描かれたおとぎ話の一場面
- Say Briefly — クリーム色の紙に描かれたクリエイティブエージェンシーのスケッチブック
- Flying Papers — 土曜朝のアニメでの告白
- Portrait — クリーム色の紙にポラロイド写真で収められた思い出の壁。明るいクリーム色のスクラップブックには、濃い青色のインクが唯一の文字、唯一の構造線、唯一のフレームカラーとして使われている。手描きの虹が「登録」ボタンと斜体で書かれた「永遠に」という単語に一度だけ現れ、二度と現れることはない。
- Karl — 晴れた日に作られた、3Dポップアップブック風のジオラマ
- Navigate — ボードに貼られた大量のステッカー：大きなグロテスクなフォント、すべてタブレットの形をしており、5つの多色アイコンがロゴのように繰り返されている。
- Monte — 錆びたような色合いの海岸の朝
- MotherDuck — クリーム色の紙に色鉛筆で書かれた端末コード
- Wise Design — 世界の街角にあるネオンサインの露店――賑やかな市場の中で、鮮やかな緑色の看板がひときわ目を引く。その背後には、洗練された製品ユーザーインターフェースがさりげなく現れている。
- Hatch — 手描きのサミズダート風デザインに、パステルカラーのキャンディボウルがミックスされています。クリーム色の紙のキャンバスには、ミントのアクセント、紙吹雪のドット、そして錠剤型の行動喚起が飾られ、大きくて太字のセリフ体フォントが楽しさを暗示し、青いマスコットが隅でウィンクしています。
- Superr — 午後の柔らかな光に照らされた、温かみのあるノート。クリーム色のページ、キャップのないオレンジ色のマーカー、そして剥がされるのを待つラミネート加工された名前シールの束。
- Mews — 夜明けのホスピタリティ・コントロールセンターは、ピンク色に染まっている。白い壁に囲まれた陽光が差し込むワークスペースでは、太字の黒い文字、温かみのあるクリーム色のカード、そして鮮やかなピンクのアクションボタンが各画面を際立たせている。それは、企業の抑制ではなく、遊び心のある自信を象徴している。