GODRICH

ニューモーフィズム デザインとは？二重の影だけのLPパーツ9選

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

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

ニューモーフィズム デザインとは、カードやボタンの背景色を画面の背景とほぼ同じにしたうえで、明るい影と暗い影を反対方向に重ねることで、色ではなく影だけで立体感を出すデザイン手法です。名前も作り方も知らなかった、あの「押し込まれたようにふくらんで見えるボタン」の正体がこれです。

ピンタレストなどでスクリーンショットとしてばかり出回るスタイルなので、実際に組んだワンページのLPをそのまま下に載せています。ナビゲーションからフッターまで、まず一度通しでスクロールしてみてください。

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

上のページは9個の独立したセクションに分解し、この下に格子として並べ直しています。並び順は人気順ではなく、訪問者が実際に画面を上から下へ見ていく流れ——目に留まる、見て回る、料金を確かめる、信頼する、行動を起こす、登録する——に沿わせました。9個のうち3つ(埋め込みアイコンリスト・呼吸するグローCTA帯・ボタンと入力欄)は、同じ面ひとつが影の符号を反転させるだけで浮いても沈んでも見えることを、アニメーションでそのまま示しています。

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

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

01浮き出たヒーロー

カードの塗りは背後の舞台とほとんど同じ色で、反対方向を向く影のペアだけがそのカードを背景から浮かせて見せます。パネル全体で唯一色が違うのは、後ろでゆっくり漂うアクセント色の丸2つだけです。

동색 표면이중 그림자radius 16
<div class="relative mx-auto max-w-xl flex flex-col items-start gap-4
            rounded-neu bg-surface p-10 shadow-neu-raised">
  <p class="text-xs font-bold uppercase text-accent">Neumo</p>
  <h1 class="text-4xl font-extrabold leading-tight">塗りではなく影で立ち上がる画面</h1>
  <button class="rounded-pill bg-surface px-6 py-3 text-sm font-bold text-accent
                 shadow-neu-raised">無料で始める</button>
</div>

02押し込みナビインジケーター

タブのトラック全体は内側にへこんだ影で沈んでおり、アクティブなタブだけが逆向きの浮き出た影をまとってその溝から飛び出して見えます。タブの幅をトラックの25%にしておけば、translateX(100%)一回で必ず隣の枠ひとつ分だけ動きます。

inset 트랙raised 인디케이터translateX 25%
<nav class="flex items-center gap-4 rounded-pill bg-surface px-3 py-2
            shadow-neu-raised">
  <div class="relative flex flex-1 rounded-pill bg-surface p-1 shadow-neu-press">
    <span class="absolute inset-y-1 left-1 w-1/4 rounded-pill bg-surface
                 shadow-neu-raised"></span>
    <span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">ホーム</span>
  </div>
</nav>

03浮き彫りカードグリッド

各タイルは背後のページとまったく同じ塗り色を保ったまま、影の深さとわずかな浮き上がりが一緒にループで膨らんだり収まったりします。色そのものは一度も変わらず、浮いて見える度合いだけが変化します。タイルごとに開始時刻をずらすと、4枚が波のように順番に立ち上がって見えます。

동색 표면raised 깊이 변화2열→1열
<div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
  <div class="flex flex-col gap-3 rounded-neu bg-surface p-5 shadow-neu-raised">
    <span class="h-7 w-7 rounded-control bg-accent"></span>
    <p class="text-sm font-semibold">高速検索</p>
  </div>
</div>

04埋め込みアイコンリスト

錠剤型の行そのものは浮き出ていますが、その中のアイコンチップだけが内側に沈み込み、ひとつの行の中で浮き出しと沈み込みが同時に見えます。キャンバスは純白から6%だけ暗くずらしてあり、そのおかげで影の両方向がちゃんと見えます。

inset 칩raised 행순백 대신 6% 눌린 캔버스
<li class="flex items-center gap-3 rounded-pill bg-surface p-2 pr-5
           shadow-neu-raised">
  <span class="h-9 w-9 flex-none rounded-pill bg-surface
               shadow-neu-press"></span>
  <span class="text-sm font-semibold">クイックスタート</span>
</li>

05浮き出たおすすめプラン

通常プランは沈み込んだままで、おすすめプランだけが深く浮き出た影をまとうので、比較表を出さなくても影の向きだけでどちらを推しているか伝わります。バッジはカードの内側余白の中に置くとプラン名の文字と重なってしまうため、カードの外枠の外側にはみ出させる必要があります。

inset 일반 플랜raised 추천 플랜press 애니메이션
<div class="relative flex-[1.1] rounded-neu bg-surface p-6 pt-8
            shadow-neu-raised">
  <span class="absolute -top-3 left-6 rounded-pill bg-surface px-3 py-1
               text-xs font-bold text-accent shadow-neu-raised">おすすめ</span>
  <p class="font-bold">プロ</p>
</div>

06くぼみアバター+吹き出し

アバターは丸いくぼみに沈み込むように内向きの影をまとい、隣の吹き出しは逆に外向きの影で膨らんで見えます。それぞれの開始タイミングを少しずらすことで、ふたつの別々の物体として自然に映ります。

inset 아바타raised 말풍선어긋난 부유
<div class="flex items-center gap-4">
  <span class="h-14 w-14 flex-none rounded-pill bg-surface
               shadow-neu-press"></span>
  <div class="flex-1 rounded-neu bg-surface p-5 shadow-neu-raised">
    <p class="text-sm font-semibold">「指先に吸い付くような感触です」</p>
  </div>
</div>

07呼吸するグローCTA帯

浮き出た帯の裏に隠れた円形の光がゆっくりと膨らんでは縮み、その上に乗るボタンは押し込まれては跳ね返る動きを繰り返します。帯にはoverflow: hiddenをかけて、光が角の外へはみ出さないようにしています。

radial-gradient 글로우raised 밴드press 버튼
<div class="relative overflow-hidden rounded-neu bg-surface px-10 py-12
            shadow-neu-raised">
  <span class="absolute -right-16 -top-24 h-64 w-64 rounded-pill
               bg-accent opacity-20 blur-md"></span>
  <h3 class="relative max-w-md text-3xl font-extrabold">今すぐチームを招待しましょう</h3>
</div>

08丸い上部フッター

フッターパネル自体はページより浮いて乗り、中の各カラムはそれぞれ少しずつ違う拍でへこみの深さが浅くなったり深くなったりします。区切り線を一切置かなくても、影だけでカラムの境目が分かります。

raised 패널inset 칸3열→1열
<footer class="grid grid-cols-3 gap-4 rounded-t-neu bg-surface px-4
               pt-8 pb-6 shadow-neu-raised">
  <div class="rounded-control bg-surface p-5 shadow-neu-press">
    <p class="text-xs font-bold uppercase text-ink/50">プロダクト</p>
    <p class="text-sm font-semibold">機能</p>
  </div>
</footer>

09ニューモーフィズムボタン・入力欄

ボタンは押すと影の符号がraisedからinsetへ反転して沈み込み、入力欄は常にinsetのままフォーカス時だけ高コントラストのリングが加わります。この組み合わせひとつに、このスタイルの原理がすべて詰まっています——同じ面でも影の符号を入れ替えるだけで、浮いても沈んでも見えるのです。

raised↔inset 반전radius 12focus-visible 링
<button class="rounded-control bg-surface px-5 py-3 text-sm font-bold
               text-accent shadow-neu-raised">保存する</button>
<label class="relative block rounded-control bg-surface p-1
              shadow-neu-press">
  <input class="w-full rounded-control bg-transparent px-4 py-3
                text-sm outline-none" type="text">
</label>

tailwind.config カスタム

色・角丸・影の値をこの一箇所にまとめておくと、ワンページと部品9個のすべてが同じ表面色に揃います。raisedとpressの影ペアもそれぞれshadow-neu-raised・shadow-neu-pressという名前ひとつで呼び出せます。

theme: {
  extend: {
    colors: {
      surface: "#e0e5ec",
      ink: "#3d4457",
      accent: "#2f6df6",
    },
    borderRadius: {
      neu: "20px",
      control: "12px",
    },
    boxShadow: {
      "neu-raised": "9px 9px 16px rgba(163,177,198,.6), -9px -9px 16px rgba(255,255,255,.6)",
      "neu-press": "inset 6px 6px 10px rgba(163,177,198,.5), inset -6px -6px 10px rgba(255,255,255,.6)",
    },
  },
},

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

上の設定ファイルをプロジェクトに置いたまま、Claude CodeやCursorには下の指示文だけを渡してください。全文はzip内のprompt.mdにそのまま入っています。

カード・ボタン・入力欄の背景色はすべて surface(#e0e5ec) ひとつに統一する。立体感は
色ではなく影だけで出す。浮いて見せたい要素には shadow-neu-raised、沈んで見せたい
要素には shadow-neu-press を使い、背景を純白にはしない——明るい側の影が白より
明るくなれず消えてしまう。:focus-visible の状態にはアクセント色の輪郭を別途描く。

この指示文をpage/index.htmlに反映してレンダリングした画面を、1280pxのビューポートでページ全体キャプチャしたものが下の画像です。

結果

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

狭い画面でのテストでまず見つかった問題は、ヒーロー・料金・CTA帯の3つがカード内側の余白を固定px値にしていたことでした。320px幅ではみ出し、そのうえ料金カードはおすすめプランのバッジ文字までカードの外へはみ出しました。余白(と料金カードのバッジのオフセット)をclamp()に置き換えてようやくどの項目も320pxで収まりました。

二つ目の落とし穴は、おすすめプランのバッジの位置です。バッジをカードの内側余白の中に置くとプラン名の文字と重なって隠れてしまうため、カードの上端の外側に半分かかるように浮かせる必要があります。この二つはどちらもレイアウトの崩れという同じ種類の問題でしたが、三つ目はレイアウトではなく色そのものの問題で、しかも一番気づきにくいものでした。背景を純白(#ffffff)にしたときに現れました。影の明るい側は背景より明るくないとハイライトとして映らないため、背景がすでに純白だとその明るい側がまるごと消え、暗い側の影だけが残って立体感が半分になってしまいます。パスワードjuzcd872のzipには、背景を純白より6%ほど暗く落とした修正版がそのまま入っていて、両方向の影が見えることを確認できます。

9個のデモはすべてMDNのprefers-reduced-motionのドキュメントが定義するメディア特性を検知すると動きを止め、各面をその時点の状態(浮いたカードは浮いたまま、ボタンは押される前のまま)で固定します。この設定をオンにした訪問者からは、呼吸するグローや押し込みの動きだけが消え、カード・ボタン・入力欄そのものはそのまま残るので情報は欠けません。

アクセシビリティ

ニューモーフィズムには、よく知られたアクセシビリティ上の批判が付いて回ります。表面の塗りが背景とほとんど同じ色であるため、静止した状態のボタンやカードは背景との境界コントラストがほぼゼロに近く、WCAG 1.4.11の非テキストコントラストの基準を実質満たせません。「これは押せるボタンだ」という手がかりを影だけに頼る設計は、弱視の方や色覚特性のある方にとってその手がかり自体が見えないおそれがあるということです。この記事のキットはその限界を解消してはいませんが、範囲は狭めています——文字色は必ずink(#3d4457)にして背景とのコントラストを確保し、:focus-visibleには影とは無関係のアクセント色のリングを別に描くことで、少なくともキーボード利用者がフォーカス位置を見失わないようにしました。MDNのbox-shadowドキュメントが案内するinsetの有無で浮き出しと沈み込みを切り替えるこの技法自体は正しく動きますが、実務では決済ボタンのような絶対に見逃せない要素にはこのスタイルを使わない方が安全です。

他のデザイントレンドはデザイントレンドカテゴリーにまとめてあり、このサイト全体の狙いは紹介ページに書いてあります。

FAQ

ニューモーフィズムとクレイモーフィズムは何が違いますか?

ニューモーフィズムは表面の色を背景とほぼ同じにして影だけで立体感を出しますが、クレイモーフィズムはカードの色を背景とはっきり変えたうえで太い角丸まで足すので、対比と立体感を同時に強められます。結果としてカードの輪郭が見える分だけ、クレイモーフィズムのほうがボタンなど操作要素のコントラストを保ちやすくなります。

なぜ純白や純黒の背景では成立しないのですか?

影の明るい側は周りの面より明るい色を使って初めてハイライトとして機能し、暗い側は周りの面より暗い色を使って初めて陰として機能します。背景が純白(#ffffff)だとそれより明るい色が、純黒だとそれより暗い色が存在しないため、その方向の影が消えてしまいます。この記事のキットが背景を純白ぴったりではなく、そこから数%だけ落とした色にしているのはそのためです。

ダークモードでもニューモーフィズムは成立しますか?

成立します。ただしライトモードの値をそのまま反転させるのではなく、暗いキャンバスでは明るいハイライト側の不透明度を大きく下げ、暗い影側はむしろ濃くする必要があります。そうしないと表面が背景に溶け込んでしまい、わずかな浮き上がりすら感じられなくなります。

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

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