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

巨大斜体のファッション作品集

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

保存した一覧を見る 0 →

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

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

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

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

プレビュー

AIへの指示文

ファッションブランドのシーズンルックブックを、雑誌的に攻めたポートフォリオで作ってください。

要件:
- 配色: オフ白 #f4ede0 + 墨黒 #0d0d0d + アクセント朱 #d33529 を1点だけ。
- 上部に巨大な斜体ディスプレイタイトル。clamp(4rem, 16vw, 14rem) 級。Bodoni / Didot / Playfair / 明朝で attention 引く。
- タイトルは container を意図的に超えて画面外（左 or 右）にはみ出す。
- メイン画像領域は写真プレースホルダー（深色の単色/グラデ）を非対称に配置。1 メイン + 2 サブ + 1 ロング縦長の組み合わせ。
- 各画像にキャプション（モノスペース、フランス語/英語混在の小さい注釈っぽく）。
- ロゴは「アンドレ」のような筆記体や手書き調を1点。
- 中段にコレクション名（番号付き）と簡素な説明、欧文と和文の混植で1行。
- 下部にクレジット欄（ASCII の境界線で区切り、関係者名を縦並び）。
- フォント: 見出し serif 太字、本文 Inter + Noto Sans JP、メタ JetBrains Mono。
- フルレスポンシブ。スマホでは画像縦積み、巨大タイトルのオーバーフローは温存。

バリエーション

ダークモード版

背景を墨黒、テキスト・写真背景をオフ白に反転。同じ構造で「夜のショー」感に変える。

写真主役さらに強める版

テキストブロックを全部小さく退かせ、画像群を画面の80%に拡大。ファッションエディトリアル誌のグラフィック号に近づける。

このプレビューのコード

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

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

コードを表示

<!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: #f4ede0;
        --paper-2: #ebe1d0;
        --ink: #0d0d0d;
        --muted: #4a4239;
        --quiet: #8c8275;
        --accent: #d33529;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; overflow-x: hidden; }
      body {
        font-family: "Inter", "Noto Sans JP", "Hiragino Mincho ProN",
          "Yu Mincho", serif;
        background: var(--paper);
        color: var(--ink);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        font-feature-settings: "kern", "liga";
        min-height: 100dvh;
      }

      header.bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
        border-bottom: 1px solid var(--ink);
      }
      header.bar .logo {
        font-family: "Playfair Display", "Times New Roman", "Noto Serif JP", serif;
        font-style: italic;
        font-weight: 900;
        font-size: 1.6rem;
        letter-spacing: -0.02em;
      }
      header.bar nav {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.74rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--muted);
        display: inline-flex;
        gap: 1.5rem;
      }
      header.bar nav a { color: inherit; text-decoration: none; }
      header.bar nav a:hover { color: var(--accent); }
      header.bar .meta {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.7rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--quiet);
      }
      @media (max-width: 720px) { header.bar nav, header.bar .meta { display: none; } }

      /* GIANT title that breaks the container */
      .masthead {
        position: relative;
        padding: clamp(2rem, 5vw, 4rem) 0 clamp(1rem, 3vw, 2rem);
        overflow: hidden;
      }
      .masthead .super {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.78rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--accent);
        margin: 0 0 1rem clamp(1rem, 4vw, 2.5rem);
      }
      .masthead h1 {
        margin: 0;
        font-family: "Playfair Display", "Bodoni 72", "Didot", "Times New Roman",
          "Noto Serif JP", "Hiragino Mincho ProN", serif;
        font-style: italic;
        font-weight: 900;
        font-size: clamp(4.5rem, 17vw, 16rem);
        line-height: 0.85;
        letter-spacing: -0.045em;
        white-space: nowrap;
        margin-left: clamp(1rem, 4vw, 2.5rem);
      }
      .masthead h1 span {
        display: block;
      }
      .masthead h1 .row-1 { transform: translateX(-2%); }
      .masthead h1 .row-2 {
        transform: translateX(8%);
        color: var(--paper);
        -webkit-text-stroke: 2px var(--ink);
        text-stroke: 2px var(--ink);
      }
      .masthead .deck {
        margin: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem) 0;
        max-width: 60ch;
        font-family: "Playfair Display", "Times New Roman", "Noto Serif JP", serif;
        font-style: normal;
        font-size: clamp(1rem, 1.4vw, 1.2rem);
        line-height: 1.75;
        color: var(--muted);
      }

      /* Lookbook grid — asymmetric */
      .lookbook {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: minmax(80px, auto);
        gap: clamp(0.85rem, 1.2vw, 1.25rem);
        padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem);
      }
      @media (max-width: 720px) { .lookbook { display: flex; flex-direction: column; gap: 1rem; } }

      .shot {
        position: relative;
        overflow: hidden;
        background: var(--paper-2);
      }
      .shot::after {
        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.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
        opacity: 0.08;
        mix-blend-mode: multiply;
        pointer-events: none;
      }
      .shot .caption {
        position: absolute;
        left: 0.85rem;
        bottom: 0.85rem;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--paper);
        background: rgba(13, 13, 13, 0.55);
        padding: 0.3rem 0.55rem;
        backdrop-filter: blur(4px);
      }

      /* The 4 shots: main hero, lateral, tall, last */
      .shot-1 { grid-column: 1 / span 7; grid-row: 1 / span 6; aspect-ratio: 5/6; background: linear-gradient(135deg, #2a1a14 0%, #4d2922 60%, #c47c63 100%); }
      .shot-2 { grid-column: 8 / span 5; grid-row: 1 / span 3; aspect-ratio: 5/4; background: linear-gradient(160deg, #3a3027 0%, #6a584a 100%); }
      .shot-3 { grid-column: 8 / span 5; grid-row: 4 / span 3; aspect-ratio: 5/4; background: linear-gradient(45deg, #1a1a1a 0%, #444 100%); }
      .shot-4 { grid-column: 1 / span 4; grid-row: 7 / span 4; aspect-ratio: 4/5; background: linear-gradient(180deg, #d6c5a6 0%, #8a7355 100%); }
      .shot-5 { grid-column: 5 / span 4; grid-row: 7 / span 4; aspect-ratio: 4/5; background: linear-gradient(180deg, #8a3a32 0%, #d33529 100%); }
      .shot-6 { grid-column: 9 / span 4; grid-row: 7 / span 4; aspect-ratio: 4/5; background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 60%, #6a6a6a 100%); }

      @media (max-width: 720px) {
        .shot { width: 100%; aspect-ratio: 4/5; }
      }

      /* Mid editorial block */
      .mid {
        padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem);
        border-top: 1px solid var(--ink);
        border-bottom: 1px solid var(--ink);
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem 4rem;
      }
      @media (min-width: 760px) { .mid { grid-template-columns: max-content 1fr; } }
      .mid .num {
        font-family: "Playfair Display", "Bodoni 72", "Didot", serif;
        font-style: italic;
        font-weight: 800;
        font-size: clamp(3rem, 7vw, 6rem);
        line-height: 1;
        color: var(--accent);
      }
      .mid h2 {
        margin: 0 0 0.85rem;
        font-family: "Playfair Display", "Times New Roman", "Noto Serif JP", serif;
        font-size: clamp(1.4rem, 2.5vw, 2rem);
        font-weight: 800;
        font-style: normal;
        line-height: 1.35;
        letter-spacing: 0;
      }
      .mid h2 :lang(ja) { font-style: normal; line-height: 1.4; letter-spacing: 0; }
      .mid p {
        margin: 0;
        max-width: 60ch;
        line-height: 1.85;
        color: var(--muted);
        font-size: 0.95rem;
      }

      /* Credits */
      footer.credits {
        padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 4vw, 2.5rem);
        font-family: "JetBrains Mono", monospace;
        font-size: 0.74rem;
        letter-spacing: 0.06em;
        color: var(--muted);
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25rem;
      }
      @media (min-width: 760px) { footer.credits { grid-template-columns: 1fr 1fr 1fr; } }
      footer.credits dl { margin: 0; }
      footer.credits dt {
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--quiet);
        margin-bottom: 0.4rem;
      }
      footer.credits dd { margin: 0; line-height: 1.85; color: var(--ink); }
      footer.credits dd + dt { margin-top: 1rem; }

      .ascii {
        white-space: pre;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.7rem;
        color: var(--quiet);
        text-align: center;
        padding: 1rem 0 1.5rem;
        letter-spacing: -0.02em;
      }
    [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}
}
.masthead h1{font-size:clamp(3rem,12vw,12rem);margin-inline:clamp(1rem,4vw,2.5rem)}
.masthead h1 span{max-width:100%;overflow-wrap:anywhere}
.masthead h1 .row-1,.masthead h1 .row-2{transform:none}
.shot{margin:0}
.super{color:#b42b20}
.meta,dt,pre{color:#655b50}
.masthead .super{color:#b42b20!important}
.meta,dt,pre{color:#655b50!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="logo">Maison<span style="color:var(--accent);">/</span>Linde</div>
      <nav>
        <a href="#demo-link-0">Lookbook</a>
        <a href="#demo-link-1">Collections</a>
        <a href="#demo-link-2">Stockists</a>
        <a href="#demo-link-3">Press</a>
      </nav>
      <span class="meta">Issue 14 · SS 2026</span>
    </header>

    <section class="masthead">
      <p class="super">Spring / Summer · Lookbook № 14</p>
      <h1>
        <span class="row-1"><i>L'été</i></span>
        <span class="row-2">aprés—midi</span>
      </h1>
      <p class="deck">
        昼下がりの光、白い砂、リネンに映る木の影。波打ち際の <i>casual</i> をベースに、東京と Marseille の風景を行き来する 14 ピース。
      </p>
    </section>

    <div class="lookbook">
      <figure class="shot shot-1"><figcaption class="caption">L 01 — Linen Coat / Marseille</figcaption></figure>
      <figure class="shot shot-2"><figcaption class="caption">L 02 — Twill Trousers</figcaption></figure>
      <figure class="shot shot-3"><figcaption class="caption">L 03 — Silk Top / Black</figcaption></figure>
      <figure class="shot shot-4"><figcaption class="caption">L 04 — Sand Slip Dress</figcaption></figure>
      <figure class="shot shot-5"><figcaption class="caption">L 05 — Carmine Blazer</figcaption></figure>
      <figure class="shot shot-6"><figcaption class="caption">L 06 — Charcoal Knit</figcaption></figure>
    </div>

    <section class="mid">
      <span class="num">№ 14</span>
      <div>
        <h2><i>L'été aprés-midi</i> — について</h2>
        <p>
          Linen, twill, silk. 三つの素材が午後の光のなかで形を変える 6 章。Marseille の漁港から東京の祭壇まで、女性と男性の境界を曖昧にしながらゆるやかに移動する。
        </p>
      </div>
    </section>

    <footer class="credits">
      <dl>
        <dt>Photography</dt>
        <dd>Ren Yamashita<br/>Yui Aochi</dd>
        <dt>Direction</dt>
        <dd>Maison/Linde Studio</dd>
      </dl>
      <dl>
        <dt>Styling</dt>
        <dd>Marie Aubert</dd>
        <dt>Hair / Make</dt>
        <dd>Aiko Hosokawa</dd>
        <dt>Models</dt>
        <dd>Lou — Kioko Berlin<br/>Yui — Donna Tokyo</dd>
      </dl>
      <dl>
        <dt>Location</dt>
        <dd>Marseille, FR<br/>Hayama, JP</dd>
        <dt>Issue</dt>
        <dd>Lookbook № 14<br/>SS 2026 · April 26</dd>
      </dl>
    </footer>

    <pre class="ascii">———————————————————————————————————————————————————
              © 2026  M A I S O N · L I N D E
———————————————————————————————————————————————————</pre>
  <aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空の制作物・作者・工房の作品集です。売上・受賞・制作実績・沿革・住所は表示例で、実在する顧客の実績ではありません。リンクは説明へ移動し、予約・購入・問い合わせ送信は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-link-0" tabindex="-1">
<h3>Lookbookの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-1" tabindex="-1">
<h3>Collectionsの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-2" tabindex="-1">
<h3>Stockistsの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<section id="demo-link-3" tabindex="-1">
<h3>Pressの見本</h3>
<p>作品や制作条件を紹介する入口の例です。ここにある名称・数値・実績は架空で、作品の購入・音楽再生・予約・制作依頼は実装していません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>

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

概要

『Vogue』『Dazed』『i-D』——ファッション誌の版面は、情報を伝えるためではなく、気分を作るために組まれています。写真を断ち切るように配置し、巨大なディスプレイ書体を画面外へ突き抜けさせる。その大胆な余白とスケール感が「これはモードの世界だ」と宣言する。このポートフォリオは、その雑誌的レイアウトをWebへ翻訳したものです。

文字を「読ませない」勇気

通常のWebデザインは、文字を読みやすく整えることを善とします。ファッション・ポートフォリオはあえてその逆を行く。巨大な斜体タイポを部分的に画面外で切り、写真と重ね、可読性より存在感を優先する。これは文字を「言葉」ではなく「ビジュアル要素」として扱う発想です。読み取れなくてもかまいません。その文字が画面にもたらす緊張感とリズムこそが、ブランドのムードを語っています。

写真の見せ方が予算を語る

ファッションの世界では、写真をどう扱うかが予算規模そのもののシグナルになります。全幅で堂々と1枚を見せる、大胆にトリミングする、余白をたっぷり取って間を持たせる——こうした「余裕のある見せ方」は、たとえ撮影点数が少なくても、ブランドを実際より大きく見せます。逆に小さな写真を所狭しと並べると、安価な通販サイトの印象に転落します。

崩れる形小さな写真を所狭しと並べる

点数の多さは豊かさに見えません。1枚あたりの面積が小さいほど安価な通販サイトの印象へ寄っていきます。撮影に払った費用が伝わらなくなります。

効く形全幅で1枚を堂々と見せる

余白をたっぷり取って間を持たせる見せ方は、撮影点数が少なくてもブランドを大きく見せます。写真をどう扱うかが、そのまま予算規模のシグナルになります。

仕上げの判断軸

ディスプレイ書体は1〜2書体に絞り、ウェイトとサイズの対比だけでリズムを作ります。商品スペックや価格は最小限に留め、別ページへ逃がす——このページの仕事は世界観の提示であって、情報の網羅ではありません。

モバイルでは画面外への突き抜けを控えめにし、横スクロールが出ないことを必ず実機で確かめてください。突き抜けはこの様式でいちばん壊れやすい箇所です。

見本で試せる範囲

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