厳選・オープン・無料
Unlirice Ooo
従来のグリッドを否定し、動的で浮遊する構図を採用した、非常に実験的で表現力豊かな写真ポートフォリオ。
ExperimentalPortfolioPhotographicGalleryExpression
01
デザイン DNA
実験的コラージュ写真浮遊動的
断片化された記憶の浮遊デジタルコラージュ
02
カラー
#000000Ink
#FFFFFFBG
rgba(0,0,0,1)Line
厳格なモノクロームUIにより、カラフルな写真コンテンツが競合なしに中央の舞台に立つことを可能にする。
03
タイポグラフィ
geometric-sans · humanist-sans
- display
160px · 400 - heading
28px · 400 - body
16px · 400
巨大なオーバーサイズのタイポグラフィを使用し、浮遊する混沌とした要素をアンカーとする。 · ほぼすべての要素で厳格なウェイト400(Regular)を維持し、クリーンで静かなベースラインを保つ。 · 装飾的やイタリック体のテキストを避け、ストリックトでブータリストな美学を維持する。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
不規則
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
なし
06
レイアウト
1920container
12columns
24pxgutter
768 / 1024breakpoints
要素を絶対位置指定またはCSS transformで配置し、浮遊効果を生み出す流動的で非グリッドのキャンバス。
07
モーションとインタラクション
220msmicro
400mssmall
2000msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
要素の表示に使用する長く滑らかなopacity遷移(2秒) · インタラクティブな状態変化のためのcubic-bezierイージング · 継続的な繊細な浮遊またはparallaxの動き
要素はポインターカーソルによって状態が変化することがあり、しばしば繊細なスケーリングやopacityの変化を引き起こす。 · 浮遊する写真要素との直接的なインタラクション。
08
コンポーネント
- button 最小限のインタラクティブ状態。主にクリック可能な浮遊要素または生のリンクで表現される。
- card パディング、ボーダー、シャドウのない円形または楕円形の写真クロップ。
- hero フロートし、回転し、スケーリングされた円形画像で構成され、下部に巨大なロゴタイプでアンカー付けされたダイナミックなフルスクリーンキャンバス。
09
文体と禁止事項
- トーン 抽象的、ミニマル、非言語的。
- 見出し 巨大でストリックト、かつ感情的な抑揚なくStrictly lowercase or uppercase。
- CTA 繊細、または entirely absent。ビジュアル構図に依存してユーザーを導く。
- 標準的なUIコンテナを使用しない — スクリーンショットはボーダーやシャドウのない浮遊する円形要素を示している。
- 従来のグリッドシステムを使用しない — スクリーンショットは要素が流動的で非整列にビューポート全体に散りばめられていることを示している。
- 多様なフォントウェイトを使用しない — スクリーンショットはほぼ排他的にRegular(400)ウェイトのテキストを示している。
- 白色以外の背景色を使用しない — スクリーンショットは厳格な白色(#FFFFFF)の背景を示している。
- ボタンやカードに標準的な角丸長方形を使用しない — スクリーンショットは純粋に円形または楕円形のクロップを示している。
- 華やかまたはテクスチャ付きの背景を使用しない — スクリーンショットはクリーンでストリックトな白色の虚空を示している。
- 避ける: 会話的UI
- 避ける: マーケティング用語
- 避ける: 密度の高い段落
- 避ける: 明示的なナビゲーションラベル
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
非常に実験的で表現力豊かな写真ポートフォリオ。ポジショニング:標準的なUIパターンよりもビジュアル探索を優先する抽象的でアーティスティックなキャンバス。主要なHEX色:#FFFFFFの背景と#000000の前景。フォントカテゴリ:ディスプレイ用にgeometric-sans、本文用にhumanist-sans、両方ともStrictly Regular(400)ウェイト。重要な禁止事項:標準的なグリッドレイアウトを使用しない;太いボーダー、シャドウ、コンテナ背景を適用しない;太字またはイタリック体のタイポグラフィを使用しない。このシステムは、流動的な絶対位置指定と長いopacity遷移に依存し、ダイナミックで浮遊する体験を生み出す。
en · zh-CN · zh-TW · ja · ko