ポートフォリオ デザインインスピレーション
作品が主役。UIは透明になるまで削ぎ落とす -- これがポートフォリオデザインの本質だ。Apple、Awwwards受賞サイト、そして世界中のクリエイターポートフォリオに共通するのは、余白とタイポグラフィだけで空間を支配する力である。美術館のブラックギャラリーのように、暗闇が作品を際立たせる。このページでは、ピュアブラックベースのポートフォリオデザインシステムを、豊富なビジュアル例とともに解説する。
このページの使い方
スクロールするだけでデザインのアイデアが得られるように設計しています。各セクションにインラインHTMLのビジュアル例を配置しているため、コードを読まなくても視覚的にパターンを把握できます。
デザイン哲学 -- 作品が語る
作品が光として浮かぶ。UIは闇に溶ける。
最高のポートフォリオサイトでは、ナビゲーションの存在を忘れる。スクロールバーの位置を意識しない。画面の主役は常にプロジェクト画像であり、テキストは最小限のキャプションに徹する。この「UIの透明化」を実現するのが、ピュアブラック(#000000)を基盤とした極限のミニマリズムだ。
なぜピュアブラックなのか
- OLEDディスプレイとの相性: #000000 はOLEDで画素が消灯し、真の黒を実現する
- 画像の発光感: 暗闇の中で画像だけが発光し、ギャラリーのスポットライト効果を得る
- 文字の純白: #ffffff がピュアブラック上で最大コントラスト(21:1)を発揮する
以下が、この哲学を体現したポートフォリオのプレビューである:
カラーパレット -- ピュアブラックの階層
ポートフォリオの背景はピュアブラック(#000000)から始まる。わずか4段階の輝度差が、空間の奥行きを生む。
Background Surface Hierarchy
テキスト階層 -- 白の4段階
アクセント -- 白黒CTAとセマンティック
| Token | 値 | 役割 |
|---|---|---|
| bg-deepest | #000000 | ピュアブラック基盤 |
| bg-base | #0a0a0a | メインコンテンツ |
| bg-surface | #141414 | カード・パネル |
| text-primary | #ffffff | 見出し |
| text-secondary | #e5e5e5 | サブ見出し |
| text-muted | #a3a3a3 | 本文 |
| text-disabled | #737373 | キャプション |
| accent-primary | #ffffff | CTA テキスト |
| accent-bg | #000000 | CTA 背景 |
タイポグラフィ -- 64px以上の大型見出し
ポートフォリオでは見出しが画面の主役を務める。64px以上、太いウェイト、広いネガティブレタースペーシングが「建築的な」印象を作る。
not decoration.
コンポーネント -- ミニマルな部品群
ボタン
ポイント: ボタンの角丸は 0px（シャープ）。建築的・ギャラリー的な印象を保つ。Primary CTA は白背景・黒テキストで最大コントラスト。
入力欄
ポイント: 入力欄はボーダーレス。下線のみ。フォーカス時に下線が白(#ffffff)に変化。フォントサイズは18pxで大きめ。
レイアウト -- シングルカラムフロー
ポートフォリオはシングルカラム。サイドバーなし。スクロールが体験そのものになる。
Layout Structure
使い方ガイド
Stitch への投入方法
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/PORTFOLIO.mdをプロジェクトのDESIGN.mdにコピー- プロジェクト画像のURL、またはunsplashのダミー画像を準備
- Stitch に「この DESIGN.md に従ってポートフォリオのトップページを作成してください」と指示
適したプロジェクト
- デザイナー・クリエイターの個人ポートフォリオ
- フォトグラファーのギャラリーサイト
- デザインスタジオのショーケース
- アーティストの作品集
不向きなプロジェクト
- 情報量の多いダッシュボード
- ECサイト（商品一覧が主体）
- ドキュメント・ブログ（テキスト主体）
パフォーマンス注意
フルブリード画像は高解像度になりがちです。WebP形式、適切なサイズ（最大1920px幅）、lazy loadingを必ず適用してください。ヒーロー画像のみ eager loading を許可します。