厳選・オープン・無料

Bond

大胆でエネルギッシュなクリエイティブ・エージェンシーのウェブサイト。オーバーサイズのタイポグラフィと鮮やかなコーラルアクセントを用い、印象的で表現力豊かなポートフォリオを生み出す。

01

デザイン DNA

表現力豊かなタイポグラフィと鮮やかなカラーを使い、注目を集める、大胆でエネルギッシュなクリエイティブ・スタジオ。

02

カラー

ハイコントラストを基調とし、鮮やかなコーラルアクセントと写真背景を採用。

03

タイポグラフィ

grotesque-sans

• display123px · 700
• heading70px · 700
• body18px · 700
• small12px · 400

テキスト要素のほとんどには、太字ウェイト（700）を使用。 · 見出しテキストには、行間を詰めて使用。 · ナビゲーションやラベルには、大文字を使用。

04

余白

大きなタイポグラフィの周りにはたっぷりのpadding、UI要素にはタイトなspacingを適用。

05

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

1px solid #000000

0 0 10px 0 rgba(0, 0, 0, 0.12) · 0 0 20px 0 rgba(0, 0, 0, 0.1)

06

レイアウト

全幅の画像ヒーローの後に、大きなタイポグラフィのセクションを配置。

07

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

hover状態やメニュー操作のための、スムーズなトランジション。 · タイポグラフィのための、parallaxまたはscroll連動のアニメーション。

ボタンの色の反転または背景色の変化。 · 微細なscaleまたは不透明度の変化。

08

コンポーネント

• button コーラル背景に白文字、または白背景に黒文字と黒borderの、ピル型ボタン。
• card 大きなタイポグラフィと写真要素を用いた、ミニマルなカード。
• chip ピル型のタグまたはラベル。
• input 黒borderを用いた、ミニマルなフォーム入力欄。
• hero テキストをオーバーレイまたはシンプルなヘッダーを配置した、フルスクリーンの写真ヒーロー。

09

文体と禁止事項

• トーン 自信があり、率直で、少しふざけている。
• 見出し オーバーサイズで太字、小文字または文頭大文字が中心。
• CTA 矢印アイコンを用いた、アクション重視のコピー。

• 控えめまたは抑制されたタイポグラフィを使用しないこと — スクリーンショットではオーバーサイズで太字のヘッドラインが示されています。
• くすんだパステルカラーのパレットを使用しないこと — スクリーンショットでは鮮やかなコーラルアクセント（#FF5D60）とハイコントラストの黒白が示されています。
• 大きなタイポグラフィのない複雑なグリッドを使用しないこと — スクリーンショットではたっぷりの余白とオーバーサイズのテキストが示されています。
• 見出しにセリフフォントを使用しないこと — スクリーンショットでは太字のgrotesque-sansが示されています。
• 小さく密集した段落を使用しないこと — スクリーンショットでは行間の広い、短く力強いコピーが示されています。
• ほとんどの要素に角丸を使用しないこと — スクリーンショットではシャープなエッジまたはピル型ボタンが示されています。
• 避ける: 控えめまたは抑制されたタイポグラフィ。
• 避ける: くすんだパステルカラーのパレット。
• 避ける: 大きなタイポグラフィのない、複雑なグリッドやレイアウト。
• 避ける: 明確で表現力のある被写体のない、ストックフォト。
• 避ける: 見出しにセリフフォントを使用。
• 避ける: 小さく密集したテキストの段落。

10

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

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

11

System Prompt

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