厳選・オープン・無料

Droga5

巨大で太字のタイポグラフィとシネマティックな写真を活用し、権威を投影するプレミアムクリエイティブエージェンサイト。

01

デザイン DNA

ランドマークとなるポートフォリオを、クリーンで大胆な精度をもって展示するマスターアーキテクト。

02

カラー

厳密なハイコントラストのモノクロームベースに、エディトリアルな区切りとして鋭い青のアクセントを単色で配置。

03

タイポグラフィ

grotesque-sans · humanist-sans · monospace

• display100px · 700
• heading35px · 400
• body16px · 400
• caption10px · 400

ディスプレイ用タイポグラフィは最大限のインパクトを得るため中央揃え。 · 小型メタデータラベルには大文字変換を使用。

04

余白

可読性とビジュアルの重みを維持するため、巨大なタイポグラフィの周囲に十分な余白を配置。

05

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

最小限。主にボーダーレスで、純粋なコントラストと间距に依存。

06

レイアウト

豊かな余白を持つテキストブロックと交互に配置されるフルブリードヒーローセクション。

07

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

インタラクティブ要素上の滑らかで高速なカラーと背景のトランジション。

微細なカラー変化または表示。 · 滑らかなトランジションによる即座のビジュアルフィードバック。

08

コンポーネント

• button 白テキストを持つ純黒の長方形。角丸なし。
• card テキストオーバーレイのあるエッジ・トゥ・エッジ写真パネル。
• hero 巨大で中央揃えのヘッドラインに、フルワイドの動画または画像が続く。

09

文体と禁止事項

• トーン 自信に満ち、権威があり、プロフェッショナル。
• 見出し 巨大でトラッキングの詰まった太字タイプで提示される宣言的ステートメント。
• CTA 「続きを読む」や「私たちの仕事を見る」のような、直接的でシンプルな表現。

• 角丸を使わない — スクリーンショットでは、すべてのボタンとコンテナに鋭い四角い角が表示されている
• カラフルなパレットを使わない — スクリーンショットでは、厳密な黒、白、単色の青アクセントスキームが表示されている
• 中央揃えの細いタイポグラフィを使わない — スクリーンショットでは、巨大で太字、トラッキングの詰まった黒のヘッドラインが表示されている
• 雑然としたグリッドや複雑なカードレイアウトを使わない — スクリーンショットでは、大型のフルブリード写真セクションが表示されている
• 小さく窮屈な间距を使わない — スクリーンショットでは、巨大なタイポグラフィの周囲に豊かな余白が表示されている
• 装飾的またはスクリプトフォントを使わない — スクリーンショットでは、ヘッドライン用のクリーンで幾何学的なgrotesque-sansが表示されている
• 避ける: 遊び心のあるまたはカジュアルな言葉
• 避ける: 丸みのあるまたは泡泡のような形状
• 避ける: 過度に装飾的なフォント

10

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

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

11

System Prompt

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