Styledex

デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。

パンくずリスト（コンクリート×ブルー / Oswald）

様式名: ネオブルータリズム / ナビゲーション

パンくずbreadcrumbナビOswaldブルータリズムポートフォリオ
⧉ 別タブで開く

「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。

特徴 — なぜ効くか

  • 伊藤翔真PFサイト（コンクリート地・ロイヤルブルー・番号ナビ・.ドット装飾）に呼応させた5案の比較カタログ
  • 01 Minimal Dot＝万能の最小構成／02 Numbered＝左ナビの01/02/03を継承し統一感が最強／03 Slash Underline＝細く上品／04 Dark Bar×Blue Chip＝大判画像や追従バー向き／05 Blue Rule+Dot＝ヒーローの区切り線と句点.を最も強く継承
  • 現在地は色だけに頼らず『太さ・下線・塗り』でも区別（色覚非依存）
  • 下層ページ（WORKS詳細）の最上部に置く前提。トップページには置かない

実装メモ — 踏んだ罠

  • マークアップは nav[aria-label] + ol/li、現在地に aria-current=page。区切り記号は CSS ::before で描画しDOMに文字を持たせない（読み上げが汚れない）
  • フォントは Oswald（Google Fonts）。未読込時は Arial Narrow → system-ui にフォールバック
  • ブルー(--blue #1a50e6)は区切り・アクセントに限定し、本文リンクの文字色には使わない。薄灰コンクリート地×濃青はコントラスト4.5:1ぎりぎり。文字は濃インク #17181a で地に対し約8:1を確保
  • 背景の打ち放しコンクリート地は 04_concrete_brutalism から流用（radial-gradient＋feTurbulenceノイズ、画像不要）
  • 案04のダーク帯は、前回整理した『長い作品詳細では作品名だけ細バーで追従』の実装土台に使える
  • 【実測して直した罠】上のimpl_notesは実測せずに書いた見立てで、実際にcontrast_check.pyで測ると全く違った。--blue(#1a50e6)を.idx・.no・page-title .dotなど『文字色』として使っている箇所はコンクリート地(#8e8e93)で1.93:1しか出ず、AA(4.5:1)はおろか非テキストUIの3:1にも届かない不合格だった。同様に--ink-soft(#3a3b3e)も本文・非現在地リンクに使うと3.43:1でAA不合格。さらに案4(ダーク帯)の.noteはrgba(255,255,255,.4)で実効#767778、ダーク地(#1b1c1e)に対し3.80:1で不合格。対策として、背景の塗り(現在地チップ・区切り線・下線などUI装飾)には元の--blueを残したまま、文字専用に--blue-text(#0a2255)を新設して.idx/.no/page-title .dot/bc5の現在地末尾ドットに適用(コンクリート地4.69:1、最も明るいムラの上でも5.39:1)。--ink-softは#202124に濃くして本文・リンク全般に反映(コンクリート地4.94:1、ムラの上でも5.68:1)。.noteはopacityを.4→.5に上げて5.19:1を確保した。派手な差し色を『背景の塗り』と『文字』で使い分けたことで、見た目のロイヤルブルーの主張は残しつつ文字だけを読める濃さに直せた
  • 【実測して直した罠】フォーカスリングにも非文字コントラスト 3:1（WCAG 1.4.11）が要る。ブランド色の --blue(#1a50e6) をそのままリングに使うとコンクリート地で 1.93:1 しかなく、フォーカスが見えない。文字用に作った濃い --blue-text(#0a2255) に替えて 4.69:1。ダーク帯の上では逆に沈むので、そこだけ白リングに切り替えている。リングの色は1色で全背景を賄えない

使いどころ / 使ってはいけない場面

壊れる条件

コントラスト実測

対象文字色背景実効背景比判定
本文・非現在地リンク(ink-soft・基準地)#202124#8e8e93#8e8e934.94:1AA 合格
本文・非現在地リンク(ink-soft・最も明るいムラの上)#202124#8e8e93#99999e5.68:1AA 合格
修正前・本文・非現在地リンク(ink-soft・基準地)#3a3b3e#8e8e93#8e8e933.43:1不合格
見出し・現在地(ink・基準地)#17181a#8e8e93#8e8e935.45:1AA 合格
見出し・現在地(ink・最も明るいムラの上)#17181a#8e8e93#99999e6.26:1AA 合格
案番号・idx等の文字(blue-text・基準地)#0a2255#8e8e93#8e8e934.69:1AA 合格（余裕なし）
案番号・idx等の文字(blue-text・最も明るいムラの上)#0a2255#8e8e93#99999e5.39:1AA 合格
修正前・案番号・idx等の文字(元の--blueをそのまま文字色に・基準地)#1a50e6#8e8e93#8e8e931.93:1不合格
案4・現在地チップ文字(白・ブルー塗り背景)#ffffff#1a50e6#1a50e66.30:1AA 合格
案4・非現在地リンク（白.62 の合成後 #a8a9aa・ダーク帯）#a8a9aa#1b1c1e#1b1c1e7.26:1AA 合格
案4・補助note（白.5 に修正／合成後 #8d8e8e・ダーク帯）#8d8e8e#1b1c1e#1b1c1e5.14:1AA 合格
修正前・案4・補助note（白.4／合成後 #767778・ダーク帯）#767778#1b1c1e#1b1c1e3.76:1不合格
フォーカスリング（修正後・コンクリート地／非文字は3:1が基準）#0a2255#8e8e93#8e8e934.69:1AA 合格
修正前・フォーカスリング（元の--blue・コンクリート地）#1a50e6#8e8e93#8e8e931.93:1不合格
フォーカスリング（ダーク帯のみ白に切替）#ffffff#1b1c1e#1b1c1e17.05:1AA 合格

アクセシビリティ

スマホへの落とし方

ブラウザ対応

関連するパーツ

コードを見る 
<!doctype html>
<html lang="ja"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>パンくずリスト（コンクリート×ブルー / Oswald） デモ</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --concrete:#8e8e93;
  --ink:#17181a;        /* ほぼ黒。本文・現在地に使う */
  --ink-soft:#202124;   /* 非現在地リンク。実測して直した:#3a3b3eはコンクリート地で3.43:1(AA不合格)だったため濃くした */
  --dark:#1b1c1e;       /* サイドバー/ダーク帯 */
  --dark-2:#0e0f10;
  --blue:#1a50e6;       /* サイトのロイヤルブルー。背景の塗り(現在地チップ等)専用。文字色には使わない */
  --blue-text:#0a2255;  /* ブルーを文字色として使う箇所専用。実測して直した:元の--blueはコンクリート地で1.93:1(AA不合格)だったため文字用に濃くした */
  --line:rgba(23,24,26,.28);
  --oswald:"Oswald", "Arial Narrow", system-ui, sans-serif;
}
body{
  font-family:var(--oswald);
  min-height:100vh;position:relative;padding:56px 44px 80px;
  /* 打ち放しコンクリート地（04_concrete_brutalism から流用） */
  background:
    radial-gradient(ellipse 60% 40% at 18% 12%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(ellipse 50% 45% at 82% 72%, rgba(0,0,0,.16), transparent 62%),
    radial-gradient(ellipse 40% 30% at 55% 40%, rgba(255,255,255,.06), transparent 58%),
    var(--concrete);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{position:relative;z-index:1;max-width:980px;margin:0 auto}
.page-title{
  font-weight:700;letter-spacing:.02em;color:var(--ink);
  font-size:clamp(26px,5vw,40px);text-transform:uppercase;line-height:1
}
.page-title .dot{color:var(--blue-text)}
.lead{margin-top:10px;color:var(--ink-soft);font-weight:300;font-size:13px;letter-spacing:.04em;line-height:1.8;max-width:34em}

/* ---- 各案の枠 ---- */
.case{margin-top:40px}
.case > .meta{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.case .no{font-weight:700;color:var(--blue-text);font-size:13px;letter-spacing:.12em}
.case h3{font-weight:600;color:var(--ink);font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.case .use{font-weight:300;color:var(--ink-soft);font-size:12px;letter-spacing:.03em}
.stage{padding:22px 24px;position:relative}
.stage.on-dark{background:var(--dark);border:1px solid rgba(255,255,255,.06)}
.stage.on-dark .note{color:rgba(255,255,255,.5)}

/* 共通：nav/ol/li のリセット */
.bc{font-family:var(--oswald)}
.bc ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center}
.bc a{text-decoration:none;color:inherit}
/* フォーカスリングは「非文字コントラスト」も 3:1 が要る（WCAG 1.4.11）。
   --blue(#1a50e6) はコンクリート地の上で 1.93:1 しか無く、リングとして見えない。
   濃い方の --blue-text(#0a2255) にすると 4.69:1 で通る。
   ダーク帯の上では逆に沈むので、そちらだけ白に切り替える */
.bc a:focus-visible{outline:2px solid var(--blue-text);outline-offset:3px}
.stage.on-dark .bc a:focus-visible{outline-color:#ffffff}

/* ============================================================
   案1：ミニマル・ドット区切り（明地に直接）
   ============================================================ */
.bc1 ol{gap:0}
.bc1 li{display:flex;align-items:center;text-transform:uppercase;letter-spacing:.14em;font-size:14px;font-weight:500}
.bc1 a{color:var(--ink-soft)}
.bc1 a:hover{color:var(--ink)}
.bc1 li+li::before{content:"";width:5px;height:5px;background:var(--line);border-radius:50%;margin:0 16px}
.bc1 [aria-current]{color:var(--ink);font-weight:700;border-bottom:2px solid var(--blue);padding-bottom:2px}

/* ============================================================
   案2：ナンバリング型（サイトの 01/02/03 ナビに呼応）
   ============================================================ */
.bc2 ol{gap:0;align-items:center}
.bc2 li{display:flex;align-items:center;text-transform:uppercase;letter-spacing:.12em;font-size:14px;font-weight:500;color:var(--ink-soft)}
.bc2 .idx{color:var(--blue-text);font-weight:700;font-size:11px;margin-right:7px;letter-spacing:.05em}
.bc2 li+li::before{content:"／";color:var(--line);margin:0 12px;font-weight:300}
.bc2 [aria-current]{color:var(--ink);font-weight:700}
.bc2 [aria-current] .idx{color:var(--ink)}
.bc2 [aria-current]::after{content:"";display:inline-block;width:6px;height:6px;background:var(--blue);margin-left:9px}

/* ============================================================
   案3：スラッシュ＋ブルー縦バー（現在地に下線）
   ============================================================ */
.bc3 ol{gap:0}
.bc3 li{display:flex;align-items:center;text-transform:uppercase;letter-spacing:.1em;font-size:13.5px;font-weight:400;color:var(--ink-soft)}
.bc3 li+li::before{content:"";width:1px;height:13px;background:var(--line);margin:0 16px;transform:skewX(-18deg)}
.bc3 a:hover{color:var(--ink)}
.bc3 [aria-current]{color:var(--ink);font-weight:600;position:relative}
.bc3 [aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--blue)}

/* ============================================================
   案4：ダーク帯 × ブルーチップ（追従バー向き）
   ============================================================ */
.bc4{display:inline-flex;align-items:center}
.bc4 ol{gap:0;align-items:stretch}
.bc4 li{display:flex;align-items:center;text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.62)}
.bc4 a:hover{color:#fff}
.bc4 li+li::before{content:"›";color:rgba(255,255,255,.3);margin:0 13px;font-size:15px;font-weight:300}
.bc4 [aria-current]{background:var(--blue);color:#fff;font-weight:700;padding:5px 12px;letter-spacing:.1em}

/* ============================================================
   案5：ブルー縦ライン＋ドット終端（ヒーローの区切り線と `.` を踏襲）
   ============================================================ */
.bc5{display:flex;align-items:center;gap:16px}
.bc5 .rule{width:2px;height:20px;background:var(--blue);flex:none}
.bc5 ol{gap:0}
.bc5 li{display:flex;align-items:center;text-transform:uppercase;letter-spacing:.16em;font-size:14px;font-weight:500;color:var(--ink-soft)}
.bc5 li+li::before{content:"/";color:var(--line);margin:0 13px;font-weight:300}
.bc5 a:hover{color:var(--ink)}
.bc5 [aria-current]{color:var(--ink);font-weight:700}
.bc5 [aria-current]::after{content:".";color:var(--blue-text);font-weight:700;margin-left:1px}

.note{margin-top:12px;font-size:11px;color:var(--ink-soft);font-weight:300;letter-spacing:.03em;line-height:1.7}
.foot{margin-top:56px;border-top:1px solid var(--line);padding-top:16px;font-size:11px;color:var(--ink-soft);font-weight:300;line-height:1.9;letter-spacing:.02em}
.foot b{font-weight:600;color:var(--ink)}
</style></head>
<body>
<div class="wrap">
  <div class="page-title">WORKS<span class="dot">.</span></div>
  <p class="lead">下層ページ（作品詳細）の最上部に置く想定。現在地は色だけでなく「太さ・下線・塗り」でも差をつけ、色覚に依存しないようにしています。</p>

  <!-- ===== 案1 ===== -->
  <section class="case">
    <div class="meta"><span class="no">01</span><h3>Minimal Dot</h3><span class="use">— 最小構成。世界観を邪魔しない万能型</span></div>
    <div class="stage">
      <nav class="bc bc1" aria-label="パンくず">
        <ol>
          <li><a href="#">Home</a></li>
          <li><a href="#">Works</a></li>
          <li><span aria-current="page">Brand Site Renewal</span></li>
        </ol>
      </nav>
    </div>
    <p class="note">ドット区切り＋現在地にブルー下線。文字は Oswald の大文字・トラッキング広め。迷ったらこれ。</p>
  </section>

  <!-- ===== 案2 ===== -->
  <section class="case">
    <div class="meta"><span class="no">02</span><h3>Numbered</h3><span class="use">— サイトの 01/02/03 ナビと世界観を揃える</span></div>
    <div class="stage">
      <nav class="bc bc2" aria-label="パンくず">
        <ol>
          <li><a href="#"><span class="idx">01</span>Home</a></li>
          <li><a href="#"><span class="idx">03</span>Works</a></li>
          <li><span aria-current="page"><span class="idx">—</span>Brand Site Renewal</span></li>
        </ol>
      </nav>
    </div>
    <p class="note">左ナビのナンバリングを引き継ぐ。現在地はブルーの四角チップで終端。サイト内で最も統一感が出る。</p>
  </section>

  <!-- ===== 案3 ===== -->
  <section class="case">
    <div class="meta"><span class="no">03</span><h3>Slash / Underline</h3><span class="use">— エディトリアル寄り。線が細く上品</span></div>
    <div class="stage">
      <nav class="bc bc3" aria-label="パンくず">
        <ol>
          <li><a href="#">Home</a></li>
          <li><a href="#">Works</a></li>
          <li><span aria-current="page">Brand Site Renewal</span></li>
        </ol>
      </nav>
    </div>
    <p class="note">斜めの細スラッシュで区切り、現在地に細いブルー下線。装飾を最小にして文字の美しさで見せたい人向け。</p>
  </section>

  <!-- ===== 案4 ===== -->
  <section class="case">
    <div class="meta"><span class="no">04</span><h3>Dark Bar × Blue Chip</h3><span class="use">— 大判画像の上／追従バーに最適</span></div>
    <div class="stage on-dark">
      <nav class="bc bc4" aria-label="パンくず">
        <ol>
          <li><a href="#">Home</a></li>
          <li><a href="#">Works</a></li>
          <li><span aria-current="page">Brand Site Renewal</span></li>
        </ol>
      </nav>
      <p class="note">ダーク帯なので作品の大判画像に重なっても読める。前回話した「作品名だけ細バーで追従」に使える形。</p>
    </div>
  </section>

  <!-- ===== 案5 ===== -->
  <section class="case">
    <div class="meta"><span class="no">05</span><h3>Blue Rule + Dot</h3><span class="use">— ヒーローの区切り線と <b>.</b> ドットを踏襲</span></div>
    <div class="stage">
      <nav class="bc bc5" aria-label="パンくず">
        <span class="rule" aria-hidden="true"></span>
        <ol>
          <li><a href="#">Home</a></li>
          <li><a href="#">Works</a></li>
          <li><span aria-current="page">Brand Site Renewal</span></li>
        </ol>
      </nav>
    </div>
    <p class="note">左のブルー縦ラインはヒーロー右端のラインに、現在地末尾の「.」はロゴ／大タイトルの句点装飾に呼応。ブランド記号を最も強く継承する案。</p>
  </section>

  <p class="foot">
    <b>実装メモ</b> — 全案 <code>&lt;nav aria-label&gt;</code>＋<code>&lt;ol&gt;/&lt;li&gt;</code>＋現在地に <code>aria-current="page"</code>。区切り記号は CSS <code>::before</code> で描画（DOMに文字を持たせないので読み上げが汚れない）。フォントは Oswald（未読込時は Arial Narrow にフォールバック）。<br>
    <b>色の注意</b> — ブルーは「区切り・アクセント」に限定し、本文リンクの文字色には使わない（薄灰地×濃青はコントラストが 4.5:1 ぎりぎり）。文字は濃インク×コンクリート地で 8:1 前後を確保。
  </p>
</div>
</body></html>
出典・参考: 伊藤翔真PFサイト向けの提案（2026-07-20）。サイトの世界観に合わせて自作