Web blog WEBブログ

ランディングページの作り方を現役デザイナーが徹底解説

2018.01.07

※この記事は2018年01月07日時点の情報をもとに作成されました。

こんにちは、WEBデザイナーの伊藤です。

まずLPと聞いてイメージするものはなんですか?
カフェの新商品の紹介ページや、新しく公開される映画のページでしょうか?

現在ではこういったwebサイトも増えてきました。
そこで大切なのは「最後まで読んでもらえる工夫」だと思っています。

写真を多用して、1234…と番号をふって関連付けていけばいいんじゃないの?
そう思っていませんか…?

前編ではデザインを始める前の準備について書きます。

①一番伝えたいことは何かもう一度整理する
②写真の準備
③参考サイトを見る

を行ってください。

一番伝えたいことは何かもう一度整理する

頂いたワイヤーフレームの中には「これいるのかな?」「この項目がないのは流れ的におかしい」と思うことがあると思います。
そういうときは思い切って提案してみましょう

 

例えば蚊取り線香を商品とした販促用LPを作ると仮定します

 

1蚊に刺された
2かゆい!
3蚊取線香
4この蚊取線香のここが凄い!
5安い!

 

こういったワイヤーフレームが渡されたとします。
これだけでも充分筋が通っているように見えますが、

 

1蚊に刺された

の前に「楽しいBBQ」の表現があると、シチュエーションが具体的になり、みる側がここはかなり蚊が多そうだな…と前のめりになってくれます

その次に
4この蚊取線香のここが凄い!
5安い!
に関しては合体できる要素です

4この蚊取線香のここが凄い!安い!

 

どうですか?充分ですよね?

このようにデザインを始まる前に情報を整理して、作業をしやすくするのはとても大切なことです。
何故なら、作りながらこれらに気付いた時、せっかくキレイなデザインができていたのに、また時間を割いて修正しなければならないからです。

写真の準備

 

トリミング、加工をすることを前提として写真を選びます。
仮にページ全体のテーマカラーがグリーンだったとして、写真にも少しだけグリーンをオーバーレイさせたり焼き込み加工をすると、色に親和性が出て見やすいページになります。

以下商業利用可能なロイヤリティフリー素材サイトです
写真素材ならこちらを中心に利用しています

フォトAC
https://www.photo-ac.com/

ぱくたそ
https://www.pakutaso.com/

pixabay
https://pixabay.com/
登録制のサイトで写真中心のサイトになっています。

L+T
https://lostandtaken.com/

こちらは有料のサイトになります

Fotolia
https://jp.fotolia.com/

 

デザインしていくうちに「ここはイラストがあったほうが華やぐな」という場面が出てくると思います。

そういった時はこちら

フリーのイラストサイト▼

イラストAC
https://www.ac-illust.com/
ダントツで素材数が多いのがこちら。その数なんと20万以上
だいたいのモチーフはあります(試しにマイナーそうな”鵜飼”で検索したところ2018年8月現在で7つもありました)
登録が必要ですが、ここひとつでACファミリーがすべて無料でDLすることができます。
フォントAC、写真AC、シルエットAC、年賀状AC、地図AC…etc
ai、png、jpgファイルに対応しています。

先ほど紹介したアイコンフリーサイトでヒットしなかったモチーフもシルエットACでみつけたaiデータで代用していることもあります。

イラストレイン
http://illustrain.com/
登録なしで利用できます pngファイルのみ

town illust
http://town-illust.com/

街のイラストサイトです
ai、png、jpgファイルに対応
登録不要

 

こちらのアイコンフリーサイトもよく使っています

icooon-mono
http://icooon-mono.com/

icon-rainbow
https://icon-rainbow.com/

ボタンを作る時に

(ビルのアイコン)
会社概要

こんな風に使っています

参考サイトを見る(真似をしながら学ぶ)

参考とするサイトをクライアントから提示される場合も、そうでない場合も自分で参考サイトはみつけて、真似をします。
発注されている内容と近いサイトをみたり、望み通りのサイトにヒットしなかった場合は「可愛い」「クール」「ビジネス」「楽しい」など求められている印象を検索してみてもいいかもしれません。
眺めているだけでもヒントになりますが、おすすめはスクリーンショットを撮ってトレスすることです。
絵を上手く描くために画家の絵を模写する人がいますが、それと全く同じだと考えています。

上手いデザイナーの作ったデザインをトレスすることで様々な発見があります。背景の色とボタンの色を同じにすると全体の統一感が上がるな。とか、ここの文字サイズは意外と大きいんだな、など。それらはすべてデザイナーが意図的に制作したものですから、自分が作る際に気を付けるポイントが、誰に教わらずとも追体験できるのです。
一度トレスしたデザインは自分の肥やしになっていますので、必ず役に立ちます。

 

オススメのサイトは以下です

LP ARCHIVE
https://rdlp.jp/lp-archive

responsive web design JP
http://responsive-jp.com/

 

 

bookma! v3
https://bookma.org/

muuuuu.org
http://muuuuu.org/

SANKOU!
https://sankoudesign.com/

awwwards.
https://www.awwwards.com/

S5-Style
http://bm.s5-style.com/

 

まとめ

いかがでしたでしょうか?
以上が、LPページデザインのコツ~準備編~でした。

①一番伝えたいことは何かもう一度整理する
②写真の準備
③参考サイトを見る
この3つを行えば、いいスタートダッシュができるはずです!!

何か少しでもお役に立てられれば幸いです。

▶後半は「LPページデザインのコツ~制作編~」です(制作中)
 こちらも宜しくお願いいたします。

ご相談・カスタマイズご依頼

弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。

伊藤小麟

この記事を書いた人 伊藤 小麟 デザイナー

無料相談窓口