第１８回：ランディングページの定義とチラシデザインの基本

–どうも！スカーレット坊やです！

ここでいうランディングページというものがどういうものなのか。まずはその定義をしっかりさせていこうと思います。「何を作っているのか」を定義することは、発信するにしても制作するにしても、ぶれてはいけないポイントだからです。

ランディングページの定義・前提

ここでいうランディングページの定義とは　物品販売ではなく「来店動機につなげる」為のものである

そのためにランディングページをどのように使い、どのようなデザインをするのか。それを考えていくことはもっとも重要であると言えるだろう。

ランディングページといえば、そのページ内で物品を販売して、どれだけ売れたか　というのをコンバージョンとして運用しつつ、アクセス解析を行って、次回の販促につなげていく…といった使い方を想像される人が多いのではないだろうか？　実際に「LPとは」などのワードで検索しても、そういう関係のサイトは数多くヒットするし、スカ坊もそこで「ランディングページのなんたるか」を学ばせていただいた。

それでは定義を３つ、上げていきます。

①WEBのチラシである　という事

どういうものかというと、アミューズメントの広告や、不動産のイベントのように、ひいてはライブのチラシのように、見た人に、そのお店に行ってもらう事　を目的としたものです。

余談になるが、この時のアクセス解析というのは

• どこからアクセスしてきたのか
• どこへ行ったのか
• どの部分を重点的に読んでいたか

などが収集するポイントとして挙げられるようになる。

チラシデザインとはどういうものであるか

ここで一度、DTPで言う「チラシ」というのはどういったものか思い出してみよう。　新聞を取らない人も増えてきている世の中なので、もしかしたら良い特集なのかもしれない（笑）

チラシと言わず、印刷物というものは必ず「目的」をもって世に生まれてきている。

その目的とは

• ライブやイベントを行う時の集客のため
• ショップの新メニューや特価販売を告知するため
• 特定の商品をピックアップするような販促戦術のため

この目的を果たして「いかにお客様に来てもらい、商品を売るのか」

そのためにどんなデザイン、レイアウトが良いのか？

テイストはシンプル系？ゴージャス系？ハード系？フラット系？

そういった事を常に考えて試行錯誤を繰り返してきた歴史がある。

その歴史のノウハウが詰まったモノが、媒体を「WEB」というステージに変えてきた。それがここでいうランディングページになるのである。

チラシがWEBに置き換わると何がおきるのか

何が起きていくか順に解説していこう。どれも劇的変化といっても過言ではない。

色が変わる　CMYKからRGBへ

鉄板の変化事項である。使える色が一気に1677万色へ増加する。蛍光色だろうがなんだろうがどんとこい！色を数字で記憶している人にとってはRGB配合というのは中々に頭を悩ませてくれるものではなかろうか。
しかしながら使える色が増えるというのは、デザインの表現も一気に増える。作れる幅が広がるのでワクワクが先行するデザイナーが多いのではなかろうか。

大きさ変わる　縦方向へ無限に伸びる

これもDTPデザイナーである自分にとっては劇的変化だ。なにせ「限られた範囲内に納める」必要がなくなるのである。入れたいものを、入れたい大きさで入れた上で、入らなかったら下へどんどん送れば良いのである。
新たに加わった要素としては「見えるのは常に画面の大きさのみ」という制限だ。
これは利点にもなり、似たような大きさで全部作っても、ちゃんと全部読まれていくという点はとても大きい。
逆に、大きさにメリハリを付けすぎたりすると、WEB内では「見にくい」とされてしまう。

下方向だけではなく「上へ戻る（す）」という新たな選択肢

同じカテゴリーグループは同じ場所にあるのが当然ながら望ましい。しかし、やむを得ない事情で別の場所に記載をせざるをえないことはよくある話ではないだろうか？　しかしWEBなら「クリックしたらその場所へ飛ばす」事が出来るので、その不利点が解消できるのだ！　戻った後読み終えたら元の位置に戻させる　というのは少し違和感もあるが許容範囲だろう。

動きが追加できる　その場その場に合わせた動きを付与する

これもものすごく大きい変化だ。これと、見える範囲が制限される、という組み合わせのお陰で、デザインでは禁じ手でもある「全部同じ大きさで作る」事をしても、動きが差をつけてくれるので問題なくなると言っても良くなる。使い方を間違えると、鬱陶しい事この上ないが、有効に使いこなすことができれば、力になってくれる。

見え方が変わる

これは、実際に体験した人なら分かると思うが、紙の感覚で作っていると、WEBでみたときに「大きすぎる」のだ。やけに文字が大きいLPとかを見たことがないだろうか？　あれは、大きいのではなく「紙で見る上ではバランスが整っている」ものなのだ。WEBという画面の世界で見た時に大きく見えてしまうのである。WEB・DTPどちらもやっている人は、それぞれのプラットフォームにおいて、自分の中で「文字の大きさの基準」を設けているのだ。

②来店動機につなげるために「動き」を学ぶ　という事

来店動機につなげるためにどうするべきか。そのためには見た人の目を引かなければいけない。

デザインレイアウトにおいては常に学んでいるため、必要になるのは動きのインパクトを体得する事だ。

DTPデザイナーとして新たに習得すべき「動き」については下記が挙げられる。

• フローティングアクション
• ホバーアクション
• オープニングアクション
• ムービングアクション
• スクロールアクション

WEBには様々なタイミングで、様々な動きをみせる事が可能になるのだ。

それを使って、DTP技法の「大きさ」「加工」に加えて「動き」でもアピールをすることで、紙では表現できないインパクトを実現することが出来るのだ。重要な部分を動かしたり、色を変えたり、動画を使ったりして、紙では出来なかった、商品の魅力を伝える手段がWEBには揃っていると言える。

これらを使いこなして、今までのデザインやレイアウトだけではなく動きでも来店動機に繋げられるわけだ。

それを使いこなせるかどうかは、ランディングページが作れるようになったと言えるかどうかの判断基準ではなかろうか。

③ページ切り替えのない一枚ものである　という事

ランディングページである以上、一枚物なのである。これはつまり、内容が増えれな増えるほど、どんどんと下へ伸びていくことになる。しかしながら、見えている範囲は画面の大きさが最大なのだ。

中でも一番重要になってくるのが「ファーストビュー」と言われる部分で、ページにアクセスされた時に最も最初に表示される部分だ。内容・デザインともに、必然的に一番しっかりと作り込まれる部分になる。

文字ばかりが続かない、写真をつかう、動画を入れるなどの要素を取り入れて、飽きさせないページ構成が必要になってくるのだ。

中々最後まで（一番下まで）見てくれる人は少ないと思うが、少しでも一番下へ行く可能性を上げるために、この下に書いてることは～　とか　テンポよく下へ進ませる（クリッククリックで下がっていく など）工夫も必要になってくる。

しっかりと定義づけてブレないものを作るんだぞ？
「坊や大変（え」

それではまた！