ランディングページ(LP)定番の表現【誘導線】が効果的な理由




ランディングページ(LP)仕上げても何か物足りないなとか、ここだけ情報が入ってこないなとか、部分的に修正を加えたいことありませんか?

この問題は見てほしい知ってほしい内容を構成内容ごとにつなげていく事で解決できます。
デザイン理論的には視線誘導線というものです。

伝えたい内容を一気に紹介してもコンテンツのパワーが同じだと、どれを軸にして理解すればいいのか分からないので、情報量が多くてもぼやっとするのです。
なので、まず一番大切な情報を紹介してから詳細はこうですよと伝えていくのがよいと考えています。

ランディングページ(LP)でデザインされた誘導線を調査してみた

ランディングページ(LP)では、誘導線を「悩み」から「解決策」とか、「ステップ紹介」、「さらにお得な情報」と情報をワンクッション置くやり方で使います。

今回は、デザインにこだわったLPと訴求にこだわったLPに分けて調査しました。
デザインにこだわったLPは、rdlpというアーカイブサイトから。
ここは、レンポンス重視ではなく、デザイン力重視のランディングページ(LP)を豊富にそろえてあります。
訴求にこだわったLPは、LP集めました。から。
ここは、更新頻度は減ってきてますが訴求力のあるクリエイティブがそろっているので役立ちますね。

デザインにこだわったランディングページ(LP)誘導線の一覧

項目 内容
左の画像 はとむぎエキス
「悩み」から「解決策」の誘導線。
ページ全体のデザインテイストに合わせた丁寧な処理ですね。雰囲気重視でデザインをお考えの方におすすすめです。
右の画像 LIFTest シリーズ コラーゲン・プラセンタ
こちらも「悩み」から「解決策」の誘導線。
実際のサイトで確認していないので分からないですが、アニメーションつけたら効果的でしょうね。
項目 内容
左の画像 新 薬用 ビューネサンプルプレゼント
「ステップ紹介」の誘導線。
登録方法とか、ライン使いでよく使われる形です。こんな小さな▼だけど、十分理解できるデザインですね。
右の画像 LANAREY PRISM RESETER
「ステップ紹介」の誘導線ですが、番号とか無いので分かりやすい矢印を採用しています。
テキストも端的にまとまってるので全体的に分かりやすいですね。
項目 内容
左の画像 Le.beran.mignon
「原因」から商品機能を説明するときに誘導線を使ってます。
ちょっとかわったデザイン処理で一瞬目が止まるとこが上手いです。
この「そのため」ですが、「だから」でもいいのかもしれません。
右の画像 0free
「さらにお得な情報」の誘導線。▼の上にテキストを重ねるのは定番中の定番なデザイン処理かなと思います。

訴求にこだわったランディングページ(LP)誘導線の一覧

項目 内容
左の画像 モリンガプロテイン
※PCからは閲覧できません
「比較」の誘導線です。丸フォークを多様したデザインに合った矢印ですね。
右の画像 キミエホワイトプラス
定番の誘導線です。使い慣れない方はこのデザインを真似してみるのもおすすめです。
項目 内容
左の画像 KM新宿クリニック
「何故」それができるのかを誘導線を用いてデザインされてます。
上部のコンテンツをラップしてしたのコンテンツに誘導する構成ですね。
このような扱い方もありですね。
右の画像 ナチュライン カラートリートメント
最後に、めずらしいデザイン処理だったのでこちらも紹介。
キュッとしぼった形とかしずくのような形とか誘導線の表現も様々ですね。

2つのアーカイブサイトから数点のデザインを紹介しました。
デザインの質を求める時、訴求を強める時でも、誘導線を使う構成はほぼ同じなので、どちらのテイストで作るのしても分かりやすいデザインにした方がいいですね。

伝えたい軸を決めて【誘導線】でつなげれば、デザイン構成はうまくいく

ご紹介したデザインはほんの一部ですが、代表的な定番デザインばかりなのでぜひ身につけてみましょう。
さまざまなジャンルでいろんな誘導線のデザインを作っていると画期的なヤツが出来上がるかもしれません。
最後に、同じように誘導線を扱った外部記事があったのでまとめておきます。

今回の記事と関連した外部記事の矢印ネタ

 ※矢印で検索してね
ちょっと差がつくランディングページのパーツデザイン-その1
ランディングページのUIデザインを考える
ランディングページ8要素におけるデザイン表現セオリー(サンプル165点付)
私が数字の出るランディングページを作るために徹底している7つの事

この記事はここまで!
ここからはよく読まれる記事をまとめてご紹介します。ひとあじ違うデザインに出会えるかもしれません。

【化粧品・コスメ】乾燥肌訴求のランディングページ(LP)デザイン5選

2018.09.23

【年齢訴求別・5選】健康食品(ダイエット)のランディングページ(LP)ファーストビューとCVエリアデザイン

2018.06.17

前編【Webデザイナーを目指す人へ!】何故バナートレースがデザインスキル上達に最適なのか?

2018.10.21

【第3回】未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをアウトプットします!

2018.10.30

動画ランディングページ(LP)効果改善への道は映像業界を理解する事からはじまる

2018.01.14

ランディングページ(LP)にエディトリアルデザインを取り入れる。マーカー編

2018.05.04

【年齢層別・乾燥肌】化粧品・コスメのランディングページ(LP)デザイン5選

2018.09.29

【5選】ダイエット訴求のランディングページ(LP)を調査してデザインを研究してみた

2018.10.07

【第2回】未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをアウトプットします!

2018.10.23

前編【グラデーション効果】photoshopのツボとコツ!未経験でもワンランク上のWebデザイナーになろう!

2018.11.03


お気に入りの情報
が無かったでしょうか?
この記事の最後にデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google