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

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

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

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

エンジニアのデザインが10倍よくなる！「余白恐怖症」を克服する方法とは？

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

ascii.jp

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

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

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

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

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

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

なぜWebデザインに余白は重要なのか？ 参考にすべき9つの事例

ウェブサイトのデザインに余白を使うことが大切な理由とは？米国のウェブサイトの事例を用いて、どのように余白をデザインに組み込むべきかを解説します。

blog.hubspot.jp

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

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

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

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

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