【これを見れば完璧】PayPayの使い方

Web制作者のミッションとは!? 『成果』を出すスマートフォン設計に必要な3つのスキルを紹介します

成果を出すスマートフォンサイト設計

「成果」という言葉に惹かれて、申し込んだセミナーに参加してきました。

今日のスマホの普及により、8割以上の人がホームページをスマホで閲覧します。
そんなユーザのために、『ユーザに響く、コンバージョンに導くサイト』を制作するには、どうしたらいいのか?

金沢市出身の15Vision代表のいちがみ トモロヲさんから貴重なお話をたくさん聞けました。

3つのポイントにギュギュッと凝縮して、書いていきます。

1. 1人で抱えるな!『Web制作者とクライアントの向き合い方』

1人で抱えるな!『Web制作者とクライアントの向き合い方』

今日のデザインはデザイナーだけでは大きすぎる

[chat face=”スクリーンショット-2017-10-11-0.25.59.png” name=”トモロヲさん” align=”left” border=”none” bg=”green” style=”maru”]Web制作者のミッションは、事業の成長に貢献すること。[/chat]

『今日のデザインはデザイナーだけでは大きすぎる』

デザイナー長谷川 恭久さんのブログ「could」の2011年の記事からの抜粋だそうです。
2011年から5年以上経過した現在ではなおのことそう言えるでしょう。

[chat face=”スクリーンショット-2017-10-11-0.25.59.png” name=”トモロヲさん” align=”left” border=”none” bg=”green” style=”maru”]『Webサイト完成=ゴール』ではなく、経営課題の解決へのアプローチの一つ。
制作者だけでなく、プロセスを可視化して、関係者全員考える土壌を作るのです。[/chat]

ドキュメンテーションとファシリテーションで運用全面サポート

[chat face=”スクリーンショット-2017-10-11-0.25.59.png” name=”トモロヲさん” align=”left” border=”none” bg=”green” style=”maru”]時にはお客様にもグループワークをしてもらい、巻き込んでいく。
制作者はドキュメントをつくり、うまくファシリテートしていく。[/chat]

制作者側だけが考えて、アドバイスするわけではないんだ!

常に制作者が考えていくイメージが強かったので、肩の荷がおりたような思いでした。
もちろんお客様にお任せするわけではありません。
制作者はプロセスの可視化、質の高いアウトプットをしていくことが重要だといちがみさんは語ってくれました。

企業のデジタルコミュニケーション全般を支援していくことがマストになってくるのですね。

そのためには、どういった手法が有効になってくるのでしょうか。

2. 足で情報を聞き出せ!『お客さんと利用者を巻き込む』

アクセス解析だけではダメ、利用者にインタビューする

アクセス解析だけではダメ、利用者にインタビューする

[chat face=”スクリーンショット-2017-10-11-0.25.59.png” name=”トモロヲさん” align=”left” border=”none” bg=”green” style=”maru”]アクセス解析はたいへん有効なツールである事は間違いありません。
ただし、お客さんの表情や感情までは汲み取る事ができません。
コンバージョンにいたったお客様にインタビューをとりましょう。[/chat]

クライアントの責任者に許可をとって、コンバージョンしたお客様にインタビューすることは多々あるそうです。

「なぜ申し込みにいたったのか、商品の購入いたったのか。」

その方の背景や、過程、感情をヒアリングし、クライアントへ提案できるモノへドキュメンテーションしていくわけですね。

ヒアリングシートの項目はクライアントごとに検討されるそうです。
半構造化インタビューとし、回答によってさらに詳細を聞いていく形式を採用されています。

コンバージョンにいたった当時を振り返りながら、行動を再現してもらうそうです。
やり方は次のセクションへ・・・。

行動フローの裏にある感情をくみとる

住宅メーカーの説明会の申し込みだとすると、『申し込み』ボタンを押すまでの遷移を再現してもらいます。
時間帯や環境も思い出してもらいながら、ページごとのアクションに対する表情や感情をヒアリングしていきます。

その時に活用しているiPhoneアプリ、「UX Recorder」を紹介していただきました。
画面上の動きはもちろん、どこをタップしたか、その時の表情も録画してくれます。

実機を使って説明しながら再現することで、Webサイトのよりリアルな評価をすることができます。

顧客のタスクを点から線で考える

こういった一連の動作を捉えることで、『カスタマージャーニーマップ』のドキュメントを作成することができます。

[box03 title=”カスタマージャーニーマップとは”]
  1. ユーザの行動
  2. ディスプレイの表示
  3. 被験者のコメント
  4. 表情
[/box03]

これらを付箋に書いて、ホワイトボードにはりつけていきます。
その時の感情線を書いていき、落ち込んだ部分、課題の多い箇所に対して施策を施していくという手法です。

UXデザイン、体験型デザインが当たり前の世の中ですから、タスクを線で捉えるというのは強く納得できました。

『カスタマージャーニー』を制作するトレーニング方法として、なりきりユーザを定義する方法がおすすめだそうです。

対象サイトは、頻繁にデザインや表示順が変更される『自動車メーカー』のホームページ。
予算、好みの車種、サイトを通して得体知識を定義してサイト探検を行います。

トヨタ、ホンダ、マツダなど、様々なサイトを閲覧してベンチマークします。
作る側から見る側の視点でトレーニングすることで改めて良いスマートフォンサイトとは何か感じとることができるそうです。

3. クイックに進める『シーンに合わせた3つの便利ツール』

実機確認と共有が第一優先

[chat face=”スクリーンショット-2017-10-11-0.25.59.png” name=”トモロヲさん” align=”left” border=”none” bg=”green” style=”maru”]この3つのポイントを重点視して制作を進めていくことが大切なんです。[/chat] [box03 title=”大切な3つのポイント”]
  1. 画面遷移
  2. 実機確認
  3. 共有
[/box03]

いちがみさんは、ご自身の若き頃に体験した苦い経験を元にお話していただきました。
パソコンの画面上でいくらデザインしても、実機で動かしてみないと正確な判断はできません。

スピーディに実機で動かして、情報共有することが大事なんですね。
ツールを使って、クイックに仮説を立て検証を行う。
素早く繰り返すことで、より良いアウトプットを生み出しいきます。

そんないちがみさんが愛用されている3種の神器的な神アプリを紹介してくれました。

1.Prott『コードを書かずに、本物アプリを再現できる』

画像やテキストを貼り付けて、その上にアクションを積み重ねていくイメージですね。
チーム内、クライアント間での画面イメージを素早く共有して確認することができます。

2.keynote『複雑なアニメーションも再現可能』

javascriptを使った複雑なアニメーションは、keynote or PowerPointで再現します。

3.Adobe XD『スマホサイト制作にはこれでしょう!』

Adobe製品のillustratorでもいいのですが、スマホデザインに特化したXDがおすすめだそうです。

私は、AdobeCCプランに入っておきながら、このアプリをインストールしてまんせんでした・・・。
即インストールしたので、次の案件からばっちり使っていこうと思っています。

おまけ『チーム内の情報共有には、シンプル定例会がおすすめです』

最後に、今回の裏テーマと言っても過言ではない『情報共有』のやり方についてお話していただきました。

『どんなハイテクなツールを使うんだろう・・・。』

私は内心わくわくしておりました。

[chat face=”スクリーンショット-2017-10-11-0.25.59.png” name=”トモロヲさん” align=”left” border=”none” bg=”green” style=”maru”]2週間に1回開催する2~3時間の定例会ですね![/chat]

「・・・。(なんとアナログな)

だがしかし、2時間の講義をとおして、納得できたものはあります。
どれだけ便利なツールがあって、解析できたとしても人間の感情はわからないものです。

Webサイト制作者と言えど、どんな仕事においても共通できることなのかもしれません。

  • 自分の足で現場に行き、現場の声をヒアリングするアナログな活動
  • ツールを駆使してデータ分析を行うデジタルな活動

この2つの活動をバランスよく組み合わせることで『具体的な成果』が生まれるのかもしれない。

いちがみさんはスキルセットをしっかりとお持ちでありながら、人と人の会話をとても大切にされる素晴らしい方でした。
私もその精神を心の中に根付かせながら、これからさらにスキルを磨いていきます。

いちがみさん、貴重な講義をしていただきありがとうございました。
企画、運営をしてくださったスタッフのみなさんありがとうございました。