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

上品なセリフ体のポートフォリオサイト

セリフ体の大見出しと不揃いグリッド、暖色アースカラー、斜体のアクセントで組んだデザインスタジオ向けの作品集サイト。沈黙と余白で格を出す、雑誌的な誌面設計。

保存した一覧を見る 0 →

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

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

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

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

プレビュー

AIへの指示文

ブランディング/空間デザイン系の制作スタジオ向けに、上品なポートフォリオサイトを作ってください。

キャンバス:
- ベージュ系のオフホワイト (#ede6d8)、近黒インク (#1a1612)、ミュート (#6b6355)、アクセントは渋い金茶 (#8a6f47)。
- セリフ書体 (Cormorant Garamond / Playfair Display / Tiempos / Georgia) を見出し・ロゴ・キャプションに。
- サンセリフ (Inter) をナビ・メタ情報・小ラベルに。
- letter-spacing を全体的に広めに取り、静けさを作る。

ヘッダー:
- 左: "ATELIER ferro" のワードマーク。前半大文字 + 後半斜体小文字の混在で格を出す。
- 右: 4項目のナビ (Works / Studio / Process / Contact)。uppercase、letter-spacing 0.16em、アクティブは下線。

ヒーロー:
- 2カラム (左タイトル / 右メタ情報)、下揃え。
- H1 は2行構成、font-size clamp(3rem, 9vw, 7.5rem)、line-height 0.95。
  - 1行目に <em>practice</em> のような斜体+金茶色の一語を混ぜる。
  - 2行目は clamp(1rem, 6vw, 5rem) の左インデントで段差をつける (雑誌のページ割り風)。
- 右のメタ情報は uppercase sans、letter-spacing 0.22em、3行構成 (所在地 / 年 / 状態)。

メタバー:
- ヒーロー直下に 1px の上下罫線で挟んだ 1 行の情報バー。"Selected works · 24 / 58" のような分数表記、フィルタ、表示切替など。

作品グリッド:
- 12 カラムの CSS Grid で、アスペクト比と span を変えた 6 作品を配置:
  - `w-7 · 4:5`, `w-5 · 1:1`, `w-4 · 4:5`, `w-8 · 5:4 (wide)`, `w-6 · 1:1`, `w-6 · 4:5` のような組み合わせ。
- 各作品は <figure> で包み、下に <figcaption>:
  - 左にセリフ体の作品名 + <em> で斜体強調の副題。
  - 右に uppercase sans の年度・カテゴリ (2026 · Spatial など)。
- 作品のアートワークは実画像の代わりに、金茶系のグラデーションと conic-gradient による抽象ビジュアル。6 種類を使い回さず、微妙に違う形 (ellipse, sun, conic, diagonal stripes) を用意して紙面の豊かさを出す。
- hover で `transform: scale(1.03)` の slow ease-out (0.6s)。

マーキー:
- 作品の下に 1px の罫線で区切り、巨大セリフ斜体の流れるテキスト (Restraint · Material · Quietness · Proportion)。28秒の slow marquee。各単語の後に `·` を金茶色で添える。

フッター:
- uppercase sans、左にコピーライト、右にメール/電話。

レスポンシブ: 820px 以下でヒーロー縦積み、作品グリッドは 2 カラム、span を全て 2 に揃える。

JS 不要 (marquee は CSS アニメーションのみ)。

バリエーション

写真差し替え版

各 figure の .art を実際の作品画像 (<img>) に差し替える。
アスペクト比は figure 側で制御しているのでそのままフィット。
hover のスケールアニメーションは継続。

白基調のクール版

背景を #faf8f3、アクセントを (#3a3528) の墨色に変更。
金茶色の代わりに墨黒の斜体強調にする。
同じ構造のまま、トーンだけ「紙」寄りに振る。

このプレビューのコード

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

CC0 · 改変・商用利用自由 · revision 2acc79da5725

コードを表示

<!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: #ede6d8;
        --bg-2: #e4dcc9;
        --fg: #1a1612;
        --fg-muted: #6b6355;
        --fg-quiet: #9b9488;
        --accent: #8a6f47;
        --rule: rgba(26, 22, 18, 0.15);
        --serif: "Cormorant Garamond", "Playfair Display", "Tiempos",
          "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", "YuMincho",
          serif;
        --sans: "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Yu Gothic", "Meiryo", ui-sans-serif, system-ui, sans-serif;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; }
      body {
        font-family: var(--serif);
        color: var(--fg);
        background: var(--bg);
        min-height: 100dvh;
        font-feature-settings: "liga", "kern";
      }

      /* Header */
      header.site {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2rem clamp(1.5rem, 4vw, 3rem);
        position: relative;
      }
      .brand {
        font-family: var(--serif);
        font-size: 1.35rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .brand em { font-style: italic; font-weight: 400; text-transform: lowercase; letter-spacing: 0; }
      nav.main { display: flex; gap: 2rem; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; }
      nav.main a { color: inherit; text-decoration: none; opacity: 0.7; }
      nav.main a.active { opacity: 1; border-bottom: 1px solid var(--fg); padding-bottom: 2px; }
      nav.main a:hover { opacity: 1; }

      /* Hero */
      section.hero {
        max-width: 1320px;
        margin-inline: auto;
        padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: end;
        gap: clamp(1rem, 3vw, 2rem);
      }
      h1.title {
        font-family: var(--serif);
        font-weight: 400;
        font-size: clamp(2.4rem, 7vw, 6rem);
        line-height: 1.4;
        letter-spacing: 0;
        margin: 0;
      }
      h1.title em {
        font-style: normal;
        color: var(--accent);
        font-weight: 400;
      }
      h1.title .line { display: block; }
      h1.title .line:last-child { padding-left: clamp(1rem, 6vw, 5rem); }
      .hero-aside {
        font-family: var(--sans);
        font-size: 0.78rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--fg-muted);
        text-align: right;
        max-width: 22ch;
        line-height: 1.8;
      }
      .hero-aside strong {
        display: block;
        color: var(--fg);
        font-weight: 500;
        font-size: 0.85rem;
        margin-top: 0.5rem;
      }

      /* Rule + meta bar */
      .meta-bar {
        max-width: 1320px;
        margin: 0 auto clamp(2rem, 4vw, 3rem);
        padding: 1rem clamp(1.5rem, 4vw, 3rem);
        border-top: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.75rem;
        font-family: var(--sans);
        font-size: 0.75rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--fg-muted);
      }

      /* Works grid */
      .works {
        max-width: 1320px;
        margin-inline: auto;
        padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: clamp(1rem, 2vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);
      }
      figure.work {
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }
      figure.work .frame {
        aspect-ratio: 4 / 5;
        overflow: hidden;
        border-radius: 2px;
        position: relative;
      }
      figure.work .frame.wide { aspect-ratio: 5 / 4; }
      figure.work .frame.square { aspect-ratio: 1 / 1; }
      figure.work .frame .art {
        width: 100%;
        height: 100%;
        transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      figure.work:hover .frame .art { transform: scale(1.03); }
      figcaption {
        font-family: var(--sans);
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-size: 0.88rem;
        color: var(--fg);
      }
      figcaption .title {
        font-family: var(--serif);
        font-size: 1.15rem;
        font-weight: 500;
      }
      figcaption .title em { font-style: normal; color: var(--fg-muted); }
      figcaption .meta {
        font-size: 0.72rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--fg-quiet);
      }
      /* Span layouts */
      figure.work.w-7 { grid-column: span 7; }
      figure.work.w-5 { grid-column: span 5; }
      figure.work.w-6 { grid-column: span 6; }
      figure.work.w-4 { grid-column: span 4; }
      figure.work.w-8 { grid-column: span 8; }

      /* Decorative artworks */
      .art.a {
        background:
          radial-gradient(ellipse 80% 60% at 50% 0%, #c9b891 0 40%, transparent 60%),
          linear-gradient(180deg, #d4c09c 0%, #8c7a58 100%);
      }
      .art.b {
        background:
          linear-gradient(180deg, #e8ded1 0 50%, #8a6f47 50% 100%);
        position: relative;
      }
      .art.b::after {
        content: "";
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 54%;
        height: 40%;
        border-radius: 999px;
        background: radial-gradient(circle at 40% 30%, #f4ead8 0 25%, #c4a578 55%, #7a5a34 100%);
      }
      .art.c {
        background:
          conic-gradient(from 210deg at 60% 40%, #a88a5c 0deg, #d4c09c 120deg, #6b5639 240deg, #a88a5c 360deg);
      }
      .art.d {
        background:
          linear-gradient(110deg, #3a3024 0%, #7a6344 50%, #c7ae82 100%);
        position: relative;
      }
      .art.d::after {
        content: "";
        position: absolute;
        inset: 15%;
        border: 1px solid rgba(237, 230, 216, 0.25);
      }
      .art.e {
        background:
          repeating-linear-gradient(
            45deg,
            #8a6f47 0 12px,
            #b39470 12px 24px
          );
      }

      /* Footer marquee */
      section.marquee-wrap {
        border-top: 1px solid var(--rule);
        margin-top: 2rem;
        padding: 1.5rem 0;
        overflow: hidden;
      }
      .marquee {
        display: flex;
        gap: 3rem;
        font-family: var(--serif);
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-style: normal;
        white-space: nowrap;
        animation: slide 28s linear infinite;
      }
      .marquee span::after {
        content: "·";
        margin-left: 3rem;
        color: var(--accent);
      }
      @keyframes slide {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
      }

      footer.site {
        max-width: 1320px;
        margin: 0 auto;
        padding: 2rem clamp(1.5rem, 4vw, 3rem) 3rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        font-family: var(--sans);
        font-size: 0.78rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--fg-muted);
      }

      @media (max-width: 820px) {
        section.hero { grid-template-columns: 1fr; }
        .hero-aside { text-align: left; }
        h1.title .line:last-child { padding-left: 0; }
        .works { grid-template-columns: repeat(2, 1fr); }
        figure.work.w-7, figure.work.w-5, figure.work.w-6, figure.work.w-4, figure.work.w-8 { grid-column: span 2; }
      }
    [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:#111111;color:#eee8dd;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}
}
nav.main{gap:.5rem;flex-wrap:wrap}
nav.main a{opacity:1}
header{flex-wrap:wrap;gap:1rem}
html[data-demo-paused] *,html[data-demo-paused] *::before,html[data-demo-paused] *::after{animation-play-state:paused!important}
html[data-demo-paused] .ticker p{animation:none!important;padding-left:8px;white-space:normal}
figcaption .meta{color:#6a6154}
.demo-notes{background:#ede6d8;color:#211c17}
</style>
  <noscript><style>*,*::before,*::after{animation:none!important}.ticker p{padding-left:8px;white-space:normal}</style></noscript>
</head>
  <body>
    <header class="site">
      <div class="brand">ATELIER&nbsp;<em>ferro</em></div>
      <nav class="main">
        <a href="#demo-link-0" class="active">作品</a>
        <a href="#demo-link-1">スタジオ</a>
        <a href="#demo-link-2">制作工程</a>
        <a href="#demo-link-3">お問い合わせ</a>
      </nav>
    </header>

    <section class="hero">
      <h1 class="title">
        <span class="line">静けさを選ぶ<em>仕事場。</em></span>
        <span class="line">空間とブランドの設計を。</span>
      </h1>
      <aside class="hero-aside">
        Milano · Kyoto<br />
        2014年より<br />
        <strong>2026年秋、受注開始</strong>
      </aside>
    </section>

    <div class="meta-bar">
      <span>選定作品 · 24 / 58</span>
      <span>絞り込み: 空間 · アイデンティティ · 印刷</span>
      <span>表示: グリッド ▾</span>
    </div>

    <section class="works">
      <figure class="work w-7">
        <div class="frame"><div class="art a"></div></div>
        <figcaption>
          <span class="title">金沢の茶室<em>、その顔。</em></span>
          <span class="meta">2026 · 空間</span>
        </figcaption>
      </figure>

      <figure class="work w-5">
        <div class="frame square"><div class="art b"></div></div>
        <figcaption>
          <span class="title">一冊のための<em>モノグラム。</em></span>
          <span class="meta">2026 · 印刷</span>
        </figcaption>
      </figure>

      <figure class="work w-4">
        <div class="frame"><div class="art c"></div></div>
        <figcaption>
          <span class="title">縁側 <em>冬</em></span>
          <span class="meta">2025 · アイデンティティ</span>
        </figcaption>
      </figure>

      <figure class="work w-8">
        <div class="frame wide"><div class="art d"></div></div>
        <figcaption>
          <span class="title">パラッツォ・オルターノ、<em>四季。</em></span>
          <span class="meta">2025 · 空間</span>
        </figcaption>
      </figure>

      <figure class="work w-6">
        <div class="frame square"><div class="art e"></div></div>
        <figcaption>
          <span class="title">Weave / <em>第一版</em></span>
          <span class="meta">2025 · 印刷</span>
        </figcaption>
      </figure>

      <figure class="work w-6">
        <div class="frame"><div class="art a"></div></div>
        <figcaption>
          <span class="title">Bureau Ma / <em>サイン計画</em></span>
          <span class="meta">2024 · 空間</span>
        </figcaption>
      </figure>
    </section>

    <section class="marquee-wrap" aria-hidden="true">
      <div class="marquee">
        <span>抑制</span><span>素材</span><span>静けさ</span><span>比率</span>
        <span>抑制</span><span>素材</span><span>静けさ</span><span>比率</span>
      </div>
    </section>

    <footer class="site">
      <span>© 2026 Atelier Ferro · Milano · Kyoto</span>
      <span>atelier@ferro.studio · +39 02 0000 0000</span>
    </footer>
  <aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空の制作物・作者・工房の作品集です。売上・受賞・制作実績・沿革・住所は表示例で、実在する顧客の実績ではありません。リンクは説明へ移動し、予約・購入・問い合わせ送信は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<div class="demo-motion">
<button type="button" data-demo-motion data-js-control disabled aria-pressed="false">演出を止める</button>
</div>
<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>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside><script>
const motion=matchMedia('(prefers-reduced-motion: reduce)'),toggle=document.querySelector('[data-demo-motion]');let paused=false;function syncMotion(){const stop=paused||motion.matches;document.documentElement.toggleAttribute('data-demo-paused',stop);toggle.setAttribute('aria-pressed',String(stop));toggle.disabled=motion.matches;toggle.textContent=motion.matches?'動きを減らす設定で停止中':stop?'演出を再開':'演出を止める'}toggle.addEventListener('click',()=>{paused=!paused;syncMotion()});motion.addEventListener('change',syncMotion);
document.querySelectorAll('[data-js-control]').forEach(el=>el.disabled=false);syncMotion();
</script>
</body>
</html>

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

概要

上品なセリフ体のポートフォリオは、装飾を最小限に抑え、書体と余白の選択だけで「格」を表現するデザインです。作品写真の力に寄りかからず、レイアウト・タイポグラフィ・静かな動きで、見る人の体感速度をゆっくりと落としていきます。

周辺設計が作品の格を決める

多くのポートフォリオは「作品を大きく見せること」に集中し、その周りの余白・書体・情報バーを雑に処理します。しかし、これは危険です。作品がどれほど優れていても、サイトの作りが粗ければ、サイトの格が作品の格を引き下げます。逆に、周辺をセリフ体と余白で静かに整えきると、まったく同じ作品が一段上の印象で届きます。器が中身の見え方を決めます。

沈黙が高級感を生む

高級ブランドのサイトに共通するのは「静けさ」です。情報を詰め込まず、要素を急かさず、たっぷりの余白を恐れない。余白は空白ではなく、作品に「ここで立ち止まってよい」と告げる時間です。スクロールを速く消費させないことが、そのまま「格」の体験になります。

崩れる形情報を詰めて要素を急かす

スクロールが速く消費され、どの作品も立ち止まられないまま通り過ぎます。点数を見せたはずが、何も見せていない結果になります。

効く形余白で立ち止まらせる

余白は空白ではなく、ここで立ち止まってよいと告げる時間です。速度を落とすこと自体が、そのまま格の体験になります。

仕上げの判断軸

ワードマークは「ATELIER ferro」のように前半大文字＋後半斜体小文字にすると、テック系の味気なさから離れられます。見出しは2行目に左インデントの段差をつけ、雑誌の誌面割りを連想させる「読ませる見出し」に。メタバーの 24 / 58 のような分数表記は、キュレーションされた一部を見ている感覚を生みます。グリッドは12カラムを基準に、各作品の幅とアスペクト比をあえて不揃いにして紙面に呼吸を与える。価値観を表す単語をゆっくり流すマーキーは、スタジオの姿勢を静かに滲ませます。

見本で試せる範囲

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