Webサイト(LP)制作で学んだことと上手にデザインすることまとめ

バナー制作同様、ターゲットを決めていきます。
ターゲットの決め方についてはこちらでアウトプットしています。

ランディングページとは、広告物やマーケティングツールであるため、コンバージョンと言われるユーザーに何らかのアクションを起こしてもらうという目的があります。

本記事では、ランディングページを製作するための流れと合わせて、自分が学んだことを製作事例と合わせて紹介していきます。

今回の課題
ビデオ会議システムの日本語版LPを作ろう

ランディングページ（LP）制作の流れ

1.まずは、目的を決める。
今回はWeb会議システムのリデザインという課題だったので、その会議システムを「購買してもらう」にします。
ランディングページ（LP）の場合、目的はざっくり以下のようなことが挙げられます。
・商品の注文やお問い合わせ→直接的な売上げアップ
・見学会や内覧会などのイベントの予約→見込み客の発掘
・試供品や無料会員、無料体験版への申込み→見込み客の発掘
・求人募集への申込み→人材の獲得

2.ターゲットを決める
ターゲットがどんなキーワードを検索して、ランディングページにたどり着くのか？やランディングページを見た人にどんなアクションを起こしてもらいたいのか？ということを考える必要があります。
そのためにターゲット を決める必要があります。
ターゲット選定についてはこちらでアウトプットしています。

3. LPの構成を決める（ワイヤーフレームを作成する）
ターゲットが決まったらランディングページ（LP）の構成を考えていきます。
まずは、ワイヤーフレームに配置していく情報をまとめましょう。どんな文章や画像を配置するのか。ホームページ全体のコンセプトや各ページの主題が明確になっていることが前提条件です。

大まかな構成要素
1.ファーストビュー
・キャッチコピー
・キャッチ（メイン）画像
・権威づけ
・CTA
2.ボディコピー
関心喚起
・ストーリー
・共感
3.信頼獲得
・お客様の声
・証拠
4.クロージング
・CTA
・フォーム

何を話すかもとても大事ですが、順番もとても重要です。
なので、何をどの順番で伝えるかという部分を意識して作成していきます。

4. レイアウトを決める
レイアウトは「画面をどう分割するか」、分割方法のことです。先にまとめた情報の量と質にあわせて適切なレイアウトを選びます。
レイアウトに関してはこちらのサイトがとてもわかりやすい
5. 紙とペンで下書き
6. ツールで清書

どういったランディングページ（LP）が効果的であるかは、業種や商材により異なります。健康食品のLPを作成するのに、クレジットカードのLPを見ても全く参考になりません。
まず参考にすべきは同業種/競合他社のLPです。
差別化を図る上でも、同業種/競合他社のLPを知っておくことは大切です。

今回製作したランディングページ（LP）

ターゲット：
男性（会社員）
ITシステム部門
Web会議システムを導入しようか考えている

顧客満足度No1という部分は強みだと思うのでファーストビューで紹介。
ランディングページを見た人が欲しいと思ったタイミングですぐ申し込みができるようにするためにセクションごとにボタンを設置

また今回、ZoomのLPを制作するにあたり、現状のよくない部分を挙げてみました。

①購買意欲を促進するポイントがわかりづらい
②コンバージョンポイントが少ない
③日本語の意味がわかりづらい
④日本人の画像が少ない

パターン1

パターン2

添削してもらった内容

# 共通
「顧客満足度NO.1」の部分はコントラストが足りていません。色を調整したり、下地をしいたりしてみましょう。
フォントサイズが10pxの箇所がありましたが、最低でも12px、読みやすいのは14〜16pxなので検討してみてください。

# パターン1
「ガートナーリサーチ・レポートを読む」というボタンの文言が長すぎます。ボタンの文言は2行にならないように、短くてわかりやすい文言にしましょう。例）「評価を見る」など
「Zoomの機能」というセクションは03の要素の下に「もっと見る」のようなボタンをつけて別ページで詳しく説明してもいいかなと思いました。
Zoomのお客様というセクションは公式サイトのものをそのまま使わずに、自分で考えてみてください。特に文章が顔にかぶっていたり、テキストが中央寄せなのが不自然です。
コンバージョンポイントが足りないという指摘がメモに書かれていましたが、特に改善された様子が見られませんでした。
01〜03のテキストが入っているボックスの余白が目立つので、文字数を揃えるか、高さを調整しましょう。

# パターン2
01〜03のように段差でリズムをつけるなら、同じようなパターンのレイアウト配置を他の場所にも適用しなければ整合性が合わなくなってきます。高さを揃えてもいいかと思いました。
いろいろな書体が使われていたので統一しましょう。Futuraなどの欧文フォントは日本語には使えません。

学び

・フォントサイズは最低でも12px、読みやすいのは14〜16pxなので検討してみてください。
・ボタンの文言は2行にならないように、短くてわかりやすい文言が好ましい。

追記として、添削してもらった物を新たに追加していきたいと思います。