【必読】あなたのサイトはどれくらい嫌われてる?スマホユーザーが嫌う10のこと

<質問>

スマホで当社サイトを閲覧する人が増えたので、スマホ対応にしました。 ユーザーの利便性向上を狙ったのですが、スマホ対応後も、社内の人からなんとなく使いづらいと言われてしまいました。 文字が大きくなり文章も読みやすくなったのに、何が使いづらいのかイマイチ要領を得ません。どこを変えればいいですか?

<回答>

文字が読みやすいというのは、利便性の一つに過ぎません。またスマホはWEBを閲覧する以外にも、電話をかける・地図アプリを使う等、様々な機能を備えた端末です。 スマホの利用シーンを具体的に思い浮かべると、注意すべきポイントが多くあります。今日はスマホユーザーが嫌う10個のことを紹介します。

① リンク箇所が一目で判らないと嫌われる

 

モバイルリンクのクリックされやすさスマホでは、リンク箇所が一目で判らないと、ユーザーは迷ってしまいます。ダイレクトに言葉で表現したり、判り易い色のボタンやバナーを用意したりするなどの配慮が大切です。※クリック率や離脱率などの数値に影響します。

マウスでクリックと、指でタップの違い

パソコンでは、マウスのカーソルを動かしてリンク箇所を確認することができますが、スマホではそれができません。スマホユーザーは、リンク箇所だと思ったエリアを直接指でタップするわけです。その際、指でタップする前に、リンク箇所がどこだろう?と迷ってしまったり、いくら指でタップしてもリンク先に到達しないという事態になる可能性も。 ユーザーが一目でリンク箇所を判別できるデザインであれば、このような事態を回避できます。

② リンク箇所が並ぶ時、間隔が近すぎると嫌われる

link_kinsetsu

WEBサイトでは、リンクのリストやバナーなど、リンク箇所が並ぶ場合があります。 リンク箇所が密集していると、誤って隣のリンク箇所をタップしてしまう可能性があります。リンク箇所とリンク箇所の間隔を充分に確保して、ノーストレスで操作できる環境を用意しましょう。

親指タップを意識して

スマホは、指でタップすることで、次のリンク先に進みます。ではどの指がよく使われているのでしょうか? ・片手でスマホを使う場合⇒親指 ・両手でスマホを遣う場合⇒人差し指 または 中指 したがって、手の中でも一番太い指・親指にあわせて、デザインを検討すると良いでしょう。

子供やお年寄りへは、タップエリアを大きめに

また、パソコン向けWEBサイトと比較して、子供から大人まで幅広い年齢層が使用する傾向もあります。まだコントロールが効かない子供や、老眼が多い世代を考慮して、デザインを検討しましょう。

③ 電話をワンクリックでかけられないと、嫌われる

link_tel

電話番号をクリックしたら、電話が始まるのは、今や当然の機能です。 電話をするということは、その店舗や会社にコンタクトを取ろうとしてくれているということ。この重要なユーザーの行動を邪魔しないようにすることはとても大切です。

④ アクセス情報を地図アプリで開けないと、嫌われる

link_map

地図アプリは、単純に地図を開くだけでなく、経路検索やナビなどの機能を備えているタイプもあります。 この地図アプリの愛用者は、どこへ行くにも地図アプリと連携したいもの。 必要に応じて、地図アプリへ開けるように設定しておくと、ユーザーにも親切です。

⑤ 目的のページを探しづらいと、嫌われる

link_navi

ユーザーによって目的のページは様々。 例えば、一度PCサイトを見たユーザーがスマホからアクセスしている場合は、特定のコンテンツを求めているかもしれません。 また、HOMEに戻りたいユーザーがいるかもしれません。 ユーザーの目的に応えるために、適切なカテゴリ分けやパンくずリストを用意して、スムーズに目的のページに到達できるような設計が求められます。

⑥ サイトの表示に5秒以上かかると嫌われる

スマホサイトの表示が遅い場合

スマホでWEBサイトを開き始めてから表示が終わるまで、何秒かかりますか?この表示時間が長ければ長いほど、ユーザーの利便性は下がり、途中で閲覧を止めてしまう可能性が高くなります。

2015年現在、3G回線が主流の日本では待ち時間が5秒以下なら、比較的ストレスを感じずにインターネットを閲覧できると言われています。したがって、5秒以上かかっている場合は、本来サイトを閲覧したかったユーザーが閲覧を断念している可能性が高くなります。なるべく早急に、サイト管理者やWEBコンサルタントに相談することをお勧めいたします。

※この秒数はテクノロジーの進歩により変化する可能性があります。現に、日本よりもスマホのインターネット回線が速い欧米では、1秒以上かかるとストレスを生じると言われています。

⑦ FLASHがあると嫌われる

スマホでフラッシュが開けない場合

ご存知の方もいるかもしれませんが、iPhoneでFLASHを再生できません。FLASHとは、画像に動きや音を持たせる技術で、WEBサイトやアプリに使われます。 FLASHがあれば、写真を動かしたりアニメーションを作ったりすることができます。 しかし、スマホが使われるようになってから、FLASHを使用しているWEBサイトは激減しました。いくつか理由は考えられますが、一番大きいのは、iPhoneでフラッシュを再生できないことです。

FLASHに代わって台頭してきた技術があるので、紹介します。 一つは、画像に動きを出したいときに便利なのが、Java Scriptのプログラムです。スライドショーも作成できます。この技術であれば、iPhoneにも有効です。 二つ目は、動画をWEBサイトに埋め込むことも一般的になりました。You Tubeのプラグインは多くのOSに対応しており、またスマホに事前にインストールされているYou Tubeアプリとの連携もスムーズです。

⑧ スマホの画面幅とWEBサイトの全体幅が合っていないと嫌われる

 

1.WEBサイトの全体幅が小さすぎる場合 余白が大きくなり、一行の文字数が少なくなるため、読みづらく感じます。

2.WEBサイトの画面幅がちょうどいい場合 スマホ画面を有効的に活用できています。

3.WEBサイトの全体幅が大きすぎる場合 スクロールバーが横方向にもできるため、操作性が低下します。

スマホの画面幅は機種により異なります。iPhoneの解像度を見てみると、iPhone3Gは横幅480pxだったのが、iPhone4/4Sでは960px、iPhone5では1136px、iPhone6では1334px、iPhone6Plusでは1920pxです。機種により異なり、時代とともに大きくなる傾向があるのがわかります。 一方、Androidの解像度を見てみると、2014年に日本国内で発売された主要機種の解像度は横幅が480px~1440pxと機種により異なり、バラつきがあります。

したがって、スマホサイトを作成する際は、様々な横幅の機種に対応できるようにサイト制作を進めます。

⑨ 入力項目が多すぎると嫌われる

スマホでは入力が大変

お問い合わせフォームや会員登録フォームなど、フォームを設置する場合には、より細やかな配慮が必要です。PCでは比較的簡単に入力欄を選択して、テキストを入力できますが、スマホでは入力欄を選択するのに苦労し、テキストを入力するのに苦労するからです。

⑩ アクセスできるコンテンツが制限されると嫌われる

 

サイトを企画している現場では、「スマホでわざわざこんな情報を読まない」「外出先から見るページだけスマホ対応すればいい」という空気が流れる場合があります。

「スマホでわざわざこんな情報を読まない」=PCを主として使う人の言い分。実際、女性の約半数はPCを使わず、スマホを主に使っています。スマホでインターネットの閲覧行動を完結できることを望んでいます。

「外出先から見るページだけスマホ対応すればいい」=スマホ利用場所の90%が自宅という調査結果です。スマホは外出時でも在宅時でも身近にあるデバイスです。 気軽に検索できて、膨大な情報を読める便利な持ち物になっているのです。

このようなユーザーの使い方を考察すると見えてくることがあります。それは、「スマホ向けサイト」は、PC向けサイトの簡易版ではないということです。スマホ環境に最適化して、求めればPCと同程度の情報を手に入れられるという環境が、求められているのではないでしょうか。

まとめ

スマホユーザーが嫌う10のことをあげました。筆者がよく経験する「嫌われポイント」を中心にまとめましたが、スマホユーザーのことをよく知りイメージすれば、配慮すべきポイントはもっとあると思います。具体的な利用状況を意識して、サイトを見返すことができれば、スマホ最適化のヒントがさらに見つかることでしょう。

最後に、サイトのターゲットとする性別・年齢層の人物に依頼して、実際にスマホで自分の管理しているWEBサイトを操作する姿を観察させてもらうと良いでしょう。一番のスマホ対策になるはずです。

 

知らないと手遅れ!?スマホ対応前に絶対知るべき5つのこと

<質問>

スマートフォンが流行っていますが、自社のWEBサイトではまだスマホ対応していません。
スマホ対応すべきでしょうか。またスマホ対応するとしたら、どのように考えるべきでしょうか。

<回答>

スマートフォン(以下スマホ)の普及やグーグルの動向を考えると、遅かれ早かれ対応したほうが良いでしょう。
ただし、スマホ対応と一言で書いても、いくつかの手段があります。
あなたのWEBサイトの目的や使用用途・運営状況などに応じて、あなたにとっての最適な手段は変わります。今日はそれを考えてみましょう。

スマホ利用の現状

年々増えるスマホ普及率

スマートフォンを持っていると回答した割合(2014)スマホ普及率は2014年末現在も伸び続け、この表のように約6割がスマホを所有しています。
若年層のスマホ利用率は7割を超えたと言われています。

また、スマホの普及率だけでなく、1日のうちにスマホを使用する時間も増加しました。スマホでWEBサイトを閲覧することも簡単にできるようになり、多くの人がスマホでWEBサイトを閲覧するようになりました。
別のデータでは、今までパソコンを使用してWEBサイトを閲覧していたユーザーが、スマホを使用して閲覧するようになったという傾向があります。

スマホが身近になったことにより、WEBサイト閲覧をする道具がPCからスマホに徐々に移行してきています。

あなたのWEBサイトに訪れるスマホユーザーの数を見る方法

では、実際にあなたのWEBサイトにスマホユーザーはどれだけ訪れているのでしょうか。
無料解析ツール「Google Analytics」を活用して、スマホユーザーの動向やセッションの推移を見ることができます。

GAで期間を指定する方法
①まず、レポートの期間を指定します。
GAの日別から月別に変更
②グラフの表示を日別から月別に変更します。
③新しいセグメントを追加する
③新しいセグメントを追加します。
④モバイルトラフィックを選び適用する。
④モバイルトラフィックを選択し、適用するボタンをクリックします。
モバイルユーザーの推移
⑤スマホを使用して閲覧したセッション数の推移がグラフで表示されます。

あなたのWEBサイトがスマホ対応できているか確認する方法

モバイルフレンドリーテストの画面Google提供の無料サービス「モバイルフレンドリーテスト」では、現状のWEBサイトのスマホ対応度合いを教えてくれます。
【モバイルフレンドリーテスト】
https://www.google.com/webmasters/tools/mobile-friendly/

「スマホ対応」に絶対必要な5つのこと

①PC用URLとスマホ用URLを統一して表示すること

もしもあなたのサイトのURLが「PC用URL」と「スマホ用URL」で別々の場合、こんな問題が起こります。
・URLのシェアをする時に困る
あなたはURLを友達に送ったりソーシャルで共有したりする際に、そのURLがスマホ用かPC用かを気にしますか?ユーザーは、今見ているURLをそのまま共有する方が楽なはずです。
・Google等の検索エンジンに対応
検索エンジン大手のGoogleはURLが1つであることを推奨しています。検索エンジンの結果をクリックした時に、PCユーザーもスマホユーザーも便利に閲覧できる環境が整います。

②スマホでもPCでも見やすいレイアウトに

スマホ用サイトでは、スマホ画面の大きさに合わせた幅・文字・画像が求められます。
また、フラッシュやジャバスクリプト等、一部のスマホでは表示できないメディアファイルは避けましょう。

③操作がしやすいこと

2つの点に気を着ける必要があります。
一つ目は、マウスがなくても使いやすいこと。「マウスオーバー」は、画像の上にマウスを載せただけで操作ができますが、スマホにはマウスがありません。従って、マウスオーバーは使えません。その他マウスがないと出来ない技術は避ける必要があります。また「ポップアップ」と良い、画像を新しいウィンドウで拡大して開く技術も、スマホでは好まれません。
二つ目は、スマホは指で操作をするということ。例えば小さなボタンが密集していると、誤って隣のボタンをタップしてしまうかもしれません。また、例えば、画面の大半をボタンで占めていると、画面スクロールする際に誤ってボタンをタップしてしまうかもしれません。

東京で電車に乗ると、車内で立ちながらスマホ画面を操作しているのを見かけます。そのような環境でも操作しやすいサイトデザインを意識すると良いでしょう。

④表示速度が充分に速いこと

ガラケーが流行っていた頃、インターネットを閲覧すれば閲覧するほど月額料金がかかる従量課金制の契約プランが主流でした。そのため、ガラケーを対象とした携帯サイトでは、画像をなるべく使わず、絵文字や文字を多く使用したサイト構成になっていました。
スマホでは、ダウンロードできる情報量が増え、スマホ用WEBサイトでも、画像や動画を埋め込むのが当然です。
しかし、ここでサイト管理者が気をつけるべき事は、WEBサイトを開いて最初の画面が表示されるまでの時間です。ユーザーの待ち時間が1秒を超えると「待機」しているとの印象を強くもちます。逆を言えば、最初の表示を1秒未満にすることができれば、快適なスマホサイトを提供できるわけです。
スマホサイトを設計する場合は、最初の画面の表示時間を短縮化することを考える必要があります。

サイトの表示速度を測定できるサイト【PageSpeed Insights】
https://developers.google.com/speed/pagespeed/insights/?hl=ja

⑤掲載コンテンツの注意点

一度PCから見たWEBサイトを、出先にスマホでも開こうとした経験はないですか?
この場合、ユーザーは、スマホで開く時も、PCで開いた時と同様の体験ができることを望んでいると推測できます。このように、ユーザーはWEBサイトを様々なデバイスで開き、それぞれで同じ体験ができることを望みます。従ってサイト管理者もそれを提供することが望ましいと言えるでしょう。
つまり、スマホサイトとPC用サイトの掲載する情報量を同等にし、また、特定のコンテンツを探しやすいようにカテゴリ分類をうまく設計することが求められます。

3つのスマホ用サイト制作方法とその比較

モバイルサイト制作方法3つ

従来型 スマホ用サイトの特徴とその問題点

ここで従来型と呼ぶのは、PC向けサイトとスマホ向けサイトがそれぞれ別個のURLで表示され、別個のページが表示されるものを指します。
ユーザーがWEBサイトにアクセスする際、使用するデバイスに合ったURLを選ぶことができれば、快適な閲覧が可能になり、各デバイスに合ったレイアウト・文字・デザインが表示されます。
しかし、URLを選ぶ事ができない場合もあります。Googleのような検索エンジンや、Facebook、Twitterのようなソーシャルネットワーキングサービスでは、URLが一つしか書かれていない事が多く、PC用・スマホ用との区別がありません。
すると、PCユーザーがスマホ用WEBサイトを見たり、その逆が起きたりする結果が起こりえます。この場合、もちろん各デバイスに合わないレイアウト・字体・デザインとなり、ユーザーは読みづらさを強いられることになります。
また、Googleが重複コンテンツと判断するリスクもあり、Googleが推奨していない制作方法でもあります。

従来型のスマホ対応

表示URLを1つにする「ダイナミックサービング」というスマホ対応の手法

PC向けサイトとスマホ向けサイトの全ページを1:1で同じURLにし、それぞれのヘッダーで「Vart:User-Agent」と記述すれば、動的配信が可能になります。
つまり、ユーザーがURLにアクセスしたら、ユーザーのデバイスがスマホならスマホ向けWEBサイトを表示し、ユーザーのデバイスがPCならPC向けWEBサイトを表示するというものです。
表示URLが一つでユーザーが混乱することも避けられる上に、Googleが重複コンテンツと判断されるリスクもなくなります。Google推奨の制作手法の一つです。

ダイナミックサービング

ダイナミックサービングのメリット:

・URLが統一されており、Google推奨の手法。
・PC用サイトとスマホ用サイトを別個に作り込むので、それぞれユーザーの使用環境に合わせた設計やデザインが可能。

ダイナミックサービングのデメリット:

・レスポンシブウェブデザインと比べ、運営の手間(コスト)がかかる(1.5~2倍程度)

コードが1つで、表示を変化させる「レスポンシブウェブデザイン」というスマホ対応の手法

前述のダイナミックサービングでは、PC用サイト・スマホ用サイトのそれぞれに設計・構築が必要になります。更新頻度が多いニュースサイトやブログでは、手間がかかりすぎ、運営の負荷が大きくなります。
そこで、PC用サイトもスマホ用サイトも本体となるコードを1つにまとめ、ユーザーのデバイスごとに表示の仕方を変えるという技術ができました。これをレスポンシブウェブデザイン(RWD:Responsive Web Design)と言います。

レスポンシブウェブデザインとは
もちろんURLが一つに統一されるのでユーザーが混乱することもありませんし、コードも一つに統一されるので更新や運営が過負荷になりづらいのが特徴です。Googleが推奨する制作手法で、重複コンテンツのリスクもありません。
ただし、サイトデザイン(見た目)においては注意が必要です。レスポンシブウェブデザインでは、デバイス事に作り込むわけではありません。どちらにも合ったデザインにしていく必要があるので、ある程度シンプルなデザインになりますし、最終的にスマホかPCのどちらを優先させていくかは制作に入る前に決めておく必要があると言えるでしょう。

世の中の流れとしてはモバイルファーストと言い、モバイルを最優先にして設計していくことが主流ですが、業界によっては、PCユーザーのコンバージョン(お問い合わせ申込みなど)が高い場合もあります。
いずれにしても、現状のアクセス解析に基づいて、モバイル対応を考えていくことが望ましいですね。

レスポンシブウェブデザイン

レスポンシブウェブデザインのメリット:

・運用が楽。(手間と費用を抑えられる)(1HTMLファイルの管理だけで済むため)
・URLが1つで、Google推奨の手法。

レスポンシブウェブデザインのデメリット

・複数の端末で読み込めるようにするため、デザインに制限がある。
・デバイス毎に作り込むよりも、訴求力が落ちる場合が結構ある。
・PC向けの古いブラウザには非対応

SEOの観点から考えるスマホ対応

スマホ対応している場合の検索結果画面

スマホ対応サイトが有利になっていく、検索エンジンへ

Googleで検索をすると、検索結果画面には「スマホ対応」ラベルが表示されるようになりました。従来の「スマホ対応」ラベルがない状態では、検索結果画面からスマホ対応しているWEBサイトか否かを確認するすべがありませんでした。しかし、このラベルが出来たことにより、スマホユーザーはスマホ対応しているページをより見つけやすくなります。
今後、世の中のWEBサイトのスマホ対応が進み、検索結果画面に「スマホ対応」ラベルが多く表示されるようになると、スマホ対応していないWEBサイトはクリック率が下がるかもしれません。

アメリカのスマホ検索事情

アメリカの検索エンジンをスマホで調べてみると、上位に表示されているサイトの多くがスマホ対応されていることに気付かされます。
例えば、「orthodontist nyc」(直訳すると、矯正歯科 ニューヨークシティ)で検索した時に1ページ目に表示されている10件中10件全てのページがスマホ対応しています。

一方で、「矯正歯科 東京」で検索した場合、1ページ目に表示されている10件中6件のページがスマホ対応していました。

スマホ検索結果の米国との比較

また、アメリカで起きた事が日本でも起きることを予想すると、早くからスマホ対応しておくに越したことはないでしょう。

[本記事中にあるGoogleの推奨については、下記のサイトを参考にしています]
Google Multi-Screen Resources(英語) http://www.google.com/think/multiscreen/start.html