ランディングページの作り方①｜企画〜ワイヤーフレーム作成

「ランディングページの作り方が分からない」

「ランディングページって何？一般的なWebサイトと何が違うの？」

ランディングページは、一般的なWebサイトとはその目的も使われ方も違います。

このブログでは、Web制作初心者に、簡単なランディングページの作り方を解説。まずは一緒にランディングページの作り方の流れを理解しましょう！

ランディングページとは何か？

一般的なWebサイトとの違い

ランディングページ(Landing Page：以下LP)とは複数のページを持ちません。ただ1枚だけのページで構成されています。1ページに情報が密集し、”コンバージョン“に特化していることが特徴です。ちなみに、コンバージョンとはユーザーが、商品の購入や新規登録などの顧客となる行動に結びつくことを意味します。

基本的にLPは、1つの情報について制作されます。そのため、凝縮された情報を得ることができ、コンバージョンを達成し易いのです。

ランディングページの作り方

1.企画(内容、ペルソナ設定）

最初に、何のLPを制作するのか、商品やイベントなどついて決定しましょう。コンバージョンを明確化するため、LPに記載するのは1種類に絞りましょう。その際、最も重要なことは”ペルソナ設定”を出来るだけ具体的に行うこと。

2.掲載コンテンツ(テキスト・写真)決定

サイト設計に入る前に、コンテンツをあらかじめ決定しましょう。特に、ファーストビューの写真とキャッチフレーズは最も重要です！なぜなら、ユーザーはファーストビューを見た瞬間に閲覧を続けるのかを判断するから。ペルソナ設定から印象的な写真とキャッチフレーズを選定しましょう。

また、レスポンシブデザインの場合、写真やテキスト量をスマートフォンで見ることも考える必要があります。写真やテキストが多すぎると、スマートフォンの画面では見え辛く、ユーザーの早期離脱に繋がってしまうのです。これは、情報密度が高いLPの作り方において非常に重要なので意識しましょう！

レスポンシブデザインは、閲覧ユーザーの画面サイズに合わせてページレイアウトを最適化するデザインのことを指します。Webサイトがレスポンシブデザインを実装することによって、PC版ページとモバイル版ページの両方を管理する必要がなくなるメリットが得られますが、「表示するデザインが元のページに依存する」といったデメリットも抱えているのが実情となります。

https://gmotech.jp/semlabo/seo/blog/responsive_design/

3.ワイヤーフレーム作成

次に、決定したコンテンツの配置をしましょう。ワイヤーフレームはデザインのラフのようなもの。ポイントは、出来ればファーストビューはここである程度完成させること。サイトの作成依頼者に見せる時など、メインビジュアルが決定しているとサイト全体のイメージがし易くなります。

そして、LPには、一般的にWebサイトの上部にあるナビゲーションを設置しない方が効果的です。なぜなら、LP自体がユーザーが辿り着く場所であり、そのままページ下へと誘導を行いたいから。

また、レスポンシブの場合は下記のようにPCとタブレット、スマートフォン用を作成します。横幅は、PC用なら”1080px前後”、スマートフォンなら”390px前後”がおすすめ。

また、作成ツールは、Adobe系ならAdobe XD。無料のツールならFigma(https://www.figma.com/ja/)などがおすすめです。

また、Adobe XDでの作り方はYoutubeの以下の動画を参考に。Adobe公式が分かりやすく説明してくれています。

まとめ

LPの作り方で大きく分けて7つある手順のうち、3つを簡単に解説しました！ランディングページを作る際、何から始めて良いのか分からない時に参考にして下さい。

次回以降は、今回説明しきれなかった残り4つの手順を解説したいと思います。