厳選・オープン・無料

Buck

大判のクリエイティブワークを主役に据えるために設計された、ミニマルでハイコントラストのポートフォリオ。

01

デザイン DNA

大規模なモーションやブランドワークを紹介する、ハイエンドなクリエイティブエージェンシーのポートフォリオ。

02

カラー

厳格な黒と白のキャンバスによる極度のミニマリズム、鮮やかなプロジェクトのビジュアルのみを唯一の色の源として使用。

03

タイポグラフィ

geometric-sans · monospace

• display50px · 100
• body21px · 100

プライマリタイプフェース（Mabry）を全要素で排他的に使用。 · 見出しと本文の両方で、ウルトラライトのウェイト（100）を使用。 · プロジェクトカテゴリの表示に、頻繁にテキストの大文字変換を適用。

04

余白

非対称で、プロジェクトサムネイルの周りに大きくゆったりとしたpaddingを設け、明確な垂直方向の流れを実現。

05

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

構造的なセパレーターやインタラクティブ要素のために、ごく控えめに使用される極細の1px solidボーダー。

06

レイアウト

幅広いガターで配置された、サイズの異なるプロジェクトカードからなる、ゆったりとしたメーソンリー風グリッド。

07

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

背景色の変更における滑らかなトランジション。 · プロジェクトカードの微細なhover効果。 · スクロール時のグリッドアイテムの段階的な表示。

プロジェクトサムネイルにおける微細な背景色の変化や、わずかなopacityの変化。 · 滑らかなページトランジションとともに行われる、プロジェクトケーススタディへの直接ナビゲーション。

08

コンポーネント

• button ミニマルなテキストベースのボタン、大文字表記で、ウルトラライトなウェイトによるエレガンスを実現。
• card 大判のフルブリード画像と、その後に続く構造化されたテキストメタデータ（カテゴリ、タイトル、説明）を収めるクリーンなコンテナ。
• chip 従来のボックスやピルスタイルに頼らず、ワークをカテゴリ分けするために使用される大文字のテキストラベル。
• input 検索機能は、ミニマルなアイコントリガーのインプットか、フルスクリーンオーバーレイを使用する可能性が高い。
• hero 会社のミッションを1つの連続した流れで伝える、大胆で大規模なタイポグラフィブロック。

09

文体と禁止事項

• トーン プロフェッショナルで、権威がありながら、控えめなトーン。
• 見出し シンプルさから確信を伝える、ウルトラライトで大規模なサンセリフタイポグラフィ。
• CTA 目立つコール・トゥ・アクションボタンではなく、ナビゲーションリンクに依存するミニマルなスタイル。

• 見出しに太いウェイトを使用しない — スクリーンショットでは、全プライマリテキストにウルトラライト（100）ウェイトが使用されている。
• プロジェクトカードにドロップシャドウを追加しない — スクリーンショットでは、完全にフラットでクリーンな表面が示されている。
• カラフルな背景を使用しない — スクリーンショットでは、厳格な純白（#FFFFFF）のキャンバスが示されている。
• コンテナに角丸を使用しない — スクリーンショットでは、シャープで矩形のサムネイルが示されている。
• 装飾的なボーダーを使用しない — スクリーンショットでは、余白と最小限の線幅による明確な区切りが示されている。
• 複雑なマルチレイヤーグリッドレイアウトを使用しない — スクリーンショットでは、比較的シンプルな2カラムの段階的フローが示されている。
• 避ける: 本文用の太く重いタイプフェース。
• 避ける: ごちゃごちゃしたレイアウトや、密に詰め込まれた段落。
• 避ける: 装飾的な余計な筆致や、不要なボーダー。

10

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

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

11

System Prompt

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