スマホ対応に熱心なのはいいが、中途半端な最適化なら無いほうがまし！

「時代はスマホです」とWeb担当者は言うけれど

「いまどきWebサイトのスマートフォン対応は当たり前」という時代がやってきた。

しかし、企業によってその対応はさまざまだ。

• PCサイトをレスポンシブでスマートフォンでも表示できるようにする
• スマートフォン専用サイトを構築する
• 専用のテンプレートを用意して、コンテンツは一元管理する

……などなど

対応の手法そのものは問題ではない。

問題なのは、すべてがPCサイトの導線で作られているということだ。

お客さまの「導線」や「動線」^※1は、ライフスタイルにともない劇的に変化していく。今は、まさにその過渡期にあると言えるだろう。

今後、PCや他のデバイスを利用するときも、スマートフォンを利用する際の導線や動線が、主たる導線や動線になっていくだろうことは間違いない。

いよいよ、真の意味での“モバイルファースト”^※2、すなわちスマートフォン用のサイトを最初に作ることではなく、「スマートフォンを利用するお客さまのニーズへの最適化」を実現しなければならない時代の到来である。

ほかにも、「タブレットは、押しやすいように余白を……」など、見た目に関して妙に細かく要求されることが多い。

PCサイトのコンテンツが、スマートフォンできれいに見えさえすればいいのか？

もちろん、これはWeb担当者だけの問題ではなく、制作会社やアプリケーションベンダーにも問題がある。

これが、本当にスマートフォン最適化と言えるのか？

PCサイトの表示をスマートフォンで最適に閲覧できるようにしているだけではないのか？

もちろん、直近の対応として、まず表示の最適化を行うことは、間違いではないし、弊社でもおすすめすることはある。

また、PCサイトとスマートフォンサイトの導線や動線が同一でもかまわない企業も、確かに存在する。

しかし、ほとんどの企業にとって、PCサイトとスマートフォンサイトそれぞれで異なる導線や動線を提供するほうが、お客さまにとってより有益になるはずだ。

これからのスマートフォン最適化は「導線」と「動線」に注目

お客さまの「導線」と「動線」がスマートフォン基準になりつつある現状を考えると、単なる「PCサイトのスマートフォン最適化」では、今後は有効に機能しないだろう。

そもそもWebサイトを作ることは、お客さまの問題を解決するための仕組みを作ることと同義である。

それを成し得るには、お客さまのニーズにあわせて「導線」と「動線」を最適化し、コンテンツを最適な順番で提供しなければならない。

だから本当に問題にすべきは、サイトの表面的な見た目ではなく、「導線」と「動線」の変化なのだ。

「導線」とは、検索エンジンやソーシャルメディアから自社サイトのコンテンツへの移動のこと。

「動線」とは、自社サイト内での移動のこと。

この変化こそが、お客さまの変化であり、インターネットの変化なのだ。

「導線」と「動線」の違い

これからのスマートフォン最適化とは、「導線」と「動線」を意識して、スマートフォンを利用するお客さまのニーズに最適化することだ。

サイト設計は「PC中心」から「スマホ中心」へ

これまで、Webサイトの設計はPCサイトを中心に考えられてきた。しかし、これからはスマートフォンサイトを中心に考える必要がある。

理由は、ここまで説明したとおり、お客さまの「導線」と「動線」が変化しているからだ。

スマートフォンでのサイト利用に慣れつつあるお客さまにとっては、スマートフォンサイトを中心にPCサイトの「導線」と「動線」を考えるほうが、使い勝手が良くなるはずだ。

これこそ、真の意味で“モバイルファースト”の実現である。

もちろん、理想はPC用とスマートフォン用で別々の設計を行い、それぞれのユーザーニーズに最適化することだ。予算や納期が潤沢にあれば、この方法をおすすめする。

しかし、予算や納期がぎりぎりの場合は、スマートフォン用の設計を優先させ、そのデザインやインターフェイスをPCサイト側でも利用するという、まさに「逆レスポンシブデザイン」がおすすめだ。

少なくとも、PCサイト側のユーザーニーズ最適化をスマートフォン側に適用するより、カバーできるお客さまの数は格段に上がるはずだ。

スマートフォンのデザインがPCサイトのデザインに展開される例

スマートフォンでのユーザーニーズ最適化の手法は、PCサイトのユーザーニーズ最適化の手法と同じ「ユーザー体験シナリオ」^※3を利用すればよい。

ユーザー体験シナリオの例

スマホのためのマテリアルデザインをPCサイトでも活用

お客さまは、スマートフォンのユーザービリティやルールを当たり前のこととして受け入れ、身体もそれになじんでいる。

いい例が視線の移動だ。

紙媒体の時代は「Z型」、PCで検索に慣れてきた時代は「F型」、そしてスマートフォンに慣れてきた今は「I型」へと変化してきた。

視線の変化

Webサイトを作る側は、その変化と新しい常識に対応していかなければならない。

重ねて言うが、お客さまは劇的に変化している。

今まで正しいとされていたことや暗黙のルール、たとえば「ロゴを押すとホームに戻る」といったことが、ただの都市伝説になるのだ。

これからは、PCにおいてもスマートフォンにおいても、あたかもATMのように、誰にとってもわかりやすく、どんなデバイスからでも使いやすく操作しやすいインターフェイスを要求される時代が間違いなくやってくる。

その実現には、明確なルールが必要なことは言うまでもない。

たとえばマテリアルデザインはその答えの1つであり、Webサイトの設計にも活かせる可能性を秘めている。

2014年6月にGoogleマテリアルデザインガイドラインが公開されてから2年が過ぎ、AndroidはもとよりiOSのアプリでも、このガイドラインを取り入れたUI/UXの優れた作品が多数出てきた。

マテリアルデザインが示すものは、以下の2点に集約される。

1. インターフェイスがシンプルでわかりやすい

   押す場所がわかり、押したこともわかる。

   ATMのように、誰にでも使えるインターフェイスにしなければ使えない！

2. ルールに基づいて設計されている

   明確なルールがあり、一度利用すれば使い方が理解できるので、誰でも利用可能。

マテリアルデザインに関しては、スマートフォンに限った話だと思っていた人は多いと思う。

しかし、これまでの説明を踏まえれば、PCサイトにもマテリアルデザインが必要なことが理解できるはずだ。

マテリアルデザインが取り入れられたシカゴ科学産業博物館（左）とFCINQ社（右）のWebサイト