GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

メンフィス デザインのLPパーツ9選、コピペOK

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

デザイントレンドCSSのみページテンプレートLPヒーロー料金表

メンフィス デザインとは、1980年代のミラノ生まれの、水玉・波線・ジグザグなどの幾何学形を明るい色の上に繰り返すスタイルです。画像を一枚も使わず、CSSグラデーションのタイルと図形だけでこのパターンを再現し、ランディングのセクション9つにまとめました。

Pinterestで「memphis pattern」として保存される画面のほとんどはイラストの書き出しです。ページが重くなり、色を変えるたびに描き直すことになります。ここでは模様のすべてをグラデーション1行ずつで作り、色の値を変えればパターン全体がまとめて変わるようにしました。下の1ページをスクロールして、どこで模様が現れるか、まず探してみてください。

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

あのページを構成する部品9つを切り出して格子に並べました。順番は、画面に模様が染み込んでいく順序です。背景が模様の海になり、形が居場所を決め、模様が流れ始め、箱に収まり、シールが証言し、値段が付き、境界がギザギザに切られ、帯が流れていき、最後に波が押し出します。メンフィス デザイン 家具 で先に見慣れた色と形が画面へ移ってきたものなので、模様はレイアウトより先に居場所を決めます。質感を主役にした隣人はスキューモーフィズムの質感パーツ、光で画面を染める隣人は光るオーブのLPキットです。模様・質感・光のどれで染めるかは、3つのキットを見比べればすぐ決まります。

パターンだらけのヒーロー01 hero-memphis 形バッジのナビ02 nav-memphis 反復パターンの帯03 pattern-band-memphis 黒い枠のカードグリッド04 card-grid-memphis シールのレビュー重ね05 sticker-testimonial-memphis パターン帯の料金プラン06 pricing-memphis ジグザグの仕切り線07 zigzag-divider-memphis パターンのマーキー帯08 marquee-band-memphis 波打つCTA帯09 cta-wave-memphis

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

01パターンだらけのヒーロー

何が見えるか

舞台そのものが、repeating-radial-gradient 1行で描いた同心円のさざ波です。白いパネルは静止したまま、半円・三角・十字・ギザギザの4つが周囲を漂います。周期は全部同じ2秒で、負の遅延（delay）で位相だけをずらしました。周期を混ぜると2秒のループが一周したときにどれかが別の区間にいるため、画面が飛んでしまいます。

パターンだらけのヒーロー
新しいタブで開く

01 · パターンだらけのヒーロー — 計測 累積面積 2.806% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

repeating-radial-gradientclip-pathanimation-delay

コードのどこを見るか

計測では累積面積2.806%、動いたフレーム23/23でした。

// 同心円のさざ波 — 原点を1つに持つ半径グラデーションの反復
.stage {
  background-image: repeating-radial-gradient(circle at 14px 14px, rgba(36, 31, 38, .1) 0 2.5px, transparent 3.5px 28px);
}
// 4つの形は同じ2秒、違う位相
.herom__shape       { animation: shapeFloat 2s ease-out infinite; }
.herom__shape--half { animation-delay: -.5s; }
.herom__shape--tri  { animation-delay: -1s; }
@keyframes shapeFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-12px) rotate(4deg); }
}

02形バッジのナビ

メンフィス デザイン 作り方 の形バッジはナビでどう見えるか

メニュー3項目が円・半円・三角のバッジを持ち、アクティブな項目が交代で変わります。切り替えは steps(1, end) タイミングで1フレームのカットです。フェードで混ぜると2色が半透明で重なるゴーストフレームが数枚紛れ込みます。カットで交代させ、生きている動きはバッジが上へ跳ねるtransformだけに任せました。

形バッジのナビ
新しいタブで開く

02 · 形バッジのナビ — 計測 累積面積 16.499% · 動いたフレーム 9/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

steps(1, end)translateY:focus-visible

コードの読み方

カットのぶん、変化のあるフレームは9/23と少ないですが、面積と強度は十分です。

.navm__tab {
  --on: #ff5c47;                     // 項目ごとに自分の色
  animation: tabFill 2s steps(1, end) infinite;
}
.navm__tab:nth-child(2) { animation-delay: -.6667s; }
.navm__tab:nth-child(3) { animation-delay: -1.3333s; }
@keyframes tabFill {
  0%, 33.32%   { background: var(--on); }   // アクティブ窓のあいだは色を保つ
  33.33%, 100% { background: transparent; }
}
@keyframes badgePop {
  0%           { transform: translateY(0); }
  6%, 28%      { transform: translateY(-7px); }
  33.33%, 100% { transform: translateY(0); }
}

03反復パターンの帯

どんな動きか

水玉・波・十字の3枚が並び、それぞれの模様の層が横へ流れます。模様の層は幅をタイル（24px）の整数倍である240pxに固定し、translateX(-120px)、つまりタイル5個ぶんだけ動かします。120は24の倍数なので、動かし終わった瞬間の模様は最初とピクセル単位で同じになり、継ぎ目が出ません。3枚は0.22秒ずつずれて持ち上がって戻ります。

反復パターンの帯
新しいタブで開く

03 · 反復パターンの帯 — 計測 累積面積 33.612% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

background-sizetranslateXanimation-delay

どこを変えるか

累積面積33.612%は9つの中で最も広い動きです。

.bandm__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 240px;                       // 24pxタイル × 10 — 半分はちょうど5タイル
  animation: fillFlow 2s linear infinite;
}
// 波のリボン — タイル（24×40）の中に帯（y 8〜28）と上下のふちの半円
.bandm__fill--wave {
  background-image:
    linear-gradient(to bottom, transparent 8px, #241f26 8px 28px, transparent 28px),
    radial-gradient(circle 10px at 12px 8px, #241f26 0 9.5px, transparent 10px),
    radial-gradient(circle 10px at 0 28px, #241f26 0 9.5px, transparent 10px);
  background-size: 24px 40px;
}
@keyframes fillFlow { from { transform: translateX(0); } to { transform: translateX(-120px); } }

04黒い枠のカードグリッド

何が見えるか

白いカードにインクの枠3pxと、ぼかし0の影 0 6px 0 をペアで与えます。この組み合わせはネオブルータリズムに似ていますが、ここでは枠が主役ではなく、頭の帯を入れる額縁です。3枚のカードは水玉・十字・ギザギザの帯を頭に載せ、0.22秒ずつずれて持ち上がり、浮いているあいだは影の厚みが6pxから10pxへ増えます。

黒い枠のカードグリッド
新しいタブで開く

04 · 黒い枠のカードグリッド — 計測 累積面積 24.256% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

box-shadowtranslateYrotate

コードのどこを見るか

累積面積24.256%。

.gridm__card {
  border: 3px solid #241f26;
  box-shadow: 0 6px 0 #241f26;         // くっついた影 = 厚み
  animation: cardRise 2s cubic-bezier(.2, .8, .2, 1) infinite;
}
.gridm__card:nth-child(2) { animation-delay: -.22s; }
.gridm__card:nth-child(3) { animation-delay: -.44s; }
@keyframes cardRise {
  0%, 100% { transform: translateY(0) rotate(0);           box-shadow: 0 6px 0 #241f26; }
  45%      { transform: translateY(-12px) rotate(-1.5deg); box-shadow: 0 10px 0 #241f26; }
}

05シールのレビュー重ね

画面で起きること

レビューシール3枚が斜めに重なって積まれ、自分の番に1枚ずつ前へ出ます。出る枚は傾きが0度にまっすぐになり8px浮き、番が終わると自分の角度へ戻ります。重なる順（z-index）は固定し、前へ出ることを浮きと角度だけに託しました。z-indexをアニメーションすると値が階段状に飛んで、カードがまたたくためです。

シールのレビュー重ね
新しいタブで開く

05 · シールのレビュー重ね — 計測 累積面積 15.901% · 動いたフレーム 11/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

rotatetranslateYz-index

コードの読み方

動いたフレームは11/23。

.stickm__card {
  --tilt: -7deg;                       // 定位置の角度
  animation: toFront 2s ease-out infinite;
}
.stickm__card--two   { animation-delay: -.6667s; }
.stickm__card--three { animation-delay: -1.3333s; }
@keyframes toFront {
  0%        { transform: rotate(var(--tilt)) translateY(0); }
  6%, 28%   { transform: rotate(0deg) translateY(-8px); }
  34%, 100% { transform: rotate(var(--tilt)) translateY(0); }
}

06パターン帯の料金プラン

どんな動きか

中央のおすすめプランだけが水玉の帯とバッジを付けています。プランが6px浮いたり沈んだりするあいだ、バッジは半周期の遅延で逆位相に脈打ち、プランが最も高いときバッジは最も小さく、プランが着地するときバッジは膨らみます。2つの動きが交差すると、カード1枚が動くより生きている印象になります。

パターン帯の料金プラン
新しいタブで開く

06 · パターン帯の料金プラン — 計測 累積面積 5.376% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateYscaleradial-gradient

どこを変えるか

累積面積5.376%、フレーム23/23。

.pricem__plan--best { animation: bestFloat 2s ease-out infinite; }
.pricem__badge {
  animation: badgePulse 2s ease-out infinite;
  animation-delay: -1s;                // 半周期 = 逆位相
}
@keyframes bestFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

07ジグザグの仕切り線

何が見えるか

2つのセクションの間にギザギザ2本を流し、互いに逆方向へ動かしてジッパーのように噛み合わせます。歯1本は conic-gradient のくさびです。下向きの歯は頂点をタイルの下辺に置いて from 315deg、上向きの歯は上辺に置いて from 135deg に半タイル（8px）のオフセットを与えます。流れはタイル2個ぶん（32px）の移動で、模様が周期的なので折り返し点に継ぎ目はありません。

ジグザグの仕切り線
新しいタブで開く

07 · ジグザグの仕切り線 — 計測 累積面積 3.781% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

conic-gradienttranslateXrepeat-x

コードのどこを見るか

2本が同じタイル幅（16px）を使うのが噛み合いの条件です。

.zzm__teeth--down {
  height: 32px;
  background: conic-gradient(from 315deg at 50% 100%, #ffcf33 0 90deg, transparent 90deg 360deg);
  background-size: 16px 16px; background-repeat: repeat-x;
  animation: teethFlow 2s linear infinite;
}
.zzm__teeth--up {
  top: 16px;
  background: conic-gradient(from 135deg at 50% 0%, #2ec4a6 0 90deg, transparent 90deg 360deg);
  background-size: 16px 16px; background-repeat: repeat-x; background-position: 8px 0;
  animation: teethFlow 2s linear infinite reverse;   // 逆方向
}
@keyframes teethFlow { from { transform: translateX(0); } to { transform: translateX(-32px); } }

08パターンのマーキー帯

画面で起きること

水玉・波・十字・半円・三角の5部品で1組を作り、そのまま2組並べます。実測したトラックの幅は460px、1組（部品5つと右余白5つ）はちょうど230pxで半分なので、translateX(-50%) は230pxの移動と同じになり、一周が終わる瞬間に画面は最初のフレームと一致します。

パターンのマーキー帯
新しいタブで開く

08 · パターンのマーキー帯 — 計測 累積面積 7.698% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateX(-50%)margin-rightmax-content

コードの読み方

部品間の間隔をflexの gap にすると2組の間にgapが1個足りず、-50%が毎周8pxずつずれるため、margin-right で与えます。

.marqm__track {
  display: flex;
  width: max-content;          // 実測460px = 1組230px × 2
  animation: trackFlow 2s linear infinite;
}
.marqm__tok { margin-right: 16px; }   // gapは2N個の間に2N-1個しかなく、-50%がずれる
@keyframes trackFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

09波打つCTA帯

どんな動きか

コーラルの帯の上端が、半円の波頭の連なりです。波頭は半径12pxの円をタイルの上辺に繰り返して描き、層の幅はタイルの20倍（480px）にして translateX(-24px)、つまり1タイルぶんだけ流します。帯の中のボタンは8px浮いてから着地し、くっついた影が13pxから5pxへ縮みます。

波打つCTA帯
新しいタブで開く

09 · 波打つCTA帯 — 計測 累積面積 5.55% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

radial-gradienttranslateXtranslateY

どこを変えるか

累積面積5.550%。

.ctam__wave {
  width: 480px; height: 20px;   // 24pxタイル × 20
  background: radial-gradient(circle 12px at 12px 0, #ff5c47 0 11.5px, transparent 12px);
  background-size: 24px 24px; background-repeat: repeat-x;
  animation: waveDrift 2s linear infinite;
}
@keyframes waveDrift { from { transform: translateX(0); } to { transform: translateX(-24px); } }
@keyframes btnFloat {
  0%, 100% { transform: translateY(-8px); box-shadow: 0 13px 0 #241f26; }
  50%      { transform: translateY(0);    box-shadow: 0 5px 0 #241f26; }
}

tailwind.config カスタム

このトレンドで1か所にまとめるべきなのは色ではなく、模様のタイルと厚みです。タイル幅が部品ごとに違うと、継ぎ目なく流す移動量がばらばらになります。影にぼかしが入ると、メンフィスの平らな力強さが消えます。

theme: {
  extend: {
    colors: {
      base: "#fdf4ec", sheet: "#ffffff", ink: "#241f26", stone: "#5d5560",
      coral: "#ff5c47", lemon: "#ffcf33", sky: "#2fa3dd",
      mint: "#2ec4a6", pink: "#ff8fab",
    },
    borderRadius: { card: "16px", control: "12px", chip: "4px", pill: "999px" },
    boxShadow: {
      hard: "0 6px 0 #241f26",      // くっついた影 = 厚み
      "hard-sm": "0 4px 0 #241f26",
      lift: "0 10px 0 #241f26",     // 浮いているあいだは厚みが増える
    },
  },
},
役割 トークン いつ
厚み shadow-hard カード・帯が床についているとき
浮上 shadow-lift カードが浮いているあいだだけ
枠 border 3px ink 形もカードも — この2つはセット

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

設定を置いたら、Claude Code や Cursor に渡す指示は下のひとかたまりで足ります。色の並びより模様の作り方が先に来る、この順序が重要です。省略しない原文とバリエーション3つは、zipの中の prompt.md にあります。

模様はすべてCSSグラデーションのタイルで作る。画像は1枚も使わない。水玉は
radial-gradient(circle at 12px 16px, #241f26 0 3px, transparent 3.5px) を24px
タイルで反復する。ギザギザは conic-gradient(from 315deg at 50% 100%, 色 0 90deg,
transparent 90deg) を24pxタイルで repeat-x に並べる。模様を流すときの移動量は
タイル幅の整数倍だけにする。そうすると1周したときの模様が最初とピクセル単位で
同じになる。カードと形には3pxのインク枠と 0 6px 0 #241f26 の影をセットで与える。

この指示どおりに page/index.html を作り、1280・768・390pxの3幅で描画したのが下の図です。3幅とも横のはみ出し0を実測しました。

結果

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

いちばん時間がかかったのは十字の模様でした。棒2本を重ねれば十字になるので、linear-gradient(#241f26, #241f26) を2枚、background-size: 5px 17px で指定したところ、描画された3枚目のパネルは空色ではなく、インク1色に塗られた板でした。棒用のグラデーションは棒の幅そのもの（5px）で反復するため、縦の棒が画面全体に5px間隔で並んだのです。十字にするには、まずタイル（24px）を定義し、その中で transparent 9.5px, インク 9.5px 14.5px, transparent 14.5px のように棒の位置を指定します。同じ間違いがカードの帯にも隠れていたので、2か所を一緒に直しました。

2つ目は歯の向きです。コーングラデーションで頂点を at 50% 100% に置き from 135deg を与えると、くさびは下側、つまりタイルの外へ開いて何も描かれません。下向きの歯は from 315deg から始めて、頂点から上へ開くようにします。向きが逆でもコンパイルもコンソールも静かなので、最初の描画ではジグザグの帯がただの空き帯にしか見えませんでした。3つ目として、マーキーはトラックの実測460pxが1組230pxのちょうど2倍かを、Playwright の offsetWidth で確かめてから先へ進みました。描かれないのに黙っているこの種の失敗は、ダークモードで色が反転するメールアプリでも同じ顔で現れます。メールテンプレート デザインがそこで二度確認を欠かさないのはそのためです。この3つを直した部品と1ページ全体は、圧縮パスワード yqayt28g で開くzipにそのまま入っています。

アクセシビリティ

メンフィスの明るい色は、どれも白い文字を載せられません。WCAG 2.1 のコントラスト基準の相対輝度の式で直接計算すると、最も暗いコーラル #ff5c47 でも白文字との比は3.06:1で、本文の基準4.5:1に届きません。そこでこのキットは、面ごとに色を選ぶ代わりに文字色を1つに決めました。インク（#241f26）ならどの面でも基準を上回ります。

手前 背景 実測コントラスト 本文の基準
インク #241f26 白 #ffffff 16.17:1 合格
インク #241f26 クリーム #fdf4ec 14.88:1 合格
インク #241f26 レモン #ffcf33 10.95:1 合格
インク #241f26 ミント #2ec4a6 7.36:1 合格
インク #241f26 空 #2fa3dd 5.7:1 合格
インク #241f26 コーラル #ff5c47 5.29:1 合格
白文字 コーラル #ff5c47 3.06:1 不合格 — 使わない

文字を模様の上に直接置かず、必ず白いパネルを1枚敷いて、その上にインクで書きました。模様の明るさはマス目ごとに違うため、文字がどの位置に来るかで比が変わってしまうのを、パネルで遮断します。動きについては MDN の prefers-reduced-motion のメディアクエリを9部品すべてに入れ、動きを減らす設定の訪問者には静止した状態だけを見せます。形バッジのナビは、動きが消えたあとも2番目の項目がアクティブに見える静的ルールを残しました。マーキーや波が止まっても、それは壊れではなく完成した壁紙の帯です。

このスタイルが気に入ったらデザイントレンドの一覧で隣のスタイルも見てみてください。このサイトが何を配っているかは紹介ページにまとめてあります。

FAQ

メンフィス デザイン とは ネオブルータリズムと何が違いますか？

どちらも太い黒枠を使いますが、主役が違います。ネオブルータリズムは枠とオフセットの影そのものがアイデンティティで、色は2〜3色あれば成立します。メンフィスでは枠は額縁にすぎず、水玉・波・ギザギザ・幾何学形が反復するパターンの塗りが主役です。この記事の04番のカードで、枠はそのままに頭の帯の模様を抜くとメンフィスでなくなります。それが確かめ方です。模様を告知に回す別の結びつきは、イベントLPのセクションに形で置いてあります。

模様の背景は読みにくくならないですか？

本文を模様のすぐ上に置かなければ大丈夫です。このキットの本文はすべて白いパネルの上にインクで書き、模様はパネルの外、つまり舞台と頭の帯と境界にだけ置きます。コントラスト表の数値はこの原則を守った画面で測ったものです。パネルを外して文字を模様に直接置くと、比は文字が載ったマスの明るさ次第でばらつきます。

堅いブランドには遊びすぎではないですか？

パレットをインクとクリームの2色に絞ると、構造は残ったまま遊びが抜けます。zipの中のバリエーション表にあるモノ・メンフィスがその状態です。逆に形を小さくしてタイルの間隔を広げると、模様は背景のノイズ程度に落ち着くので、明るい色を1〜2色残してもコーポレートのトーンを保てます。

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

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