適当に作ったサイトをスマホに最適化するときに即答したい5つの質問

スマホサイトに限った話ではないですが、ガラケーサイトなどをスマホ用に最適化するときに考えておくとよいなーと思ったことをまとめます。
これはソースがあるとかデータがあるとかそういうのでは全くなくて、今のぼくの超個人的な意見です。（単純に最近知人に質問・説明した内容です。）

前提：「スマホに最適化」は新しい技術を使うことではない

HTML5好きですよね？　CSS3好きですよね？
「君はガラケーのことは気にしなくていいからスマホで存分やってくれ」とか言われたら小躍りしますよね。どんな技術使おうかなーとか、アニメーションかっこいいのしようとか、今まで画像でやってたところをCSS3で表現しようとか。スマホサイトはガラケーと違ってなにかと面倒くさいキャリアごとの違いとかもないし、JavaScriptも使える。なによりコーディングが楽！　夢いっぱいですね。

そんな感じで夢いっぱいだと、ついつい新しい技術を使ってリッチにしたくなります。

でも、いったん立ち止まって考えてみると、それは本当に必要な技術なのでしょうか？
ガラケーデザインのままではなくスマホ用に作り替えるのは何故でしょうか？
そもそもリニューアルが必要なのでしょうか？

何を解決するための技術なのか、なぜリッチにするのか、というところをしっかり考えないと、そのリニューアルは設計者のエゴでしかないんじゃないかなと思います。
こんな感じにリニューアルしたいです、と言われても「なぜ」が説明できないとGOサインは出せませんよね。

即答できて欲しい5つの質問

本題です。

そういうエゴ的な部分をできるだけ排除して、ユーザのためになるサイトデザインにするにはどうしたら良いのかなというのを考えてみたのですが、以下の質問に即答できるようになれば、大分クリアできるんじゃないかなと思います。

1. なんのためにリニューアルするのか

リニューアルの目的です。

色々あると思いますが、

ユーザにもっと親しみを持ってもらえるデザインにしたい

ユーザのストレスを軽減するためにページ遷移をできるだけなくしたい

リクエスト数を減らすことでページの表示速度を速くしたい

新しい機能を投入するのでそれを一番に使ってほしい

当初の想定よりユーザが使う機能が偏っているので、もっと色々使って欲しい/その機能に特化させたい

みたいなことです。

この質問に即答できずにリニューアルデザインを考えるのは、時間の無駄です。
方向性もなく、いけてるサイトを真似したり使いたいUIを使ったりすると、なんだかよく分からないサイトができあがります。
方向性を定めてから設計にとりかかると、「その変更イイネ」とか「そのUIカッコイイけどこのサイトには合わないネ」みたいな評価ができます。

2. このリニューアルの目標はなにか

1で考えた目的に沿った目標を考えます。
デザイン候補が複数あがった場合に優劣を決める指標になります。

たとえば、

どのページからでも○クリック以内で○○の機能を使える

リクエスト数を○以下にする/ページの要領を○以下にする

○○へのアクセスを○倍に増やす

入会者を○増やす/退会者を○減らす

みたいな感じです。

なかなか数値にしづらい部分ですが、これを決めておくと、「その変更ってリニューアルの目標に沿ってる？」みたいな問いかけができて便利です。
また、リニューアル後にユーザの利用状況を調べてあげれば、リニューアルでどれだけ目標を達成できたか、というのが目に見えて分かるので楽しいです。

3. なぜその変更にするのか

変更点に対する理由です。

全部の変更に対して、理由を考えましょう。
今までどんな問題があって、それをどう解決するためにそのような変更をするのかを説明できるようになってください。

たとえば、今まで下のほうに表示していたものを上に持って行くなら、次のような納得のできる明確な理由が必要です。

調べたらこのページからこのページへの遷移が多いので、リンクをファーストビューに持っていきたい

これからはこの機能を推すので目立つようにしたい

近くに似たような機能があって押し間違いが多いので離れた位置に配置したい

変更理由が説明できないと、このあとに続く質問4に答えることができません。

4. その変更はユーザにどんな影響を及ぼすか

3と似たような内容ですが、変更によってユーザにはどんなメリット/デメリットが発生するかです。

例をあげると、

アコーディオンにすることでファーストビューに表示できる量が増えたが、確認にはタップが必要

あまり閲覧される部分ではないので、ファーストビューが増えるメリットのほうが大きい

アコーディオンにすることで今までベタで載せていた内容よりも多く情報を出すことができる

のような感じです。

変更を加えるときは、メリットにばかり目がいきがちですが、デメリットと比較すると本当に変更が必要なのかを判断しやすくなります。

5. 変更による影響をどのように計測したか/するか

改善案を考える前に、ユーザの利用状況を調査する必要があります。
ユーザへの影響や変更の理由を説明するには、今ユーザはどんな使い方をしているかが分からないといけません。調査の結果、この機能が使われている、この部分は全く見向きもされないということが分かれば、どんな変更をすれば良いかが分かります。

また、リニューアル後にも同様の調査が必要です。
リニューアル後の調査は主に、目標を達成したか、ユーザへの影響は想定通りだったかを確認するために行います。もし、結果が思わしくない、ユーザの不満が爆発しているという場合はすぐに修正をする必要があります。

リニューアルの流れ

ここまでの話をまとめて、簡単な流れを書きます。

ユーザの利用状況の調査(5. 計測)
調査の結果。問題が判明したのでそれを解決したい（1. 目的の決定）
問題を具体的な目標に落とし込む（2. 目標の設定）
目標を達成するための改善案を考える(3. 変更理由)
出た改善案に対して、目標を達成しているか、新たな問題は発生するかを考える(4. ユーザへの影響)
リニューアルを本番反映
想定していた目標は達成できたかを確認する(5. 計測)
何か問題があれば繰り返す

おわり

ちょっと具体的な例が出せなくて申し訳ないのですが、こんな感じでリニューアル設計を進めると、なんでこれがここにあるの？とかそういう謎な作業がなくなってハッピーだと思います。

しるろぐ

いろいろ書きます。