SNS画像練習 #2自己採点 4/5

メンバーシップ告知SNS画像

noteメンバーシップ「やましんの作業裏」のX投稿用告知画像。ダークテーマ+アクセント1色のL字型レイアウトで、4本柱(考え方・ノウハウ・エッセイ・実践ログ)をカードで紹介。

HTML/CSSPlaywright
メンバーシップ告知SNS画像

デザインの意図

Xのタイムラインでスクロールを止めてもらうための告知画像。メンバーシップ「やましんの作業裏」の価値を一目で伝えることが目標。L字型レイアウトで左にキャッチコピー+CTA、右に4本柱のカードを配置し、「何が得られるか」を具体的に示す構成。中央配置の安定感よりも、L字の非対称レイアウトで視線の動きを作り、タイムラインの中で目を引く効果を狙った。

制作の詳細

1600x900(X投稿16:9)のSNS告知画像。ダークテーマベースに#4ecdc4のアクセント1色。左側にタイトル「やましんの作業裏」を大型タイポグラフィ(letter-spacing: -1.2px)で配置し、下にCTAピルボタン。右側に4本柱(考え方・ノウハウ・エッセイ・実践ログ)のカードを段差配置でグリッド破り。グレインテクスチャ+スキャンラインの「汚す」後工程で人間的なテクスチャ感を付加。

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

1色アクセント集中(#4ecdc4)L字型テキスト配置大型見出し letter-spacing: -1.2pxグレインテクスチャ + スキャンラインカード段差配置でグリッド破りCTAピルボタン + カラードシャドウ非キリ番: グラデーション93度、border-radius 11px

自己評価

強み

カラーシステム統一、L字レイアウト、テクスチャの重層感、実用性

改善点

タイポグラフィの主役化がもう少しできた(文字をビジュアル要素として扱い切れていない)