厳選・オープン・無料

Godly

ウェブデザインのインスピレーションを展示するためのミニマルでハイエンドなキュレーションギャラリー。

01

デザイン DNA

アートワークだけが重要となる、清らかで広大なギャラリースペース。

02

カラー

多様なコンテンツの色のための中立的なフレームとして機能する、厳格なモノクロパレット。

03

タイポグラフィ

humanist-sans

• display56px · 500
• h232px · 500
• body16px · 400
• caption14px · 400

すべてのテキストにInterフォントファミリーを使用し、わずかな負の文字送りを適用。 · 見出しにはフォントウェイト500を使用し、セミボールドな外観を実現。 · 本文は読みやすさのために、ゆったりとした1.5の行間を維持。

04

余白

寛容な余白と一貫したパディングが、クリーンで息が詰まらないリズムを生み出します。

05

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

1px solid rgba(0, 0, 0, 0.05)

0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 4px 6px -4px rgba(0, 0, 0, 0.1)

06

レイアウト

ヒーローセクションには中央の単列レイアウトを採用し、その後、コンテンツカードの稠密で対称的なマーソニーグリッドに移行します。

07

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

hover時の微細な不透明度フェード · インタラクティブ要素の滑らかな背景色トランジション · ボタンとカードの微細なスケールトランスフォーム

150msのトランジションによる、不透明度や背景色の微細な変化。 · わずかなスケールトランジションによる、即座の視覚フィードバック。

08

コンポーネント

• button 一次アクションには黒の塗りつぶしを持つピル型ボタンを、二次アクションには微細でボーダレスなスタイルを使用。
• card 最小限のテキストと大きなビジュアルサムネイルを優先した、クリーンでボーダレスな長方形カード。
• chip ナビゲーションやメタデータに使用する、小さなピル型テキストインジケーター。
• input 背景に溶け込む、ミニマルでボーダレスな入力フィールド。
• hero 稲妻アイコンを伴う、垂直方向に中央揃えの巨大な見出しと、大きく目立つピル型コール・トゥ・アクションボタン。

09

文体と禁止事項

• トーン 自信に満ち、簡潔で、志を高めるもの。
• 見出し 品質とインスピレーションを強調する、短く、インパクトがあり、非常に読みやすいステートメント。
• CTA 単純な動詞や「Subscribe +」のようなシンボルを使用した、直接的でアクション指向のもの。

• カードにドロップシャドウを使用しない — スクリーンショットは完全にフラットでボーダレスな画像カードを示している。
• 見出しにセリフフォントを使用しない — スクリーンショットは全体を通してクリーンなヒューマニストサンセリフを示している。
• 複雑で多色のUIクロームを使用しない — スクリーンショットは厳格にモノクロの黒と白のインターフェースを示している。
• 一次ボタンに鋭角の90度コーナーを使用しない — スクリーンショットは完全に丸みのあるピル型ボタンを示している。
• 過度な本文パディングや tightな行間を使用しない — スクリーンショットは寛容な余白とゆったりとした1.5の行間を示している。
• 派手なグラデーションや装飾的な背景を使用しない — スクリーンショットはコンテンツを呼吸させる単色の白い背景を示している。
• 避ける: 過度な感嘆符の使用
• 避ける: 複雑な専門用語
• 避ける: 主要エリアでの長く密度の高い段落

10

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

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

11

System Prompt

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