![見出し画像](https://assets.st-note.com/production/uploads/images/160042992/rectangle_large_type_2_e718f9eced98f933d1a5b32b060adfe4.png?width=1200)
【LP】ワイヤーフレームはパズルだと思う。
ワイヤーフレーム作成はパズルのようなものだと考えています。
![](https://assets.st-note.com/production/uploads/images/160040459/picture_pc_c4c18d29e4171b41e2eb8d57703111ae.png?width=1200)
方向性が決まった段階で、伝えるべき情報が、例えばA〜Hまであったとする。その中で7「どの項目を優先度高く伝えるか」を考えるということ。
メインビジュアルで伝えるべき情報がAなら、セカンドビューではBを伝えて、D〜Fは3つのポイントとして盛り込み、C・Gはユーザーボイスとしてアピールしよう。キャンペーン情報HはMV下にリンクを貼ろう。
…というように、「順位をつけながら、伝えるべき項目をパズルのように並べ替えていく」という作業がワイヤーフレーム作成だと思うのです。BをMVで最優先に伝えるなら、Aはセカンドビューで…という具合に、優先度が変われば、構成の順序が入れ替わります。
![](https://assets.st-note.com/production/uploads/images/160041776/picture_pc_33332d1377322bf45eb70858f2a124b8.png?width=1200)
もちろん、言葉に装飾は必要です。Bの要素を伝えるには、「ユーザーの悩み事風」にしようか?「不安にたたみかけるような口調」にしようか?という言葉選びが装飾です。でも、一番大事なことは、何をどの順序で伝えるか。これに限ると思うのです。
そして、このテクニックを身につけるには、「既存のLPを写経するのがいいよ」と上司に教えられたことがあります。
![](https://assets.st-note.com/production/uploads/images/160029450/picture_pc_2b6d0a5052cb61b4d03ea031e9e2da96.png?width=1200)
例えばこのバナーをクリックすると…
![](https://assets.st-note.com/production/uploads/images/160029648/picture_pc_0fef4b46bf936b83bf265f3455fcaa54.png?width=1200)
MVで伝えていることは、「ジュニアコンタクトデビューするならアイシティ」というメインメッセージ要素。「コンタクトデビューしてよかった」というバナーのキャッチコピーに呼応しています。
![](https://assets.st-note.com/production/uploads/images/160029701/picture_pc_5574d969a08937082e789b60a0721854.png?width=1200)
セカンドビューでは、「まだ幼い我が子の目にコンタクトという異物をいれる親御さんの不安」をステートメント化。
この企画では、「親御さんの不安=購買障壁」が核になります。
ちなみに、クーポンは追従リンクで強めにアピールしてますね。
![](https://assets.st-note.com/production/uploads/images/160030004/picture_pc_0d73336d2eab0a6984748f261c963d91.png?width=1200)
そこで、サードビューは、親御さんを説き伏せるように「安心の3つの理由」を配置していくという展開になるわけです。
![](https://assets.st-note.com/production/uploads/images/160030366/picture_pc_2f1725ba4dc2ee8ebbe5aa62c03685d8.png?width=1200)
その下では、Q&A形式で、細やかな不安を一つずつ払拭していく。
![](https://assets.st-note.com/production/uploads/images/160030416/picture_pc_cd7e32767a607a13a3b0e79620c380c5.png?width=1200)
次には、「大丈夫!こんなに信頼されていますよ!」という客観的数字で安心させてあげる。
![](https://assets.st-note.com/production/uploads/images/160030662/picture_pc_4d46177c24c14e587740d66c88c38010.png?width=1200)
そして、いいかもと思っていただいた親御さんには、お得なキャンペーンでプッシュ!
![](https://assets.st-note.com/production/uploads/images/160042095/picture_pc_68e129034fc80f330338c32cd1305151.png?width=1200)
ちょっと広告ノリ疲れたわ🥱というユーザーには、安村親子というCM企画でホッコリしてもらおう!という構成です。
![](https://assets.st-note.com/production/uploads/images/160042222/picture_pc_9bf9fe6840f764af894e9b91e3053a74.png?width=1200)
はじめてのコンタクトレンズという詳細サイトリンクとフッダーで、フィニッシュ。
ワイヤーフレームに正解はありません。
このメッセージだからこのワイヤーフレームがベストという保証はない。
作る人のセンスにかかってます。
でも、上の例なら、「親御さんの不安=購買障壁」という核を決めた時点で、どうしたら安心してもらえるかという視点からパズルをはめ込んでいく。
この一貫性がサイト構成を作る上で、最も重要だし、ストーリー性のある営業トークには、ユーザーも引き込まれていくと信じて作っています。
以上長くなりましたが、ワイヤーフレームはパズル🧩という私の考えでした。
#LP研究
#広告研究
#ワイヤーフレーム
#WEBディレクター
#WEB制作
#アイシティ
#コンタクトレンズ
#山口さん
#OMOcompany
#最近の学び