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

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

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

保存した一覧を見る 0 →

このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。

印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。

Vibehaus · デザイン資料
https://vibe.itlibra.com/design/trading-card-portfolio/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由

PUBLISHED — 2026年4月27日 UPDATED — 2026年10月18日 CATEGORY — ポートフォリオ LICENSE — CC0 1.0

プレビュー

AIへの指示文

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

要件:
- 配色: 暗紫 #0d0a18 / #1a1230 + 紙白 #f6f1e3 + 金 #ffd54a + レア紫 #c44dff + ウルトラ赤 #ff3b6e + 伝説ティール #00f0c8。
- 背景は dark + 多重ラジアルグラデ（紫・ティール・金）でホログラム空間。
- 上部に「DECK · 4 CARDS」バッジ + 巨大グラデタイトル（金→赤→紫の 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/打点 等に変更、背景に球場の緑グラデ。

このプレビューのコード

HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。架空の制作物・作者・工房の作品集です。売上・受賞・制作実績・沿革・住所は表示例で、実在する顧客の実績ではありません。リンクは説明へ移動し、予約・購入・問い合わせ送信は行いません。

CC0 · 改変・商用利用自由 · revision b8d903c68f75

コードを表示

<!doctype html>
<!-- Vibehaus · CC0 · 架空の表示・操作見本。外部素材・送信・永続保存なし。 -->
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<title>trading-card-portfolio preview</title>
<style>
  :root {
    --bg: #0d0a18;
    --bg2: #1a1230;
    --paper: #f6f1e3;
    --gold: #ffd54a;
    --rare: #c44dff;
    --ultra: #ff3b6e;
    --legendary: #00f0c8;
    --ink: #1a1612;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--paper);
    font-family: "Helvetica Neue", "Yu Gothic", "Noto Sans JP", sans-serif;
    line-height: 1.65;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    background-image:
      radial-gradient(circle at 20% 10%, rgba(196,77,255,0.16), transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(0,240,200,0.12), transparent 55%),
      radial-gradient(circle at 50% 50%, rgba(255,213,74,0.06), transparent 60%);
  }
  .wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 56px);
  }

  /* Header */
  .heading {
    text-align: center;
    margin-bottom: 64px;
  }
  .heading .eyebrow {
    display: inline-block;
    font-family: "JetBrains Mono", monospace;
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 0.5em;
    border: 1px solid var(--gold);
    padding: 4px 14px;
    margin-bottom: 22px;
    text-transform: uppercase;
  }
  .heading h1 {
    font-family: "Bebas Neue", "Helvetica Neue", "Yu Gothic", sans-serif;
    font-weight: 900;
    font-size: clamp(40px, 7vw, 84px);
    margin: 0 0 14px;
    letter-spacing: 0.04em;
    line-height: 1.05;
    background: linear-gradient(120deg, var(--gold), var(--ultra) 50%, var(--rare));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .heading h1 + p {
    max-width: 540px;
    margin: 0 auto;
    color: rgba(246,241,227,0.78);
    font-size: 14px;
    letter-spacing: 0.06em;
    line-height: 1.85;
  }

  /* Card grid */
  .deck {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  @media (max-width: 1100px) { .deck { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 820px) { .deck { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .deck { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; } }

  /* Card */
  .card {
    --c1: #c44dff;
    --c2: #ff3b6e;
    --rarity: "RARE";
    aspect-ratio: 5 / 7;
    border-radius: 14px;
    padding: 14px;
    background:
      linear-gradient(140deg, var(--c1), var(--c2));
    box-shadow:
      0 0 0 1.5px var(--gold) inset,
      0 18px 40px -10px rgba(0,0,0,0.55),
      0 0 28px -8px var(--c1);
    position: relative;
    transform: perspective(1000px) rotateX(0) rotateY(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    will-change: transform;
    overflow: hidden;
  }
  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,0.5), transparent 35%),
      repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 4px, transparent 4px 8px);
    mix-blend-mode: overlay;
    pointer-events: none;
  }
  .card::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.45);
    pointer-events: none;
  }

  .card:hover {
    transform: perspective(1000px) rotateY(-8deg) rotateX(4deg) translateY(-8px);
  }

  /* Card variants */
  .card.rare { --c1: #4d6dff; --c2: #c44dff; }
  .card.ultra { --c1: #ff3b6e; --c2: #ffd54a; }
  .card.legendary {
    --c1: #00f0c8;
    --c2: #4d6dff;
    box-shadow:
      0 0 0 2px var(--gold) inset,
      0 0 0 4px var(--bg2) inset,
      0 0 0 5px var(--gold) inset,
      0 24px 50px -10px rgba(0,0,0,0.6),
      0 0 40px -6px var(--legendary);
  }
  .card.legendary::before {
    background:
      radial-gradient(circle at 70% 30%, rgba(255,255,255,0.5), transparent 35%),
      conic-gradient(from 90deg, rgba(0,240,200,0.25), rgba(255,213,74,0.25), rgba(255,59,110,0.25), rgba(196,77,255,0.25), rgba(0,240,200,0.25));
    mix-blend-mode: overlay;
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: var(--paper);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
  }
  .top .name {
    font-family: "Bebas Neue", "Helvetica Neue", sans-serif;
    font-size: 18px;
    letter-spacing: 0.05em;
    text-transform: none;
    color: var(--paper);
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
  .top .name small {
    display: block;
    font-size: 9.5px;
    letter-spacing: 0.4em;
    opacity: 0.85;
    margin-top: 2px;
    font-family: "JetBrains Mono", monospace;
  }
  .top .cost {
    background: var(--paper);
    color: var(--ink);
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 14px;
    box-shadow: 0 0 0 2px var(--gold);
    font-family: "Bebas Neue", sans-serif;
  }

  /* Art window */
  .art {
    margin: 12px 0 0;
    aspect-ratio: 4 / 3;
    border: 1.5px solid rgba(255,255,255,0.5);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.42));
    position: relative;
    overflow: hidden;
    z-index: 2;
  }
  .art svg {
    width: 100%; height: 100%;
    display: block;
  }

  .holo-band {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
    mix-blend-mode: overlay;
    transform: translateX(-110%);
    transition: transform 0.7s ease;
    pointer-events: none;
  }
  .card:hover .holo-band { transform: translateX(110%); }

  /* Body */
  .body {
    color: var(--paper);
    margin-top: 12px;
    position: relative;
    z-index: 2;
  }
  .typeline {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 999px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .body .desc {
    font-size: 11.5px;
    line-height: 1.55;
    letter-spacing: 0.03em;
    color: rgba(246,241,227,0.92);
    margin: 0 0 10px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  }

  /* Stats */
  .stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-align: center;
  }
  .stats div { color: rgba(246,241,227,0.75); }
  .stats div b {
    display: block;
    color: var(--gold);
    font-size: 18px;
    font-family: "Bebas Neue", sans-serif;
    letter-spacing: 0.05em;
    line-height: 1.1;
    margin-top: 2px;
  }

  /* Footer */
  .foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-family: "JetBrains Mono", monospace;
    font-size: 8.5px;
    letter-spacing: 0.2em;
    color: rgba(246,241,227,0.7);
    z-index: 2;
    position: relative;
  }
  .rarity {
    color: var(--gold);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.3em;
  }
  .card.rare .rarity { color: #d6c2ff; }
  .card.ultra .rarity { color: #fff;}
  .card.legendary .rarity { color: var(--legendary); }

  /* Bottom strip */
  .bottom-strip {
    margin-top: 64px;
    text-align: center;
    color: rgba(246,241,227,0.55);
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
  }
  .bottom-strip b { color: var(--gold); }
[hidden]{display:none!important}
a,button,input,summary{min-width:44px;min-height:44px}
a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:default}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid currentColor;outline-offset:4px}
nav a{display:inline-flex;align-items:center;justify-content:center}
nav{flex-wrap:wrap}
header.bar{flex-wrap:wrap;gap:1rem}
input{max-width:100%}
.demo-notes{position:relative;z-index:10;box-sizing:border-box;max-width:1080px;width:calc(100% - 2rem);margin:2rem auto;padding:clamp(1rem,3vw,2rem);background:#0d0a18;color:#f6f1e3;border:1px solid currentColor;text-align:left;font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:13px;line-height:1.8;letter-spacing:0;overflow-wrap:anywhere}
.demo-notes h2{font-size:18px;line-height:1.5;margin:0 0 .75rem}
.demo-notes h3{font-size:15px;line-height:1.5;margin:0 0 .4rem}
.demo-notes p{font:inherit;color:inherit;opacity:1;margin:0 0 1rem;max-width:none;letter-spacing:0}
.demo-notes section{margin-top:1.25rem;scroll-margin-top:1rem}
.demo-notes button{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;padding:.4rem .75rem}
.demo-notes a{color:inherit}
.demo-notes .demo-motion{margin-bottom:1rem}
.demo-notes section:focus{outline:3px solid currentColor;outline-offset:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
}
</style>
</head>
<body>
  <div class="wrap">
    <header class="heading">
      <p class="eyebrow">★ DECK · 4 CARDS</p>
      <h1>FUKAMI <br>STUDIO DECK</h1>
      <p>4年間で集めた制作物を、トレーディングカードとして並べた。お気に入りを引き当てたら、ぜひ仕事の話をしよう。</p>
    </header>

    <section class="deck">
      <article class="card">
        <div class="top">
          <div class="name">Aurora UI<small>2024 / WEB</small></div>
          <div class="cost">3</div>
        </div>
        <div class="art">
          <svg viewBox="0 0 200 150" preserveAspectRatio="xMidYMid slice">
            <defs><linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#7d4dff"/><stop offset="1" stop-color="#ff5cb3"/></linearGradient></defs>
            <rect width="200" height="150" fill="url(#g1)"/>
            <circle cx="50" cy="60" r="40" fill="#fff" opacity="0.55"/>
            <circle cx="140" cy="100" r="55" fill="#fff" opacity="0.35"/>
          </svg>
          <div class="holo-band"></div>
        </div>
        <div class="body">
          <span class="typeline">SAAS · LP</span>
          <p class="desc">B2B SaaS 用のグラデーションヒーロー。CVR を 1.7倍に引き上げた実績付き。</p>
          <div class="stats">
            <div>CVR<b>+72%</b></div>
            <div>速度<b>92</b></div>
            <div>工期<b>14d</b></div>
          </div>
        </div>
        <div class="foot">
          <span class="rarity">◆ COMMON</span>
          <span>NO.024 / 64</span>
        </div>
      </article>

      <article class="card rare">
        <div class="top">
          <div class="name">Ginza Marble<small>2024 / E-COM</small></div>
          <div class="cost">5</div>
        </div>
        <div class="art">
          <svg viewBox="0 0 200 150" preserveAspectRatio="xMidYMid slice">
            <rect width="200" height="150" fill="#1a1230"/>
            <path d="M0 80 Q50 30 100 80 T200 80 V150 H0 Z" fill="#c44dff" opacity="0.7"/>
            <path d="M0 110 Q50 70 100 110 T200 110 V150 H0 Z" fill="#4d6dff" opacity="0.85"/>
            <circle cx="160" cy="40" r="20" fill="#ffd54a" opacity="0.85"/>
          </svg>
          <div class="holo-band"></div>
        </div>
        <div class="body">
          <span class="typeline">RETAIL · ECOM</span>
          <p class="desc">高級宝飾ECサイトのリブランディング。客単価が 2.4倍に。</p>
          <div class="stats">
            <div>AOV<b>×2.4</b></div>
            <div>離脱<b>−38%</b></div>
            <div>工期<b>32d</b></div>
          </div>
        </div>
        <div class="foot">
          <span class="rarity">◆◆ RARE</span>
          <span>NO.011 / 64</span>
        </div>
      </article>

      <article class="card ultra">
        <div class="top">
          <div class="name">Kaiju Booking<small>2025 / APP</small></div>
          <div class="cost">7</div>
        </div>
        <div class="art">
          <svg viewBox="0 0 200 150" preserveAspectRatio="xMidYMid slice">
            <rect width="200" height="150" fill="#220914"/>
            <polygon points="0,150 60,40 110,90 160,20 200,80 200,150" fill="#ff3b6e" opacity="0.85"/>
            <polygon points="0,150 60,90 130,130 200,100 200,150" fill="#ffd54a" opacity="0.6"/>
            <circle cx="170" cy="35" r="18" fill="#fff" opacity="0.85"/>
          </svg>
          <div class="holo-band"></div>
        </div>
        <div class="body">
          <span class="typeline">MOBILE · BOOKING</span>
          <p class="desc">飲食店予約アプリの再設計。1日DAUが過去最高記録に。</p>
          <div class="stats">
            <div>DAU<b>×3.1</b></div>
            <div>NPS<b>+44</b></div>
            <div>工期<b>62d</b></div>
          </div>
        </div>
        <div class="foot">
          <span class="rarity">◆◆◆ ULTRA</span>
          <span>NO.003 / 64</span>
        </div>
      </article>

      <article class="card legendary">
        <div class="top">
          <div class="name">EMPRESS<small>2026 / FILM</small></div>
          <div class="cost">∞</div>
        </div>
        <div class="art">
          <svg viewBox="0 0 200 150" preserveAspectRatio="xMidYMid slice">
            <defs><radialGradient id="leg" cx="0.5" cy="0.5" r="0.7"><stop offset="0" stop-color="#00f0c8"/><stop offset="0.5" stop-color="#4d6dff"/><stop offset="1" stop-color="#0a0014"/></radialGradient></defs>
            <rect width="200" height="150" fill="url(#leg)"/>
            <circle cx="100" cy="75" r="42" fill="none" stroke="#ffd54a" stroke-width="2"/>
            <circle cx="100" cy="75" r="22" fill="none" stroke="#ffd54a" stroke-width="1"/>
            <circle cx="100" cy="75" r="3" fill="#ffd54a"/>
            <line x1="100" y1="20" x2="100" y2="130" stroke="#ffd54a" stroke-width="0.5" opacity="0.5"/>
            <line x1="40" y1="75" x2="160" y2="75" stroke="#ffd54a" stroke-width="0.5" opacity="0.5"/>
          </svg>
          <div class="holo-band"></div>
        </div>
        <div class="body">
          <span class="typeline">FILM · BRAND</span>
          <p class="desc">国際映画祭ノミネートの長編映画ブランディング。アワード3冠達成。</p>
          <div class="stats">
            <div>賞<b>×3</b></div>
            <div>露出<b>52M</b></div>
            <div>工期<b>180d</b></div>
          </div>
        </div>
        <div class="foot">
          <span class="rarity">★ LEGENDARY</span>
          <span>NO.001 / 64</span>
        </div>
      </article>
    </section>

    <p class="bottom-strip">★ HOVER TO TILT ★ ALL CARDS ARE 1-OF-1 ★ <b>FREE TO COLLECT</b> ★</p>
  </div>
<aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空の制作物・作者・工房の作品集です。売上・受賞・制作実績・沿革・住所は表示例で、実在する顧客の実績ではありません。リンクは説明へ移動し、予約・購入・問い合わせ送信は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>

2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。

概要

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

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

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

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

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

仕上げの判断軸

レアリティは安売りしないこと——全カードがLegendaryなら、Legendaryに意味はなくなります。最上位は1〜2枚に絞り、希少性を本物にします。

崩れる形全カードをLegendaryにする

格付けを盛ると、Legendary という区分そのものに意味がなくなります。全部が最上位なら、見る人にとっては全部が同格です。

効く形最上位を1〜2枚に絞る

希少性が本物になり、金箔やホログラムの演出がこれが代表作だという宣言として働きます。作家自身の格付けが、はじめて情報になります。

ホログラムや発光はCSSのconic-gradientとmix-blend-modeで表現でき、画像は不要です。

hover の傾きはモバイルでは効きません。タップや focus での代替挙動を必ず用意してください。

ゲーム・エンタメ業界や、遊び心が許容されるクリエイター個人のポートフォリオに向く様式です。

見本で試せる範囲

架空の制作物・作者・工房の作品集です。売上・受賞・制作実績・沿革・住所は表示例で、実在する顧客の実績ではありません。リンクは説明へ移動し、予約・購入・問い合わせ送信は行いません。作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。