厳選・オープン・無料

Exo Ape

シネマティックで画像主導のデザインスタジオサイト。洗練されたタイポグラフィと落ち着いたペーシング。

01

デザイン DNA

ハイエンドな建築雑誌とラグジュアリーホテルのロビーの融合。

02

カラー

ヒーローとなるフォトグラフィが主要なキャンバスとなり、クリスピーなホワイトのタイポグラフィが最大のコントラートを提供。単一のウォームアクセントトーンが微妙な温かみを加えます。

03

タイポグラフィ

humanist-sans

• display250px · 300
• heading144px · 300
• body16px · 300

ディスプレイサイズでは極端にタイトなネガティブトラッキングを使用し、プレミアムで建築的な外観を実現。 · 全テキストでライトウェイト（300）を維持し、エレガンスを保持。 · 全タイポグラフィ要素で高コントラート（ダーク上のホワイト）を確保。

04

余白

余裕のあるギャラリーライクなリズム。主要な要素の周囲に十分なpadding。

05

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

最小限。ラインではなく、カラーコントラートとフォトグラフィの深みに依存。

06

レイアウト

フルブリードのフォトグラフィックヒーロー。左揃えのテキストブロック。

07

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

hover状態の滑らかなopacityトランジション。 · 大きなテキスト要素に対するシネマティックなスクロールリビール。

微妙なopacityの低下。 · 即座のレスポンス。

08

コンポーネント

• button 背景のない、ミニマルなテキストリンク。
• card フルブリードの画像オーバーレイ。
• hero フルビューポートのフォトグラフィック背景。巨大で左揃えのタイポグラフィ。

09

文体と禁止事項

• トーン 自信に満ち、控えめでプレミアム。
• 見出し 巨大で、単語または短いフレーズのステートメント。ライトウェイト。
• CTA 控えめで、テキストベースのCTA。

• 太いフォントウェイトを使わない — スクリーンショットでは全テキストがライトウェイト（300）で統一されている。
• 主要サーフェスに角丸を追加しない — スクリーンショットではシャープで建築的なエッジが使われている。
• 明るく彩度の高いアクセントカラーを使わない — スクリーンショットでは写真上にホワイトテキストを使用。
• レイアウトを詰め込まない — スクリーンショットではテキストブロックの周囲に余裕のあるpadding（例：50px）がある。
• 可視ラインのグリッドを使わない — スクリーンショットではコンテンツの整理にホワイトスペースとアラインメントが使われている。
• 小さなディスプレイテキストを使わない — スクリーンショットでは 'Digital' が巨大な250pxスケールで表示されている。
• 避ける: 明るく、彩度の高いカラーパレット。
• 避ける: 主要コンテナの角丸。
• 避ける: 太いフォントウェイト（400以上）。

10

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

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

11

System Prompt

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