厳選・オープン・無料
Opx Studio
大胆な黒と白のタイポグラフィアイデンティティを持つ、ミニマルなクリエイティブエージェンシーポートフォリオ。
StudioAgencyEditorialTypographyClean
01
デザイン DNA
ブランディングスタジオクリエイティブエージェンシーポートフォリオ
デザインの専門性を示すため、大胆なタイポグラフィとミニマルなプレゼンテーションを披露するハイエンドクリエイティブエージェンシー。
02
カラー
#ffffffInk
#000000BG
#9b9b9bMuted
rgba(255,255,255,0.1)Line
ドラマチックなインパクトを生み出すための高コントラストモノクロームパレット。補助要素には控えめな中間グレーを使用。
03
タイポグラフィ
grotesque-sans · humanist-sans · monospace
- display
80px · 400 - heading
36px · 400 - body
18px · 400
ディスプレイタイポグラフィは、視覚的なインパクトのためにタイトな文字間隔と大きなサイズを使用する。 · 本文テキストは可読性を高めるために、ゆったりとした行間を維持する。 · フォントウェイトは400に統一し、クリーンで均一な外観を保つ。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
要素の周囲にゆとりある余白を生み出す、大きなパディング値（水平50px、垂直99px）による豊かなホワイトスペース。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
控えめな分離のために最小限の1pxの白またはダークグレーのボーダーを、慎重に使用。
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
中心に配置したコンテンツを持つ全幅ヒーローセクションから、ゆったりとした間隔を設けた画像中心のプロジェクトグリッドへの遷移。
07
モーションとインタラクション
200msmicro
300mssmall
600msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
要素の表示のための滑らかなopacityとtransformトランジション。 · 単純な状態変化のためのlinearトランジション。 · より複雑な出現アニメーションのためのcubic-bezierイージング。
インタラクティブ要素上の控えめなopacityまたはカラーのトランジション。 · 状態変化による即時のビジュアルフィードバック。
08
コンポーネント
- button パディング（7px 30px）を持つ最小限のテキストベースのボタン。ホバートランジションを含む可能性が高い。
- card 最小限のフレーミングで大きな画像を特徴とし、ラベリングにはタイポグラフィに依存するプロジェクトカード。
- chip 提供されたスクリーンショットに表示されるチップなし。
- input 提供されたスクリーンショットに表示される入力フィールドなし。
- hero 黒背景に中心に配置された大胆なヘッドラインを持つ、大きなフルビューポートのタイポグラフィヒーローセクション。
09
文体と禁止事項
- トーン 自信に満ち、専門的で、率直。
- 見出し 力強い動詞（「発明する」「活性化する」「変換する」）を用いた、大胆で宣言的なステートメント。
- CTA 最小限で控えめ。派手なボタンではなく、テキストベースである可能性が高い。
- 複数のアクセントカラーを使用しない — スクリーンショットは厳格なモノクロームの黒と白のパレットを示している。
- セリフ体タイポグラフィを使用しない — スクリーンショットはクリーンなサンセリフのディスプレイおよび本文フォントを示している。
- 雑然としたレイアウトを作成しない — スクリーンショットはゆったりとしたホワイトスペースと最小限の要素を示している。
- 装飾的なボーダーやシャドウを使用しない — スクリーンショットは最小限でクリーンなエッジを示している。
- 小さなディスプレイタイポグラフィを使用しない — スクリーンショットは大きくインパクトのあるヘッドラインサイズ（80px）を示している。
- 不統一なフォントウェイトを使用しない — スクリーンショットは全体を通して統一された400ウェイトを示している。
- 避ける: 過度に技術的な専門用語を避ける。
- 避ける: 複数の要素が競合する雑然としたレイアウトを避ける。
- 避ける: 明るく彩度の高いアクセントカラーを避ける。
- 避ける: 複雑な装飾要素やパターンを避ける。
- 避ける: 小さく詰まったタイポグラフィを避ける。
- 避ける: 不統一な間隔や配置を避ける。
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これはミニマルでハイコントラストの黒と白のデザインを持つ、クリエイティブエージェンシー/スタジオのポートフォリオウェブサイトである。アイデンティティは大胆なタイポグラフィと豊かなホワイトスペースを中心に、デザインの専門性を披露する。主要カラーは純粋な黒（#000000）の背景に白（#ffffff）のテキスト、補助要素には中間グレー（#9b9b9b）を用いる。タイポグラフィはディスプレイにgrotesque-sans、本文にhumanist-sansを採用し、ウェイトは400とする。重要なデザイン原則：高コントラストを維持し、ゆったりとした間隔を使用し、タイポグラフィをクリーンでインパクトのあるものに保つ。カラーアクセント、雑然としたレイアウト、セリフ体フォント、装飾要素、小さなタイポグラフィ、不統一なウェイトは避ける。デザインは複雑なUIパターンではなく、タイポグラフィと写真の強みに依存する。
en · zh-CN · zh-TW · ja · ko