厳選・オープン・無料

Firstandforemost

巨大でインパクトのあるタイポグラフィと、暖かみのあるアーストーン、オーガニックなイラストレーションを調和させた、ブランドエージェンシーのウェブサイト。

01

デザイン DNA

インパクトと自然を重視するデザインエージェンシーのための、モダンなエディトリアルレイアウト。

02

カラー

温かく柔らかいオフホワイトの背景の上に、単一の鮮やかなオレンジを主前景カラーとして使用した、抑制の効いたハイコントラストのパレット。自然でインパクトのある外観を生み出します。

03

タイポグラフィ

humanist-sans

• display200px · 900
• heading80px · 700
• title36px · 400
• body16px · 400

04

余白

主要セクション間は豊かな縦方向のパディング（160px）で区切り、内部のスペーシングはtightに設定。

05

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

アウトラインとセパレーターには、1px solid rgba(255,69,1,1.0)を使用。

rgba(153, 18, 2, 0.36) -32px 32px 80px 0px

06

レイアウト

固定ヘッダーとフルワイドヒーローを持つ単一カラムレイアウト。

07

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

opacity transitions (1s) · transform (0.5s ease-in-out)

インタラクティブ要素上ではカーソルがポインタに変化。subtleなopacity transitions。 · 標準的なポインタインタラクション。

08

コンポーネント

• button 固体背景のボタンは見せず、hover効果付きのシンプルなテキストリンク。
• card 明確なカードは見せず、コンテンツはオープンなレイアウトで提示。
• chip チップは見せず。
• input インプットは見せず。
• hero ビューポート幅全体にまたがる、巨大でオーバーサイズのタイポグラフィ。下部にオレンジの植物のイラストレーションが添えられる。

09

文体と禁止事項

• トーン 直接的で、プロフェッショナル、かつミッションを重視。
• 見出し 巨大で、-boldで、宣言的。
• CTA 控えめで-minimal。シンプルなテキストリンクを使用。

• 複数の競合するカラーを使用しないこと — パレットは厳密にオレンジとオフホワイトのみ。
• 細く繊細なタイポグラフィを使用しないこと — デザインは太く-boldなウェイトに依存。
• すべてに標準的なグリッドレイアウトを使用しないこと — ヒーローは巨大なタイプでグリッドを崩す。
• 暗い背景を使用しないこと — ウェブサイトは暖色のトーンでStrictly light。
• 複雑で雑多なUIコンポーネントを使用しないこと — デザインはminimalでオープン。
• 小さく窮屈なスペーシングを使用しないこと — レイアウトは豊かなwhitespaceとpaddingを使用。
• 避ける: 企業用語
• 避ける: 攻撃的なセールス言語
• 避ける: ダークモード

10

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

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

11

System Prompt

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