5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

オークファンAdvent Calendar 2018

Day 21

初心者向け☆LPデザインのワンポイントアドバイス

Last updated at Posted at 2018-12-20

こんにちは。
オークファンでWebデザインをしている池田です。
自分はちゃんと出来ているのか振り返りつつ、
LPのデザインをするときのワンポイントアドバイスを書いてみました。
main_ttl.png

デザインはアートと違い自分を表現するものではありません。
LPには目的があります。
まずは__目的を知る__ことからはじめましょう。
例えば、商品を紹介するLPであれば商品を知ってもらって終わりではなく、最終的にはその商品を購入してもらう事が目的になります。
目的を知ればどのようなデザインにすればいいのか見えてきますね!

hd01.png

###LPの最終目的は?
LPをみた人にどうして欲しいのか?何を知って欲しいのか?
まずはそこからです。
###ターゲットはどんな人?
男性か女性か?年齢は? 職業は?
ターゲットの詳細(ペルソナ)は細かくわかればわかるほどいいです。
50代の会社員男性向けにメルヘンなものを作ってもコンバージョンが上がるとは思えませんからね。

###キーカラーは?
ターゲットの詳細情報を元に少し絞り込めますね。
この色はないなというものがあるはずです。
さらに絞り込んだカラーの中から、LPで伝えたい事を魅力的に見せるには何色を使えばいいのか考えながらカラーを決定していきます。
可能であれば、色パターンを出してABテストをしてみるのもいいかもしれません。

hd02.png
###イメージ画像はどうする?
LPの顔であるメインビジュアル。ここでLPの印象が決まります。
商品の紹介をするLPであれば、その商品をどのように入れるのか。
例えば、商品を背景込みの写真で入れるのか、切り抜くのか、イラストにするのか、
そして、それをどれくらいの大きさで入れるのかで全く商品のイメージが変わるので、
__どのように入れればその商品が魅力的に見えるの__かじっくり考えましょう。

###キャッチコピーについて
キャッチコピーは興味を持ってもらうための掴みの部分なので、入れ方はかなり重要です。もちろん、キャッチコピーの文言も相当大事ですが、デザイナーがやるべきことは、__どんなフォントでどのように入れるか__を考えることです。中でもフォント選びは慎重にしなければなりません。フォント選びに失敗すると、あっという間にイマイチなデザインになってしまいます。

hd03.png
###セクション
コンテンツの中身はいくつかのセクションに分かれているかと思います。
セクションごとに色分けなどして、セクションの区切りがわかるようにしましょう。
セクションの区切りをきちんと見せる事によってサイト全体にリズムができ、読みやすいLPになります。
###タイトル
セクションごとにデザインするのではなく、ある程度共通化してサイト全体に統一感を持たせましょう。
理由があって、あえて変えているなら問題ないのですが、そうでなければまとまりのないLPになってしまいます。
###画像
視覚的にテキストを補足するために、写真やイラストを入れる事があると思います。
その際、写真やイラストのテイストは同じものを選びましょう。

hd04.png
上で書いたポイントを押さえたら、あとは__楽しみながらLPを作りましょう!__
楽しみながら作れば、デザインの魅せ方アイディアがどんどん浮かんでくるはず!
悩んだときには、LPデザインのまとめサイトなどをみてみましょう。
今のLPの流行りを知ることができたり、デザインのアイディアが貰えるはずです。
みんなで素敵LPを作りましょー!

img_end.png

See the Pen PXPBJz by aucfan-ikeda (@aucfan-ikeda) on CodePen.

cssだけで描いてみたのですが、中々楽しかったですよ♪ それではみなさま、素敵なクリスマスをお過ごしください☆☆
5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?