厳選・オープン・無料

Alecbabala

ミニマルな、モノクロマティックな青のパーソナルポートフォリオ。

01

デザイン DNA

単色の青い光に包まれた、プリントを掲示する写真家の物理的な暗室のような空間。

02

カラー

最大限のコントラストと焦点を実現する、厳格な単色の青と白いテキストの組み合わせ。

03

タイポグラフィ

monospace · sans-serif

• display16px · 400
• body14px · 400

04

余白

垂直方向のリズムを豊かに保ち、大きな間隔（55px、64px、96px）を設定します。

05

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

目立つボーダーは無し。

06

レイアウト

単一カラム、中央揃えレイアウト。

07

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

テキストと画像への微細なhoverトランジション。

ホバー時にテキストの色や不透明度が変化。 · ナビゲーションリンク。

08

コンポーネント

• button 目立つボタンは無し。
• card 軽い青みのある画像カード。
• chip 目立つチップは無し。
• input 目立つ入力欄は無し。
• hero 名前を掲載したシンプルなテキストヘッダー。

09

文体と禁止事項

• トーン 率直で、個人的、控えめなトーン。
• 見出し すべて小文字、モノスペース、短いフレーズ。
• CTA シンプルな、下線付きテキストリンク。

• セリフフォントを使用しない — スクリーンショットではモノスペースとサンセリフのみ確認できます。
• 複数の背景色を使用しない — スクリーンショットでは全体を通して単色の青い背景が確認できます。
• 装飾的なボーダーや影を追加しない — スクリーンショットではボーダーのないフラットデザインが確認できます。
• 大文字のテキストを使用しない — スクリーンショットではすべてのテキストが小文字です。
• 複雑なグリッドを使用しない — スクリーンショットではシンプルな単一カラム中央揃えレイアウトが確認できます。
• 明るく彩度の高いアクセントカラーを使用しない — スクリーンショットでは厳格な青と白のパレットが確認できます。
• 避ける: フォーマルな言葉遣い
• 避ける: 装飾的な要素
• 避ける: 派手な色

10

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

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

11

System Prompt

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