厳選・オープン・無料

Martin Laxenaire Fr

クリエイティブなウェブデザイナー向けの、ハイエナジーでタイポグラフィが大胆なポートフォリオです。

01

デザイン DNA

鮮やかでインタラクティブなアート作品のようなクリエイティブエージェンシーポートフォリオです。

02

カラー

鮮やかなマルチカラーの幾何学アクセントを配した、ハイコントラストのモノクロームベースです。

03

タイポグラフィ

extended-grotesque-sans · grotesque-sans

• display167px · 700
• heading-lg105px · 700
• heading-md63px · 700
• body-lg31px · 400
• body-md21px · 400

大きなディスプレイテキストにはエクステンDED・グロテスク・サンセリフを使用します。 · 本文には標準のグロテスク・サンセリフを使用します。 · ディスプレイテキストにはタイトな文字間隔を適用します。 · ほとんどのテキスト要素には大文字変換を適用します。

04

余白

8pxのベースグリッドを採用し、呼吸を確保するための余裕のあるパディングを設けています。

05

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

インタラクティブ要素とボーダーには2pxの黒の実線を使用します。

0px 4px 24px rgba(18, 18, 18, 0.1)

06

レイアウト

巨大な中央テキストブロックを備えたフルビューポートのヒーローセクションに続き、プロジェクト用のマルチカラムグリッドが続きます。

07

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

要素の表示にスムーズなハイイージーアウトトランジション。 · スクロール時のパララックスとスケーリング効果。 · インタラクティブな幾何学背景要素。

インタラクティブ要素のスケールとカラーのトランジションです。 · 即座のビジュアルフィードバックを伴うアクティブステートです。

08

コンポーネント

• button 白地に黒の太いボーダーと黒のテキストを持つ、ピル型です。
• card 大きなタイポグラフィと大胆な背景色を持つプロジェクトカードです。
• hero 回転するマルチカラーの幾何学スターバーストパターンと、大きく重なったディスプレイタイポグラフィを持つフルスクリーンヒーローです。

09

文体と禁止事項

• トーン 自信に満ち、遊び心があり、非常にクリエイティブです。
• 見出し 短く、インパクトがあり、しばしば全て大文字です。
• CTA 直接的でアクション志向の、ピル型ボタンを使用するスタイルです。

• ヘッドラインに標準的な幅の狭いサンセリフを使用しないでください — スクリーンショットでは幅広い、エクステンDED・グロテスクフォントが使用されています。
• 小さく密集した本文テキストを使用しないでください — スクリーンショットでは、余裕のある行の高さで大きく読みやすいテキストが使用されています。
• 控えめな、または暗いカラーパレットを使用しないでください — スクリーンショットでは、明るい白い背景に鮮やかな緑、茶色、黄色のアクセントが使用されています。
• UI要素にシャープで四角い角を使用しないでください — スクリーンショットでは角が大きく丸められた（21px半径）デザインが使用されています。
• 薄く控えめなボーダーを使用しないでください — スクリーンショットではボタンやカードに太い2pxの黒ボーダーが使用されています。
• 伝統的な、水平のみのレイアウトを使用しないでください — スクリーンショットでは、ダイナミックで重なったタイポグラフィのヒーローが使用されています。
• 避ける: 退屈なレイアウト
• 避ける: 控えめな色
• 避ける: 伝統的なセリフフォント
• 避ける: 小さなテキスト
• 避ける: 標準的なグリッドのみのレイアウト

10

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

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

11

System Prompt

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