厳選・オープン・無料
Josh Comeau
明るく遊び心のあるイラストレーションと明瞭なタイポグラフィを用い、複雑なコーディング概念を身近なものにする教育系Web開発者ブログ。
portfolioblog
01
デザイン DNA
教育的親しみやすいアクセシブル技術的フレンドリー
複雑なWeb技術を色鮮やかなインタラクティブな比喩で説明する、フレンドリーなイラスト入り教科書。
02
カラー
#E60067Accent
#0A0C10Ink
#294E60Ink soft
#FFFFFFBG
#B1DFF6BG soft
#F0F4F6BG quiet
#5A6072Muted
rgba(10, 12, 16, 0.1)Line
明るく空気感のある美学で、シグネチャーのスカイブルー(#B1DFF6)と鮮やかなマゼンタアクセント(#E60067)を核とし、最大限の可読性のために深いネイビーのテキスト(#0A0C10)で安定させています。
03
タイポグラフィ
geometric-sans · monospace
- display
36px · 700 - heading
24px · 600 - subtitle
19px · 400 - body
16px · 400 - caption
14px · 400
カテゴリーラベルには大文字と広い文字間隔を使用します。 · モノスペースフォントは、コードスニペットと技術用語に限定して使用します。 · 長文の可読性のために、豊かなline-height(1.5)を維持します。 · 太字のウェイトは控えめに使い、レイアウトを圧迫せずに重要な用語を強調します。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
4pxのベースグリッドが一貫したリズムを確保し、構造要素間には24pxのゆったりとした間隔を、主要なセクション区切りには48〜96pxの余白を設けています。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
カードや入力フィールドにはニュートラルなグレー(例: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
レイアウト
1200container
12columns
24pxgutter
768 / 1024breakpoints
「人気のコンテンツ」と「カテゴリ」のための狭いサイドバー(300px)と、広いメインコンテンツカラムを持つ2カラムレイアウト。
07
モーションとインタラクション
125msmicro
300mssmall
500msmedium
cubic-bezier(0.06, 0.63, 0.43, 1)easing
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
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
このサイトはフレンドリーな教育系Web開発者ポートフォリオおよびブログです。美学は明るく空気感があり、ヒーローセクションにシグネチャーのスカイブルー(#B1DFF6)、ハイライトに鮮やかなマゼンタアクセント(E60067)を使用しています。タイポグラフィはクリーンでジオメトリックで、可読性と明確な階層構造に焦点を当てています。レイアウトはゆったりとしており、豊かな余白と控えめなボーダーでセクションを定義しています。主要な禁止事項には、プライマリーテーマとしてダークモードを使用しないこと、本文にセリフフォントを使用しないこと、窮屈でコントラストの低いレイアウトを作成しないことが含まれます。全体的な印象は歓迎的で励ますようなもので、複雑な技術的なトピックを身近に感じさせます。
en · zh-CN · zh-TW · ja · ko