Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

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

こんにちは。
オークファンで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だけで描いてみたのですが、中々楽しかったですよ♪
それではみなさま、素敵なクリスマスをお過ごしください☆☆

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?