1. HOME
  2. メディア
  3. Web制作
  4. ランディングページの作り方①|企画〜ワイヤーフレーム作成
Web制作 2022.8.26

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

  • 基礎知識
  • webサイト
  • web制作
  • ランディングページ
  • ランディングページとは
  • ランディングページ 作り方

ランディングページを作っている写真

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

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

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

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

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

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

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

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

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

ワークフローの写真

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

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

ペルソナ設定について

ペルソナ設定とは、サイトのターゲットとするユーザー像をサイト作成前に想定する作業のことを指します。これは、”誰に伝えるのか”を決めるこの作業はランディングページに限らず、全てのWebサイトに共通する重要なもの。

具体的に設定するのは、年齢、性別、職業、国籍、住んでいる地域、などの情報はもちろんです。加えて、どの時、どの場所で、どの状況からなど細かなバックグラウンドまで想定できるとサイトのコンセプトやデザインがスムーズに決まります。つまり、ペルソナ設定は設計だけでなく、必要としているユーザーに情報を正しく届ける手助けをしてくれます。

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

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

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

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

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

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

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

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

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

Desktop版とMobile版のワイヤーフレームの作成例
Desktop版(左)とMobile版(右)の簡単なワイヤーフレーム作成例

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

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

まとめ

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

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


この記事を書いた人

小川恵実
小川恵実

2022年8月に中途入社。IT未経験からの入社なので毎日勉強中です。

この人が書いた記事をもっと読む