「DLL」でLPの共感部の作り方を習う！Part①
こんにちは、ソラです。
年が明けたと思ったら、あっという間に2月に入りました…
時間が経つのが早すぎて怖いです⚡️
歳をとるほど時間が早く過ぎるように感じるのは科学的に証明されているらしいですね。
これって自分が遅くなってるってことでしょうか？？
今以上に時間が経つスピードが早くなられると困ります😂
余談から入ってしまってすみません。
今、コピー＆マーケティングの「DLL」というWEBデザインスクールで勉強中なのですが、ついこの間「入会して2ヶ月経ちました！」という記事を書いたのにもう1ヶ月経っていたのでびっくりしております。
スクールの講義はLPの内容に入っていて、先日ファーストビューを作り終わりました。
今回はファーストビューの下の「共感部」というセクションに取り掛かったので感想などまとめておきたいと思います。
LPの共感部とは？
LPは画面を開くとまず目に入るファーストビューの下に、長く情報が続きます。
ファーストビューの下にくる情報は「共感部」になっていることが多いらしいです。
共感部という言葉はあまり聞き慣れませんが、めちゃくちゃ言葉通りの意味でユーザーに共感してもらう情報がある部分です。
こんな悩みありますよね？的な情報を紹介して「まさにそうだ！」とユーザーに思ってもらうのが共感部なんですね。
毎度おなじみの手描きラフ
手描きするの苦手だよ〜と思いながら、今回も先生のお手本をマネして手描きラフを描きました。
LPに掲載する文言の原稿は用意されているので、「ここにこの文言がくる」とイメージしながら配置を決めていく感じですね。
字も絵もヘタすぎますが、WEBデザインする時に画力は必要ないそうです。
これって、配置とかサイズ感をざっくり決めるためのラフなんですよね。
ファーストビューを作る時に描いたラフ画も酷い画力でしたが、ラフ画はこの程度でも大丈夫なので絵が描けない人も安心してください＾＾
人のシルエットと「悩み」と書いた部分は原稿で箇条書きになっていたいろんな悩みをビジュアル付きで掲載するデザインにしようと思ってこうしています。
ラフを作ったらファーストビューの時と同じように、ラフを目安にモノクロで文言とイメージをレイアウトしていきます。
レイアウトのコツ
レイアウトする時、画面いっぱいに配置するとデバイスによっては切れてしまうかもしれないようです。
だから必要な情報は中央1000pxの中に収めることが、レイアウトのコツです。
と言っても、中央1000pxってどの範囲！？となりますよね。
簡単に範囲がわかる方法を先生が教えてくれました😊
あらかじめ横幅が1000pxの長方形を作っておいて、それを画面の真ん中に配置します。
長方形の端と端にガイドを引いておけば、範囲が常にわかります！
せっかく時間をかけてデザインを作ったのに端が切れてしまうからレイアウトし直すのは大変です！
これは作り始めに絶対にやっておくほうがいいですね。
LPの共感部分の作り方については次回に続こうと思います…！
それでは👋