厳選・オープン・無料

Gus Biz

ブータリストな美学、ハイコントラストカラー、遊び心あるタイポグラフィを使用したクリエイティブエージェンシーのサイト。

01

デザイン DNA

伝統的なデザイングリッドを破る、大胆で遊び心のあるスクラップブック。

02

カラー

ティールグリーンを基調とし、レッドとイエローをアクセントにした、ハイコントラストで遊び心のあるパレット。

03

タイポグラフィ

transitional-serif · humanist-sans

• display28px · 700

メインの見出しとディスプレイテキストにはserifを使用します。 · 本文テキストとUI要素にはsans-serifを使用します。 · 遊び心あるディスプレイと読みやすい本文の間で、明確なタイポグラフィック階層を維持します。

04

余白

緩やかで有機的なリズム。遊び心あるレイアウトのために、厳密なグリッドを崩すことがしばしばあります。

05

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

細く1pxの実線ボーダー。色は暗めであることが多いです。

0px 1px 0px 0px rgba(0,0,0,1)

06

レイアウト

グリッドベースだが、意図的にオフセットされ、遊び心があり、厳密な配置を崩す。

07

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

滑らかなカラーと背景のトランジション · hover時の微妙なトランスフォーム · 遊び心のある、絶え間ないスクロールマーキー

カラーまたは背景の変化、微妙なトランスフォーム。 · 即座の視覚的フィードバック。

08

コンポーネント

• button シンプルなテキストベースのもの、または円などの基本的な幾何学図形。
• card ミニマル。ボーダーや際立った背景のコントラストで定義されることが多い。
• chip シンプルな幾何学図形や星形。
• input 標準的なテキスト入力。最小限のスタイリング。
• hero 大ぶりで大胆なタイポグラフィに、遊び心あるグラフィック要素を組み合わせた、フルワイドのセクション。

09

文体と禁止事項

• トーン 遊び心があり、自信に満ち、遠慮のない大胆さ。
• 見出し 表現力豊かなserifタイポグラフィ。しばしば全て小文字で使用。
• CTA シンプルで直接的。遊び心あるレイアウトに統合されることが多い。

• 控えめで微妙なカラーパレットを使用しない — スクリーンショットには鮮やかなティール、レッド、イエローが示されています。
• 厳密にミニマルなレイアウトを作成しない — スクリーンショットには遊び心あり、グリッドを崩した構図が示されています。
• sans-serifフォントのみを使用しない — スクリーンショットには目立ってserifのディスプレイフォントが使用されています。
• 幾何学図形を避けてはいけません — スクリーンショットにはスターバーストロゴと円形要素が示されています。
• 静的なヒーローセクションを作成しない — スクリーンショットには動的でスクロールするマーキーが示されています。
• 微妙なシャドウやグラデーションを使用しない — スクリーンショットには、細くシャープなボーダーを持つフラットカラーが示されています。
• 避ける: 控えめな表現
• 避ける: 企業用語
• 避ける: 過度に複雑なUIパターン

10

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

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

11

System Prompt

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