厳選・オープン・無料
SiteInspire
ウェブの最高のデザインと才能を紹介する、プレミアムでミニマリストなキュレーションギャラリー。
designgallery
01
デザイン DNA
デザインショーケースインスピレーションキュレーションギャラリーディレクトリ
デジタルデザインのキュレーションされた博物館展覧会
02
カラー
#18181bInk
#71717aInk soft
#f4f4f5BG
#fafafaBG soft
#ffffffBG quiet
#a1a1aaMuted
rgba(228,228,231,1)Line
モノクロで抑制的。柔らかなオフホワイトのキャンバスに依存し、紹介されているカラフルなデザイン作品が競合せずに息を吹き込まれる空間を提供します。
03
タイポグラフィ
grotesque-sans
- display
56px · 500 - heading
30px · 500 - body
14px · 400
すべてのテキストに、緊密なトラッキング（-0.4px）を使用し、コンパクトでハイエンドなエディトリアル感を維持します。 · 本文テキストは比較的小さなサイズ（14px）を維持し、ギャラリーサムネールの視覚的な密度を優先します。 · ウェイト500は、見出し、サブ見出し、アクティブなナビゲーションアイテムにのみ予約します。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
すべての内部パディングとマージンに、一貫した4pxのマイクログリッドを使用し、緊密で予測可能な構造を作り出します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 2px
md · 4px
lg · 9999px
pill · 9999px
構造的な区切りやカードのアウトラインに、1px solid rgb(228,228,231)を使用します。
0px 0px 0px 0px rgba(0,0,0,0) · 0 4px 6px -1px rgba(0,0,0,0.05)
06
レイアウト
1400container
12columns
24pxgutter
768 / 1024breakpoints
固定のトップナビゲーションバーの下に、フルワイドのヒーローエリアが配置されます。その下に、柔軟なグリッドレイアウト（通常3カラム）がプロジェクトのサムネールを表示し、折りたたみ可能なフッターがカテゴリーナビゲーションを担当します。
07
モーションとインタラクション
150msmicro
150mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
ホバー時の透明度と色に対する、迅速な150msのトランジション。 · ボーダーカラーやバックグラウンドカラーなどのインタラクティブな状態変化に対する、より滑らかな0.15sのトランジション。
テキストリンクやUI要素に対する微細な色の変化。全体的な落ち着いた美学を維持します。 · インタラクティブ要素には標準のポインターカーソル。トランジションによる即座のビジュアルフィードバックを提供します。
08
コンポーネント
- button 「サインイン」などの主要なアクションには、ピルシェイプ（border-radius: 9999px）を採用し、通常はダークなソリッド背景を使用します。ナビゲーションには標準的なテキストリンクを使用します。
- card 大きなサムネール画像と、メタデータ（タイトル、日付、著者）がその下にきれいに整列された、シンプルでボーダーレスまたは軽いボーダーのコンテナ。
- chip フッターセクションのテキストベースのカテゴリータグ。シンプルなテキストリンクの水平リストとして表示されます。
- input トップナビゲーションのミニマリストな検索インプット。主に虫眼鏡アイコンとシンプルなテキストラベルで示されます。
- hero 柔らかなグレーの背景に対して、フィーチャープロジェクトのスクリーンショットを水平にスクロールする大きなカルーセルエリア。
09
文体と禁止事項
- トーン 権威があり、キュレーションされ、客観的。
- 見出し 直接的で簡潔、力強いステートメント（例：「ウェブの最高のデザインと才能のショーケース」）。
- CTA ミニマリストでアクション指向。しばしば単一の単語または短いフレーズ（例：「サインイン」、「登録」）。
- ビビッドでハイコントラストのアクセントカラーを使用しない — スクリーンショットは、ロゴの1つの控えめなレッドドットのみを含む厳格なモノクロパレットを示しています。
- 装飾的、セリフ、またはスクリプトフォントを使用しない — スクリーンショットはクリーンで均一なグロテスクサンスに限定して使用しています。
- 重いドロップシャドウや複雑なボーダーラディウスを実装しない — スクリーンショットは主にフラットなサーフェスで、最小限のラディウス（2px、4px、またはピルシェイプ）を示しています。
- 過度のテキストや複雑なUIコンポーネントでインターフェースを混雑させない — スクリーンショットはクリーンで画像ファーストのグリッドレイアウトに大きく依存しています。
- 大きく、分厚いボタンスタイルを使用しない — スクリーンショットは、十分なホワイトスペースを確保したミニマリストでピルシェイプのボタンを示しています。
- 厳格な4pxベースグリッドから逸脱しない — スクリーンショットは、すべての要素を通じて非常に一貫した、緊密なスペーシングパターンを示しています。
- 避ける: 過度にカジュアルまたは熱狂的な言葉を避ける。
- 避ける: 視覚的な雑然とした感じや複雑な装飾要素を避ける。
- 避ける: 紹介されている作品から注意をそらす、明るく競合するアクセントカラーを避ける。
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
SiteInspireは、ウェブの最高のデザインと才能を紹介する、プレミアムでミニマリストなキュレーションギャラリーです。厳格なモノクロパレットを使用します：柔らかなオフホワイトの背景（#f4f4f5）、深いインクのテキスト（#18181b）、控えめなセカンダリテキスト（#71717a）。タイポグラフィは、クリーンでトラッキングの緊密なグロテスクサンスに完全に依存します。重要な禁忌は以下の通りです：明るく競合するアクセントカラーを決して使用しない；装飾的またはセリフフォントを決して使用しない；重いドロップシャドウを決して実装しない；そして常に厳格な4pxベースのスペーシンググリッドを維持する。デザインは、画像ファーストのグリッドを通じて視覚的な密度を優先し、紹介されているコンテンツを主要なビジュアル要素として扱います。
en · zh-CN · zh-TW · ja · ko