Web blog WEBブログ

LPページデザイン

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ページデザインのコツ~制作編~」です(制作中)
 こちらも宜しくお願いいたします。

伊藤小麟

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

無料相談窓口