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

メンバーシップLP「やましんの作業裏」

noteメンバーシップ「やましんの作業裏」のランディングページデザイン。ライト・ウォームトーン(テラコッタ#C4705A + クリーム#F8F4EF)で、ヒーロー・数字ストリップ・4本柱・プレビュー(ダーク)・CTAの5セクション構成。前3作のダーク系から意図的にライト系に挑戦。

HTML/CSSPlaywright
メンバーシップLP「やましんの作業裏」 (1/5)
メンバーシップLP「やましんの作業裏」 (2/5)
メンバーシップLP「やましんの作業裏」 (3/5)
メンバーシップLP「やましんの作業裏」 (4/5)
メンバーシップLP「やましんの作業裏」 (5/5)

デザインの意図

メンバーシップの価値を感情的に訴えるランディングページ。これまでの3作がすべてダークテーマだったため、ライト・ウォームトーンに初挑戦。テラコッタ(#C4705A)は温かみ・信頼・人間味を伝える色として選定。純白ではなくクリーム(#F8F4EF)を背景にすることで、温度感のある居心地の良い空間を演出。ヒーローの86px大型タイポグラフィで「やましんの作業裏, すべて見せます。」と一言で価値を伝え、以降のセクションで具体的な中身を展開する構成。

制作の詳細

Desktop 1440pxの5セクション構成。ヒーロー: 86pxタイポグラフィ+傾いた装飾カード2枚+CTAピルボタン。数字ストリップ: 37スキル/24h稼働/108件修正/週2記事を数値48px→単位16pxの対比で強調。4つの柱: 考え方・ノウハウ・エッセイ・実践ログを2x2グリッドで各カード上辺に色帯。プレビュー: ダークセクションで切り替えのリズムを作り、メンバー限定記事3本をブラーフェードでチラ見せ。CTA: 巨大背景"JOIN"テキスト+¥500価格表示。

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

ライト・ウォームトーン(テラコッタ#C4705A + クリーム#F8F4EF)大型タイポグラフィ(86px)letter-spacing: -2pxセクション明暗切り替え数値の大小対比(48px→16px)装飾カードの傾き(rotate)ブラーフェードでチラ見せ

自己評価

強み

ライトテーマでの色温度設計、タイポグラフィ階層の大胆な対比、セクション明暗切り替えによるリズム

改善点

ヒーロー装飾カードがテキストのみで写真/イラストがない、フッターの情報量がもう少し欲しい