ポートフォリオ · ポートフォリオ
植物標本図鑑風のポートフォリオ
19世紀の植物標本台紙(Herbarium sheet)を再構築したポートフォリオ。学名イタリック表記・採取地メタ・封蝋シール・古紙ノイズで「学術コレクション」の格を作る尖った設計。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/botanical-specimen-portfolio/
完全無料・著作権フリー(CC0)· 料金¥0 · 商用利用・改変自由
プレビュー
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
クリエイターの作品集を、19世紀の大学標本室の植物標本台紙コレクションとして作ってください。
要件:
- 配色: 古紙 #f0e6cf / #e0d3a8 + 紙影 #c4b48a + 墨 #1c1810 / 褪色 #4d4030 / 淡 #847658 + ハーブ緑 #4a6b3a / #2c4825 + テラコッタ #b04c30 + 古金 #a88830。
- 全体に淡いドットノイズ(4×4px)+ 緑・赤の薄いシミ + 中央 vignette。
- 上部ヘッダー: 4px 二重線 + 1px 線で挟む帯。「HERBARIUM · 標本収蔵庫」(イタリック EB Garamond)+ 「EST. 1894 · CATALOG 04 · 2026」。
- ヒーロー: 大型イタリック明朝「標本にした、仕事の断片。」(最後を太字テラコッタ)+ ラテン語サブタイトル(Specimina laborum selectorum · MMXXII — MMXXVI)+ 短い説明。
- 標本シート 6枚(grid 3カラム → 2 → 1):
- 古紙背景 + 1px 紙影ボーダー + box-shadow 厚め
- rotate -1.2 〜 +1.2deg のランダム微傾き
- 上端に標本貼付テープ(::before / ::after、半透明 + ストライプ)2枚
- SPECIMEN № 04-001 〜 06(letter-spacing 0.4em、ハーブ緑、底に1px線)
- フレーム(aspect 4/5): 1px 紙影ボーダー + 8px インセット二重線 + radial 中央光
- SVG で植物イラスト(茎・葉・花・実・根・松葉等の手描き風線画)
- 花は朱赤、葉はハーブ緑、それぞれ fill-opacity 0.5 で水彩風に
- 学名(イタリック明朝26px、属名イタリック・種小名太字)
- 慣用名(letter-spacing 0.35em、淡灰大文字、例: VIBEHAUS · DESIGN CATALOG)
- 説明文(13.5px、行間1.85、植物学的レトリックを混ぜる)
- メタグリッド(採取地 / 採取年 / 用途 / 高さ)2カラム、ラベル小字 letter-spacing、値はイタリック明朝
- 封蝋シール(::after、56px 円、テラコッタ or ハーブ緑の radial-gradient、文字「V/F/R/P/C」イタリック、rotate -12deg、立体感を box-shadow で演出)
- hover で rotate(0deg) + translateY(-6px) + shadow 強化 + z-index 5。
- 下部 signoff: ローマ数字年(Anno MMXXVI)+ Curatum a [name] + イタリック「— Vibehaus Herbarium · 6 specimens of 64 —」。
- フォント: 全体 EB Garamond / Cormorant Garamond + Yu Mincho 和文フォールバック、メタはモノスペース寄り。
- JS不要、フルレスポンシブ。
バリエーション
鳥類図鑑版
植物 SVG を鳥(嘴・羽・脚)に変更。学名を Aves 系に。 色を青褐色 + 緋色のエレガント配色に。
鉱物標本版
植物を結晶構造(六角・八面体・トリゴナル)に変更。 色をモノクロ + メタリック銀に振って黒檀ベース #1a1410 を差し色に。
このプレビューのコード
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,nofollow">
<title>botanical-specimen-portfolio preview</title>
<style>
:root {
--paper: #f0e6cf;
--paper-aged: #e0d3a8;
--paper-shadow: #c4b48a;
--ink: #1c1810;
--ink-soft: #4d4030;
--ink-faint: #847658;
--herb: #4a6b3a;
--herb-deep: #2c4825;
--terracotta: #b04c30;
--gold: #a88830;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--paper-aged);
color: var(--ink);
font-family: "EB Garamond", "Cormorant Garamond", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
line-height: 1.7;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
background-image:
radial-gradient(rgba(74,58,40,0.05) 1px, transparent 1px),
radial-gradient(circle at 18% 20%, rgba(176,76,48,0.04), transparent 50%),
radial-gradient(circle at 82% 78%, rgba(74,107,58,0.05), transparent 55%);
background-size: 4px 4px, auto, auto;
}
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(28,24,16,0.18) 100%);
z-index: 0;
}
.stage {
position: relative;
max-width: 1280px;
margin: 0 auto;
padding: clamp(24px, 4vw, 56px);
z-index: 1;
}
/* Top header strip */
.topbar {
border-top: 4px double var(--ink);
border-bottom: 1px solid var(--ink);
padding: 12px 0;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
font-size: 11px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--ink-soft);
}
.topbar .museum {
font-family: "EB Garamond", "Yu Mincho", serif;
font-size: 22px;
letter-spacing: 0.18em;
color: var(--ink);
font-style: normal;
text-transform: none;
font-weight: 400;
}
.topbar .museum b { font-style: normal; font-weight: 700; color: var(--terracotta); }
/* Hero */
.hero {
text-align: center;
margin-bottom: 56px;
position: relative;
}
.hero .eyebrow {
color: var(--herb);
font-size: 11px;
letter-spacing: 0.6em;
margin: 0 0 16px;
text-transform: uppercase;
}
.hero h1 {
font-family: "EB Garamond", "Cormorant Garamond", "Yu Mincho", serif;
font-style: normal;
font-weight: 400;
font-size: clamp(48px, 8vw, 96px);
margin: 0 0 12px;
line-height: 1;
letter-spacing: 0.02em;
color: var(--ink);
}
/* <i> の既定の斜体を消す。和文は傾けない(docs/RULES.md §8) */
.hero h1 i { font-style: normal; }
.hero h1 b {
font-style: normal;
font-weight: 700;
color: var(--terracotta);
}
.hero .latin {
font-family: "EB Garamond", serif;
font-style: italic;
font-size: 16px;
color: var(--ink-soft);
letter-spacing: 0.18em;
margin: 0 0 20px;
}
.hero p {
max-width: 580px;
margin: 0 auto;
color: var(--ink-soft);
font-size: 14px;
letter-spacing: 0.04em;
line-height: 1.85;
}
/* Specimen grid */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }
/* Specimen sheet */
.sheet {
--tilt: 0deg;
background: var(--paper);
border: 1px solid var(--paper-shadow);
padding: 22px 22px 28px;
box-shadow:
0 1px 0 rgba(255,255,255,0.5) inset,
0 14px 28px -10px rgba(28,24,16,0.45);
transform: rotate(var(--tilt));
position: relative;
transition: transform 0.25s ease, box-shadow 0.25s ease;
text-decoration: none;
color: inherit;
display: block;
background-image:
radial-gradient(rgba(74,58,40,0.04) 1px, transparent 1px),
radial-gradient(circle at 18% 16%, rgba(176,76,48,0.06), transparent 25%),
radial-gradient(circle at 88% 88%, rgba(74,107,58,0.05), transparent 30%);
background-size: 4px 4px, auto, auto;
}
.sheet:hover {
transform: rotate(0deg) translateY(-6px);
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 22px 40px -10px rgba(28,24,16,0.55);
z-index: 5;
}
.sheet.s1 { --tilt: -1.2deg; }
.sheet.s2 { --tilt: 0.6deg; }
.sheet.s3 { --tilt: -0.8deg; }
.sheet.s4 { --tilt: 1.2deg; }
.sheet.s5 { --tilt: -0.5deg; }
.sheet.s6 { --tilt: 0.9deg; }
/* Hole-punch corners (tape) */
.sheet::before, .sheet::after {
content: "";
position: absolute;
width: 60px; height: 16px;
background: rgba(74,58,40,0.12);
background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,0.4) 6px 7px);
background-color: rgba(216,200,156,0.65);
z-index: 3;
}
.sheet::before { top: -8px; left: 22px; transform: rotate(-3deg); }
.sheet::after { top: -8px; right: 22px; transform: rotate(3deg); }
/* Specimen header */
.num {
font-family: "EB Garamond", monospace;
font-size: 11px;
letter-spacing: 0.4em;
color: var(--herb);
text-transform: uppercase;
border-bottom: 1px solid var(--ink-faint);
padding-bottom: 6px;
margin-bottom: 18px;
display: flex;
justify-content: space-between;
}
.num b { color: var(--terracotta); font-weight: 700; }
/* Illustration frame */
.frame {
aspect-ratio: 4 / 5;
border: 1px solid var(--ink-faint);
background:
radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.4), transparent 60%),
var(--paper);
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.frame::before {
content: "";
position: absolute;
inset: 8px;
border: 1px solid var(--ink-faint);
pointer-events: none;
}
.frame svg {
width: 100%; height: 100%;
display: block;
}
/* Latin name */
.sheet h3 {
font-family: "EB Garamond", "Cormorant Garamond", "Yu Mincho", serif;
font-style: italic;
font-weight: 400;
font-size: 26px;
color: var(--ink);
margin: 0 0 4px;
line-height: 1.18;
letter-spacing: 0.02em;
}
.sheet h3 b {
font-style: normal;
font-weight: 700;
color: var(--ink);
}
.sheet .common {
font-size: 11px;
letter-spacing: 0.35em;
color: var(--ink-faint);
text-transform: uppercase;
margin: 0 0 14px;
}
/* Description */
.sheet p {
margin: 0 0 18px;
font-size: 13.5px;
line-height: 1.85;
color: var(--ink-soft);
letter-spacing: 0.03em;
}
/* Meta info */
.meta {
border-top: 1px dashed var(--ink-faint);
padding-top: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 14px;
font-size: 10.5px;
letter-spacing: 0.05em;
color: var(--ink);
}
.meta .lbl {
display: block;
font-size: 9px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 1px;
}
.meta .val {
font-family: "EB Garamond", serif;
font-style: italic;
color: var(--ink);
font-size: 12.5px;
}
/* Wax seal */
.seal {
position: absolute;
bottom: 12px; right: 14px;
width: 56px; height: 56px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #d96a48, var(--terracotta) 60%, #6e2e1c);
color: var(--paper);
display: grid;
place-items: center;
font-family: "EB Garamond", serif;
font-style: italic;
font-weight: 700;
font-size: 18px;
box-shadow:
0 3px 6px rgba(0,0,0,0.35),
inset 1px 2px 2px rgba(255,255,255,0.35),
inset -1px -2px 3px rgba(0,0,0,0.25);
letter-spacing: 0;
transform: rotate(-12deg);
}
.seal.bot {
bottom: auto;
top: 12px;
right: 14px;
background: radial-gradient(circle at 35% 30%, #6a8855, var(--herb) 60%, #1a2c12);
}
/* Bottom signature */
.signoff {
margin-top: 48px;
text-align: center;
color: var(--ink-soft);
font-size: 12px;
letter-spacing: 0.25em;
border-top: 1px solid var(--ink);
padding-top: 18px;
text-transform: uppercase;
}
.signoff b {
color: var(--terracotta);
font-style: italic;
}
.signoff .roman {
font-family: "EB Garamond", serif;
font-style: italic;
font-size: 14px;
margin-top: 6px;
color: var(--ink);
letter-spacing: 0.05em;
text-transform: none;
}
[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:#f6f1e8;color:#211c17;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="stage">
<header class="topbar">
<span class="museum"><b>HERBARIUM</b> · 標本収蔵庫</span>
<span>EST. 1894 · CATALOG 04 · 2026</span>
</header>
<section class="hero">
<p class="eyebrow">— Selected Works · Folio 04 —</p>
<h1><i>標本にした、</i><b>仕事の断片。</b></h1>
<p class="latin">Specimina laborum selectorum · MMXXII — MMXXVI</p>
<p>4 年間に手がけたプロジェクトを、植物標本として収蔵した。学名・採取地・収蔵年を添えて、6 点を展示する。</p>
</section>
<section class="grid">
<a href="#demo-link-0" class="sheet s1">
<div class="num"><span>SPECIMEN №</span><b>04-001</b></div>
<div class="frame">
<svg viewBox="0 0 200 250" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
<g stroke="#2c4825" stroke-width="1.4" fill="none">
<path d="M 100 230 L 100 60" stroke-width="1.8"/>
<!-- leaves -->
<path d="M 100 200 Q 60 190 50 160 Q 75 175 100 180" fill="#4a6b3a" fill-opacity="0.5"/>
<path d="M 100 170 Q 145 160 155 130 Q 130 145 100 150" fill="#4a6b3a" fill-opacity="0.5"/>
<path d="M 100 130 Q 65 120 55 90 Q 80 105 100 110" fill="#4a6b3a" fill-opacity="0.5"/>
<!-- flower top -->
<circle cx="100" cy="60" r="14" fill="#b04c30" fill-opacity="0.7"/>
<circle cx="86" cy="50" r="9" fill="#b04c30" fill-opacity="0.5"/>
<circle cx="114" cy="50" r="9" fill="#b04c30" fill-opacity="0.5"/>
<circle cx="100" cy="42" r="8" fill="#b04c30" fill-opacity="0.5"/>
<circle cx="100" cy="60" r="3" fill="#a88830"/>
<!-- roots -->
<path d="M 100 230 L 80 248 M 100 230 L 100 250 M 100 230 L 120 246"/>
</g>
</svg>
</div>
<h3><i>Vibehaus</i> <b>floribunda</b></h3>
<p class="common">VIBEHAUS · DESIGN CATALOG</p>
<p>74 のWebデザインを花弁のように咲かせる、季節を選ばぬ多年生プロジェクト。本記事もこの一輪である。</p>
<div class="meta">
<div><span class="lbl">採取地</span><span class="val">Tokyo, JP</span></div>
<div><span class="lbl">採取年</span><span class="val">2026</span></div>
<div><span class="lbl">用途</span><span class="val">Editorial</span></div>
<div><span class="lbl">高さ</span><span class="val">120 px</span></div>
</div>
<span class="seal">V</span>
</a>
<a href="#demo-link-1" class="sheet s2">
<div class="num"><span>SPECIMEN №</span><b>04-002</b></div>
<div class="frame">
<svg viewBox="0 0 200 250" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
<g stroke="#2c4825" stroke-width="1.2" fill="none">
<path d="M 100 240 L 100 30" stroke-width="2"/>
<!-- fern leaves -->
<g fill="#4a6b3a" fill-opacity="0.45">
<path d="M 100 50 Q 60 60 35 90 Q 65 70 100 75 Z"/>
<path d="M 100 70 Q 140 80 165 110 Q 135 90 100 95 Z"/>
<path d="M 100 95 Q 55 105 30 140 Q 65 115 100 120 Z"/>
<path d="M 100 115 Q 145 125 170 155 Q 135 130 100 140 Z"/>
<path d="M 100 140 Q 50 150 25 185 Q 65 158 100 165 Z"/>
<path d="M 100 160 Q 150 170 175 200 Q 140 175 100 185 Z"/>
<path d="M 100 185 Q 60 195 40 220 Q 70 200 100 210 Z"/>
</g>
<circle cx="100" cy="30" r="4" fill="#a88830"/>
</g>
</svg>
</div>
<h3><i>Festuca</i> <b>ginza</b></h3>
<p class="common">GINZA MARBLE · E-COMMERCE</p>
<p>銀座の地に根を下ろした多年草。花弁よりも葉脈の繊細さが珍重され、高級宝飾ブランドの装飾に使われた。</p>
<div class="meta">
<div><span class="lbl">採取地</span><span class="val">Ginza, JP</span></div>
<div><span class="lbl">採取年</span><span class="val">2024</span></div>
<div><span class="lbl">用途</span><span class="val">Retail</span></div>
<div><span class="lbl">高さ</span><span class="val">240 px</span></div>
</div>
<span class="seal bot">F</span>
</a>
<a href="#demo-link-2" class="sheet s3">
<div class="num"><span>SPECIMEN №</span><b>04-003</b></div>
<div class="frame">
<svg viewBox="0 0 200 250" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
<g stroke="#2c4825" stroke-width="1.4" fill="none">
<path d="M 100 240 L 100 80" stroke-width="2"/>
<path d="M 100 160 Q 60 150 50 120" fill="#4a6b3a" fill-opacity="0.5"/>
<path d="M 100 140 Q 145 130 160 100" fill="#4a6b3a" fill-opacity="0.5"/>
<!-- berry cluster -->
<g fill="#b04c30" fill-opacity="0.85">
<circle cx="92" cy="65" r="9"/>
<circle cx="110" cy="58" r="9"/>
<circle cx="98" cy="48" r="9"/>
<circle cx="118" cy="74" r="8"/>
<circle cx="86" cy="78" r="8"/>
<circle cx="104" cy="80" r="7"/>
</g>
<path d="M 100 230 L 70 250 M 100 230 L 130 250"/>
</g>
</svg>
</div>
<h3><i>Rubus</i> <b>kaiju</b></h3>
<p class="common">KAIJU BOOKING · MOBILE APP</p>
<p>怪獣の名を冠した実生植物。果実は予約需要のように密集し、夏の夕焼けに染まる。山地でのみ自生する。</p>
<div class="meta">
<div><span class="lbl">採取地</span><span class="val">Hakone</span></div>
<div><span class="lbl">採取年</span><span class="val">2025</span></div>
<div><span class="lbl">用途</span><span class="val">Mobile</span></div>
<div><span class="lbl">高さ</span><span class="val">180 px</span></div>
</div>
<span class="seal">R</span>
</a>
<a href="#demo-link-3" class="sheet s4">
<div class="num"><span>SPECIMEN №</span><b>04-004</b></div>
<div class="frame">
<svg viewBox="0 0 200 250" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
<g stroke="#2c4825" stroke-width="1.4" fill="none">
<!-- twig -->
<path d="M 50 240 Q 70 180 100 130 Q 130 80 150 30" stroke-width="2"/>
<!-- pine needles -->
<g stroke-width="0.7" stroke="#2c4825">
<line x1="80" y1="180" x2="60" y2="160"/>
<line x1="80" y1="180" x2="100" y2="160"/>
<line x1="80" y1="180" x2="55" y2="170"/>
<line x1="80" y1="180" x2="105" y2="172"/>
<line x1="105" y1="120" x2="80" y2="100"/>
<line x1="105" y1="120" x2="130" y2="100"/>
<line x1="105" y1="120" x2="78" y2="112"/>
<line x1="105" y1="120" x2="132" y2="112"/>
<line x1="135" y1="60" x2="115" y2="40"/>
<line x1="135" y1="60" x2="155" y2="40"/>
<line x1="135" y1="60" x2="113" y2="52"/>
<line x1="135" y1="60" x2="157" y2="52"/>
</g>
<!-- cone -->
<ellipse cx="150" cy="30" rx="8" ry="14" fill="#6e2e1c" fill-opacity="0.7"/>
</g>
</svg>
</div>
<h3><i>Pinus</i> <b>empressa</b></h3>
<p class="common">EMPRESS · FILM BRANDING</p>
<p>長寿の松。樹齢を重ねるほどに重みを増し、国際映画祭の冠の素材として用いられる希少種。</p>
<div class="meta">
<div><span class="lbl">採取地</span><span class="val">Kiso</span></div>
<div><span class="lbl">採取年</span><span class="val">2026</span></div>
<div><span class="lbl">用途</span><span class="val">Film</span></div>
<div><span class="lbl">高さ</span><span class="val">320 px</span></div>
</div>
<span class="seal bot">P</span>
</a>
<a href="#demo-link-4" class="sheet s5">
<div class="num"><span>SPECIMEN №</span><b>04-005</b></div>
<div class="frame">
<svg viewBox="0 0 200 250" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
<g stroke="#2c4825" stroke-width="1.4" fill="none">
<path d="M 100 240 L 100 110" stroke-width="2"/>
<!-- petals -->
<g fill="#b04c30" fill-opacity="0.65" stroke-width="1">
<ellipse cx="100" cy="80" rx="14" ry="32" transform="rotate(-30 100 80)"/>
<ellipse cx="100" cy="80" rx="14" ry="32" transform="rotate(30 100 80)"/>
<ellipse cx="100" cy="80" rx="14" ry="32" transform="rotate(0 100 80)"/>
<ellipse cx="100" cy="80" rx="14" ry="32" transform="rotate(-60 100 80)"/>
<ellipse cx="100" cy="80" rx="14" ry="32" transform="rotate(60 100 80)"/>
</g>
<circle cx="100" cy="80" r="6" fill="#a88830"/>
<!-- leaves -->
<path d="M 100 180 Q 50 175 35 145 Q 65 165 100 168" fill="#4a6b3a" fill-opacity="0.5"/>
<path d="M 100 140 Q 150 135 165 105 Q 135 125 100 128" fill="#4a6b3a" fill-opacity="0.5"/>
</g>
</svg>
</div>
<h3><i>Cosmos</i> <b>fukami</b></h3>
<p class="common">FUKAMI STUDIO · IDENTITY</p>
<p>晩秋に開花する大輪のコスモス。深見スタジオの紋章として採用された。花弁は5枚、すべて等しく重要。</p>
<div class="meta">
<div><span class="lbl">採取地</span><span class="val">Karuizawa</span></div>
<div><span class="lbl">採取年</span><span class="val">2023</span></div>
<div><span class="lbl">用途</span><span class="val">Identity</span></div>
<div><span class="lbl">高さ</span><span class="val">200 px</span></div>
</div>
<span class="seal">C</span>
</a>
<a href="#demo-link-5" class="sheet s6">
<div class="num"><span>SPECIMEN №</span><b>04-006</b></div>
<div class="frame">
<svg viewBox="0 0 200 250" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
<g stroke="#2c4825" stroke-width="1.4" fill="none">
<path d="M 100 240 L 100 60" stroke-width="1.8"/>
<!-- hanging bells -->
<g fill="#4a6b3a" fill-opacity="0.55">
<ellipse cx="80" cy="80" rx="9" ry="12"/>
<ellipse cx="100" cy="100" rx="10" ry="14"/>
<ellipse cx="120" cy="80" rx="9" ry="12"/>
<ellipse cx="90" cy="130" rx="9" ry="12"/>
<ellipse cx="110" cy="160" rx="10" ry="14"/>
</g>
<g stroke-width="0.8">
<line x1="100" y1="60" x2="80" y2="68"/>
<line x1="100" y1="60" x2="120" y2="68"/>
<line x1="100" y1="80" x2="100" y2="86"/>
<line x1="100" y1="120" x2="90" y2="118"/>
<line x1="100" y1="150" x2="110" y2="146"/>
</g>
<circle cx="100" cy="60" r="3" fill="#a88830"/>
</g>
</svg>
</div>
<h3><i>Convallaria</i> <b>aurora</b></h3>
<p class="common">AURORA UI · SAAS LP</p>
<p>朝霧の中で咲く小さな鐘。SaaSの早朝デモンストレーションのために供えられた、清楚な指標植物。</p>
<div class="meta">
<div><span class="lbl">採取地</span><span class="val">Hokkaido</span></div>
<div><span class="lbl">採取年</span><span class="val">2024</span></div>
<div><span class="lbl">用途</span><span class="val">SaaS LP</span></div>
<div><span class="lbl">高さ</span><span class="val">150 px</span></div>
</div>
<span class="seal bot">C</span>
</a>
</section>
<footer class="signoff">
Curatum a <b>Yusuke Asaoka</b> · Anno MMXXVI<br>
<span class="roman">― Vibehaus Herbarium · 6 specimens of 64 ―</span>
</footer>
</div>
<aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空の制作物・作者・工房の作品集です。売上・受賞・制作実績・沿革・住所は表示例で、実在する顧客の実績ではありません。リンクは説明へ移動し、予約・購入・問い合わせ送信は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-link-0" tabindex="-1">
<h3>Vibehaus floribundaの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-1" tabindex="-1">
<h3>Festuca ginzaの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-2" tabindex="-1">
<h3>Rubus kaijuの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-3" tabindex="-1">
<h3>Pinus empressaの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-4" tabindex="-1">
<h3>Cosmos fukamiの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-5" tabindex="-1">
<h3>Convallaria auroraの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
19世紀、植物学者たちは採集した植物を台紙に貼り、ラテン語の学名、採取地、採取日を几帳面に書き添えて標本(ハーバリウム)として保存しました。一枚一枚が研究対象であり、コレクションの一部であり、後世に残す記録です。このポートフォリオは、その「標本台紙」の形式を作品集に与えます。
サムネイルグリッドとの決定的な違い
一般的なポートフォリオは、作品のサムネイルを格子状に並べます。それは「制作物のリスト」です。標本台紙の形式は、同じ作品を収蔵品に変えます。ラテン語めいた学名、採取地、年代といったメタ情報を添えるだけで、作品は「最近作ったもの」から「分類され、記録するに値するもの」へと格が変わります。見る人は無意識に、それを使い捨ての制作物ではなく、保存される文化財として受け取ります。
崩れる形サムネイルを格子状に並べる
整然としていますが、伝わるのは制作物のリストです。点数が増えるほど一点あたりの重みは薄まり、見る人は流し見て終わります。
効く形学名・採取地・年代を添える
メタ情報を足すだけで、作品は「最近作ったもの」から分類し、記録するに値するものへ格が変わります。通し番号を振ると、続いているシリーズだと伝わります。
経年が価値を語る
古紙の風合い、封蝋シール、わずかなシミ——標本台紙の様式が持ち込むのは「時間が経った」という感覚です。デジタルの作品はいつも新品に見えますが、それは裏を返せば歴史がないということでもあります。あえて経年の質感をまとわせることで、作家のキャリアに厚みと連続性が宿ります。一点ごとに通し番号を振り、テンプレートを統一すれば、「これは続いているシリーズだ」という完成度も伝わります。
仕上げの判断軸
ラテン語の学名は EB Garamond などのイタリック体で組むと学術的な品が出ます。
属名は大文字始まり、種小名は小文字。ラテン語表記の慣例を外すと、様式ごと嘘に見えます。
古紙の質感やシミは「上品な汚し」の範囲に留め、やりすぎると単に読みにくいだけになります。工芸家、写真家、建築家、伝統文化に関わるブランドのように、時間の蓄積が価値になる作り手に向く様式です。
見本で試せる範囲
架空の制作物・作者・工房の作品集です。売上・受賞・制作実績・沿革・住所は表示例で、実在する顧客の実績ではありません。リンクは説明へ移動し、予約・購入・問い合わせ送信は行いません。 作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。
ポートフォリオの構成要素
使いどころ
- 写真家・イラストレーターの古典的ポートフォリオ
- ブランド・ブティックの作品アーカイブ
- 学術機関・研究者の業績集
- 高級工芸・職人技を見せるサイト
- 文化施設・古書店のコレクション展示
このデザインの分類
背景と狙いどころ
よくある質問
ラテン語学名のフォントは?
植物のSVGはどこまで写実的に描くべきですか。
封蝋シールの立体感はどう作る?
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
侘び寂びの墨絵的ポートフォリオ
不完全さを美と捉える日本の侘び寂び美学を Web に持ち込んだポートフォリオ。墨絵のかすれ、紙質感、大胆な余白、明朝の縦書き和文、朱の落款で「静けさ」を作る尖った設計。
巨大斜体のファッション作品集
写真領域を全幅に走らせ、巨大な斜体ディスプレイ書体を画面外まで突き抜けさせるファッションマガジン的ポートフォリオ。Vogue・Dazed・i-D の版面感を Web 化した、ブランドルックブック専用の尖った設計。
上品なセリフ体のポートフォリオサイト
セリフ体の大見出しと不揃いグリッド、暖色アースカラー、斜体のアクセントで組んだデザインスタジオ向けの作品集サイト。沈黙と余白で格を出す、雑誌的な誌面設計。