← OpenDesign
厳選・オープン・無料
Maryloufaure
Marylou Faureの鮮やかで遊び心のあるイラストレーションを、クリーンなキャンバスとして提供するミニマリストなポートフォリオサイト。
Portfolio Playful Bold Typography Expressive Gallery
01
デザイン DNA
アーティスト イラストレーション 遊び心 大胆 快活
鮮やかなキャラクター駆動のイラストレーションを展示する、大胆で遊び心のあるアートギャラリー。
02
カラー
#000000Ink
#FFFFFFBG
#868785Muted
rgba(0,0,0,0.2)Line
UIは厳格にニュートラル(白と黒)であり、アートワークの大胆な色がビジュアルヒエラルキーを支配できるようにしています。
03
タイポグラフィ
grotesque-sans
display 40px · 400body 16px · 400label 12px · 400イラストレーションのためのミニマリストな背景を維持するために、クリーンなサンセリフタイポグラフィを使用します。 · 大きなディスプレイタイトルには、タイトな文字間隔(-0.5px)を適用します。 · 小さなナビゲーションおよびキャプションラベルには、寛大な文字間隔(0.5px)を適用します。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
一貫した15pxのpaddingにより、コンテンツブロックとナビゲーション要素に均一なマージンを提供します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 8px
lg · 0px
pill · 50px
水平セパレーターおよび細い構造線として使用される、1px solid rgba(0,0,0,0.2)。
rgba(0, 0, 0, 0.09) 0px 0px 14px 0px · rgba(0, 0, 0, 0.21) 0px 0px 4px 0px · rgba(0, 0, 0, 0.09) 0px 0px 0px 1px
06
レイアウト
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
広い説明テキストブロックとフルブリードの端から端までの画像グリッドが交互に現れる、全幅のシングルカラムレイアウト。
07
モーションとインタラクション
100ms micro
200ms small
500ms medium
ease-out easing
状態間の滑らかな遷移のためのopacityフェード(0.4sから0.5s)。 · リンクのhoverインタラクションのためのテキスト装飾トグル。 · 非表示要素の表示のためのtransformとopacityのシフト。
リンクにテキスト装飾の下線が表示される。 · すべてのクリック可能な要素に標準のポインターカーソル。
08
コンポーネント
button 背景やボーダースタイルのない、テキストのみのナビゲーションリンク。 card 大きな単一画像と分割グリッドが交互に現れ、細い線で区切られる、全幅の画像ブロック。 chip モノクロ(白黒)のクライアントロゴのシンプルな水平リスト。 input 連絡先情報のためのテキストリンク。hover時に下線でスタイル設定。 hero 左側に説明テキストブロック、右側に2つのサムネイル画像のグリッドを配置した分割セクション。
09
文体と禁止事項
トーン 自信に満ち、プロフェッショナルで、微細に遊び心がある。 見出し 大きく、クリーンで直接的なタイトル(例:'Coca-Cola')。 CTA ナビゲーションと連絡先のための微細なテキストのみのリンク。 装飾フォントを使用しない — スクリーンショットにはクリーンで標準的なグロテスクサンセリフ(Helvetica/Arial)が表示されています。 コンテンツカードにシャドウや角丸を追加しない — スクリーンショットにはフラットでエッジツーエッジの画像が表示されています。 UIに単一の主なアクセントカラーを使用しない — スクリーンショットには厳格に白黒のインターフェースが表示されています。 ボタンに背景色を使用しない — スクリーンショットにはテキストのみのナビゲーションリンクが表示されています。 複雑で雑然としたレイアウトを使用しない — スクリーンショットにはシンプルでリニアなシングルカラムフローが表示されています。 重いタイポグラフィウェイトを使用しない — スクリーンショットには全体的に標準の400ウェイトが使用されています。 避ける: 装飾フォントや複雑なタイポグラフィ処理を避ける。 避ける: アートワークと競合するような忙しいUI要素を避ける。 避ける: UI要素にカラーを使用し、Strictlyに白と黒を維持する。
10
パック内の実スクリーンショット
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 実ページから取得 · 実 computed styles
11
System Prompt
これは、鮮やかで遊び心のあるイラストレーションのためのクリーンでニュートラルなキャンバスとして機能する、ミニマリストなアーティストポートフォリオサイトです。UIは厳格な白黒カラースキーム(#000000のインク on #FFFFFFの背景)を採用し、ラベルには#868785を使用しています。タイポグラフィは標準的なグロテスクサンセリフ(Helvetica/Arial)を一貫した400ウェイトで使用し、大きなタイトルにはタイトなトラッキング(-0.5px)、小さなラベルには広いトラッキング(0.5px)を適用しています。重要な禁止事項には、装飾フォントの使用禁止、コンテンツカードへのUIシャドウや角丸の追加禁止、主なUIアクセントカラーの導入禁止が含まれます。レイアウトは、細い1pxの線で区切られたフルブリード画像を含む、シンプルでリニアなシングルカラムフローです。
ライブラリからもっと
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
なぜ収録: ポートフォリオデザインにおける抑制の素晴らしい例であり、UIは意図的に後退することで、クリエイティブな作品が自身の言葉で語れるようにしています。