できるかもデザイン「初学者あるあるデザイン改善ライブ!LP編」に参加してみた

WEBデザイン

先日、第10回できるかもデザインの配信ライブに参加しました。

今回は初学者デザイン改善ライブのLP編ということで、主にLPのファーストビューをデザイナーのまるみさんが改善していくという内容でした。

まずは、今回のお題であるLPのファーストビューのBEFOREとAFTERがこちら。

BEFORE

AFTER

改善の流れとしては、情報の整理→写真選び→レイアウト決め→配色や装飾の順で行っていました。それぞれのポイントを簡単にまとめてみましたので、ファーストビュー作成の参考にしてみてください。

情報の整理

元のデザインは情報がごちゃついた印象で、文字の可読性があまり考慮されていない様子です。

まず重要な情報を抜き出し、キャッチコピーとして簡潔に分かりやすくまとめたり強調する単語のフォントサイズを大きくするなどのテキストの整理を行います。この時、モノクロの状態から始めます。

写真選び

写真選びの際に意識すべき点として、「情報量が多すぎない」「こちら側との繋がりを意識する」などを挙げていました。

既存デザインの左側の写真は、背景に物が多く写っていてごちゃつきの原因になっています。なるべくスッキリとした写真を選ぶようにしましょうとのことでした。

今回は左のbeforeでは下を向いている写真、右のafterでは上を見上げ前向きな変化を表現するような画像選びをされたそうです。確かに心理的効果を狙ったチョイスには説得力がありますね!

ちなみに、まるみさんは写真ACで画像を取得しているとのこと。(DL回数は制限されますが、無料会員でも利用できます!)

レイアウト決め

あらかじめ用意していた4つのレイアウトパターンに写真をはめこむ。(用意していたレイアウトにはキャッチコピーなどのテキストを既に配置していて、あとは写真を入れるだけの状態)

この状態から写真との相性も見つつ、申し込みボタンへの導線として1番バランスの良いものを選択していました。

配色や装飾

レイアウトが決まったらいよいよ配色を決めたり、装飾を加えます。

今回は比較的「若い女性」をターゲットとして想定しているため、「ちょいポップ」なイメージであしらいを選んだそうです。配色のグリーンとピンクはメリハリが効いていてバランス良いな〜と思いました。堅すぎず、やわらかすぎず、いい塩梅に仕上がっておりました。

LP改善後の解説パートでの学び

まるみさんのLP制作パート後は、進行役の川端ふみさんによる制作におけるポイントの解説がありました。

今まで情報整理の大切さを散々叩き込まれてきたとは思いますが、悲しいことに「ユーザーはLPを読まない」と断言されておりました。以下、大事なポイントをメモメモ…。

  • 長い文章は読まない前提で、視覚的に伝える工夫をする
  • 写真に頼りすぎない表現方法を考える(引き出しを増やす)
  • LPで1番大事なのは「CTAボタン」とフォーム
  • いかに「めんどくさい」と思わせずに申し込みをさせるか
  • ストレスなく、気持ちよくコンバージョンしてもらうことが商品やブランドへの信頼につながる

さいごに

初学者のうちは「なんとなく」でデザインを決定することが多いと思います。デザインを作ってはフィードバックをもらって、学んで、改善しての繰り返しでみんな成長していくものだと思います。

なので改めてデザイナーさんが普段どのような思考で制作しているかを知れるのはとても貴重だと思いました。もっとも、手を動かしてひたすら作らないと成長は望めませんけれど…。

もっと色んなデザイナーさんの知識を吸収して己の糧にしていきたいな、と思った回なのでした。

コメント

タイトルとURLをコピーしました