Webデザインスクールの、地方向けオンラインセミナーへのお申込みを目的としたLPを制作しました。
ターゲットは、Webデザインに興味のある地方在住の男女。
地域ごとにファーストビューのデザインや文字列が切り替わる仕様にし、それぞれの地域に住む方が「自分に向けた案内」と感じられるよう設計しました。
担当範囲：デザイン・コーディング
使用ツール：Photoshop / VSCode / HTML / CSS
クライアントの要望
クライアント様からは、以下のご要望をいただきました。
・それぞれの都道府県に合わせたファーストビューデザインを作成したい
・住んでいる地域によって、デザインや文字列が変わるようにしたい
ご要望を踏まえ、地域ごとにランドマーク写真やテキストを切り替え、ユーザーが自分事として受け取りやすいLPになるよう制作しました。
制作で工夫したこと
地域ごとに自分事化しやすいファーストビュー
47都道府県それぞれでFBVの画像を制作し、住んでいる都道府県や地域によって、ファーストビューのデザインやLP内の文字列が変わるように実装しました。
地域名やランドマークが入ることで、ユーザーが「自分の地域に向けた案内」と感じやすくなり、セミナーへの関心を高められるようにしています。
ランドマーク写真で地域性を演出
それぞれの地域の人に親しみを持って見てもらえるよう、ファーストビューには各地域のランドマーク写真を使用しました。ただ地域名を入れるだけでなく、視覚的にも地域らしさが伝わるようにすることで、ページを開いた瞬間の印象を強めています。
明るく楽しそうなカラフルな配色
Webデザインを学ぶ楽しさや、前向きな雰囲気が伝わるよう、全体はカラフルな配色で構成しました。
一方で、色数が多くなりすぎると情報が散らばって見えやすいため、重要な情報やCTAが埋もれないよう、配色のバランスを調整しています。
CTAが目立つボタン設計
無料セミナーへのお申込みにつなげるLPのため、CTAボタンの視認性を大切にしました。
カラフルなデザインの中でもボタンがしっかり目に留まるよう、色のコントラストやボタンサイズを調整し、行動につながりやすい見せ方にしています。