どうも、おしゃべり関西人Kです。
さて、ここまでバナー制作を中心に書いてきたこのブログ。
もちろんデザイナーの仕事はバナーだけではありません。
バナー制作に慣れたら、次はLP制作にチャレンジしてみましょう。
そもそもLPとは？
LP（ランディングページ）とは商品やサービスの訴求を行うページのことです。
※訴求＝消費者が商品の購入をするように促すこと
というわけで、バナーよりもより詳細に商品の紹介やお問い合わせを行っていきます。
身近な例を挙げるとすると、楽天やYahoo!ショッピングに掲載されている
「この商品のどこがいいか。なぜいいのか」を図解を交えて解説している画像があると思います。
私が主に作っていたLPはそんな感じの商品紹介が多かったです。
LPを作るにあたって
まず、LPを作る際はバナーと同じく参考を探すことから始めましょう。
検索窓に「LP 参考」など入れて検索すると、まとめサイトやデザイン会社の制作一覧が表示されます。
そこから、与えられた条件に則したLPを見つけていきましょう。
引用：ランディングページ集めました。 このとき、例えばコーヒーを売るからと言ってコーヒーのLPばかり見ると逆に迷走する気がします。 これは主観ですが、商品主体で参考を探すのではなくLPに求めている雰囲気主体で参考を探すほうが参考作品は集まりやすいです。
バナーと同じく、どんな余白間でつくるのか、色味はどうするか、フォントは何にするかを
それぞれ参考を見ながら決めていきましょう。
LPは漫画や小説のようにストーリ立てて作ると作りやすいです。
例えばSESの訴求LPを作るとします。そうなるとストーリーはこんな感じです。
起：IT事業を進めたいけど人員が足りない！そんなお困りありませんか？
承：そんな時は株式会社アスカにおまかせ！あなたのIT事業をサポートします！
転：なぜIT事業サポートにアスカを選ぶといいのか？その理由は…
結：IT事業で困ったらアスカにお問い合わせください！
このような流れで、最終的にはお問い合わせや購入につなげる展開にすることが多いです。
また、LPの途中に複数回お問い合わせや購入ボタンのリンクを挟むようにして
LPの途中で購入を決めた人がすぐに行動できるようにしたほうが、離脱は起こりにくいです。
※離脱＝閲覧中のページに対してアクションを行わずに離れてしまうこと
今回の起承転結では、承や転の後などに入れると良いでしょう。
LPのつくり初めに
参考も選んだしさて作るぞ！の前に。
あなたがもし初めてLPを作るのなら、選んだ参考を使ってコラージュを行いましょう。
え、LP作るのに時間かかりすぎじゃない？？？と思うかもしれませんが、
初めてのときは想像以上に難しいです。
まず、コラージュをするために参考は複数選びます。
その後、見出しは参考Aがいいな、商品紹介の仕方は参考Bがいいな…というように
参考元を切り貼りして作成するLPの荒組を作っていきます。
この荒組がワイヤーフレームに大きくつながります。
ワイヤーフレームとは、絵などはいれずに「どういった構成にするのか」を
図形などを使って示したLPの土台です。
漫画でいうネーム、小説や脚本でいうプロットですね。しっかり考えましょう。
コラージュができたらワイヤーフレーム作成に移りましょう。
おさえるポイント
ここで重要になってくるポイントがファーストビュー、つまり見出しです。
YouTubeで動画を見るとき、サムネイルを見て選ぶと思います。
本を買う時は表紙に惹かれて、お菓子を買う時もパッケージで選ぶことはありませんか？
まさに商品やサービスの顔ともいうべきものが、ファーストビューになります。
ここがしょぼいと、その時点で離脱が起こってしまう可能性もあります。
さて、このファーストビューを作るときに重要になってくるのが
バナーを作ってきた知識と画像編集の技術です。
余白のバランスはどうするか？
色は何をつかうのか？
フォントは何を使うのか？
写真の補正はできているか？
これらをしっかり判断しながら、参考作品から作ったコラージュをもとにLPを作っていきましょう。
また、現在は多くの人がスマートフォンを使ってWebページの閲覧を行います。
スマートフォンで見えるフォントサイズの適正は16pxとされています。
商品紹介をたくさん書きたいから、と文字を小さくして詰め込むとかえって読めなくなってしまうので注意しましょう。
このLPをさらに発展させたものがWebサイトです。
作る際は、LP同様に参考探し→ワイヤーフレームと作りましょう。
最後に、LPの土台となるワイヤーフレームを作ってみましたので「ほーん。こんな感じかぁ」くらいに見てみてください。
ポイントごとの解説も入れているのでご参考に。
今回もありがとうございました。
赤ペン：コンテンツ毎、見出しと本文の間、など区分けがわかりやすいように余白を作りそろえる。
青ペン：要素の繰り返し。商品詳細を描く際は一つの形を繰り返すとまとまって見える。
緑ペン：フォントサイズの固定。タイトル、見出し、本文ごとにフォントサイズを決めてバラバラにしない。