【デザイン学習】Daily UI記録③
WEBデザイナーのりんです。
本日は3回目のDaily UIの記録を更新していきたいと思います！
Daily UI 003 「Landing Page」
3回目のお題はLPページの画面の作成でした。
LPの構成を把握した上で、ファーストビューのみ作成しました。
実際の作成手順を記録します！
①商材、ペルソナなどの詳細設定
②参考デザインの調査
③ワイヤーフレームの作成
④デザイン作成
この流れで今回は4時間かけて作成しました。
LP(ランディングページ）とは？
そもそもLPとはどのようなサイトなのかを調べたので記録します。
LPとは広告やSNSなどを経由してユーザーが最初にアクセスするページを指します。
また、商品やサービスを訴求し、商品の購入やアプリのダウンロードなどの具体的なアクションを促すWebページとなります。
そのため複数ページで構成されるコーポレートサイトとは違って、多くのLPは1枚で完結する縦長レイアウトで構成されます。
後ほどLPに必要なセクションを記載します。
①商材、ペルソナなどの詳細設定
事前に作成した商材リストからランダムで選択しました。
今回の商材は「野菜の定期便」です。
その他詳細設定
ここからはChat GPTを活用させていただきました。
【ペルソナ】
名前：健康志向の30代女性「高橋美咲」
年齢: 34歳
職業: フリーランスのライター
居住地: 都市部のマンション
ニーズ: 健康的な食生活を心がけており、便利でフレッシュな野菜を手軽に取り入れたい。特にオーガニックや地元産の野菜に興味がある。
課題: 忙しい仕事の合間に食材を買いに行くのが大変で、家まで届けてもらえると助かる。
②参考デザインの調査
今回はLPのサイトをレスポンシブデザインで確認しました。
参考としたサイトは以下の通りです。
③ワイヤーフレームの作成
参考にしたサイトではどんなセクションが使用されているのか、確認しながら作成を進めます。
基本的なLPに必要だと考える要素は以下の通りです。
ファーストビュー（キャッチコピー）
問題提起
おすすめポイント
コンバージョンコンテンツ
商品についての詳細説明
お客様の声
CTAボタン
よくあるご質問
申し込みフォーム
④デザイン作成
参考をもとに、ファーストビューの作成、キャッチコピーの考案をしました。
カラーは地元野菜を扱っていることから親しみやすさをイメージ、また野菜を連想させる色として、クリームよりの黄色と緑を使用しています。
使いやすさを重視したポイントは以下の通りです。
ヘッダーのナビゲーションにも申し込みボタンを配置
手軽に購入、自宅まで届く定期便の２つを強調したキャッチコピーを作成
料金もお手頃だと伝えたかったため、価格は一番大きく表示
ボタンの文言できるだけ統一した方がお客様が迷わないと考え、ナビゲーションのボタンテキストを使いつつ「定期便」を追加することで、ボタンを押した後の流れを明確にしました。
PC版ではハンバーガーメニューを展開して、ナビゲーションを表示
まとめ
3回目はレスポンシブデザインを考えながらの作成となり、少し時間がかかってしまいました。
もっとデザインの引き出しを増やして効率良く作成できるように学びたいと思います。
この記事が気に入ったらサポートをしてみませんか？