CTA · CTAセクション

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

プレビュー

vibe.itlibra.com/preview/memphis-cta/

概要

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

なぜ視線が止まるのか

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

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

このスタイルが最大効果を発揮するのは、サイト本編が落ち着いたトーンで、CTAだけが祝祭的に弾ける構成です。全ページがMemphisだと視覚的疲労で逆効果になる。真面目な製品説明を読み進めた読者が、最後にこの極彩色のブロックに出会う——その緊張と弛緩のコントラストが「クリックする儀式感」を生みます。装飾は主役のCTA文言とボタンを引き立てる額縁であり、その役割を超えて自己主張させないことが成否を分けます。

仕上げの判断軸

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

使いどころ

  • クリエイティブツール・デザイン教育
  • イベント・フェスティバル告知
  • 個人ブランドの遊び心ページ
  • ノスタルジック志向のZ世代向けサービス

このデザインの分類

カテゴリ
CTA
スタイル
90年代 / プレイフル / ボールド / レトロ / グラデーション

背景と狙いどころ

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 黄)だけに絞る。
「派手さ」より「形のリズム」が際立つ。

よくある質問

AdSense が浮きませんか?
完全に浮きます。広告領域はCTAから離した別セクションに配置するか、装飾を抑えた背景の上に置く設計が必要。
モバイルで装飾が邪魔になりませんか?
装飾密度をブレイクポイントで半分以下に減らすのが定石。本文の可読性が損なわれない設計を最優先に。
B2B SaaSに使えますか?
主役には不向き。個別キャンペーンや「裏」ページ、or B2C 寄りのプロダクトの遊びどころに使うと効果的です。