厳選・オープン・無料
Superhi
クリエイティブ技術スキルのためのオンライン学習プラットフォーム。大胆でカラフル、フレンドリーなビジュアル言語を使用。
EducationCreativeBold TypographyPlayfulConsumer
01
デザイン DNA
クリエイティブキャリア学習遊び心コミュニティ実践スキル
クリエイティブな遊び場のような、カラフルで親しみやすい学習スタジオ。
02
カラー
#2727E6Accent
#111118Ink
#F0F6FFBG
rgba(17, 17, 24, 0.1)Line
鮮やかな黄色と青のプライマリパレットがデザインを支え、柔らかな青の背景が大胆な幾何学形状のためのクリーンなキャンバスを提供します。
03
タイポグラフィ
grotesque-sans · monospace
- display
72px · 400 - h1
48px · 400 - body
16px · 400
全テキストレベルにクリーンで中立的な grotesque-sans を使用 · 大きなディスプレイテキストには Tight negative tracking を維持 · 技術的またはセカンダリなアクセントには monospace を使用
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
4px グリッドシステムに一貫性を持たせ、ゆったりとした padding と gap を使用し、開放的な印象を実現。
05
サーフェス (角丸 / 影 / 罫線)
sm · 8px
md · 16px
lg · 24px
pill · 999px
最小限で、インタラクティブ要素にはしばしば実線のダークまたは青いラインを使用。
rgba(18, 18, 151, 0.133) 0px 3.2px 4px 0px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
中央揃えの縦方向スタック。大きく空気感のあるセクションと、オーバーラップする幾何学背景要素を含む。
07
モーションとインタラクション
200msmicro
400mssmall
800msmedium
cubic-bezier(0.37, 0, 0.63, 1)easing
インタラクティブ状態に滑らかなトランジション · トランスフォームベースのアニメーションにバネのようなイージング
リンクやボタンに微かな色や透明度の変化。 · 即座の視覚的フィードバック。おそらく軽微なスケールや色の変化。
08
コンポーネント
- button 角丸のピル型ボタン。塗りつぶし（青または黒）と白いテキストを使用。
- card 角丸（16-24px）で軽い青い影を持つ白いカード。推薦文に使用。
- hero 中央揃えのテキスト、マスコットアイコン、大胆な幾何学背景形状を含む、大きな縦方向スタックセクション。
09
文体と禁止事項
- トーン フレンドリーで励ましとなる、率直なトーン。
- 見出し ユーザーを力づける、大胆で行動指向のステートメント。
- CTA 「カタログを見る」「無料コースを試す」など、明確で率直な行動喚起。
- ダーク背景を使用しない — サイトは明るく柔らかな青（#F0F6FF）をプライマリキャンバスとして明確に使用しています。
- セリフフォントを使用しない — サイト全体はクリーンで中立的な grotesque-sans フォントカテゴリで構築されています。
- ボタンを角張った形状にしない — デザインは一貫して角丸のピル型ボタンを使用します。
- 淡色やパステルのみのパレットを使用しない — サイトは鮮やかで高彩度のアクセント（明るい黄色、深い青など）を特徴としています。
- 密集した小規模レイアウトを作成しない — デザインは大きな余白とゆったりとした padding を優先します。
- 1つのコンポーネントに複数のアクセントカラーを使用しない — 各セクションは通常、1つのプライマリアクセントカラーを強調します。
- 避ける: 過度な技術用語
- 避ける: -formalで硬い言葉遣い
- 避ける: 雑然としたまたは密度の高いテキストブロック
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Superhiはクリエイティブ技術スキルのためのオンライン学習プラットフォームです。そのデザインDNAは、遊び心のあるフレンドリーで大胆なビジュアル言語が特徴です。コアパレットは柔らかな青の背景（#F0F6FF）に、深い青（#2727E6）と明るい黄色（#FFE600）の鮮やかなアクセントを使用。タイポグラフィはクリーンで中立的な grotesque-sans で、大きなディスプレイテキストには Tight tracking を使用。重要な制約：ダークモード背景は決して使用せず、セリフフォントは完全に避け、ボタンは角張った形状にしないこと。レイアウトは空気感があり、中央揃えで、大胆な幾何学形状を遊び心のある背景要素として使用。
en · zh-CN · zh-TW · ja · ko