WCAN 2018/04 〜 AQUENT Presents 〜「マーケティング発想を取り入れたウェブサイトの画面設計」に参加しました
4月10日（火）にベースキャンプ名古屋にて行われたWCAN 2018/04 〜 AQUENT Presents 〜「マーケティング発想を取り入れたウェブサイトの画面設計」に参加しました。講師は株式会社まぼろしの 益子貴寛さん。そう、
ましこさんです！！！！！！
前説では大変失礼いたしました…もう読み方間違えません…。そんなわけでいつもとは少し違う心持での参加となりましたが（汗）気を取り直して振り返っていきます。
「マーケティング発想＝消費者の行動をうながすこと」！
マーケティングの定義は知っていても、実際に何をどう行動したらその結果につながるのか想像することは中々難しいもの。そこで今回のセッションでは、「ユーザーにどう行動してもらいたいのかが分かるサイト」を目指した、CTA（call to action）の方法について考えていきました。
マーケティングと画面設計
ここでの「画面設計」とは「ワイヤーフレームづくり」と考えて大丈夫なようです。ちなみに益子さんはこの段階で実際に使う素材の写真を挿入したり、ちゃんとしたコピーライトなどを書いてしまうとか。確かにダミーを用意する時間を削れば効率が良くなりますし、より完成形がイメージしやすい利点はありますよね。
では、まずはセッションで紹介されていた3つのワークフレームづくりの手法を書き出してみます。
ランディングページ発想
インパクト勝負。コンバージョンやCTAが最優先。
ツリー発想
情報分類やラベルの分かりやすさが勝負。コーポレートサイトや製品サイトの案件に合う。
スタイルガイド発想
UIやコンポーネントのコンテキストが勝負。ウェブサービスや管理画面などの案件に合う。
重要なのは、作業の際にまずこの3つの中で自分の気持ちの置きどころを決めることだそうです。どれが正解でどれが不正解というものではなく、案件によって発想転換をしていくようなイメージですね。自分の戦略を一つに絞ってしまうと上手く切り替えができなくなることもあると思うので、ここでは器用さも必要になりそうです。
フレームワークづくりでCTAをきちんと描くことの重要性
フレームワークづくりの手法を定めたら、主題であるサイトのCTAについて考えてみます。ここでフォーカスするのは「企業（発注者）」と「消費者（ユーザー）」の2つのターゲットが求める（求められる）行動です。例えば企業は「PDF資料のダウンロード数を計測をすることがしたくて」、消費者には「個人情報の入力なしに手軽に見てもらいたい」ならば、制作側から「クリックイベントの計測」が提案できます。このように、行動目的への着目が適切なCTAの発想に繋がるそうです。
CTAの測定パターン
CTAの測定パターンは主に3つ。
- 特定ページの表示
- クリックイベントの取得
- パラメータ付きURLの取得
これらに加え、もうひとつ念頭に置いておくのが「リアルの数値との突合せ」とのこと。私は経験が浅いので「はてリアルな数字とは…？」とまだまだピンと来てないのですが、要は実契約数や来店数をきちんと共有して、情報を整理・検討することだそう。ここで益子さんが「我々は情報の医者なんですよ！！」と一言。いやあ、なんともかっこいい。
効果を高めるCTAの7原則
さて、ここからついにビジュアルに見える形でアプローチしていきます。コンバージョンの配置や魅せ方を工夫して、ユーザーの反応率を高めていきましょう。
- すべてのページにCTAを置く
- 長いページでは複数個所にCTAを置く
- CTAのラベルでは行動を喚起する
- CTAは目立たせる
- 数種類のCTAにはメリハリをつける
- モーダル型やチラ見せ型は意外と効く
- LPでは、フォームはページ下部に直接置く
特に3番の「CTAラベルでは行動を喚起する」は、丁度LPを制作していた私にとって中々タイムリーなものでした。「○○はこちら」とボタンの機能のみの記載よりも、「まずは無料で試す」など行動に基づいた呼びかけでラベルを作成するだけで、クリック率は変わってくるのですね。またイベントの少し前に会社の先輩に教えていただいた、『CTAの傍に「マイクロコピー」があると尚効果的！』も関連事項としてここにメモしておきます。
このような箇条書きの原則は、実際にデザインが終わった際のチェック事項としても活用できるのではと思います。個人的に、作成中はデザインを眺めれば眺めるほど迷宮入りしていしまうことが多いので、客観的な視点を持つためにも是非頭に入れておきたいです。
モバイルファーストとCTAの改善
セッションでは今後はモバイルファーストというよりむしろモバイルオンリー？というような話も出ていました。先ほどのCTAの原則に加えて、レスポンシブデザインをする際にも意識すべき事項は以下のようなものだそうです。
CTAの配置
- CTAボタンはファーストビューに
- CTAボタンは複数箇所に
- 電話はワンタップでかけられるように
- 電話でも注文可なら、それをアピール
- CTA近くにSNSボタンを置くとよい
ショッピングカート
- 選択が終わらないとカートに入れられないように
- ログインや会員登録はカートに入れた後
- ファーストビューに合計金額と進むボタンを
- 買い物を続ける動線を
- 数量変更を可能に
- 削除したらすぐ反映
- 会員登録なしで買えるなら、きちんとアピール
- カートアイコンには現在の数量を
- ソーシャルログインの導入
- Amazon Payの導入
フォーム
- 姓名などは縦に並べる
- 必須事項は分かりやすく
- ふりがなはひらがなで
- 名前からふりがなの自動入力を
- 郵便番号から住所の自動入力を
- 電話番号の入力欄はひとつで
- パスワードは1回で
- 入力エラーはリアルタイムに指摘する
- 入力エラーごとにメッセージを変える
- セレクトメニューはなるべく使わない
- サイズやカラーなどの選択はボタンで
- 注文完了までの動線をわかりやすく
- 入力ステップをわかりやすく
- 次の具体的なアクションをラベルに反映
- 必須項目が未入力だと先に進めないように
以上29個。中々ボリュームがあります。
以下、個人的に少し気になった部分です。ショッピング⑨のソーシャルログインですが、最近はあえて導入しないところもあるそうです。実は私も、ソーシャルログインはあまり好んで使ってはいません。googleなどのアカウントなら問題はないのですが、SNSのログイン情報を入力するのは抵抗があります。理由としては、SNSというリアルなコミュニティに近い部分だからこそ、情報漏えいが起こった時の被害が心配だからです。そのようなこともあり、なんとなくこの項目に関しては一考の余地があるのではと感じてしまいました。この感覚は世代別のものか何かなのでしょうか？
またフォーム④ふりがなの自動入力も、人によって快適さは変わってくる部分なのではないかなと思います。私は苗字も名前もよみがな入力で漢字変換はされないので、ふりがなが自動入力されても正しいものが表示されず、また自分で直さなければならない手間を感じたこともあります。この経験は少数派かと思いますが。
最後に補足です。フォーム①の姓名などは縦に並べるという項目は、このように仕様を変えただけでコンバージョン率が52％も上がったという結果が出ているそうです。すごい数字ですよね。あまり気にしたことがない部分だったので驚きました。横並びは名前が長い人にとって窮屈なのかな？と考えてしまったり。この理由はぜひ知りたいですね。
まとめ
他にもペルソナを立てる時の具体的な手法を検討したり、実際に使用しているヒアリングシート見せて頂いたりと盛りだくさんな内容でした。まだまだ得るもの全てが目新しくて感銘を受けっぱなしなのですが、今後は徐々に自分の仕事の中でも消化していけたらと思います。益子さん、AQUENTさん、ありがとうございました！