GODRICH

ネオブルータリズム UI キット、影がにじまないLPパーツ9選

· Godrich · 9種 · 7分で読める

デザイントレンドページテンプレートCSSのみLPヒーローCTAボタン

ネオブルータリズム UIとは、太い墨色の枠線とにじみのない直角の影、彩度の高い原色ブロックを飾らずにそのまま画面へ置くデザイン手法です。ボタンやカードによく使われます。

ピンタレストや Dribbble の保存タブを埋め尽くしているのがこのルックです。実際に組んだワンページを先に下へ貼ったので、上のナビバーから下の著作権表示まで一度スクロールして全体のトーンを目に入れてください。影ににじみが無いことに、まず気づくはずです。

ページを新しいタブで開く

このワンページを九つに切り分け、下の格子にもう一度並べ直しました。並び順は人気投票ではなく、初めて画面を開いた人がたどる動線——目を引かれる、見て回る、価格を確かめる、信頼の材料を探す、背中を押される、登録する——そのままです。九つのうち四つ(ヒーロー・番号バッジ・料金カード・ボタン)は普通のカード羅列ではなく、回転や影の移動といった動きが付いたアイデア型です。

01 hero-brutalist 02 nav-brutalist 03 card-grid-brutalist 04 feature-list-brutalist 05 pricing-brutalist 06 testimonial-brutalist 07 cta-band-brutalist 08 footer-brutalist 09 buttons-inputs-brutalist

自動再生 · タイルを押すとその項目へ · すべて1つのzip

01オフセットシャドウ ヒーロー

見出しの背後に敷いた黄色の複製文字が、印刷がわずかにずれたように周期的にかみ合っては外れます。角に乗せたステッカーバッジは傾いたまま休み、区間の終わりだけタンと音がしそうな勢いで一瞬平らに戻ります。

오프셋 텍스트섀도우배지 회전→0radius 0
<div class="relative border-[3px] border-ink bg-cream p-8 shadow-brutal">
  <span class="absolute -right-3 -top-3 border-[3px] border-ink
               bg-orange px-3 py-1 text-xs font-black text-cream">NEW</span>
  <h1 class="relative font-display text-4xl font-black leading-tight">
    <span class="absolute -left-1 -top-1 -z-10 text-yellow"
          aria-hidden="true">隠さず、そのまま始める</span>
    隠さず、そのまま始める
  </h1>
  <button class="mt-3 rounded-full border-[3px] border-ink bg-ink
                 px-6 py-3 text-sm font-black text-cream
                 shadow-[4px_4px_0_#ffd23f]">今すぐ始める</button>
</div>

02スタンプナビ

現在のメニュー枠だけ、はんこを押すように一気に膨らんでから跳ね返り、色付きブロックで塗りつぶされます。ラベルはどれだけ幅が狭くなっても折り返さず一行のままで、はみ出した分は横スクロールに逃がします。

scale 오버슈트radius 0white-space: nowrap
<nav class="flex items-center gap-4 border-[3px] border-ink bg-ink
            px-4 py-3">
  <span class="shrink-0 whitespace-nowrap font-black text-cream">SLABKIT</span>
  <div class="flex min-w-0 flex-1 gap-2 overflow-x-auto">
    <span class="shrink-0 whitespace-nowrap border-[3px] border-cream
                 bg-orange px-3 py-1.5 text-xs font-bold text-cream">ホーム</span>
    <span class="shrink-0 whitespace-nowrap px-3 py-1.5 text-xs
                 font-bold text-cream/70">機能</span>
  </div>
  <button class="shrink-0 whitespace-nowrap rounded-full border-[3px]
                 border-cream bg-yellow px-4 py-2 text-xs
                 font-black text-ink">はじめる</button>
</nav>

03シャドウ分離カード

各カードの黒い影は元の位置に固定されたまま、カード本体だけが左上へ動くので、カードと影のあいだの隙間が広がったり縮んだりします。四枚は開始時刻を少しずつずらしてあり、波のように順番に持ち上がって見えます。

그림자 고정카드만 이동radius 0
<div class="relative">
  <div class="absolute inset-0 translate-x-2 translate-y-2 bg-ink"></div>
  <div class="relative flex flex-col gap-2 border-[3px] border-ink
              bg-cream p-4">
    <span class="block h-6 w-6 bg-blue"></span>
    <p class="text-sm font-bold">高速検索</p>
  </div>
</div>

04斜め番号バッジ

番号入りの四角いバッジはそれぞれ違う角度で置かれていて、順番にほんの一瞬だけまっすぐに戻ってはまた傾きます。角度をわざとばらけさせているので、三つが同時にそろう瞬間が来ず、常にどこかが動いているように感じられます。

회전 랜덤순차 정렬radius 0
<li class="flex items-center gap-3 border-[3px] border-ink bg-cream
           p-2 pr-5 shadow-brutal-sm">
  <span class="grid h-9 w-9 flex-none -rotate-6 place-items-center
               border-[3px] border-ink bg-blue text-xs font-black
               text-cream">01</span>
  <span class="text-sm font-bold">クイックスタート</span>
</li>

05貼り付け料金カード

おすすめプランのカードだけ少し傾いた状態で、他のカードの上に付箋のように乗っています。残りは完全に水平なので、傾き一つだけでどれが推しなのか一目で伝わります。傾きを保ったまま呼吸するように膨らんでは沈むので、表を添えなくても視線が自然にそこへ向きます。

rotate 고정radius 0레이어 겹침
<div class="relative -ml-2 flex-[1.1] -rotate-3 border-[3px]
            border-ink bg-yellow p-6 shadow-brutal">
  <span class="absolute -top-3 left-3 border-[3px] border-ink
               bg-blue px-3 py-1 text-xs font-black text-cream">おすすめ</span>
  <p class="font-black">プロ</p>
  <p class="mt-1 text-sm text-ink/70">月1,200円</p>
</div>

06ブロック引用符の声

文字ではなくカード左端の一帯を塗る青いブロックが、自分専用の細いレーンの中だけで奥からすっと滑り込んでは抜けていきます。アバターは丸ではなく太い枠の正方形フレームに収まり、カード本体と同じ角ばった語彙を共有します。

블록 따옴표정사각 아바타radius 0
<div class="relative flex-1 overflow-hidden border-[3px] border-ink
            bg-cream py-4 pl-8 pr-4 shadow-brutal-sm">
  <span class="absolute inset-y-0 left-0 w-6 bg-blue"></span>
  <p class="relative text-sm font-bold">「指先に吸い付くような感触です」</p>
  <p class="relative mt-2 text-xs text-ink/60">オ・ハヌル · プロダクトデザイナー</p>
</div>

07行進する斜め線CTA

帯の背景全体にハードエッジの斜め縞を敷き、background-position だけを動かして途切れなく行進させています。ボタンは完全に不透明な塗りを乗せているので、縞が下を通り過ぎる瞬間でも文字が埋もれません。

사선 스트라이프background-position 루프radius 0
<div class="relative overflow-hidden border-[3px] border-ink bg-ink
            px-10 py-12 shadow-brutal">
  <span class="absolute inset-0" aria-hidden="true"
        style="background-image:repeating-linear-gradient(45deg,
               #17141a 0 24px,#ffd23f 24px 48px)"></span>
  <h3 class="relative font-display text-3xl font-black
             text-cream">今すぐチームを招待しましょう</h3>
</div>

08定規で引いた仕切り線フッター

コラムのあいだの太い縦線が、まるで定規を当てて引いたように上から下へ一度だけ描かれ、しばらくそのまま留まってから次の周回に備えて短く消えます。上端の境界だけ太く、残りの角は全部きっちり直角のままです。

scaleY 드로잉상단 테두리만radius 0
<footer class="flex items-stretch border-t-[6px] border-ink
               bg-cream px-4 pb-6 pt-8">
  <div class="flex-1 px-2">
    <p class="mb-2 text-xs font-black text-blue">プロダクト</p>
    <p class="text-sm font-bold">機能</p>
  </div>
  <span class="w-[3px] flex-none bg-ink"></span>
  <div class="flex-1 px-2">
    <p class="mb-2 text-xs font-black text-ink/50">会社</p>
    <p class="text-sm font-bold">会社概要</p>
  </div>
</footer>

09影の位置に押し込むボタン

ボタンを押すと影のオフセットぶんだけ本体が正確にずれ、同時に影はゼロまで縮むので、ボタンがさっきまで影があった場所へ沈み込んだように見えます。入力欄はフォーカスした瞬間に影が何もない状態からぽんと現れ、枠線の色も一緒に切り替わります。

press 오프셋 이동radius pill(버튼만)focus 그림자 팝
<form class="flex gap-3 border-[3px] border-ink bg-cream p-6
            shadow-brutal">
  <input class="flex-1 border-[3px] border-ink bg-paper px-4 py-3
                text-sm" type="email" placeholder="メールアドレス">
  <button class="rounded-full border-[3px] border-ink bg-blue
                 px-5 py-3 text-sm font-black text-cream">登録する</button>
</form>

tailwind.config カスタム

角丸はゼロか完全な円(rounded-full)の二値だけをこの一箇所で決めておき、影はにじみのないハードオフセットのユーティリティ二つ(shadow-brutal・shadow-brutal-sm)にまとめてあります。色も原色三つ(blue・yellow・orange)と土台の cream の計四色しか登録していないので、九つの部品とワンページがどこを切り取っても同じパレットに収まります。

theme: {
  extend: {
    colors: {
      cream: "#fff7e6",
      ink: "#17141a",
      blue: "#2f6df6",
      yellow: "#ffd23f",
      orange: "#ff4d1f",
    },
    boxShadow: {
      brutal: "8px 8px 0 #17141a",
      "brutal-sm": "4px 4px 0 #17141a",
    },
  },
},

バイブコーディング プロンプト

上の設定をプロジェクトに貼り付けてしまえば、あとは Claude Code や Cursor に次の数行を渡すだけで足ります。プロンプトの全文は zip の中の prompt.md に入っています。

すべてのカード・ナビ・ボタン・入力欄の角は完全な直角(border-radius: 0)に統一する。
例外は実際に押すボタン(button タグ)だけで、そこだけ完全な丸(pill)にする。
枠線は太く(3px 以上)、色は ink 一色にそろえる。
影はぼかしのないハードオフセットひとつだけを使い、box-shadow に blur 半径を入れない。
カードをひとつ目立たせたいときは、色やサイズより先に回転(-3deg 程度)を使う。

このルールのまま page/index.html を組み直させ、出てきた画面を1280px幅で最初から最後までキャプチャしました。下がその画面です。

結果

どこで壊れるか — 落とし穴

幅320pxで最初につまずいたのは04番でした。番号バッジの一覧はバッジの最小サイズと項目間の余白をほぼ固定値のまま置いていたせいで、狭い画面での実測の高さが232pxまで伸び、許容している200pxを32pxはみ出していました(Playwright で scrollHeight を実測)。バッジのサイズと余白を、もっと低い下限を持つ clamp() に差し替えてから、ようやく200px以内に収まりました。

二つ目は React 移植版のほうです。仕切り線とカラムをまとめて返す必要があるフッターのコンポーネントで import { Fragment } from "react" をそのまま書いたところ、型定義の都合で「そのような名前はモジュールに存在しない」というエラーが出ました。import React from "react" のあとに React.Fragment で包む書き方なら、どの設定でも詰まらず通ります。

斜め線が行進するCTA帯は、background-position を柄の一周期(枠幅のちょうど二倍)と寸分たがわぬ距離だけ動かしています。ほんのわずかでもずれた距離を動かすと、ループが一周するたびに縞が目に見えて跳ねてしまいます。この三点をすべて直した版が、パスワードsfjr6qe2を掛けた zip にそのまま収めてあります。

九つのデモは、動きを減らす設定にしている訪問者に対してそれぞれ違う止まり方をします——複製文字・スタンプ・カードの移動はそのまま完全に停止しますが、おすすめ料金カードだけはMDN の prefers-reduced-motion ドキュメントが勧めるとおり、傾き(情報)は残したまま呼吸(装飾)だけを止めます。

アクセシビリティ

yellow(#ffd23f)は背景のブロックとしてだけ使い、その上に小さな文字は絶対に乗せません——明るい黄色の上に淡い色の文字を置くとコントラストが落ちやすいため、小さなテキストには背景とはっきり見分けのつく ink か cream のどちらかを必ず選びます。カードのハードシャドウはMDN の box-shadow ドキュメントが説明するオフセットと色だけを使い、ぼかし半径はゼロのまま固定しているので、弱視のユーザーにも境界線がくっきり残ります。ナビゲーションのブランド名と CTA には shrink-0 whitespace-nowrap を、中央のリンクの束には min-w-0 を与えているため、画面幅が狭まっても文字が途中で切れたり行の途中で折り返されたりしません。

ほかの流行りのスタイルはデザイントレンドのカテゴリーにまとめてあります。このサイトがどんな場所かはこのサイトについてのページで説明しています。

FAQ

ネオブルータリズムとグラスモーフィズム・ニューモーフィズムは何が違いますか?

グラスモーフィズムは半透明のガラス質のぼかし背景を使い、ニューモーフィズムは背景とほぼ同じ色のカードに柔らかい二重の影を重ねます。ネオブルータリズムはその逆で、太い枠線とぼかしのない原色ブロックをそのままさらけ出す作りなので、三つのうちコントラストが最も強く、アクセシビリティの観点では境界がはっきりする分むしろ有利に働きます。

影にぼかし(blur)を少しでも入れてはいけませんか?

入れた瞬間にこのスタイルの合図がぼやけます。box-shadow を使っている箇所はすべて三つ目の値(ぼかし半径)をゼロに固定し、動かすのはオフセットと色だけにしています。影を固定した色ブロック(::before)として別に描いている03番も、ぼかしのないハードエッジをそのまま保っています。

ダークモードでもネオブルータリズムは似合いますか?

似合います。ただし背景は ink に反転させ、カードは cream か原色ブロックのままにしておく必要があります。影の色まで明るく変えると枠線との境目が消えてしまうため、影だけはダークモードでも ink(またはそれより濃い色)のまま残しておくのが安全です。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。