厳選・オープン・無料

Bou

シネマティックヒーローやクリーンでハイコントラストなセクションを持つ、洗練されたエディトリアルなデザインエージェンシーのウェブサイト。

01

デザイン DNA

ハイエンドな写真とクリーンでエディトリアルなタイポグラフィを融合させ、洗練されプロフェッショナルなデジタルプレゼンスを生み出す、プレミアムデザインスタジオ。

02

カラー

モノクロームでデチューンされた、厳格な白と黒のコアを備えたパレット。写真がすべての色と温かみを提供する。

03

タイポグラフィ

humanist-sans

• display42px · 300
• body16px · 300
• caption14px · 300

すべてのプライマリテキストにはウェイト300を使用し、エレガントで軽やかな感覚を維持する。 · 「SERVICES」や「HELSINKI」のような小さなラベルにのみ、大文字変換を適用する。 · 最適な可読性のために、適度なラインハイ（1.4〜1.5）を維持する。

04

余白

要素間のパディングやギャップに、一定の8pxまたは16pxの垂直リズムを採用し、構造的で息のできるレイアウトを確保する。

05

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

1px solid rgba(10,10,10,0.15) または 1px solid rgb(219, 217, 220)

rgba(0, 0, 0, 0.3) 0px 32px 68px 0px

06

レイアウト

フルワイドの写真付きヒーローに続き、コンテンツとサービスを2カラムに分割。柔軟な配置のために12カラムグリッドを使用。

07

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

リンクやボタンのための滑らかなカラートランジション。 · ビューポートに進入する際の、コンテンツセクションの繊細なフェードイン。

リンクやボタンにおける、繊細なカラーシフトや不透明度の変化。 · 滑らかなトランジション効果を伴う、即座のレスポンス。

08

コンポーネント

• button 黒背景にホワイトテキストのピル型ボタン、またはダーク背景にホワイトボーダーのミニマリストなゴーストボタン。
• card 大きな写真とクリーンなタイポグラフィで階層性を演出する、ミニマリストでボーダーレスのカード。
• chip ロケーションやカテゴリーに使用される、大文字テキストと細いボーダーを持つ小さなピル型タグ。
• input シンプルな1pxのボトムボーダーと背景なしのミニマリストなインプット。
• hero 中央に配置された大規模なタイポグラフィをオーバーレイした、フルビューポートのシネマティック写真。

09

文体と禁止事項

• トーン プロフェッショナルで自信に満ち、率直。
• 見出し クリーンでエレガント、かつ記述的。エージェンシーのコアサービスに焦点を当てる。
• CTA ミニマリスト。シンプルなテキストリンクまたは小さなピル型ボタンを使用。

• 高彩度のカラーを使用しない — スクリーンショットは厳格なモノクロームの白黒パレットを示しています。
• 重く太いタイポグラフィを使用しない — スクリーンショットは、軽くエレガントな感覚のためにウェイト300が主に使用されていることを示しています。
• シャドウ付きの角丸カードを使用しない — スクリーンショットは、写真がエッジを定義するフラットでボーダーレスのレイアウトを示しています。
• 狭く窮屈なスペーシングを使用しない — スクリーンショットは、息のできる感覚のための適度なパディングとギャップ（8px〜16px）を示しています。
• 装飾的なボーダーを使用しない — スクリーンショットは、チップやインプットなどの機能的要素にのみ使用される最小限の1pxボーダーを示しています。
• 複雑で多色のグラデーションを使用しない — スクリーンショットは、写真による奥行きをもつクリーンでソリッドカラーの背景を示しています。
• 避ける: 過度にカジュアルな言葉やスラングは避ける。
• 避ける: 感嘆符の過度な使用は避ける。
• 避ける: サービスにとって本質的でない複雑または専門用語は避ける。

10

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

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

11

System Prompt

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