KAIZEN REPORTブログ

2016.9.23 | LPデザイン制作の改善

ちょっと差がつくランディングページのパーツデザイン-その1

ちょっと差がつくランディングページのパーツデザイン-その1メインビジュアル

 

ここ数年で、ランディングページを必要とする業界が以前に比べて幅広くなってきているように思います。

 

 

従来は、化粧品や健康食品が中心でしたが、明らかにこれまではランディングページに注目していなかったジャンルの商品を扱う企業でもランディングページの需要が増しているのを実感しています。

 

 

 

ですが、まだまだ未成熟なランディングページ市場のため、そのデザインにもクオリティの差があるように見受けられます。また、なかなか参考になるデザインを見つけるのも難しかったりします。

 

 

 

そこで、他社のランディングページとちょっと差をつけるパーツデザインやレイアウトの一工夫について今回の記事では、一部ご紹介したいと思います。

 

 

 

ちょっとの工夫で、信頼感を感じさせたり、訴求力を高めることが可能になります。

 

 

 

ぜひご参考いただければと思います。

 

 

 

それでは、いくつかご紹介していきたいと思います。

 

 

 

 

重要コンテンツの登場感の出し方

 

ほぼどのランディングページにも、必ずといってもいいほどに強調したい目玉となるコンテンツがあります。

 

 

中でも、悩みからの解決策を示すシーンだったり、商品やサービスを改めて登場させるシーンだったりと、そのようなコンテンツは特に訪問ユーザーに印象づけたいところです。

 

 

 

前置きの流れから、見せたいコンテンツをバーンとインパクトを持って表現したい。
そのための「登場感の出し方」についてお伝えします。

 

 

その場合は、たとえばこのような方法があります。

 

 

 

・前のコンテンツとのコントラストをはっきりと。

・背景に写真を使ってインパクトを出す。

・見出しの文字は大きく・可読性を高く・センターで強調。

 

 

 

重要コンテンツの登場感の出し方:参考デザイン例

 

 

 

 

定番コンテンツ「お悩みコンテンツの見せ方」

 

 

お悩みコンテンツは、導入コンテンツとして定番です。

 

 

多くのランディングでは似たようなレイアウトのため、ユーザーからすると少しくどい感じがしてしまったり、またか!という印象を与えてしまいがちです。

よく見るのは、チェックリストによる表現する手法だったりします。

 

 

 

また、どうしても多くのユーザーに共感させようとして文字量が多くなってしまいがちです。

 

 

 

できれば以下の点に注意したいところです。

 

 

 

・レイアウトを工夫する。

・伝える要素を3つか、多くても6つに絞る

・文字量は端的に。

 

 

 

レイアウトの参考として、いくつかあげてみました。

 

 

 

定番お悩みコンテンツの見せ方

 

 

 

 

コピー要素のブロック化

 

 

見出しであっても、伝えたい内容が多ければ、文章はどうしても長くなってしまいます。

 

 

そんな時に、強調したいところをまとまり感をもって見せられれば、ユーザーの目線を迷わさずにすみます。

 

 

 

そのための方法として、使えるのが以下の方法です。

 

 

 

・コピーのブロック化

 

 

 

見栄えもよく、まとまり感をつくることができます。
見出しなどのキャッチコピーでもそうですが、価格などのCTA要素の見せ方でも使える方法です。

 

 

コピー要素の扱いは、グラフィックデザインの広告などを見るととても参考になるかもしれませんね。

 

 

 

参考例として2パターンあげてみたいと思います。

 

 

 

コピー要素のブロック化:参考デザイン例

 

 

 

 

写真レイアウト・活用方法

 

 

 

写真は、もっとも効果的にスピーディーにそのコンテンツで伝えたいことを訴求する手段です。

 

 

とはいえ、ただそこに写真を置くだけでは、せっかくの素材をうまく活かしきれていません。

 

 

 

そこで、写真を効果的に見せる方法についていくつかあげたいと思います。

 

 

 

ただし、前提として写真の選定が重要ですので、できれば、オリジナルで撮影したものが望ましいのですが、時間やコストの制約もあるかと思います。

 

 

その場合は、素材写真の購入サイトなどからありものの素材を活用することになりますが、その際にも、できるだけ質の高い写真を選ぶということがまずはポイントです。

 

 

 

という前提があった上で、写真のレイアウト・活用方法について2つほどご紹介します。

 

 

写真のレイアウト・活用方法:参考デザイン例

 

 

 

 

 

今回は、1-4の項目で、ちょっと差をつける方法についてご紹介しました。
もちろん、これで全てではありませんし、他にも、グラフや比較表の効果的な見せ方、見出しの立たせ方、あるいは、ランディングページでは定番の矢印の新しい表現など、さまざまなところで工夫ができます。

 

 

 

いかにもランディングページっぽいデザインから、ちょっと印象が異なるランディングページにするためには、実はさまざまな工夫があるのです。

 

 

 

今回は、「ちょっと差がつくランディングページのパーツデザイン」でその一部をご紹介させていただきました。