厳選・オープン・無料

Dribbble

ビジュアルストーリーテリングを通じてデザイナーとクライアントを繋ぐ、キュレーションされたマーケットプレイス。

01

デザイン DNA

デジタルデザインポートフォリオのための、クリーンなギャラリストyleの展示ホール。

02

カラー

カラフルなユーザー生成作品を主役に引き立てるために設計された、ハイコントラストでニュートラルな基盤。

03

タイポグラフィ

grotesque-sans

• display52px · 600
• headline32px · 600
• body-lg16px · 400
• body14px · 400
• caption12px · 400

大きなディスプレイ見出しには-1pxの字間を設定し、タイトでプレミアムな印象を作成。 · 主要な見出しには600ウェイト、本文には400ウェイトを一貫して使用。

04

余白

厳格な4pxベースのグリッドと豊かな余白を組み合わせ、クリーンで空気感のあるレイアウトを維持。

05

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

1px solid rgba(13, 12, 34, 0.08)

0px 3px 6px rgba(0, 0, 0, 0.14) · 0px 15px 50px rgba(27, 32, 50, 0.1) · 0px 2px 4px rgba(6, 3, 24, 0.1)

06

レイアウト

モバイルで4カラムに縮小するレスポンシブな12カラムグリッド。

07

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

ボタンやカードのhover時のマイクロインタラクション。 · 背景色の変化に対する0.5秒のease-in-outトランジション。

カードの微細なシャドウの浮き上がりと、ボタンの背景色の変化。 · 0.05秒のカラートランジションによる即座のビジュアルフィードバック。

08

コンポーネント

• button 暗い背景に白テキストのピル型プライマリボタン。明るいグレーのボーダーを持つセカンダリボタン。
• card 最小限のメタデータを使用した画像中心のカード。12pxの角丸と微細なhoverシャドウを採用。
• chip ナビゲーションやフィルタリングに使用する、明るい背景の小さめの角丸タグ。
• input 統合されたアクションボタンとプレースホルダーテキストを持つ、大きな角丸の検索バー。
• hero 大胆な左寄せの見出しと右寄せのコンテクスト画像を組み合わせたスプリットレイアウトのヒーロー。

09

文体と禁止事項

• トーン 自信に満ち、プロフェッショナルで、ユーザーを力づける。
• 見出し 直接的で便益重視。太字のタイポグラフィを活用し、主要な特徴を強調。
• CTA 行動を促す明確な表現。注目度の高いCTAにはピル型ボタンを採用。

• セリフフォントを使用しない — スクリーンショットでは、全体を通してゴシック体（grotesque-sans）が一貫して使用されている。
• カードの角丸半径を12pxより大きくしない — スクリーンショットでは12pxが標準である。
• 高彩度の背景色を使用しない — スクリーンショットでは、白と明るいグレーのパレットが厳密に使用されている。
• ヒーローで左寄せテキストを使用しない — スクリーンショットでは、セクションによって中央揃えまたは右寄せレイアウトが使用されている。
• 細く、コントラストの低いボーダーを使用しない — スクリーンショットでは、rgba(13, 12, 34, 0.08)の明確な1pxボーダーが使用されている。
• ダークモードテーマを使用しない — スクリーンショットでは、純粋なライトモードのインターフェースが使用されている。
• 避ける: 過度にカジュアルまたはスラングの多い言葉遣い。
• 避ける: 指示文における受動態。
• 避ける: 文脈のない専門用語。

10

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

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

11

System Prompt

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