Facebook LP_WEBデザイン20レッスン
Logo

LP_WEBデザイン20レッスン

クレジット
Avatar
WEBデザイナー
LP_WEBデザイン20レッスン-1
シェア

LP_WEBデザイン20レッスン

【概要】 WEBデザインスクール受講生募集LP(スクール課題) WEBデザインを学びたい未経験者や、キャリアアップ・在宅ワークを目指す人に向けた、オンラインスクールの無料レッスン(ノウハウ公開)へ誘導するためのランディングページを制作。 【ターゲット】 働き方に悩む30代〜40代の女性。 ・今の仕事を働き続けるか悩んでおり、手に職をつけたい ・在宅ワークやフリーランスなど自由な働き方に憧れている 【課題・目的】 課題:「未経験からだと難しそう」「まとまった時間が取れない」というWEBデザイン学習に対する心理的ハードルが高いこと。 目的: デザイン未経験者や在宅ワーク・キャリアアップを希望する層に対して、レッスンが手軽で有益であることを伝え、無料ノウハウ(公式LINE登録や動画視聴など)へのコンバージョンを促す。 【コンセプト】 「わたしにもできそう」を引き出す、信頼感とワクワク感のあるナチュラル洗練デザイン 全体を清潔感のあるホワイトとブルー、アクセントに上品なゴールドや植物のモチーフをあしらうことで、プロとしての信頼感と、新しいスキルを学ぶ楽しさや爽やかさが同居する世界観を目指しました。 【デザインの工夫】 ・ジャンプ率と視線誘導を意識したファーストビュー: 「WEBデザイン20レッスン」というメインタイトルを太く大きく配置し、最も伝えたい情報を瞬時に認識できるようメリハリをつけました。 「未経験OK」「24時間可能」などの3つの強みは丸型のバッジにまとめ、視覚的に目立たせています。 ・「悩み」と「解決」のコントラスト: 導入の「お悩みセクション」は背景をダークトーン(ネイビー)にすることでユーザーの共感と引き締め効果を狙い、その直後の解決策(「そんなあなたにおすすめなのが」)ではゴールドに輝く背景を用いて、一気に明るくポジティブな印象へ切り替わるよう心理的なカラー設計をしました。 ・スマートフォンでの可読性を追求したレイアウト: PC・SPともに共通のトンマナを維持しつつ、「選ばれる5つの理由」や「受講生の体験談」といった情報量が多いセクションでも、適切な余白(ホワイトスペース)とすっきりとしたカード型レイアウトを採用し、小さな画面でもストレスなくスクロールして読めるように配置を工夫しました。 【使用ツール】 Photoshop/Figma
クレジット
Avatar
WEBデザイナー
シェア
平松明日香の他の作品
画像
作品を見る
セミナー_Figma WORKSHOP20260520
画像
作品を見る
バナー_クーポン画像
画像
作品を見る
LINEリッチメニュー_整骨院
foriio

あなたのforiioを無料で作成

fori.io/
Logo
LP_WEBデザイン20レッスン-1

LP_WEBデザイン20レッスン

【概要】 WEBデザインスクール受講生募集LP(スクール課題) WEBデザインを学びたい未経験者や、キャリアアップ・在宅ワークを目指す人に向けた、オンラインスクールの無料レッスン(ノウハウ公開)へ誘導するためのランディングページを制作。 【ターゲット】 働き方に悩む30代〜40代の女性。 ・今の仕事を働き続けるか悩んでおり、手に職をつけたい ・在宅ワークやフリーランスなど自由な働き方に憧れている 【課題・目的】 課題:「未経験からだと難しそう」「まとまった時間が取れない」というWEBデザイン学習に対する心理的ハードルが高いこと。 目的: デザイン未経験者や在宅ワーク・キャリアアップを希望する層に対して、レッスンが手軽で有益であることを伝え、無料ノウハウ(公式LINE登録や動画視聴など)へのコンバージョンを促す。 【コンセプト】 「わたしにもできそう」を引き出す、信頼感とワクワク感のあるナチュラル洗練デザイン 全体を清潔感のあるホワイトとブルー、アクセントに上品なゴールドや植物のモチーフをあしらうことで、プロとしての信頼感と、新しいスキルを学ぶ楽しさや爽やかさが同居する世界観を目指しました。 【デザインの工夫】 ・ジャンプ率と視線誘導を意識したファーストビュー: 「WEBデザイン20レッスン」というメインタイトルを太く大きく配置し、最も伝えたい情報を瞬時に認識できるようメリハリをつけました。 「未経験OK」「24時間可能」などの3つの強みは丸型のバッジにまとめ、視覚的に目立たせています。 ・「悩み」と「解決」のコントラスト: 導入の「お悩みセクション」は背景をダークトーン(ネイビー)にすることでユーザーの共感と引き締め効果を狙い、その直後の解決策(「そんなあなたにおすすめなのが」)ではゴールドに輝く背景を用いて、一気に明るくポジティブな印象へ切り替わるよう心理的なカラー設計をしました。 ・スマートフォンでの可読性を追求したレイアウト: PC・SPともに共通のトンマナを維持しつつ、「選ばれる5つの理由」や「受講生の体験談」といった情報量が多いセクションでも、適切な余白(ホワイトスペース)とすっきりとしたカード型レイアウトを採用し、小さな画面でもストレスなくスクロールして読めるように配置を工夫しました。 【使用ツール】 Photoshop/Figma
クレジット
Avatar
WEBデザイナー
シェア
平松明日香の他の作品
画像
作品を見る
セミナー_Figma WORKSHOP20260520
画像
作品を見る
バナー_クーポン画像
画像
作品を見る
LINEリッチメニュー_整骨院
foriio

あなたのforiioを無料で作成

fori.io/