Vibehaus AIに伝わる、デザインの型。

ポートフォリオ · ポートフォリオ

トレーディングカード風のポートフォリオ

ポケカ・MTG・遊戯王などTCG（Trading Card Game）のカードフォーマットを再構築したポートフォリオ。レア度ティア・ホロ箔反射・ステータス値で「コレクションしたくなる作品集」に変換する尖った設計。

PUBLISHED — UPDATED — CATEGORY — ポートフォリオ LICENSE — CC0 1.0

プレビュー

vibe.itlibra.com/preview/trading-card-portfolio/

概要

ポケモンカード、マジック：ザ・ギャザリング、遊戯王——トレーディングカードゲームは、ただの紙片に「集めずにはいられない」魔力を宿してきました。その魔力の正体は、レアリティ（希少度）という格付けのシステムです。このポートフォリオは、その仕組みを作品集に持ち込みます。

レアリティが「格」を一瞬で伝える

普通のサムネイルグリッドでは、すべての作品が横並びで「同格」に見えます。どれが自信作なのか、見る人には伝わらない。トレーディングカードの様式は、Common・Rare・Ultra・Legendary といったレアリティ階層を持ち込むことで、作家自身による格付けを視覚化します。金箔の縁、ホログラム加工、発光——最上位カードに与えられる演出が、「これが代表作だ」と言葉なしで宣言する。謙遜で埋もれがちな自信作を、堂々と頂点に置ける仕組みです。

「集めたくなる」という無意識の力

カードという形式は、人間に「これはコレクションの一部だ」と錯覚させます。1枚を見ると、つい全部を見たくなる。この収集衝動が、ポートフォリオの回遊率を自然に押し上げます。さらに、hoverでカードが立体的に傾き、ホログラムが光る——この「触って楽しい」インタラクションは、見る人に小さな報酬を与え、滞在時間を延ばします。

仕上げの判断軸

レアリティは安売りしないこと——全カードがLegendaryなら、Legendaryに意味はなくなります。最上位は1〜2枚に絞り、希少性を本物にします。ホログラムや発光はCSSのconic-gradientとmix-blend-modeで表現でき、画像は不要です。hoverの傾きはモバイルでは効かないため、タップやfocusでの代替挙動を用意すること。ゲーム・エンタメ業界や、遊び心が許容されるクリエイター個人のポートフォリオに向く様式です。

使いどころ

  • クリエイター・デザイナーの個人ポートフォリオ
  • エージェンシーの実績ショーケース
  • 写真家・映像作家のセレクト作品集
  • Web3・NFT系プロダクトの作品プロモ
  • ゲーム・エンタメ業界のスタッフ紹介
カテゴリ
ポートフォリオ
スタイル
プレイフル / ボールド / ネオン / グラデーション / サイバー

背景と狙いどころ

Context

Category · ポートフォリオ

ポートフォリオ

作品集・ケーススタディ。

カテゴリ一覧を見る →

Style · プレイフル

プレイフル

遊び心・アニメーション多め。

スタイル一覧を見る →

Style · ボールド

ボールド

大見出し・極太タイポ。

スタイル一覧を見る →

AIへの指示文

クリエイターのポートフォリオを、トレーディングカードゲーム（Pokemon TCG / MTG / 遊戯王）のカードコレクションとして作ってください。

要件:
- 配色: 暗紫 #0d0a18 / #1a1230 + 紙白 #f6f1e3 + 金 #ffd54a + レア紫 #c44dff + ウルトラ赤 #ff3b6e + 伝説ティール #00f0c8。
- 背景は dark + 多重ラジアルグラデ（紫・ティール・金）でホログラム空間。
- 上部に「DECK · 8 / 64」バッジ + 巨大グラデタイトル（金→赤→紫の linear-gradient text）+ サブテキスト。
- カード4枚を grid（aspect-ratio 5/7）で並べ、各カードは：
  - 背景 linear-gradient（カードのレア度で色違い：common/rare/ultra/legendary）
  - 内側に 1.5px の金箔ボーダー（box-shadow inset）
  - 6px インセットの白半透明線（::after）
  - ::before に光沢（radial 白 + repeating-linear ハッチ）を mix-blend-mode: overlay で乗せる
  - レア度ごとに異なる発光（box-shadow のカラフル外光）
  - LEGENDARY は conic-gradient のレインボーホログラム + 二重の金箔ライン
- カード構造（上から）:
  - top: 作品名 + 撮影年/カテゴリ small + 右上にコスト数字（金箔円バッジ）
  - art: aspect 4:3 の SVG イメージ（gradient + 抽象シェイプ）
  - holo-band: hover で左→右へ走る白光ストリップ（linear-gradient + transform translate）
  - body: タイプ行（pill style）/ 短い説明文 / stats grid（CVR+72% 速度92 工期14d 等）
  - foot: ◆ COMMON / ◆◆ RARE / ◆◆◆ ULTRA / ★ LEGENDARY のレア度表記 + コレクション番号
- hover で perspective rotateY(-8deg) rotateX(4deg) translateY(-8px) で立体傾き。
- フォント: 見出しは Bebas Neue / Helvetica Neue 900、本文は Yu Gothic、数値は JetBrains Mono。
- JS不要、フルレスポンシブ（4→3→2→1カラム）。

バリエーション

遊戯王風（モンスター枠）

カードを横長に変更（aspect 5/3.5）、攻撃力/守備力の二段ステータスを追加。
枠を黄褐色 #d4a85a + 茶色 #5a3a1f に。

野球選手カード版

スポーツカード風に四角ボーダー強め、art を選手シルエット風に。
stats を 打率/HR/打点 等に変更、背景に球場の緑グラデ。

よくある質問

ホログラム表現の作り方は？
conic-gradient(from 90deg, ...) で虹色を一周させ、mix-blend-mode を overlay で下層に乗せる。動かしたければ animation で rotate or background-position を変化させる。
hover の傾き演出はモバイルで効く？
モバイルではタップでクラスを切替、または :focus-within で代替。CSS のみで実現したいなら hover を諦めて :active で即時傾けるのも手。
各レア度の配色はどう決めた？
実際のTCGをパターン分析。Common=単色 / Rare=2色gradient / Ultra=暖色派手 / Legendary=多色レインボー、というのが共通則。本実装はそれを Web 適用したもの。
ネオン発光のナイトライフ系ポートフォリオ

ネオン発光のナイトライフ系ポートフォリオ

暗背景にホットピンクとシアンの発光色を重ねるネオン系ポートフォリオ。ナイトクラブ・音楽・ゲーム・メタバースの世界観を Web に持ち込む、夜の街の空気を持つ作品集。

ポートフォリオ ネオンサイバー
巨大斜体タイポのファッション・ルックブック

巨大斜体タイポのファッション・ルックブック

写真領域を全幅に走らせ、巨大な斜体ディスプレイ書体を画面外まで突き抜けさせるファッションマガジン的ポートフォリオ。Vogue・Dazed・i-D の版面感を Web 化した、ブランドルックブック専用の尖った設計。

ポートフォリオ ファッションボールド
植物標本図鑑風のポートフォリオ

植物標本図鑑風のポートフォリオ

19世紀の植物標本台紙（Herbarium sheet）を再構築したポートフォリオ。学名イタリック表記・採取地メタ・封蝋シール・古紙ノイズで「学術コレクション」の格を作る尖った設計。

ポートフォリオ エディトリアルハンドクラフト