CTA · CTAセクション
Memphis Group調・幾何カオスのCTAセクション
1980年代 Memphis Group の意匠を引用した、原色・波線・幾何形のカオスが踊る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 が浮きませんか?
モバイルで装飾が邪魔になりませんか?
B2B SaaSに使えますか?
関連するデザイン
御朱印帳・スタンプラリー風のCTA
御朱印帳とスタンプラリーを再構築したCTAセクション。朱印スタンプ・残り札所・巡礼ゲージで「あと少しでコンプリート」の達成欲求を喚起する、日本独自文化を武器にした尖った設計。
航空券スタイルのイベント告知CTAセクション
航空会社のボーディングパスをそのまま再現したCTAセクション。ゲート番号・搭乗時刻・QRコード・バーコード・ミシン目で「予約完了感」を演出する、旅・イベント・体験型サービスに刺さる尖った設計。
パステル×マスコットの"かわいい"CTAセクション
日本発の「kawaii」美学を再構築した、パステル配色とマスコットキャラのCTAセクション。Z世代の女性向け・コスメ・サンリオ系プロダクトに刺さる、ふわふわで愛され系の遊び心ある設計。