ポートフォリオ · ポートフォリオ
ネオン発光のナイトライフ系ポートフォリオ
暗背景にホットピンクとシアンの発光色を重ねるネオン系ポートフォリオ。ナイトクラブ・音楽・ゲーム・メタバースの世界観を Web に持ち込む、夜の街の空気を持つ作品集。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/neon-portfolio/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
音楽 / クラブ / ナイトカルチャー系クリエイターのポートフォリオを作ってください。 要件: - 配色: 暗背景 #07070d をベースに、ホットピンク #ff3d8a / シアン #2dd4ff / ライム #b4ff39 を発光色として使う。 - 中央にロゴ + キャッチコピー。タイトル文字は text-shadow で発光させる（neon glow）。 - 作品グリッドは 4 列 (デスクトップ) × 2-3 行。各カードは「画像プレースホルダー（ビビッドな単色グラデ）」+ プロジェクト名 + 短いタグ。 - カード hover で：1) ボーダーが発光色に光る 2) タイトルが上にずれる 3) タグ全体がうっすらグリッチ。 - 画面の四隅または上下にスキャンライン（線状の半透明オーバーレイ）を 5% 程度。 - 背景に大きな blur のラジアル光（ピンク・シアン）を 2-3 個。 - ヘッダーは透明で位置 fixed、ロゴ + 4 ナビ + 1 CTA。 - ヒーロー直下に大きな数字メーター（"FOLLOWERS / TRACKS / PARTIES"）3 つを並列表示。発光数字。 - フォント: ヘッダーや数字は monospace（JetBrains Mono / Space Mono）、本文は Inter + Noto Sans JP。 - JS不要、フルレスポンシブ。
バリエーション
モノクロネオン版
発光色を 1 色（シアン）だけに絞り、他は無彩色で構成。 サイバーパンクからクールな実験色に印象が変わる。
60秒イントロ動画版
ヒーローを動画ループ（aspect-ratio 16/9、autoplay muted loop）に差し替え。 他は同構成でアニメ的な空気感を強める。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。架空の制作物・作者・工房の作品集です。売上・受賞・制作実績・沿革・住所は表示例で、実在する顧客の実績ではありません。リンクは説明へ移動し、予約・購入・問い合わせ送信は行いません。
コードを表示
<!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" />
<title>ネオン発光のナイトライフ系ポートフォリオ — Vibehaus プレビュー</title>
<style>
:root {
--bg: #07070d;
--fg: #f5f3ee;
--muted: rgba(245, 243, 238, 0.7);
--quiet: rgba(245, 243, 238, 0.45);
--pink: #ff3d8a;
--cyan: #2dd4ff;
--lime: #b4ff39;
--magenta: #c45fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
"Yu Gothic", "Meiryo", sans-serif;
background: var(--bg);
color: var(--fg);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
position: relative;
overflow-x: hidden;
min-height: 100dvh;
}
/* Ambient mesh — pink and cyan blobs that float behind everything */
body::before {
content: "";
position: absolute;
inset: -10vh -10vw;
background:
radial-gradient(40% 50% at 18% 22%, rgba(255, 61, 138, 0.45), transparent 70%),
radial-gradient(40% 50% at 82% 18%, rgba(45, 212, 255, 0.35), transparent 70%),
radial-gradient(45% 55% at 70% 88%, rgba(180, 255, 57, 0.18), transparent 70%);
filter: blur(50px);
z-index: 0;
}
/* Scanlines overlay */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1000;
background-image: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 2px,
rgba(245, 243, 238, 0.04) 2px,
rgba(245, 243, 238, 0.04) 3px
);
mix-blend-mode: overlay;
}
/* Header */
header.site {
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
}
.logo {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.logo::before {
content: "";
width: 11px; height: 11px;
border-radius: 999px;
background: var(--lime);
box-shadow: 0 0 12px var(--lime), 0 0 24px var(--lime);
}
header.site nav {
display: flex;
gap: 1.5rem;
font-family: "JetBrains Mono", monospace;
font-size: 0.74rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
header.site nav a { color: inherit; text-decoration: none; }
header.site nav a:hover { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }
header.site .book {
font-family: "JetBrains Mono", monospace;
font-size: 0.74rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.45rem 0.9rem;
background: transparent;
border: 1px solid var(--pink);
color: var(--pink);
text-decoration: none;
border-radius: 999px;
transition: all 0.2s;
}
.book:hover { background: var(--pink); color: var(--bg); box-shadow: 0 0 18px var(--pink); }
@media (max-width: 720px) {
header.site nav { display: none; }
}
/* Hero */
.hero {
position: relative;
z-index: 5;
text-align: center;
padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
}
.hero .label {
display: inline-block;
font-family: "JetBrains Mono", monospace;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--lime);
margin-bottom: 1.5rem;
padding: 0.4rem 0.85rem;
border: 1px solid var(--lime);
border-radius: 999px;
box-shadow: 0 0 16px rgba(180, 255, 57, 0.3);
}
.hero h1 {
margin: 0 0 1.5rem;
font-size: clamp(2.5rem, 8vw, 6rem);
line-height: 1;
letter-spacing: -0.04em;
font-weight: 800;
text-transform: uppercase;
color: var(--fg);
text-shadow:
0 0 20px rgba(255, 61, 138, 0.5),
0 0 40px rgba(45, 212, 255, 0.25);
}
.hero h1 :lang(ja) {
letter-spacing: 0;
line-height: 1.1;
text-transform: none;
}
.hero h1 .pink { color: var(--pink); text-shadow: 0 0 20px var(--pink), 0 0 40px var(--pink); }
.hero h1 .cyan { color: var(--cyan); text-shadow: 0 0 20px var(--cyan), 0 0 40px var(--cyan); }
.hero p.lede {
margin: 0 auto;
font-size: 1.05rem;
line-height: 1.85;
color: var(--muted);
max-width: 56ch;
}
/* Stats meter */
.stats {
position: relative;
z-index: 5;
max-width: 1100px;
margin: 0 auto clamp(3rem, 5vw, 4rem);
padding: 0 clamp(1rem, 4vw, 2.5rem);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
@media (max-width: 600px) { .stats { grid-template-columns: 1fr; } }
.stat {
background: rgba(7, 7, 13, 0.65);
border: 1px solid rgba(245, 243, 238, 0.12);
border-radius: 12px;
padding: 1.25rem 1.4rem;
backdrop-filter: blur(10px);
}
.stat .num {
display: block;
font-family: "JetBrains Mono", monospace;
font-size: clamp(1.75rem, 3vw, 2.4rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--fg);
}
.stat:nth-child(1) .num { color: var(--pink); text-shadow: 0 0 18px rgba(255, 61, 138, 0.5); }
.stat:nth-child(2) .num { color: var(--cyan); text-shadow: 0 0 18px rgba(45, 212, 255, 0.5); }
.stat:nth-child(3) .num { color: var(--lime); text-shadow: 0 0 18px rgba(180, 255, 57, 0.5); }
.stat .lab {
display: block;
margin-top: 0.4rem;
font-family: "JetBrains Mono", monospace;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--quiet);
}
/* Works grid */
section.works {
position: relative;
z-index: 5;
max-width: 1240px;
margin: 0 auto;
padding: 0 clamp(1rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}
.head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 1.5rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid rgba(245, 243, 238, 0.16);
flex-wrap: wrap;
gap: 1rem;
}
.head h2 {
margin: 0;
font-size: 1.5rem;
letter-spacing: -0.02em;
font-weight: 700;
}
.head .label {
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--quiet);
}
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 600px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.work {
position: relative;
background: rgba(7, 7, 13, 0.7);
border: 1px solid rgba(245, 243, 238, 0.12);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
cursor: pointer;
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.work:hover {
transform: translateY(-4px);
border-color: var(--pink);
box-shadow: 0 0 36px -8px rgba(255, 61, 138, 0.55);
}
.work:nth-child(2):hover { border-color: var(--cyan); box-shadow: 0 0 36px -8px rgba(45, 212, 255, 0.55); }
.work:nth-child(3):hover { border-color: var(--lime); box-shadow: 0 0 36px -8px rgba(180, 255, 57, 0.55); }
.work:nth-child(4):hover { border-color: var(--magenta); box-shadow: 0 0 36px -8px rgba(196, 95, 255, 0.55); }
.work:nth-child(5):hover { border-color: var(--cyan); box-shadow: 0 0 36px -8px rgba(45, 212, 255, 0.55); }
.work:nth-child(6):hover { border-color: var(--pink); box-shadow: 0 0 36px -8px rgba(255, 61, 138, 0.55); }
.work:nth-child(7):hover { border-color: var(--magenta); box-shadow: 0 0 36px -8px rgba(196, 95, 255, 0.55); }
.work:nth-child(8):hover { border-color: var(--lime); box-shadow: 0 0 36px -8px rgba(180, 255, 57, 0.55); }
.thumb {
aspect-ratio: 5 / 4;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(245, 243, 238, 0.12);
}
.thumb::after {
/* tiny SVG noise mixed into the pure-color thumb so it doesn't read as a flat block */
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
opacity: 0.12;
mix-blend-mode: overlay;
}
.thumb-1 { background: radial-gradient(circle at 30% 30%, var(--pink) 0%, transparent 60%), radial-gradient(circle at 70% 80%, var(--magenta) 0%, transparent 60%), #1a1028; }
.thumb-2 { background: radial-gradient(circle at 70% 30%, var(--cyan) 0%, transparent 65%), #062029; }
.thumb-3 { background: radial-gradient(circle at 50% 50%, var(--lime) 0%, transparent 60%), #0e1804; }
.thumb-4 { background: linear-gradient(135deg, var(--magenta), var(--pink) 60%, transparent 100%), #14071a; }
.thumb-5 { background: linear-gradient(180deg, var(--cyan), transparent 60%), #061520; }
.thumb-6 { background: conic-gradient(from 180deg, var(--pink), var(--magenta), var(--cyan), var(--pink)); filter: blur(0.5px); opacity: 0.85; }
.thumb-7 { background: linear-gradient(45deg, var(--magenta) 0%, var(--cyan) 100%); }
.thumb-8 { background: radial-gradient(circle at 50% 100%, var(--lime) 0%, transparent 70%), #061511; }
.body {
padding: 0.9rem 1rem 1.1rem;
}
.work .num {
font-family: "JetBrains Mono", monospace;
font-size: 0.68rem;
letter-spacing: 0.16em;
color: var(--quiet);
}
.work h3 {
margin: 0.25rem 0 0.45rem;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.35;
transition: transform 0.3s;
}
.work:hover h3 { transform: translateY(-2px); }
.tags {
font-family: "JetBrains Mono", monospace;
font-size: 0.68rem;
letter-spacing: 0.06em;
color: var(--muted);
}
.tags span + span { color: var(--quiet); margin-left: 0.4rem; }
footer.site {
position: relative;
z-index: 5;
padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
border-top: 1px solid rgba(245, 243, 238, 0.12);
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--quiet);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
[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:#07070d;color:#f5f3ee;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}
}
body::before{inset:0}
header.bar nav{display:flex;flex-wrap:wrap;gap:.5rem}header.bar nav a{letter-spacing:0}
header.site{flex-wrap:wrap;gap:.75rem}header.site nav{display:flex;flex-wrap:wrap;gap:.75rem}@media(max-width:720px){header.site nav{order:3;width:100%;justify-content:center}}
</style>
</head>
<body>
<header class="site">
<div class="logo">DJ.NIGHTSHADE</div>
<nav>
<a href="#demo-link-0">Works</a>
<a href="#demo-link-1">Mixes</a>
<a href="#demo-link-2">Tour</a>
<a href="#demo-link-3">Press</a>
</nav>
<a class="book" href="#demo-link-4">Book ↗</a>
</header>
<section class="hero">
<p class="label">№ Spring/Summer · 2026</p>
<h1>
<span class="pink">night</span>shade<br/>
/ <span class="cyan">selected works</span>
</h1>
<p class="lede">
ベルリン・東京・ソウルで活動する DJ / プロデューサーの選集。Boiler Room、Resident Advisor、b2b セットを含む 36 本の収録。
</p>
</section>
<section class="stats">
<div class="stat"><span class="num">128K+</span><span class="lab">Followers</span></div>
<div class="stat"><span class="num">042</span><span class="lab">Tracks Released</span></div>
<div class="stat"><span class="num">19</span><span class="lab">Cities Played</span></div>
</section>
<section class="works">
<div class="head">
<h2>Works</h2>
<span class="label">№ 01—08 · Selected Mixes & Visuals</span>
</div>
<div class="grid">
<a class="work" href="#demo-link-5"><div class="thumb thumb-1"></div><div class="body"><span class="num">№ 01</span><h3>Voltage</h3><div class="tags"><span>Mix</span><span>Album Art</span></div></div></a>
<a class="work" href="#demo-link-6"><div class="thumb thumb-2"></div><div class="body"><span class="num">№ 02</span><h3>Sleepers' Anthem</h3><div class="tags"><span>EP</span><span>Cover</span></div></div></a>
<a class="work" href="#demo-link-7"><div class="thumb thumb-3"></div><div class="body"><span class="num">№ 03</span><h3>Acid Garden</h3><div class="tags"><span>Visual</span><span>Live</span></div></div></a>
<a class="work" href="#demo-link-8"><div class="thumb thumb-4"></div><div class="body"><span class="num">№ 04</span><h3>Pink Static</h3><div class="tags"><span>Mix</span><span>Boiler Room</span></div></div></a>
<a class="work" href="#demo-link-9"><div class="thumb thumb-5"></div><div class="body"><span class="num">№ 05</span><h3>Tokyo Night Loop</h3><div class="tags"><span>Album</span><span>2025</span></div></div></a>
<a class="work" href="#demo-link-10"><div class="thumb thumb-6"></div><div class="body"><span class="num">№ 06</span><h3>Spectrum b2b</h3><div class="tags"><span>Live</span><span>4hr</span></div></div></a>
<a class="work" href="#demo-link-11"><div class="thumb thumb-7"></div><div class="body"><span class="num">№ 07</span><h3>Magnetic East</h3><div class="tags"><span>Single</span><span>Remix</span></div></div></a>
<a class="work" href="#demo-link-12"><div class="thumb thumb-8"></div><div class="body"><span class="num">№ 08</span><h3>Greenroom Mix</h3><div class="tags"><span>Podcast</span><span>1hr</span></div></div></a>
</div>
</section>
<footer class="site">
<span>© 2026 Nightshade</span>
<span>Berlin · Tokyo · Seoul</span>
</footer>
<aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空の制作物・作者・工房の作品集です。売上・受賞・制作実績・沿革・住所は表示例で、実在する顧客の実績ではありません。リンクは説明へ移動し、予約・購入・問い合わせ送信は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-link-0" tabindex="-1">
<h3>Worksの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-1" tabindex="-1">
<h3>Mixesの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-2" tabindex="-1">
<h3>Tourの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-3" tabindex="-1">
<h3>Pressの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-4" tabindex="-1">
<h3>Book ↗の見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-5" tabindex="-1">
<h3>Voltageの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-6" tabindex="-1">
<h3>Sleepers' Anthemの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-7" tabindex="-1">
<h3>Acid Gardenの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-8" tabindex="-1">
<h3>Pink Staticの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-9" tabindex="-1">
<h3>Tokyo Night Loopの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-10" tabindex="-1">
<h3>Spectrum b2bの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-11" tabindex="-1">
<h3>Magnetic Eastの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-12" tabindex="-1">
<h3>Greenroom Mixの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
ネオンサインの発光をWebに持ち込む表現は、サイバーパンクの映像美——『ブレードランナー』の雨に濡れた歓楽街、香港の九龍城——を源流に持ちます。暗闇があってはじめて光は輝く。この一点が、ネオン系ポートフォリオの設計すべてを決めます。
色が作家性を語る
写真や動画を一切使わなくても、ホットピンクとシアンの発光だけで「夜の人」「クラブカルチャーの住人」という人物像が立ち上がります。これはブランディングにおいて極めて効率的で、訪問者は作品を一つも見る前に、すでに作家のムードを受け取っている。色そのものがポートフォリオの第一声になるのです。発光は box-shadow と text-shadow を多重に重ねて作ります。彩度を上げすぎると安っぽくなるので、暗背景に対して滲む程度の柔らかさが、上質さとケバさを分ける境界線です。
向く相手・向かない相手
DJ、VJ、ゲーム・メタバース系クリエイター、ナイトイベンターには、これ以上ない世界観の一致があります。逆に、コーポレート・B2B・士業のサイトに持ち込むと、信頼性の記号と真っ向から衝突する。長時間の作業を伴うツールのUIにも不向きで、暗黒×蛍光は数分の鑑賞には最高でも、数時間の操作には眼精疲労を生みます。あくまで「見せて立ち去らせる」ショーケース向けの様式です。
崩れる形長時間の作業を伴うツールUI
暗黒×蛍光は数分の鑑賞には最高でも、数時間の操作では眼精疲労を生みます。コーポレートやB2Bでは、信頼性の記号と真っ向から衝突します。
効く形見せて立ち去らせるショーケース
DJ、VJ、ゲーム・メタバース系、ナイトイベンター。作品を一つも見る前に作家のムードが伝わるぶん、短時間で世界観を渡す用途に最適です。
仕上げの判断軸
スキャンラインや背景のラジアル光は5%前後の薄さに抑え、主役である作品グリッドのコントラストを食わないこと。発光色は2〜3色に絞ると、にぎやかさの中に統一感が宿ります。
5%スキャンラインと背景光の濃さ。作品のコントラストを食わない
2〜3色発光色。絞るとにぎやかさの中に統一感が宿る
数字メーター（フォロワー・楽曲数・出演数）はモノスペースの発光数字にすると、作家の実績が夜景の一部として自然に溶け込みます。
見本で試せる範囲
架空の制作物・作者・工房の作品集です。売上・受賞・制作実績・沿革・住所は表示例で、実在する顧客の実績ではありません。リンクは説明へ移動し、予約・購入・問い合わせ送信は行いません。 作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。
ポートフォリオの構成要素
使いどころ
- 音楽プロデューサー・DJ・VJ
- ゲーム・メタバース系クリエイター
- ナイトクラブ・イベンターのオフィシャル
- サイバーパンク・SF寄りのアーティスト
このデザインの分類
背景と狙いどころ
よくある質問
ネオン色は目に負担がかからない？
暗背景前提なら問題なし。発光は box-shadow で柔らかく、彩度を下げるとさらに長時間鑑賞できます。長時間操作するインタフェースは別タスク。
画像なしで世界観出ますか？
グラデや色面、絵文字・大型タイポだけでも十分世界観は作れます。むしろ画像が無い分パフォーマンスが軽く、暗背景にも溶け込みやすい。
AdSense と相性は？
暗背景＋ネオンは広告のラベル化に対して visual contrast が強すぎる場合があります。広告ブロックには明るい背景を持たせるか、コンテンツ間の自然な切れ目に配置するのが安全。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
トレーディングカード風のポートフォリオ
ポケカ・MTG・遊戯王などTCG（Trading Card Game）のカードフォーマットを再構築したポートフォリオ。レア度ティア・ホロ箔反射・ステータス値で「コレクションしたくなる作品集」に変換する尖った設計。
植物標本図鑑風のポートフォリオ
19世紀の植物標本台紙（Herbarium sheet）を再構築したポートフォリオ。学名イタリック表記・採取地メタ・封蝋シール・古紙ノイズで「学術コレクション」の格を作る尖った設計。
侘び寂びの墨絵的ポートフォリオ
不完全さを美と捉える日本の侘び寂び美学を Web に持ち込んだポートフォリオ。墨絵のかすれ、紙質感、大胆な余白、明朝の縦書き和文、朱の落款で「静けさ」を作る尖った設計。