厳選・オープン・無料

Locomotive

高コントラスト、タイポグラフィ主導のレイアウトで作品を紹介するデジタルファーストのデザインエージェンシー。

01

デザイン DNA

エディトリアルの優雅さと大胆な技術的精度のバランスを取る、プレミアムデザインスタジオ。

02

カラー

鮮烈な黒と白による高コントラストのパレットに、鮮やかな橙色のアクセントを一本配置する構成。

03

タイポグラフィ

didone-serif · grotesque-sans

• display110px · 400
• headline70px · 400
• body26px · 400
• caption15px · 400

04

余白

要素間に十分な余白（垂直40px）と一定の間隔（20px）を設けた、開放的で広々としたレイアウト。

05

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

区切りや構造化されたラベルに使用される、最小限だが正確な2pxの実線ボーダー。

06

レイアウト

大きなヒーロー画像と、ビジュアル要素に重なるテキストを重視した非対称グリッドレイアウト。

07

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

hover時の不透明度や背景色の変化に対する、滑らかな遷移。 · インタラクティブなUI要素に対する正確で高速なトランスフォーム。 · 背景画像に対する没入感のある、おそらく複雑なキャンバスまたはWebGLエフェクト。

正確なイージングカーブによる、微かな不透明度や背景色の変化。 · トランスフォームや不透明度の変化による即時フィードバック。

08

コンポーネント

• button 伝統的なボタンスタイルではなく、微かな方向矢印やカスタムタイポグラフィを用いたテキストベースのナビゲーションリンク。
• card ヒーローでは最小限または存在せず、収められたカードではなく、大きく没入感のある画像に依存。
• hero フルブリードまたは支配的な写真/動画背景に、重なる大規模なセリフ体タイポグラフィ。

09

文体と禁止事項

• トーン プロフェッショナルで革新的、自信があり、かつ遊び心も少し持ったトーン。
• 見出し エディトリアルでプレミアムな印象を与える、太字で大規模なセリフ体タイポグラフィ。
• CTA ナビゲーションやレイアウトに自然に統合された、繊細でテキストに焦点を当てた行動喚起。

• 要素に丸みのある角を使用しない — スクリーンショットには角のない、0pxのボーダーレディウスのボックスとカードが表示されている。
• ドロップシャドウや複雑な深度効果を使用しない — スクリーンショットは純粋なタイポグラフィと色のコントラストに依存している。
• 多色のパレットを使用しない — スクリーンショットは厳密に黒、白、および1つの橙色のアクセントで構成されている。
• ヘッドラインに小さく凝縮されたタイポグラフィを使用しない — スクリーンショットには巨大な、110pxスケールのディスプレイテキストが特徴的。
• 標準的で重厚なボタンコンポーネントを使用しない — スクリーンショットではインタラクションにテキストリンクと微かなボーダーを使用している。
• テキストの背後に雑然とした背景を使用しない — スクリーンショットでは高コントラストの単色背景またはクリーンな画像を使用している。
• 避ける: カジュアルまたは過度にフレンドリーな言葉遣いを避ける。
• 避ける: 複雑なグラデーションやドロップシャドウを避ける。
• 避ける: 雑然としたレイアウトや過度なUIコンポーネントを避ける。

10

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

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

11

System Prompt

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