ネオブルータリズム・ナビゲーション

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

ナビボタンブルータリズムハードシャドウ明朝

⧉ 別タブで開く

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

特徴 — なぜ効くか

太い黒枠＋オフセットの効いた塗りつぶし影（ぼかし無し）でボタンを『物として置いてある』ように見せる。角丸やぼかしを一切使わないのが肝で、丸めた瞬間に普通のフラットデザインに戻る
地の色は紙のグレージュ1色＋差し色のマルーン1色だけ。CTAだけ塗りを反転させることで、リンクが並んでいてもどれが主行動か一目で分かる
ロゴだけ明朝の太字にして、他はすべてゴシック。ブルータリズムは本来ゴシック/グロテスク一辺倒になりがちだが、ロゴ＝顔の部分にだけ本人の手癖（明朝の特大見出し）を効かせて様式と手癖を両立させた
hoverで影が伸びてボタンが浮く動きは、影が『物理的にそこにある』という前提を強化する。逆に影を固定したままだと、枠線だけの地味なボタンに見えて『ブルータリズム』の記号が弱くなる

実装メモ — 踏んだ罠

box-shadow は blur を 0 にした4px 4px 0 #141414 のべた塗り。blur を付けるとただのドロップシャドウになり、ハードシャドウの『紙に厚みのある紙片を貼った』感触が消える
hoverはtransform:translate(-2px,-2px)と同時にbox-shadowを6px 6px 0まで伸ばす。transformだけだと影が動かず浮いて見えない。box-shadowだけだと平面のまま色が変わるだけになる
CTAだけ background/border-color を反転（#7b1418塗り・白文字）。他のリンクと同じ枠線色(#141414)を保つことで、色は変わっても『同じボタンの仲間』であることは崩さない
見出し下のブロブは右下、見出し（左上）とは重ねない配置にした。07_oversized_type_dark で『ブロブと文字が重なると実効コントラストが場所によって変わる』罠を踏んだため、今回は先に離して回避——重ねてから測るより、そもそも重ねない方が速い
見出しの裁ち落としは white-space:nowrap のまま親 .hero-peek の overflow:hidden に任せている。負のmarginや position:absolute でずらす必要はない（07と同じ理由：右へのはみ出しはコンテナ幅を超えた分が自動で切れる）
紙の粒は04_concrete_brutalismと同じSVG feTurbulenceだが、baseFrequencyを0.8→0.9、opacityを0.05まで落とした。ナビの背景が0.07のままだと帯の高さが低い分ノイズが密集して見え、細い帯ほど弱い粒でないと『汚れ』に寄る

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

使う: ポートフォリオ・作品集など『作者の手癖』を主役にしたいナビ。CTAだけ色反転で主行動を一目で示したいとき
使う: 地の色を紙質1色+差し色1色に絞れる案件。色数が増えるほどハードシャドウの効果が薄まる
避ける: リンク数が多い(6以上)ナビ。太枠+ハードシャドウのボタンは並べるほど圧迫感が出て、折り返すとブロックが積み重なり読みにくくなる
避ける: 角丸やドロップシャドウを基調にした既存ブランドの中に混ぜる。ハードシャドウは角丸0が前提で、丸みと共存すると様式が両方とも弱く見える
避ける: hoverが効かないタッチ専用端末が主要導線。浮き上がる動きが主なフィードバックのため、タッチのみだと状態変化が伝わりにくい

壊れる条件

box-shadowにblurを付ける → ハードシャドウの『紙が貼ってある』質感が消え、ただのドロップシャドウの普通のボタンになる
hoverでtransformだけ動かしbox-shadowを固定する → 影が動かないため浮いて見えない。影と位置は必ずセットで変える
CTAの枠線色を本体と別色にする → 『同じボタンの仲間』に見えなくなり、CTAだけ別のコンポーネントに見える
見出しとブロブを重ねる → 07番で踏んだ罠と同じで、実効コントラストが場所によって変わる。今回は配置で回避しているが、レイアウトを変えるときに重ねると再発する
帯の高さに対してノイズのopacityを04と同じ値のまま使う → 帯が低いほど粒が密集して見え、汚れに寄る。帯の高さに応じて弱める
リンクを大量に並べる → 太枠+ハードシャドウは1つ1つの主張が強く、数が増えると視覚的に渋滞する

コントラスト実測

対象	文字色	背景	実効背景	比	判定
nav-link 文字・枠線(本体地)	`#141414`	`#f5f1e8`	`#f5f1e8`	16.34:1	AA 合格
ロゴ(nav地)	`#141414`	`#faf7f0`	`#faf7f0`	17.22:1	AA 合格
CTA文字(反転塗り)	`#ffffff`	`#7b1418`	`#7b1418`	10.74:1	AA 合格
eyebrow(本体地)	`#57534e`	`#f5f1e8`	`#f5f1e8`	6.77:1	AA 合格
見出し(INDEX.・本体地、ブロブとは非重複)	`#141414`	`#f5f1e8`	`#f5f1e8`	16.34:1	AA 合格

アクセシビリティ

リンクは<a>実要素。:hover,:focus-visibleで同じ浮き上がり演出を出しており、キーボード操作でも状態変化が見た目に出る
CTAと通常リンクの区別は色反転(マルーン塗り)だが、ラベル文言(CONTACT等)でも行動の違いが分かるため色のみには依存していない
hoverの『浮く』動きが視覚的フィードバックの主役だが、prefers-reduced-motionの分岐は無い。動きに敏感なユーザー向けにtransitionを切るか、影の伸長だけでも状態変化を示す設計の余地がある
太い枠線とハードシャドウはボタンの境界を色以外(形状)でも示せているため色覚非依存の面では強いが、CTAの色反転自体は色覚シミュレーションでの確認はしていない(未検証)

スマホへの落とし方

nav-linkの折り返し(flex-wrap)はSPで縦積みに近くなる。ボタン数が増えると縦に長くなるため、SPではCTA以外を折りたたむ設計を検討する
見出しはclamp(48px,12vw,92px)で流体化。極端に狭い幅では裁ち落とし量が増え、視認できる文字数がさらに減る
ブロブはright/bottomの負値+固定widthのため、SPでは画面外にほぼ全部逃げる。文字と重ねない設計なので視認性への実害はないが『色面がある』意図は弱まる

ブラウザ対応

box-shadow・transform・position:sticky・clamp()はいずれも主要ブラウザで長年安定した基本機能で、backdrop-filterのような新しめの機能は使っていない。※2026-07-22時点の一般的な理解に基づく記述で、一次情報での再確認は未実施

関連するパーツ

コードを見る

<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>ネオブルータリズム・ナビゲーション デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;min-height:340px;position:relative;
  background:#f5f1e8;overflow:hidden}
/* 粒：紙のノイズ。04_concrete_brutalism と同じ手法だが baseFrequency を上げて版画の粒に寄せた */
body::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.05;
  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.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page{position:relative;z-index:2}

.nav{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:14px 22px;background:#faf7f0;border-bottom:3px solid #141414}
.logo{font-family:Georgia,"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:700;
  font-size:22px;letter-spacing:-.02em;color:#141414}
.links{display:flex;gap:10px;flex-wrap:wrap}
.nav-link{display:inline-block;border:2px solid #141414;background:#f5f1e8;color:#141414;
  font-size:12px;font-weight:700;letter-spacing:.04em;padding:8px 16px;text-decoration:none;
  box-shadow:4px 4px 0 #141414;transition:transform .12s,box-shadow .12s}
.nav-link:hover,.nav-link:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #141414}
.nav-cta{background:#7b1418;color:#fff;border-color:#141414}

.hero-peek{position:relative;padding:36px 28px 44px;min-height:236px;overflow:hidden}
/* ブロブは右下・見出しは左上に離して重ならせない。07_oversized_type_dark で踏んだ
   「ブロブと文字が重なると実効コントラストが崩れる」罠をここでは配置で先に回避する */
.blob{position:absolute;right:-60px;bottom:-70px;width:280px;height:280px;background:#7b1418;
  border-radius:62% 38% 55% 45% / 45% 55% 40% 60%}
.eyebrow{position:relative;display:block;font-size:11px;font-weight:700;letter-spacing:.2em;
  color:#57534e}
h2{position:relative;margin-top:10px;font-family:Georgia,"Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:800;font-size:clamp(48px,12vw,92px);line-height:1;color:#141414;
  letter-spacing:-.01em;white-space:nowrap}
/* 見出しは親の overflow:hidden に食われて右へ裁ち落とす。負のmarginは不要（07 と同じ実装） */
</style></head><body>
<div class="page">
  <nav class="nav">
    <span class="logo">ITO.</span>
    <div class="links">
      <a class="nav-link" href="#">WORKS</a>
      <a class="nav-link" href="#">ABOUT</a>
      <a class="nav-link nav-cta" href="#">CONTACT</a>
    </div>
  </nav>
  <section class="hero-peek">
    <div class="blob" aria-hidden="true"></div>
    <span class="eyebrow">SELECTED WORKS</span>
    <h2>INDEX.</h2>
  </section>
</div>
</body></html>

出典・参考: STYLE_AXIS.md の様式定義（02 ネオブルータリズム＝ビビッドな色面・太い枠・ハードな影）と ito-design-taste の手癖（明朝の特大見出し・色数を絞る・大判の有機色面・文字の裁ち落とし）を、まだ未着手だった『ナビゲーション』部位に適用した自作実装