厳選・オープン・無料

Josh Comeau

明るく遊び心のあるイラストレーションと明瞭なタイポグラフィを用い、複雑なコーディング概念を身近なものにする教育系Web開発者ブログ。

01

デザイン DNA

複雑なWeb技術を色鮮やかなインタラクティブな比喩で説明する、フレンドリーなイラスト入り教科書。

02

カラー

明るく空気感のある美学で、シグネチャーのスカイブルー（#B1DFF6）と鮮やかなマゼンタアクセント（#E60067）を核とし、最大限の可読性のために深いネイビーのテキスト（#0A0C10）で安定させています。

03

タイポグラフィ

geometric-sans · monospace

• display36px · 700
• heading24px · 600
• subtitle19px · 400
• body16px · 400
• caption14px · 400

カテゴリーラベルには大文字と広い文字間隔を使用します。 · モノスペースフォントは、コードスニペットと技術用語に限定して使用します。 · 長文の可読性のために、豊かなline-height（1.5）を維持します。 · 太字のウェイトは控えめに使い、レイアウトを圧迫せずに重要な用語を強調します。

04

余白

4pxのベースグリッドが一貫したリズムを確保し、構造要素間には24pxのゆったりとした間隔を、主要なセクション区切りには48〜96pxの余白を設けています。

05

サーフェス (角丸 / 影 / 罫線)

カードや入力フィールドにはニュートラルなグレー（例：rgba(10, 12, 16, 0.1)）の細く控えめなボーダーが使用され、カテゴリータグは少し強調された線を使用します。

0px 2px 4px rgba(0, 0, 0, 0.02) · 0px 4px 12px rgba(0, 0, 0, 0.03) · 0px 8px 24px rgba(0, 0, 0, 0.05)

06

レイアウト

「人気のコンテンツ」と「カテゴリ」のための狭いサイドバー（300px）と、広いメインコンテンツカラムを持つ2カラムレイアウト。

07

モーションとインタラクション

UI状態変化のための滑らかなopacityトランジション。 · インタラクティブ要素のための控えめなtransformアニメーション。 · コンテンツセクションのための段階的な登場アニメーション。

インタラクティブ要素に即座の視覚的フィードバックを与える、控えめなスケーリングや色の変化。 · 最小限の遅延で、新しい状態やページへの滑らかなトランジション。

08

コンポーネント

• button シンプルなテキストベースのボタン、または軽い背景色と角丸を備えた、控えめなピル型タグ。
• card 明確なタイポグラフィの階層構造と、強調のための控えめな背景色を持つ、クリーンな端から端までのコンテンツカード。
• chip 分類（例：CSS、React）に使用される、大文字テキストの小型ピル型タグ。
• input 控えめなボーダーと明確なフォーカス状態を備えた、クリーンで角丸の入力フィールド。
• hero 3Dスタイルのグラフィックとライトブルーのグラデーション背景を特徴とする、フルワイドのイラスト入りヒーローセクション。

09

文体と禁止事項

• トーン フレンドリーで親しみやすく、励ますような、 helpful mentorのようです。
• 見出し 明瞭で直接的、かつメリット重視で、「…のインタラクティブガイド」や「…のフレンドリーな紹介」のような表現がよく使われます。
• CTA コンテンツフローに自然と溶け込む、控えめなテキストベースのアクション。

• メインコンテンツエリアにダーク背景を使用しない — スクリーンショットは明るく、明るい背景の美学を示しています。
• 完全にモノクロームまたはグレースケールのパレットを使用しない — デザインは鮮やかなスカイブルーとマゼンタアクセントに依存しています。
• 本文に伝統的なセリフフォントを使用しない — スクリーンショットはクリーンなジオメトリックなサンセリフとモノスペースのみを使用しています。
• UIコンポーネントに強調の黒いボーダーを使用しない — ボーダーは控えめで軽く、 often transparent or gray。
• tight marginsでレイアウトを過密にしない — デザインは豊かな余白と明確なセクション区切りを使用しています。
• ボタンやカードにシャープな90度の角を使用しない — スクリーンショットは一貫して角丸（4-12px）を使用しています。
• 避ける: 密度が高く、理解しにくい専門用語。
• 避ける: 個人の感覚を欠いた、企業的な話し方。
• 避ける: 過度にドラマチックまたはセンセーショナルな言葉。
• 避ける: 退屈な、教科書のような文章。

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko