LP制作で注意されたこと 〜CTAと余白の関係〜

web design

LPデザイン、最大のポイントは・・・?

初めてLPを一枚まるごとデザインしました。

一通りできてから、ディレクターさんから「これ読んでみて」と言われたのが、この記事。

Webデザインの基礎スキルに「余白」が重要な理由 - WPJ
せっかく最高のアプリを作ったのに、デザインがイマイチイケてない。ちょっと気をつけるだけでデザインのクオリティが一気にアップする、余白恐怖症解消のすすめ。 記事を読む前に「ローワン・アトキンソン:地獄へようこそ」を1分ほどご覧ください。 なにに気づきましたか? 多くの場合、ローワン・アトキンソンの素晴らしい機転のきいた言...

余白の重要性について、音楽からGoogleから、解説していておもしろい記事です。

今回、私に必要だったのは、CTAに余白が必要、というところです。今回、私はLPが初めてなので、CTAの扱いがわかりませんでした。全体の流れを分断するように入ってくるCTA。流れを分断させまいと、きっちり置いてしまいました。

でも、CTAはなんのためにあるのか?と言ったら、もちろん、アクションをしてもらうこと
むしろ流れから一回目を覚まして、手を止めてもらう間が必要なのです。

CTAの上下の余白が足りないと、たくさん情報があるのに、いや、たくさん情報があるゆえに、見飛ばしてしまいます。

前後に余白があって、スクロールしながらも一瞬、CTAの内容だけが目に入る状況が作られなければいけないのだと気づきました。

余白の重要性とCTAについては、こちらの記事も。

https://blog.hubspot.jp/whitespace-web-design

けっきょく、よはく。
本の題名のようですが

・・・DTPでも、webでも、余白は大事ですね。

余白を測るおすすめChromeプラグイン

勉強するには、いいサイトを模写するのがいいのですが、その時間がとれない日々。
気になったサイトは、さくっと余白を計測して「へ〜、160pxか・・・」とかつぶやいています。

Chromeを使っていたら、プラグインを入れるとさくっと計測できます。
私が使っているのは「Page Ruler」です。シンプルにさくっと四角を描いてタテヨコの数値がみられます。

コメント