バナー・広告練習 #6自己採点 4.3/5

メンバーシップ「やましんの作業裏」訴求バナーセット

noteメンバーシップ「やましんの作業裏」の新規会員獲得用バナー3サイズセット。ライトテーマ(ウォームオフホワイト#FAFAF5)+パープルアクセント(#6B5CE7)で、前回のダーク+アンバーとは対極のトーン。ノートめくりモチーフで「裏側を覗く」感覚を演出。

HTML/CSSPlaywright
メンバーシップ「やましんの作業裏」訴求バナーセット (1/4)
メンバーシップ「やましんの作業裏」訴求バナーセット (2/4)
メンバーシップ「やましんの作業裏」訴求バナーセット (3/4)
メンバーシップ「やましんの作業裏」訴求バナーセット (4/4)

デザインの意図

メンバーシップの価値を「覗き見る」体験として訴求するバナーセット。これまでの全作品がクール系(#4ecdc4)やウォーム系(#e8a849, #B8533A, #C4705A)だったため、パープル(#6B5CE7)で創造性・プレミアム感を表現する新しいパレットに挑戦。ライトテーマで明るく開放的な印象を与え、ノートアイコン・ページめくり・4本柱カードなどビジュアル要素を積極的に入れて前回の改善点(テキスト主体)を克服。

制作の詳細

Leaderboard(728x90)はCSS描画のノートアイコン+1行キャッチ+価格+CTA。Medium Rectangle(300x250)は上部にパープルグラデーション、3枚の覗き見カード(考え方・ノウハウ・エッセイ)で具体的な内容を提示。Blog Banner(800x200)は左に大型タイポグラフィ、右に4本柱リスト+CTAの構成。和紙風グレインテクスチャ(baseFrequency: 0.65, mix-blend-mode: multiply)でデジタルの均質さを崩した。

適用したデザインパターン

ライトテーマ(ウォームオフホワイト#FAFAF5)1色アクセント集中(パープル#6B5CE7)大型見出し letter-spacing: -1.3〜-1.5px和紙風グレインテクスチャ(baseFrequency: 0.65)CSS描画ノートアイコンページめくり装飾非均一透明度(0.62/0.38/0.07/0.10)3サイズ別情報量設計

自己評価

強み

前回とは完全に異なるカラーパレット・テーマ。ビジュアル要素(ノートアイコン・カード・ページめくり)でテキスト主体を脱却。3サイズの情報量調整が適切。

改善点

Medium Rectangleの絵文字アイコンがやや汎用的。もっとカスタムなCSS描画アイコンにできた。レイアウトにもう少し非対称性・グリッド破りが欲しい。