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

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

あのページを構成する部品9つを切り出して格子に並べました。順番は、画面に模様が染み込んでいく順序です。背景が模様の海になり、形が居場所を決め、模様が流れ始め、箱に収まり、シールが証言し、値段が付き、境界がギザギザに切られ、帯が流れていき、最後に波が押し出します。

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

• 01 パターンだらけのヒーロー
• 02 形バッジのナビ
• 03 反復パターンの帯
• 04 黒い枠のカードグリッド
• 05 シールのレビュー重ね
• 06 パターン帯の料金プラン
• 07 ジグザグの仕切り線
• 08 パターンのマーキー帯
• 09 波打つCTA帯

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

舞台そのものが、repeating-radial-gradient 1行で描いた同心円のさざ波です。白いパネルは静止したまま、半円・三角・十字・ギザギザの4つが周囲を漂います。周期は全部同じ2秒で、負の遅延（delay）で位相だけをずらしました。周期を混ぜると2秒のループが一周したときにどれかが別の区間にいるため、画面が飛んでしまいます。計測では累積面積2.831%、動いたフレーム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だけに任せました。カットのぶん、変化のあるフレームは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秒ずつずれて持ち上がって戻ります。累積面積33.613%は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へ増えます。累積面積24.302%。

.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をアニメーションすると値が階段状に飛んで、カードがまたたくためです。動いたフレームは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枚が動くより生きている印象になります。累積面積4.699%、フレーム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）の移動で、模様が周期的なので折り返し点に継ぎ目はありません。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の移動と同じになり、一周が終わる瞬間に画面は最初のフレームと一致します。部品間の間隔を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へ縮みます。累積面積5.556%。

.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番のカードで、枠はそのままに頭の帯の模様を抜くとメンフィスでなくなります。それが確かめ方です。

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

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

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

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