CTA · CTAセクション

Memphis Group調・幾何カオスのCTAセクション

1980年代 Memphis Group の意匠を引用した、原色・波線・幾何形のカオスが踊るCTAセクション。退屈なフラットデザインを破壊して「楽しさ」を直接ぶつける尖った選択。

保存した一覧を見る 0 →

このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。

印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。

Vibehaus · デザイン資料
https://vibe.itlibra.com/design/memphis-cta/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由

PUBLISHED — 2026年4月27日 UPDATED — 2026年10月18日 CATEGORY — CTA LICENSE — CC0 1.0

プレビュー

AIへの指示文

退屈なSaaSサイトを壊しに行く Memphis Group 調のCTAセクションを作ってください。

要件:
- 配色: 黒 #1a1a1a と白 #f7f7f0 を主、原色 #ffd60a（黄）+ #ff3d6e（ピンク）+ #1ec8ff（シアン）+ #00c853（緑）を装飾に。
- 背景に Memphis 装飾を散らす：ジグザグ・ドット格子・幾何形（三角・半円・波線）・スプリンクル状のテクスチャ。すべて inline SVG でCSSポジショニング。
- 中央に大型のショッキングな見出し（H2、clamp 2.4-4.8rem）。文中の特定単語に色付き矩形ハイライト。
- サブテキスト、軽い口語体で。
- プライマリCTA: 大きな矩形（角丸極小）、原色背景、太い黒ボーダー。hover で右上にずれて「下から色付き影」が出る Memphis ボタン定石。
- セカンダリ: 黒ボーダーのみのアウトラインボタン。
- 周囲を黒の太い破線ボーダーで囲む額装スタイル。
- フォント: 見出しは丸みのあるサンセリフ（Quicksand / Manrope）、本文は Inter + Noto Sans JP。
- JS不要、フルレスポンシブ。

バリエーション

配色さらに尖らせ版

色数を6色まで増やし（紫・オレンジ・ターコイズ追加）、装飾密度を1.5倍に。
1980 年代のミラノ家具カタログ感を最大化。

モノクロ Memphis 版

装飾要素はそのままに、配色を黒・白・1色（ピンク or 黄）だけに絞る。
「派手さ」より「形のリズム」が際立つ。

このプレビューのコード

HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。架空のサービスや企画への案内です。日付・人数・価格・特典・利用条件は表示例です。リンクは構成の説明へ移動し、申込み・予約・決済・発券・招待は行いません。

CC0 · 改変・商用利用自由 · revision 77ea9203c3eb

コードを表示

<!doctype html>
<!-- Vibehaus · CC0 · 架空の表示・操作見本。外部素材・送信・永続保存なし。 -->
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex" />
    <title>Memphis Group調・幾何カオスのCTAセクション — Vibehaus プレビュー</title>
    <style>
      :root {
        --ink: #1a1a1a;
        --paper: #fff8ed;
        --yellow: #ffd60a;
        --pink: #ff3d6e;
        --cyan: #1ec8ff;
        --green: #00c853;
        --orange: #ff8a3d;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; }
      body {
        font-family: "Quicksand", "Manrope", "Inter", "Hiragino Maru Gothic ProN",
          "Noto Sans JP", sans-serif;
        background: var(--paper);
        color: var(--ink);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        min-height: 100dvh;
      }

      /* Memphis frame around the entire CTA */
      .frame {
        position: relative;
        margin: clamp(1rem, 4vw, 2.5rem);
        padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
        background: var(--paper);
        border: 4px dashed var(--ink);
        overflow: hidden;
        min-height: 90vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      /* Memphis decorations — pure CSS shapes scattered as background */
      .deco {
        position: absolute;
        pointer-events: none;
        z-index: 0;
      }
      /* Yellow zigzag top-left */
      .deco-zigzag {
        top: 6%; left: 4%;
        width: 100px; height: 18px;
        background: linear-gradient(135deg, transparent 45%, var(--yellow) 45% 55%, transparent 55%),
                    linear-gradient(45deg, transparent 45%, var(--yellow) 45% 55%, transparent 55%);
        background-size: 18px 18px;
      }
      /* Pink half-circle right */
      .deco-half-pink {
        top: 8%; right: -50px;
        width: 140px; height: 140px;
        border-radius: 50%;
        background: var(--pink);
        border: 4px solid var(--ink);
      }
      /* Cyan triangle bottom-left */
      .deco-triangle {
        bottom: 8%; left: 6%;
        width: 0; height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 90px solid var(--cyan);
        filter: drop-shadow(4px 0 0 var(--ink));
      }
      /* Green dot grid */
      .deco-dots {
        bottom: 10%; right: 6%;
        width: 130px; height: 130px;
        background-image: radial-gradient(circle, var(--ink) 4px, transparent 4px);
        background-size: 24px 24px;
      }
      /* Orange squiggle middle-right */
      .deco-squiggle {
        top: 38%; right: 4%;
        width: 90px; height: 28px;
      }
      /* Yellow square outlined */
      .deco-square {
        top: 16%; left: 22%;
        width: 50px; height: 50px;
        background: var(--yellow);
        border: 4px solid var(--ink);
        transform: rotate(15deg);
      }
      /* Mini circle scatter */
      .deco-mini-1 {
        top: 30%; left: 8%;
        width: 18px; height: 18px;
        border-radius: 50%;
        background: var(--cyan);
      }
      .deco-mini-2 {
        bottom: 30%; left: 35%;
        width: 14px; height: 14px;
        border-radius: 50%;
        background: var(--pink);
      }
      .deco-mini-3 {
        top: 50%; right: 18%;
        width: 22px; height: 22px;
        border-radius: 50%;
        background: var(--green);
        border: 3px solid var(--ink);
      }
      /* Sprinkle line */
      .deco-line {
        bottom: 22%; right: 24%;
        width: 80px; height: 4px;
        background: var(--ink);
        transform: rotate(-25deg);
      }
      .deco-line-2 {
        top: 22%; right: 28%;
        width: 60px; height: 4px;
        background: var(--pink);
        transform: rotate(40deg);
      }
      /* Cross/plus */
      .deco-plus {
        top: 60%; left: 14%;
        width: 36px; height: 36px;
      }

      @media (max-width: 720px) {
        .deco-square, .deco-zigzag, .deco-line, .deco-line-2, .deco-plus { display: none; }
        .deco-half-pink, .deco-dots { transform: scale(0.6); }
      }

      /* Content */
      .content {
        position: relative;
        z-index: 5;
        max-width: 720px;
      }
      .eyebrow {
        display: inline-block;
        background: var(--yellow);
        color: var(--ink);
        padding: 0.4rem 1rem;
        font-size: 0.78rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-weight: 800;
        border: 3px solid var(--ink);
        margin-bottom: 1.5rem;
        transform: rotate(-2deg);
      }
      h2 {
        margin: 0 0 1.25rem;
        font-size: clamp(2.2rem, 5vw, 4rem);
        line-height: 1.35;
        letter-spacing: 0;
        font-weight: 900;
      }
      h2 :lang(ja) { letter-spacing: 0; line-height: 1.3; }
      h2 .hl-pink {
        background: var(--pink);
        color: var(--paper);
        padding: 0 0.15em;
        display: inline-block;
        transform: rotate(-1.5deg);
      }
      h2 .hl-cyan {
        background: var(--cyan);
        color: var(--ink);
        padding: 0 0.15em;
        display: inline-block;
        transform: rotate(1deg);
      }
      h2 .hl-yel {
        background: var(--yellow);
        color: var(--ink);
        padding: 0 0.15em;
      }
      .lede {
        margin: 0 auto 2.25rem;
        font-size: 1.15rem;
        line-height: 1.8;
        color: var(--ink);
        max-width: 50ch;
      }
      .lede em { font-style: normal; background: var(--cyan); padding: 0 0.15em; }

      .ctas {
        display: inline-flex;
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
      }
      .btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 1rem 2rem;
        font-size: 1rem;
        font-weight: 800;
        text-decoration: none;
        cursor: pointer;
        font-family: inherit;
        transition: transform 0.15s ease;
      }
      .btn-primary {
        background: var(--green);
        color: var(--ink);
        border: 4px solid var(--ink);
        box-shadow: 6px 6px 0 var(--ink);
      }
      .btn-primary:hover {
        transform: translate(-2px, -2px);
        box-shadow: 9px 9px 0 var(--ink);
      }
      .btn-primary:active {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0 var(--ink);
      }
      .btn-ghost {
        background: transparent;
        color: var(--ink);
        border: 4px solid var(--ink);
      }
      .btn-ghost:hover {
        background: var(--ink);
        color: var(--paper);
      }

      .footnote {
        margin-top: 2rem;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.78rem;
        letter-spacing: 0.06em;
        color: var(--ink);
        opacity: 0.6;
        max-width: 40ch;
      }
    [hidden]{display:none!important}
a,button,input,summary{min-width:44px;min-height:44px}
a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:default}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid currentColor;outline-offset:4px}
nav a{display:inline-flex;align-items:center;justify-content:center}
nav{flex-wrap:wrap}
header.bar{flex-wrap:wrap;gap:1rem}
input{max-width:100%}
.demo-notes{position:relative;z-index:10;box-sizing:border-box;max-width:1080px;width:calc(100% - 2rem);margin:2rem auto;padding:clamp(1rem,3vw,2rem);background:#f6f1e8;color:#211c17;border:1px solid currentColor;text-align:left;font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:13px;line-height:1.8;letter-spacing:0;overflow-wrap:anywhere}
.demo-notes h2{font-size:18px;line-height:1.5;margin:0 0 .75rem}
.demo-notes h3{font-size:15px;line-height:1.5;margin:0 0 .4rem}
.demo-notes p{font:inherit;color:inherit;opacity:1;margin:0 0 1rem;max-width:none;letter-spacing:0}
.demo-notes section{margin-top:1.25rem;scroll-margin-top:1rem}
.demo-notes button{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;padding:.4rem .75rem}
.demo-notes a{color:inherit}
.demo-notes .demo-motion{margin-bottom:1rem}
.demo-notes section:focus{outline:3px solid currentColor;outline-offset:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
}
body{overflow:visible;display:block}
body>.stage,body>.cta,body>.container{margin-inline:auto}
body>.cta-block,body>.frame{margin-inline:auto}
.footnote{opacity:1;color:#655e52}
</style>
  </head>
  <body>
    <section class="frame">
      <span class="deco deco-zigzag" aria-hidden="true"></span>
      <span class="deco deco-half-pink" aria-hidden="true"></span>
      <span class="deco deco-square" aria-hidden="true"></span>
      <svg class="deco deco-squiggle" viewBox="0 0 90 28" aria-hidden="true">
        <path d="M 0 14 Q 11 0, 22 14 T 44 14 T 66 14 T 88 14" stroke="#ff8a3d" stroke-width="5" fill="none" stroke-linecap="round"/>
      </svg>
      <span class="deco deco-mini-1" aria-hidden="true"></span>
      <span class="deco deco-mini-2" aria-hidden="true"></span>
      <span class="deco deco-mini-3" aria-hidden="true"></span>
      <span class="deco deco-line" aria-hidden="true"></span>
      <span class="deco deco-line-2" aria-hidden="true"></span>
      <span class="deco deco-triangle" aria-hidden="true"></span>
      <span class="deco deco-dots" aria-hidden="true"></span>
      <svg class="deco deco-plus" viewBox="0 0 36 36" aria-hidden="true">
        <path d="M 18 0 V 36 M 0 18 H 36" stroke="#ffd60a" stroke-width="6" stroke-linecap="round"/>
      </svg>

      <div class="content">
        <span class="eyebrow">Last Call ✦ Now Open</span>
        <h2>
          普通の SaaS は<br/>
          <span class="hl-pink">飽きた</span>でしょ？<br/>
          <span class="hl-cyan">遊ぼう</span>、もっと。
        </h2>
        <p class="lede">
          うちのプロダクトは、まじめな仕事を<em>もう少し愉快に</em>するために作りました。とりあえず触ってみて。
        </p>
        <div class="ctas">
          <a class="btn btn-primary" href="#demo-link-0">無料で始める →</a>
          <a class="btn btn-ghost" href="#demo-link-1">機能を見る</a>
        </div>
        <p class="footnote">// 14 日間無料 · クレカ不要 · 解約はワンクリック</p>
      </div>
    </section>
  <aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空のサービスや企画への案内です。日付・人数・価格・特典・利用条件は表示例です。リンクは構成の説明へ移動し、申込み・予約・決済・発券・招待は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-link-0" tabindex="-1">
<h3>無料で始める →の見本</h3>
<p>主ボタンから次の案内へ進める配置の例です。ここにある料金・特典・開催条件は架空で、申込み・契約・購入・参加枠の確保は行いません。</p>
</section>
<section id="demo-link-1" tabindex="-1">
<h3>機能を見るの見本</h3>
<p>主ボタンから次の案内へ進める配置の例です。ここにある料金・特典・開催条件は架空で、申込み・契約・購入・参加枠の確保は行いません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>

2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。

概要

Memphis（メンフィス）は1981年、イタリア・ミラノでエットレ・ソットサスを中心に結成されたデザイン集団。当時主流だったモダニズムの「機能主義・禁欲的な美」に真正面から反旗を翻し、原色・幾何模様・非対称・過剰な装飾を意図的にぶつけました。彼らの家具は「悪趣味」と批判されながらも80年代のポップカルチャーを決定づけた。このCTAは、その反逆の精神をWebの定型ボタンに持ち込む試みです。

なぜ視線が止まるのか

人間の視覚は「予測できるもの」を高速で読み飛ばします。フラットデザインのCTAボタンは、もはや背景の一部として処理され、意識に上りません。Memphis調の装飾——ジグザグ、ドット格子、唐突な半円——は、その自動処理を一度break（中断）させます。脳が「これは何だ」と再注目した瞬間にこそ、CTAの文言が初めて届く。賑やかさは目的ではなく、奪われた注意を取り返すための手段です。

効くのは「逃げ場」としてのCTA

このスタイルが最大効果を発揮するのは、サイト本編が落ち着いたトーンで、CTAだけが祝祭的に弾ける構成です。全ページがMemphisだと視覚的疲労で逆効果になる。真面目な製品説明を読み進めた読者が、最後にこの極彩色のブロックに出会う——その緊張と弛緩のコントラストが「クリックする儀式感」を生みます。

崩れる形全ページをMemphisにする

画面のどこもが騒がしいと、装飾はまた背景として処理されます。視覚的疲労だけが残り、注意を取り返すという当初の目的が失われます。

効く形CTAだけを祝祭的に弾けさせる

落ち着いた本編を読み進めた読者が、最後に極彩色のブロックに出会う。その緊張と弛緩のコントラストが、クリックする儀式感を生みます。

装飾は主役のCTA文言とボタンを引き立てる額縁であり、その役割を超えて自己主張させないことが成否を分けます。

仕上げの判断軸

色は4色までに抑え、面積比を「黒白70：原色30」程度に保つと、カオスの中にも秩序が宿ります。

4色使う色の上限。増やすと制御できていないと読まれる

70 : 30黒白と原色の面積比。カオスの中に秩序が宿る

半分以下モバイルでの装飾密度。見出しとボタンだけは大きく残す

装飾要素は必ずCTAボタンと重ならない位置へ逃がすこと——可読性を一段でも下げたら本末転倒です。モバイルでは装飾密度を半分以下に間引き、見出しとボタンだけは大きく確保します。「楽しいことをしている会社だ」というブランド人格は、混沌そのものではなく、混沌を制御できているという余裕から伝わります。

見本で試せる範囲

架空のサービスや企画への案内です。日付・人数・価格・特典・利用条件は表示例です。リンクは構成の説明へ移動し、申込み・予約・決済・発券・招待は行いません。作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。