Webサイトデザイン練習 #13自己採点 4.4/5

やましんの作業裏 メンバーシップLP ヒーローセクション

やましんのnoteメンバーシップ「やましんの作業裏」のランディングページ ヒーローセクション。エディトリアル・マガジン的な世界観で、テラコッタ×オフホワイトのウォームパレットを採用。明朝体の大型見出しとカードモックの重なりで「中身のプレビュー」感を演出。

HTML/CSSPlaywright
やましんの作業裏 メンバーシップLP ヒーローセクション

デザインの意図

メンバーシップLPのヒーローセクション。「完成された情報ではなく、作っている途中の景色を共有する」というコンセプトを視覚的に表現。記事カードのモックアップを重ねることで、実際のコンテンツイメージを想起させる構成にした。前作(バナー)のクール系ティールから大きく離れ、テラコッタとオフホワイトのウォーム系エディトリアルデザインに挑戦。

制作の詳細

1440x900pxのヒーローセクション。左58%にテキスト(ラベル・見出し・説明・3特徴・CTA)、右42%にカードモック構成のビジュアル。Shippori Mincho(明朝体)+ Noto Sans JP + Cormorant Garamond(英字ラベル)のトリプルフォント構成。リネンクロスハッチテクスチャで紙質感を演出し、SVGパスによる手書き風波線アンダーラインでアクセントの「作業裏」を強調。

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

1色アクセント集中(テラコッタ#B85C38のみ)引き算の強調設計(見出し>サブ>特徴>CTA)明朝体を視覚主役に昇格リネンクロスハッチテクスチャ(紙質感)カード回転+重なりで奥行き非対称角丸(6px/18px使い分け)