厳選・オープン・無料

Ijpowell

アートディレクションとインタラクティブデザインに焦点を当てた、洗練されたミニマル・ポートフォリオ・サイト。

01

デザイン DNA

クリーンなタイポグラフィと豊かなネガティブスペースを持つ、ミニマルな写真展示空間。

02

カラー

彩度を一切含まない厳格なモノクロ。黒、白、グレースケールのみに完全に依存します。

03

タイポグラフィ

transitional-serif

• display56px · 400
• body17px · 400

すべての本文テキストに-0.425pxの文字間隔を使用 · すべての要素のフォントウェイトを400に維持 · すべてのプライマリ・タイポグラフィにtransitional-serifを使用

04

余白

中央メディア領域の周りにゆったりとしたパディングを持つ、柔軟なスペーシング。

05

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

構造要素に控えめに使用される、最小限の1pxグレースケール・ボーダー。

06

レイアウト

左、中央、右の要素を持つ固定ヘッダー；中央揃えのメディアブロック；固定フッター。

07

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

すべての状態変化に対する滑らかな1秒間のトランジション。

ナビゲーションリンク上の微細な不透明度または状態変化。 · 新しい状態への滑らかなトランジションによる即座のレスポンス。

08

コンポーネント

• button アクティブ状態のソリッドサークルインジケーターを持つ、テキストベースのナビゲーション。
• card 太い黒いボーダーを持つ、フルワイドの大きなメディアフレーム。イメージまたはタイポグラフィを含みます。
• hero プロジェクト作品をショーケースする、目立つ黒いフレームを持つ、大きく中央揃えのメディアコンテナ。

09

文体と禁止事項

• トーン ミニマルで、プロフェッショナル、控えめ。
• 見出し タイトなトラッキングを持つ、クリーンなtransitional-serifタイポグラフィ。
• CTA フッターやナビゲーションに統合された、シンプルなテキストベースの行動喚起。

• 鮮やかな色を使わない — スクリーンショットは厳格なモノクロの黒と白のパレットを示しています。
• サンセリフ・フォントを使わない — スクリーンショットは exclusively 使用されるtransitional-serifフォントを示しています。
• ドロップシャドウや複雑なカードスタイルを追加しない — スクリーンショットはフラットでボーダーフレームのメディアを示しています。
• 太く重いフォントウェイトを使わない — スクリーンショットはすべてのテキストがウェイト400であることを示しています。
• 複数のカラムでインターフェースを雑然とさせない — スクリーンショットは単一の、中央揃えの焦点を示しています。
• コンテナに角丸を使わない — スクリーンショットはメディアフレームにシャープで四角い角を示しています。
• 避ける: カラフルなグラデーション
• 避ける: 密集した段落
• 避ける: 装飾的なアイコン
• 避ける: 派手な行動喚起
• 避ける: 雑然としたレイアウト

10

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

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

11

System Prompt

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