ポートフォリオ · ポートフォリオ
侘び寂びの墨絵的ポートフォリオ
不完全さを美と捉える日本の侘び寂び美学を Web に持ち込んだポートフォリオ。墨絵のかすれ、紙質感、大胆な余白、明朝の縦書き和文、朱の落款で「静けさ」を作る尖った設計。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/wabi-sabi-portfolio/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
日本の伝統工芸ブランド向けの、侘び寂び美学に基づくポートフォリオを作ってください。 要件: - 配色: 生成 #f5f1e8（和紙色）+ 墨黒 #1a1614 + 朱 #b03228 を1点。彩色は基本これだけ。 - 全体の60%以上を余白に。情報密度は意図的に薄く。 - 上部マスト: 縦書きの屋号（writing-mode: vertical-rl）+ 横書きのローマ字併記。 - 中央に巨大な明朝書体の漢字1〜2字（大見出し）。極大サイズ・行間詰め気味。 - 横にSVGで描いた墨のかすれ筆跡（feTurbulence で擾乱）の長い水平線。 - 作品グリッドは非対称の3〜4枚。各作品は写真プレースホルダー（薄いセピアグラデ）+ 縦書きのキャプション。 - 朱色の落款（円形 or 四角の SVG、漢字1字）を要所に1〜2個。 - 紙の繊維テクスチャを SVG ノイズで全体に薄く。 - フォントは日本語が主役: Noto Serif JP / Hiragino Mincho の明朝、英語は Times・Garamond 系。 - JS不要、フルレスポンシブ。
バリエーション
夜の侘び寂び版
配色を反転：墨黒の地に和紙色の文字、朱はそのまま。 茶室の夜の灯りを思わせる、より静謐な空気に。
縦長スクロールテール版
全体を縦長にし、巻物（emaki）のように上下スクロールでストーリーが進む構成。 各セクション間に白紙の「間」を 1 画面分挿入する。
このプレビューのコード
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 {
--paper: #f5f1e8;
--paper-2: #ebe5d4;
--ink: #1a1614;
--ink-2: #2e2620;
--muted: #6e5e50;
--quiet: #a89a85;
--shu: #b03228;
--shu-deep: #82221a;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho",
"Times New Roman", serif;
background: var(--paper);
color: var(--ink);
line-height: 1.85;
-webkit-font-smoothing: antialiased;
font-feature-settings: "palt", "kern", "trad";
position: relative;
overflow-x: hidden;
min-height: 100dvh;
}
/* Paper grain — washi (和紙) texture */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0 0.30 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
opacity: 0.16;
mix-blend-mode: multiply;
}
/* Subtle mountain mist gradient at top */
body::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 50vh;
background: linear-gradient(180deg, rgba(110, 94, 80, 0.08), transparent);
pointer-events: none;
z-index: 0;
}
/* Top bar */
header.bar {
position: relative;
z-index: 5;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 4vw, 2.5rem);
border-bottom: 1px solid rgba(26, 22, 20, 0.15);
}
.name-block {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: flex-start;
}
.name-jp {
writing-mode: vertical-rl;
font-size: clamp(1rem, 1.4vw, 1.2rem);
letter-spacing: 0.4em;
line-height: 1.1;
font-weight: 600;
height: auto;
}
.name-en {
font-family: "Times New Roman", "Garamond", serif;
font-style: italic;
font-size: 0.85rem;
color: var(--muted);
letter-spacing: 0.04em;
}
header.bar nav {
font-family: "Noto Serif JP", serif;
font-size: 0.85rem;
letter-spacing: 0.4em;
color: var(--muted);
display: inline-flex;
gap: 0;
}
header.bar nav a {
color: inherit;
text-decoration: none;
padding: 0 0.5rem;
border-right: 1px solid rgba(26, 22, 20, 0.18);
}
header.bar nav a:last-child { border-right: 0; }
header.bar nav a:hover { color: var(--shu); }
@media (max-width: 720px) {
header.bar nav { display: none; }
.name-block { flex-direction: column; }
.name-jp { writing-mode: horizontal-tb; letter-spacing: 0.2em; }
}
/* Hero — large kanji + ink stroke */
main.hero {
position: relative;
z-index: 5;
padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 2.5rem);
min-height: 70vh;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 880px) {
main.hero { grid-template-columns: 2fr 1fr; align-items: end; }
}
.kanji-wrap {
position: relative;
}
.super-en {
display: block;
font-family: "Times New Roman", serif;
font-style: italic;
font-size: clamp(0.85rem, 1.1vw, 1rem);
letter-spacing: 0.16em;
color: var(--muted);
margin-bottom: 1.25rem;
}
h1.kanji {
margin: 0 0 1.5rem;
font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
font-weight: 800;
font-size: clamp(6rem, 18vw, 16rem);
/* 一文字の表示見出し。折り返さないので行間を詰めても行同士は衝突しない
（和文見出し 1.3〜1.5 の規定は複数行になる見出しを守るためのもの）。 */
line-height: 1;
letter-spacing: 0;
color: var(--ink);
}
h1.kanji .small {
display: block;
font-size: 0.4em;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.15em;
color: var(--muted);
margin-top: 0.3em;
}
/* Ink brush stroke under the kanji */
.ink-stroke {
width: clamp(180px, 32vw, 380px);
height: 36px;
margin: 0.5rem 0 2rem;
}
.lede-jp {
font-size: clamp(0.95rem, 1.3vw, 1.1rem);
line-height: 2.1;
color: var(--ink-2);
max-width: 36ch;
font-feature-settings: "palt";
}
/* Side block: vertical poetry / signature */
.side {
position: relative;
padding: 1.5rem 0;
display: flex;
align-items: flex-start;
justify-content: flex-end;
gap: 1.5rem;
}
.side .vertical-poem {
writing-mode: vertical-rl;
font-size: 0.95rem;
line-height: 2.6;
letter-spacing: 0.24em;
color: var(--muted);
height: clamp(180px, 28vh, 320px);
}
.stamp {
width: 60px; height: 60px;
background: var(--shu);
color: var(--paper);
display: grid;
place-items: center;
font-size: 1.7rem;
font-weight: 700;
border-radius: 4px;
box-shadow: 1px 1px 0 var(--shu-deep), 0 0 0 1px rgba(0,0,0,0.1);
font-family: "Noto Serif JP", serif;
transform: rotate(-4deg);
}
@media (max-width: 880px) { .side { justify-content: flex-start; } }
/* Works grid */
section.works {
position: relative;
z-index: 5;
padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem);
border-top: 1px solid rgba(26, 22, 20, 0.15);
}
.works-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 2.5rem;
flex-wrap: wrap;
gap: 1rem;
}
.works-head h2 {
margin: 0;
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: clamp(1.4rem, 2.4vw, 2rem);
letter-spacing: 0.05em;
}
.works-head .meta {
font-family: "Times New Roman", serif;
font-style: italic;
font-size: 0.9rem;
color: var(--muted);
}
.works-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem 2rem;
}
@media (min-width: 760px) {
.works-grid {
grid-template-columns: 5fr 7fr;
grid-auto-rows: minmax(120px, auto);
}
}
.work {
display: block;
text-decoration: none;
color: inherit;
}
.work-img {
position: relative;
aspect-ratio: 4 / 5;
background: linear-gradient(160deg, var(--paper-2) 0%, #d8c9a8 50%, #8a7355 100%);
margin-bottom: 1.25rem;
overflow: hidden;
}
.work-img::after {
/* sepia-tinted noise overlay so the placeholder reads photographic */
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.95' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
opacity: 0.3;
mix-blend-mode: multiply;
}
.work.lg .work-img { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #4a3a2a 0%, #2a1f15 60%, #0e0a06 100%); }
.work.tall .work-img { aspect-ratio: 3 / 5; background: linear-gradient(180deg, var(--paper-2) 0%, #c4a780 60%, #5a4530 100%); }
.work-caption {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
.work-num {
writing-mode: vertical-rl;
font-family: "Noto Serif JP", serif;
font-size: 0.95rem;
letter-spacing: 0.3em;
color: var(--shu);
flex: none;
line-height: 1.2;
}
.work-text {
flex: 1;
}
.work-title {
margin: 0 0 0.4rem;
font-size: 1.1rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.04em;
}
.work-tag {
margin: 0;
font-family: "Times New Roman", serif;
font-style: italic;
font-size: 0.82rem;
color: var(--muted);
letter-spacing: 0.04em;
}
/* Footer */
footer.foot {
position: relative;
z-index: 5;
padding: 2rem clamp(1rem, 4vw, 2.5rem);
border-top: 1px solid rgba(26, 22, 20, 0.15);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
font-family: "Times New Roman", serif;
font-size: 0.78rem;
color: var(--muted);
font-style: italic;
letter-spacing: 0.06em;
}
footer.foot .stamp-mini {
width: 28px; height: 28px;
background: var(--shu);
color: var(--paper);
display: inline-grid;
place-items: center;
font-size: 0.85rem;
font-weight: 700;
font-family: "Noto Serif JP", serif;
font-style: normal;
border-radius: 2px;
margin-right: 0.5rem;
vertical-align: middle;
}
[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}
}
header.bar nav{display:flex;flex-wrap:wrap;gap:.5rem}header.bar nav a{letter-spacing:0}
</style>
</head>
<body>
<header class="bar">
<div class="name-block">
<span class="name-jp">月読・工房</span>
<span class="name-en">Tsukuyomi <i>Studio</i></span>
</div>
<nav>
<a href="#demo-link-0">作</a>
<a href="#demo-link-1">器</a>
<a href="#demo-link-2">暦</a>
<a href="#demo-link-3">問</a>
</nav>
</header>
<main class="hero">
<div class="kanji-wrap">
<span class="super-en">— a quiet workshop / since 2014 —</span>
<h1 class="kanji">
静
<span class="small">— 静謐な手しごと、十二年。</span>
</h1>
<svg class="ink-stroke" viewBox="0 0 380 36" aria-hidden="true">
<defs>
<filter id="ink-roughen">
<feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="2" />
<feDisplacementMap in="SourceGraphic" scale="3" />
</filter>
</defs>
<path d="M 6 22 Q 60 8, 130 16 T 280 18 Q 340 20, 372 12" stroke="#1a1614" stroke-width="6" fill="none" stroke-linecap="round" filter="url(#ink-roughen)" opacity="0.85"/>
</svg>
<p class="lede-jp">
器、布、灯。<br/>暮らしの傍らに置く道具を、京都の小さな工房から月に幾度かお届けしています。
</p>
</div>
<aside class="side">
<div class="vertical-poem">不完全のまゝ、佳し</div>
<div class="stamp" aria-hidden="true">月</div>
</aside>
</main>
<section class="works">
<div class="works-head">
<h2>作品 — 二〇二六年 春</h2>
<span class="meta">Selected works · Spring 2026</span>
</div>
<div class="works-grid">
<a class="work" href="#demo-link-4">
<div class="work-img"></div>
<div class="work-caption">
<span class="work-num">壱・茶碗</span>
<div class="work-text">
<h3 class="work-title">月白の汲出</h3>
<p class="work-tag">— Lunar tea cup, glazed in clay</p>
</div>
</div>
</a>
<a class="work lg" href="#demo-link-5">
<div class="work-img"></div>
<div class="work-caption">
<span class="work-num">弐・盆</span>
<div class="work-text">
<h3 class="work-title">墨流しの長皿</h3>
<p class="work-tag">— Sumi-nagashi rectangular plate</p>
</div>
</div>
</a>
<a class="work tall" href="#demo-link-6">
<div class="work-img"></div>
<div class="work-caption">
<span class="work-num">参・灯</span>
<div class="work-text">
<h3 class="work-title">竹漉の行灯</h3>
<p class="work-tag">— Bamboo paper lantern</p>
</div>
</div>
</a>
<a class="work" href="#demo-link-7">
<div class="work-img" style="background: linear-gradient(135deg, #2e2520 0%, #5a4530 100%);"></div>
<div class="work-caption">
<span class="work-num">肆・布</span>
<div class="work-text">
<h3 class="work-title">藍染の手織</h3>
<p class="work-tag">— Hand-woven indigo cloth</p>
</div>
</div>
</a>
</div>
</section>
<footer class="foot">
<span><span class="stamp-mini" aria-hidden="true">月</span>© 2026 Tsukuyomi Studio · Kyoto, JP</span>
<span>Made by hand · Pressed slowly · Sold in season</span>
</footer>
<aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空の制作物・作者・工房の作品集です。売上・受賞・制作実績・沿革・住所は表示例で、実在する顧客の実績ではありません。リンクは説明へ移動し、予約・購入・問い合わせ送信は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-link-0" tabindex="-1">
<h3>作の見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-1" tabindex="-1">
<h3>器の見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-2" tabindex="-1">
<h3>暦の見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-3" tabindex="-1">
<h3>問の見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-4" tabindex="-1">
<h3>月白の汲出の見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-5" tabindex="-1">
<h3>墨流しの長皿の見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-6" tabindex="-1">
<h3>竹漉の行灯の見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-7" tabindex="-1">
<h3>藍染の手織の見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
侘び寂び（わびさび）は、不完全なもの・移ろうもの・簡素なものに美を見出す日本の美意識です。茶の湯の文化の中で磨かれ、ひび割れた器、かすれた墨、色褪せた紙——「完璧でないこと」をむしろ豊かさとして受け入れる。西洋のミニマリズムが「足し算をやめた潔さ」だとすれば、侘び寂びは「欠けや経年を積極的に肯定する」点で、似て非なる美学です。
西洋ミニマルとどう違うのか
一見すると、侘び寂びポートフォリオはミニマルデザインに見えます。余白が広く、要素が少ない。しかし両者の余白は質が異なります。西洋ミニマルの余白は「整理された空白」——機能的で、無駄を削いだ結果です。侘び寂びの余白は「間（ま）」——そこに静けさや時間の流れそのものが宿る、意味を持った空白です。墨絵のかすれ、紙の質感、朱の落款がひとつ置かれることで、その余白は「何もない」のではなく「静かに満ちている」状態になります。
崩れる形整理された空白としての余白
西洋ミニマルの余白は無駄を削いだ結果です。機能的で正しいのですが、そこに時間の流れは宿りません。効率の証明で終わります。
効く形間としての余白
侘び寂びの余白には静けさや時間の流れそのものが宿ります。墨のかすれと朱の落款がひとつ置かれることで、空白は「静かに満ちている」状態になります。
静けさが伝える作家性
作品を詰め込んだポートフォリオはたくさん作れますと語りますが、侘び寂びのポートフォリオは選び、削ぎ落とせますと語ります。大胆な余白に作品をひとつ置く——その自信は、技術力以上に作家の成熟を伝えます。工芸家、写真家、建築家、伝統文化に関わるブランドにとって、この静けさは強力な差別化になります。
仕上げの判断軸
縦書きの和文には Noto Serif JP などの明朝体を用い、字間にゆとりを持たせること。色は墨・紙・朱の三色程度に絞り、彩度を抑えます。
3色墨・紙・朱。彩度は抑える
1点大胆な余白に置く作品の数。自信が成熟として伝わる
余白を恐れないことが最重要です。埋めたくなる衝動に勝てるかどうかが、この様式の成否を分けます。
「wabi-sabi web design」は海外でも検索される固有名詞であり、英語圏からの流入も見込めます。
見本で試せる範囲
架空の制作物・作者・工房の作品集です。売上・受賞・制作実績・沿革・住所は表示例で、実在する顧客の実績ではありません。リンクは説明へ移動し、予約・購入・問い合わせ送信は行いません。 作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。
ポートフォリオの構成要素
使いどころ
- 和食・日本料理レストランの公式
- 伝統工芸（陶器・漆器・染物）のオンラインショップ
- 神社仏閣・寺院の情報発信
- 和風旅館・温泉宿の予約サイト
- J-Beauty・和漢コスメブランド
このデザインの分類
背景と狙いどころ
よくある質問
縦書きはモバイルで読めますか？
writing-mode は CSS で書き方向を変えるだけなので、モバイルでも問題なく読めます。ただし狭幅では行が切れがちなので、ブレイクポイントで横書きに切替える設計を必ず入れてください。
漢字大見出しを採用すると外国人ユーザーに不親切では？
海外向けターゲットなら英文タイトルを並列表示する設計を取ります（漢字 + 英訳のキャプション）。完全英語向けでは別ロケール展開が必要ですが、本サイトは日本語中心なので和文を主役に置く設計を推奨します。
朱の落款はどう作る？
SVG で正方形 or 円を描き、内側に漢字 1 字を配置。filter で僅かにぼかしてインクの滲みを表現します。本物の落款を画像化する場合は版権に注意。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
植物標本図鑑風のポートフォリオ
19世紀の植物標本台紙（Herbarium sheet）を再構築したポートフォリオ。学名イタリック表記・採取地メタ・封蝋シール・古紙ノイズで「学術コレクション」の格を作る尖った設計。
巨大斜体のファッション作品集
写真領域を全幅に走らせ、巨大な斜体ディスプレイ書体を画面外まで突き抜けさせるファッションマガジン的ポートフォリオ。Vogue・Dazed・i-D の版面感を Web 化した、ブランドルックブック専用の尖った設計。
上品なセリフ体のポートフォリオサイト
セリフ体の大見出しと不揃いグリッド、暖色アースカラー、斜体のアクセントで組んだデザインスタジオ向けの作品集サイト。沈黙と余白で格を出す、雑誌的な誌面設計。