厳選・オープン・無料

Apple

シネマティックなダークレイアウト、精緻なタイポグラフィ、完全な抑制によって定義されるプレミアムハードウェアショーケース。

01

デザイン DNA

シネマティックな写真と抑制されたタイポグラフィでハードウェアを紹介するハイエンドプロダクトギャラリー。

02

カラー

プレミアム感を演出するため、純黒、柔らかいニュートラルグレー、鮮明な白テキストの極端なコントラスト。

03

タイポグラフィ

humanist-sans

• display48px · 700
• subtitle28px · 400
• body17px · 400
• caption12px · 400

ナビゲーションテキストは極めて小さく、字間を詰める。 · 見出しは字間を詰め、高ウェイトを使用する。 · 本文は可読性のため、十分な行間を維持する。

04

余白

ホワイトスペースと集中力を強調するため、ヒーローセクション周囲に十分な垂直パディング。

05

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

ダークアウトラインには 1px solid rgba(255,255,255,0.8)、ライト要素には 1px solid #1d1d1f

rgba(0, 0, 0, 0.22) 3px 5px 30px 0px

06

レイアウト

コンテンツを中央に配置した、エッジからエッジまでのフルワイドヒーローセクション。

07

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

ホバー時のスムーズなopacityとtransformトランジション。 · UI要素の微細なフェードイン。

リンクとボタンのカラートランジション。 · 微細なスケールまたはopacityの変化。

08

コンポーネント

• button ソリッド背景のピルシェイププライマリボタンとアウトラインセカンダリボタン。
• card 大きな画像と中央揃えテキストで定義されるフルワイドプロダクトカード。
• hero 中央揃えヘッドラインとデュアルCTAボタンを備えた、シネマティックなフルスクリーンプロダクト写真。

09

文体と禁止事項

• トーン 自信に満ち、簡潔で権威がある。
• 見出し 短く、インパクトのあるプロダクト名と一語のタグライン。
• CTA 「詳しく見る」「購入する」のような直接的なアクション動詞。

• 重いドロップシャドウを使用しない — スクリーンショットは最小限で微細な浮遊シャドウを示しています。
• 複雑なグラデーションを使用しない — スクリーンショットはソリッドでフラットな背景を示しています。
• 小さく、雑然としたタイポグラフィを使用しない — スクリーンショットは巨大でクリーンなディスプレイフォントを示しています。
• 明るく、競合する色を使用しない — スクリーンショットは極めて抑制されたパレットを示しています。
• 複雑なグリッドレイアウトを使用しない — スクリーンショットはシンプルで、中央揃え、リニアなスタッキングを示しています。
• 装飾的なボーダーやフレームを使用しない — スクリーンショットはオープンスペースで呼吸するコンテンツを示しています。
• 避ける: 過度に専門的な専門用語。
• 避ける: 過剰な感嘆符。
• 避ける: 雑然とした、または忙しないレイアウト。
• 避ける: 複数の競合する色。

10

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

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

11

System Prompt

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