生田昌弘の「Web担当者に喝!」

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

真のスマートフォン/モバイル最適化とは、見た目ではなく「導線」と「動線」、すなわちユーザーニーズに応えること

デバイスに最適化することしか頭にないWeb担当者に喝!

お客さまのニーズに最適化できていなければ、Webサイトは機能しない。

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

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

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

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

……などなど

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

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

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

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

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

※1: 「導線」と「動線」に関しては、本連載の第17回「トップページばかり気にするWeb担当者に喝! サイト構築は「導線」と「動線」で考える」を参照
※2: 「モバイルファースト」に関しては、本連載の第8回「“モバイルファースト”とはスマホサイトを最初に作ること? 本来の意味を正しく理解すべし!」を参照
「PC用」や「スマホ用」など、デバイスごとに読みやすいフォントサイズにしたいのですが。
Web担当者A
写真のサイズは、やっぱりデバイスごとに最適化して、一番きれいな表示で見てもらいたいです。
Web担当者B
スマホ用サイトのコンテンツは、PCサイトからの抜粋にしましょう。
Web担当者C

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

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

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

レスポンシブデザインならお任せください!
制作会社A
PCサイトを簡単にスマートフォン専用サイトにすることができます!
制作会社B
弊社のツールを使えば、PCサイトを簡単にスマートフォン用に変換できますよ!
アプリケーションベンダー

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

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

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

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

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

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

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

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

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

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

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

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

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

動線
導線
検索エンジンやソーシャルメディアからTOPへの移動
TOPから詳細等への移動
リストから詳細への移動
詳細から詳細への移動
詳細から出口への移動
検索エンジンやソーシャルメディアからTOP以外への移動
「導線」と「動線」の違い

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

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

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

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

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

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

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

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

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

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

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

※3: “ユーザー体験シナリオ”に関しては、本連載の第1回「まっとうなWebサイトにはSEOなど不要! 検索エンジンよりもユーザーを思うべし」を参照
ユーザーの行動
スタート
リアル
入口
ウェブ
出口
ゴール
○○を購入したい
広告で○○を見る
検索する
比較・検討する
資料請求をする
商品を購入する
ユーザーニーズ
○○商品について知りたい
広告で見た、○○商品キャンペーンについて知りたい
広告と連動するキャンペーン
ページの作成
○○商品の詳細が知りたい
他社商品よりもどこが優れているのか知りたい
似た機能をもつ他の商品と比べたい
○○商品の資料請求がしたい
他の商品も一緒に資料請求したい
営業に問い合わせしたい
納期が知りたい
企業がすべき事柄
リアルですべき事柄
Webとマス広告の連動
キャンペーンとWebの連動
商品軸で探せる情報整理
商品情報管理の整備
比較できるよう、商品詳細情報の項目の統一(カタログなどと連動)
同じ種類の商品に対するひも付け
総合カタログではなく、商品別のカタログへ再構築
問い合わせ管理システムの採用
Webですべき事柄
A 広告と連動するキャンペーンページの作成
B 商品の特長や機能、効果的な使い方など詳細な情報提供
C 機能や特長、用途などから選べ、商品の比較も容易にする他社製品との優位性を具体的な数字を交えて提示
D 商品ページをひも付けた資料請求フォーム同様の商品や、近い機能を持った商品をレコメンドする機能
E 営業への連絡方法提供納期の告知
F 配送指定機能
配送確認
Webサイトに必要なコンテンツ
ユーザー体験シナリオの例

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

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

いい例が視線の移動だ。

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

~2005年くらいまで
<Z型> 詳細に読み込んでくれる
~2008年くらいまで
<F型> 左カラムが主導線検索エンジンと同じ見方をする(ページ上部のみ見る)
~現在
<I型> センターが主導線素早く3秒で下まで見る
視線の変化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本日のまとめ

ユーザーはスマートフォンにどんどん慣れていくから、そのユーザーの経験や慣れを踏まえた最適化が必要。

これからは、単なるスマートフォン表示最適化ではなく、「スマートフォンでのユーザーニーズ最適化」が、特に有効になる!

すべては、お客さまの問題解決のために!

この記事が役に立ったらシェア!
tweet66はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

サイト年齢
そのWebサイトが開設されてから、またはドメイン名が登録されてから、どれだけ時間 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore