Daily UI #003 「Landing Page」ランディングページ
Contents
こんにちはゆうきです！
Daily UI 3日目のお題は「Landing Page」ということで作成過程を記事にしました！
3日目のお題
3日目のお題は「Landing Page」
今回はレスポンシブ対応ということでパソコンとスマホの画面をそれぞれ作成していきます。
ランディングページとは？
Webサイトの中で特定の目的や目標を持つページのことを指します。
広告キャンペーンやマーケティング活動などの特定のプロモーションやコンバージョンを促進するために作られるページです。
- 製品の購入、サービスの申し込み、メルマガへの登録
- 特定のターゲットを対象とし広告キャンペーンやマーケティング活動を行う際に、そのターゲットに向けてページを設計・デザイン
- ターゲットの興味を引くために、説得力のあるキャッチコピーやメイン画像、ビデオ、顧客の利点やメリットの強調などでターゲットの心に刺さるような内容を考える必要があります。
お題に関連する業種を選択
前回に引き続き、お題に関連する業種をランダムで選択しました。
引き当てた業種は「家電・電気製品」
ということで今回は関連する製品としてパソコンのランディングページを作成しました。
前回のように導線となるページを作成する時間がなかったので、今回はメインビジュアルのトップのみデザインしました。
制作の流れ
簡易的なペルソナ設定
ChatGPTを使って今回もペルソナを設定します。
名前：小林 直樹
年齢：30歳
職業：システムエンジニア
IT企業でシステムエンジニアとして勤務しています。
パソコンでゲームやプログラムを書いたりするので、高性能なパソコンが欲しいですね〜
彼がパソコンのランディングページで求めている情報
①パフォーマンスと性能の詳細
CPUやGPUのスペック、メモリ容量、ストレージタイプや容量など、製品の技術仕様が明確に示されていること
②使いやすいナビゲーション
製品の特長や機能、価格などの情報が簡単に見つけられるような構成が重要
③価格と割引情報
特別キャンペーンやセール情報、学生割引などの情報があると、購買意欲が高まる
という感じで情報を設定しましたが、それを実装すると1日終わってしまうので、メインビジュアル周りだけ制作することにしました！
パソコンのランディングページなどを調査
LPサイトをまとめている「LP-ARCHIVE」さんとPinterestを使ってアイデア収集を行いました。
パソコンの商品ページといえば、3Dの立体的な浮いているイメージがあったのでAppleのMac / iMac、GoogleのChromeBookなどのパソコンページなどを参考にしてみました。
PinterestUIデザインを作成
レスポンシブ対応ということでPCとSPをそれぞれデザインしました。
※注. ビジュアルに使用しているMacはFigmaのプラグイン「Mockup Plugin」のフリー素材を使用しています。
ナビゲーション
PCメニュー
ペルソナの「使いやすいナビゲーション」の要求にはメニューリンクに下向きの矢印をつけることでリンクが特定の場所にジャンプすることを表すことができます。
キャッチコピーの下にページ内項目のアンカーリンクボタンとスクロールが可能あることを示すボーダーラインを配置することで、それ以降の導線を構築しています。
SPメニュー
ハンバーガーメニューでデザインしましたが、初期案では横スクロールによるスライドメニューを考えていました。
不採用にした理由
- ユーザーがスワイプやスクロールでメニューを操作する必要があるので、それをユーザーにわからせるための何らかのアクションが必要になる
- リンクが増えた分だけスクロール量も増加
- ハンバーガーメニューのタップに比べて操作が煩雑になる可能性がある
以上の項目に配慮した結果、横スクロールは見直すことにしました。
ハンバーガーメニュー
スマホメニューでよく「ハンバーガーメニューはありなのか？古いのか？」という議論がされがちですが、その割にはメジャーなものとして官公庁サイトでも当たり前のように使用されています。
スマホメニューで悩んだらハンバーガー！！🍔
と言えそうなぐらい一般的なものになってきているのではないでしょうか？
パソコンのカラー切り替え
サイドにあるカラー選択ボタンをクリックするとパソコンの色が変わるコンポーネント機能を実装しました。
ラインアップ項目で実装した方が良い気もしたのですが、そこまで深掘りすると夕方になりそうだったので、メインビジュアルで実装してます！
まとめ
Daily UI 3回目のまとめです。
- ナビゲーションのリンクに矢印アイコンを付けることでリンク遷移先をはっきりさせる
- スマホ画面の際のメニューは悩んだらとりあえずハンバーガー
- 横スクロールは今後のリニューアルでリンクが増える可能性があるときは避けた方が良い
- Daily UIでもプロトタイプを組んで仕様ははっきりさせる
Daily UI #003 「Landing Page」ランディングページ プロトタイプはこちら ↓ ↓
今回はとてもシンプルなデザインになりました。
今後はパソコンではないSaas型サービスのLPやイラストを用いた幅広いデザインに挑戦してデザインの引き出しを広げていければといいですね！
最後までご覧いただきありがとうございました。
Daily UI 4回目も引き続きよろしくお願いします！
