厳選・オープン・無料

Guillaumetomasi

歪んだ画像要素と大胆なタイポグラフィを特徴とする、実験的なレイアウトのアートフォトグラフィーポートフォリオ。

01

デザイン DNA

デジタルディストーションとコラージュを用いるデジタルアートギャラリーまたはフォトグラファーのポートフォリオ。

02

カラー

写真のみがすべての色の変化を担う、厳格なモノクロ。

03

タイポグラフィ

grotesque-sans

• display66px · 400
• body23px · 400
• meta20px · 400

すべてのテキストは厳格に大文字。

04

余白

浮遊するコラージュのような配置による非対称。

05

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

なし。要素は構図とスペーシングに依存。

06

レイアウト

自由なコラージュ。画像とテキストは意図的にオーバーラップ。

07

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

表示用の長く滑らかなトランジション。

ポインターカーソル。 · ポインターカーソル。

08

コンポーネント

• button 視覚的に存在しない。
• card 視覚的に存在しない。
• chip 視覚的に存在しない。
• input 視覚的に存在しない。
• hero デジタルディストーションを伴う浮遊画像とオーバーラップする大きなタイポグラフィ。

09

文体と禁止事項

• トーン 芸術的、抽象的、ミニマル。
• 見出し 大胆、大文字、断片的あるいは詩的。
• CTA 大文字、モノスペース、控えめ。

• グリッドベースの配置を使用しない — スクリーンショットは自由なコラージュレイアウトを示しています。
• 要素にドロップシャドウを使用しない — スクリーンショットはフラットな構図を示しています。
• 混在するフォントウェイトを使用しない — スクリーンショットは均一なウェイト（400）を示しています。
• 小文字テキストを使用しない — スクリーンショットは排他的に大文字テキストを示しています。
• border-radius を使用しない — スクリーンショットは厳格に矩形の要素を示しています。
• 高彩度の背景色を使用しない — スクリーンショットは厳格な白の背景を示しています。
• 避ける: 直訳的な記述。
• 避ける: 明るく非現実的な色彩。
• 避ける: 硬直した配置。

10

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

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

11

System Prompt

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