厳選・オープン・無料

Icam Inox

ステンレス鋼の専門家向けの、タイポグラフィ主導のストリックな工業サイト。

01

デザイン DNA

ステンレス鋼メーカーのための高級工業カタログ。

02

カラー

鮮やかなアクセントカラーのないハイコントラストモノクローム。

03

タイポグラフィ

grotesque-sans · humanist-sans

• display96px · 500
• body16px · 400
• h232px · 500

ヒーローステートメントには極端に大きなフォントサイズ（96px以上）を使用。 · ディスプレイテキストのレタースペーシング（トラッキング）を詰める。 · 本文テキストは通常のウェイトとニュートラルなスペーシングを維持。

04

余白

ゆったりとした空間を确保するため、40px および 72px のパディングブロックを使用。

05

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

暗い背景上に細い1pxの白いボーダー。

0 4px 24px rgba(0,0,0,0.5)

06

レイアウト

フルワイドの暗いヒーローセクションの後に、明るいコンテンツブロックを配置。

07

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

スクロール時の微細なフェードイン。 · ホバーステート時の滑らかなトランジション。

微細な色の変化や透明度の変更。 · 最小限のバウンスによる即座のフィードバック。

08

コンポーネント

• button 最小限で、テキストベースまたはシンプルなアウトラインスタイルが主。
• card 微妙なボーダーと角丸を持つ、ダークまたはライトのコンテナ。
• input フォーム用のミニマルでクリーンな入力欄。
• hero 暗い背景上に配置された巨大なタイポグラフィ。画像とオーバーラップすることが多い。

09

文体と禁止事項

• トーン 権威があり、プロフェッショナル。
• 見出し 短く、インパクトがあり、極端に大きい。
• CTA カラフルなボタンではなく、タイポグラフィに依存する控えめなスタイル。

• 鮮やかなアクセントカラーは使用しない — パレットは厳格にモノクローム（黒、白、グレー）。
• ディスプレイテキストを72px未満に設定しない — サイトはインパクトのために巨大な96px以上のタイポグラフィを使用。
• 装飾的なセリフフォントを使用しない — システム全体はクリーンでニュートラルなサンセリフで構成。
• 雑然としたレイアウトを作成しない — サイトは膨大なネガティブスペースを使用。
• 重いドロップシャドウを使用しない — 奥行きはハイコントラストとレイヤリングによって作成。
• 小さなピル型ボタンを使用しない — インタラクティブ要素は最小限で、しばしばテキストのみ。
• 避ける: 遊び心のある言葉遣い。
• 避ける: 明るく鮮やかな色。
• 避ける: 過度のUI要素。
• 避ける: 丸みを帯びた、ふわふわとした形状。
• 避ける: 小さく詰まったタイポグラフィ。

10

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

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

11

System Prompt

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