IMJG Release

Size: px

Start display at page:

Download "IMJG Release"

りさこたなせ
5 years ago
Views:

1 株式会社アイエムジェイ東京都目黒区青葉台代表取締役社長櫻井徹タブレット端末でのサイトユーザビリティ調査画面サイズの違いによるタップのしやすさ読みやすさを検証株式会社アイエムジェイ ( 本社 : 東京都目黒区代表取締役社長 : 櫻井徹以下 IMJ) はタブレット端末でのサイトユーザビリティ調査を実施いたしました調査期間は 2013 年 3 月 8 日 ~3 月 11 日有効回答数は 900 名から得られました調査の狙い ipad や Kindle に代表されるタブレット端末が急速に普及している一方で Web サイト側の対応としてはタブレット端末に最適化されたサイトを新たに提供しているケースは現在もそれほど多くなくすでにある PC やスマートフォン向けのサイトをタブレット端末向けにそのまま表示させているケースが見受けられます IMJ ではこの現状を踏まえタブレット端末のユーザーが PC 向けスマートフォン向けサイトを閲覧した際に Web サイト側からはユーザビリティ上どのようなポイントに配慮すべきかを把握するための調査を実施いたしました今回の調査ではタブレット端末を画面サイズの異なる 3 つのグループ (7 インチ 7.7~7.9 インチ 9~10.1 インチ ) に分けそれぞれ PC やスマートフォン向けのサイトについて使いやすさの印象文字の読みやすさ押しやすいボタンサイズなどについてグループごとに調査比較をしています調査のトピック 1. 7 インチタブレットユーザーの最大 34% はスマートフォンサイトを支持 2. PC サイトを好む理由は画像が見やすかったからが約 7 割 3. 7 インチユーザーの 70% 以上は縦持ちで Web サイトを閲覧する 4. タブレットユーザーが読みやすいと感じるフォントサイズは 16px 5. 9~10 インチのタブレットユーザーは縦持ち横持ちに関係なく拡大しないで文章を読む 6. 7 インチタブレットユーザーはタップミスと拡大してタップする割合が多い 7. タブレットユーザーに最適なボタンサイズは縦横 32px 以上 1

2 調査結果詳細調査概要調査方法 : インターネットリサーチ調査地域 : 全国調査対象 : 20~59 歳のタブレット端末を利用している男女調査会社が保有する調査パネル有効回答数 : 900 サンプル調査日時 : 2013 年 3 月 8 日 ~3 月 11 日割付条件 : タブレットの 3 画面サイズ (7 インチ /7.7~7.9 インチ /9~10.1 インチ ) と性別で均等割り付けを行った各画面サイズの主なタブレット 7 インチ :Nexus 7 Kindle Fire など 7.7~7.9 インチ :ipad mini など 9~10.1 インチ :ipad Xperia Tablet S シリーズ ARROWS Tab など回答者属性性年代 (n=900) 居住地域 (n=900) 女性 40~49 歳 15.8% 女性 50~59 歳 8.7% 男性 20~29 歳 3.2% 男性 30~39 歳 11.3% 四国地方九州地方 1.3% 5.3% 中国地方 4.3% 北海道 4.3% 東北地方 5.8% 男性 40~49 歳 18.7% 近畿地方 18.4% 女性 30~39 歳 18.2% 女性 20~29 歳 7.3% 男性 50~59 歳 16.8% 中部地方 15.4% 関東地方 45.4% 職業 (n=900) タブレットの OS(n=900) (%) 公務員経営者役員会社員 ( 事務系 ) 会社員 ( 技術系 ) 会社員 ( その他 ) 自営業自由業専業主婦 ( 主夫 ) パートアルバイト学生その他無職 Android 43.4% ios 56.6% 2

質問に回答していただきましたグループ 1 のユーザーが閲覧したサイト PC-1 PC

3 PC サイトとスマートフォンサイトの比較調査ユーザーを無作為に 2 つのグループに分け実際に各タブレット (7インチ 7.7~7.9 インチ 9~10.1 インチ ) から以下の PC サイト (PC-1 または PC-2) およびスマートフォンサイト (SP-1 または SP-2) にそれぞれアクセスし質問に回答していただきましたグループ 1 のユーザーが閲覧したサイト PC-1 PC サイト SP-1 スマートフォンサイトグループ 2 のユーザーが閲覧したサイト PC-2 PC サイト SP-2 スマートフォンサイト 3

4 7 インチタブレットユーザーの最大 34% がスマートフォンサイトを支持各タブレットで PC サイトとスマートフォンサイトを閲覧していただきどちらのサイトを使いたいと感じたかを尋ねた結果その多くが PC サイトを好む傾向が見られましたただしインチ別で見ると 7インチユーザーにおいては最大 34% がスマートフォンサイトを使いたいと回答しており 9~10.1 インチユーザーと比べると 17 ポイントも差が出ることが分かりました図 1 PC サイト (PC-1,PC-2) とスマートフォンサイト (SP-1,SP-2) の比較 ( 単一回答 ) グループ 1 それぞれ n=300 PC-1 の方が使いたいと感じた SP-1 の方が使いたいと感じた全体 (n=300) PC サイトが好まれる傾向があるものの 7 インチ (n=100) インチが小さくなるほどスマートフォンサイトインチ (n=100) が好まれる傾向があるインチ (n=100) グループ 2 PC-2 の方が使いたいと感じた SP-2 の方が使いたいと感じた全体 (n=300) 7インチ (n=100) インチ (n=100) インチ (n=100)

5 PC サイトを好む理由は画像が見やすかったからが約 7 割 PC サイトを使いたいと感じる理由を尋ねたところ画像が見やすかったからが PC-1 では 74% PC-2 では 61% と最も多く画像が見やすいことがサイトの支持に大きな影響を与えていると推測できます一方でスマートフォンサイトを支持する理由を PC サイトと比較してみると SP-1 ではスムーズに操作できたから (29%) サイト全体が把握しやすかったから (39%) が PC-1 よりも高く SP-2 では本文が読みやすかったが 42% リンクやボタンがタップしやすかったが 42% 文字の大きさが適切だと感じたが 29% と PC-2 よりも高くなっておりこれらの点はタブレットユーザーが PC サイトを閲覧することを想定した際にユーザビリティ上配慮したほうがよいポイントと推察されますまたインチ別に見ると 7 インチユーザーは特に文字の大きさや本文の読みやすさの点においてスマートフォンサイトへの支持率が高い傾向にあるため 7 インチサイズ向けに PC サイトを提供する際には文字の大きさや読みやすさに問題がないかを検証あるいはスマートフォンサイトを表示させるなどの配慮が求められます図 2 PC サイト (PC-1,PC-2) とスマートフォンサイト (SP-1,SP-2) の評価理由 ( 複数回答 ) サイト PC-1 を使いたい理由全体 (n=241) 7インチ (n=72) インチ (n=84) インチ (n=85) (%) サイト SP-1 を使いたい理由全体 (n=59) 7インチ (n=28) インチ (n=16) インチ (n=15) (%) 本文が読みやすかったから本文が読みやすかったからリンクやボタンがタップしやすかったからリンクやボタンがタップしやすかったから画像が見やすかったから画像が見やすかったからスムーズに操作ができたからスムーズに操作ができたからデザインが良いと感じたから ( 無駄なスペースがない ) デザインが良いと感じたから ( 無駄なスペースがない ) 文字の大きさが適切だと感じたから文字の大きさが適切だと感じたからサイトの全体像が把握しやすかったからサイトの全体像が把握しやすかったから情報量が適切だと感じたから情報量が適切だと感じたからその他その他

6 サイト PC-2 を使いたい理由全体 (n=224) 7インチ (n=66) インチ (n=75) インチ (n=83) (%) サイト SP-2 を使いたい理由全体 (n=76) 7インチ (n=34) インチ (n=25) インチ (n=17) (%) 本文が読みやすかったから本文が読みやすかったからリンクやボタンがタップしやすかったからリンクやボタンがタップしやすかったから画像が見やすかったから画像が見やすかったからスムーズに操作ができたからスムーズに操作ができたからデザインが良いと感じたから ( 無駄なスペースがない ) デザインが良いと感じたから ( 無駄なスペースがない ) 文字の大きさが適切だと感じたから文字の大きさが適切だと感じたからサイトの全体像が把握しやすかったからサイトの全体像が把握しやすかったから情報量が適切だと感じたから情報量が適切だと感じたからその他その他

7 7 インチユーザーの 70% 以上は縦持ちで Web サイトを閲覧する図 1 のアンケートに答えていただく際のタブレット端末の持ち方を尋ねた結果 7 インチユーザーの 75% 7.7~7.9 インチユーザーの 68% がタブレット端末を縦に持って Web サイトを閲覧する結果となりインチ数が小さくなるほど縦持ちで Web サイトを閲覧するユーザーの比率が高くなる傾向が見られましたまた縦持ちで Web サイトを閲覧するユーザーの方が横向きで閲覧するユーザーに比べよりスマートフォンサイトを好むという結果も得られました図 3 インチ別閲覧時のタブレットの向き ( 単一回答 ) それぞれ n=300 縦向き横向き全体 (n=600) 7インチ (n=200) インチ (n=200) インチ (n=200) 図 4 タブレットの向き別 PC サイトとスマートフォンサイトの比較 ( 単一回答 ) それぞれ n=300 PCサイトの方が使いたいと感じた SPサイトの方が使いたいと感じた縦向き (n=388) 横向き (n=212)

8 フォントサイズとコンテンツ表示エリアサイズの違いによる印象評価ユーザーを無作為に 3 つのグループに分けタブレット端末 (7インチ 7.7~7.9 インチ 9~10.1 インチ ) で以下のフォントサイズとコンテンツの表示エリアサイズ ( 下図青枠部分 ) が異なる 9 種類のサイトにアクセスしていただき質問に回答していただきましたグループ 1 のユーザーが閲覧したサイトサイト A-1(12px 650px) サイト B-1(14px 650px) サイト C-1(16px 650px) グループ 2 のユーザーが閲覧したサイトサイト A-2(12px 550px) サイト B-2(14px 550px) サイト C-2(16px 550px) グループ 3 のユーザーが閲覧したサイトサイト A-3(12px 450px) サイト B-3(14px 450px) サイト C-3(16px 450px) 括弧内はフォントサイズコンテンツ表示エリアサイズ 8

9 タブレットユーザーが読みやすいと感じるフォントサイズは 16px タブレットユーザーにフォントサイズとコンテンツの表示エリアサイズが異なる 9 種類のページを閲覧していただいたところサイト C-2( フォントサイズ 16px コンテンツ表示エリアサイズ 550px) において拡大しないで読んだユーザーが 67% となり最も多い結果となりましたまた最も使いたいと思ったサイトを尋ねた結果年代別に見ると 9~10.1 インチユーザーの 20~39 歳ではフォントサイズ 14px 40~59 歳では 16px の支持が多く一方 7 インチユーザー 7.7~7.9 インチユーザーは年代に関係なく 16px が最も支持される結果になりました PC サイトの一般的な本文フォントサイズは 12px~14px 程度図 5 サイト内の文章を読む際に拡大したか否か ( 単一回答 ) 拡大した拡大しなかったそれぞれ n=300 サイト A-1(12px 650px) サイト B-1(14px 650px) サイト C-1(16px 650px) 全体 (n=300) インチ (n=100) インチ (n=100) インチ (n=100) サイト A-2(12px 550px) サイト B-2(14px 550px) サイト C-2(16px 550px) 全体 (n=300) インチ (n=100) インチ (n=100) インチ (n=100) サイト A-3(12px 450px) サイト B-3(14px 450px) サイト C-3(16px 450px) 全体 (n=300) インチ (n=100) インチ (n=100) インチ (n=100)

10 図 5 年代別最も使いたいと思ったサイト ( 単一回答 ) A-1(12px 650px) B-1(14px 650px) C-1(16px 650px) それぞれ n=300 A-2(12px 550px) B-2(14px 550px) C-2(16px 550px) 全体 (n=100) 全体 (n=100) インチ 20~39 歳 (n=38) 40~59 歳 (n=62) インチ 20~39 歳 (n=44) 40~59 歳 (n=56) ~7.9 インチ全体 (n=100) 20~39 歳 (n=52) 40~59 歳 (n=48) ~7.9 インチ全体 (n=100) 20~39 歳 (n=40) 40~59 歳 (n=60) ~10.1 インチ全体 (n=100) 20~39 歳 (n=35) 40~59 歳 (n=65) ~10.1 インチ全体 (n=100) 20~39 歳 (n=34) 40~59 歳 (n=66) インチ 7.7~7.9 インチ A-3(12px 450px) B-3(14px 450px) C-3(16px 450px) 全体 (n=100) 20~39 歳 (n=41) ~59 歳 (n=59) 全体 (n=100) 20~39 歳 (n=47) 40~59 歳 (n=53) ~10.1 インチユーザーの 20 歳 ~39 歳は 14px 40 歳 ~59 歳は 16px を好む傾向また 7 インチユーザーには年代に関係なく 16px が最も好まれた 9~10.1 インチ全体 (n=100) 20~39 歳 (n=41) 40~59 歳 (n=59)

11 9~10.1 インチのタブレットユーザーは縦持ち横持ちに関係なく拡大しないで文章を読む 7 インチユーザー 7.7~7.9 インチユーザーは横持ちで文字を読むと縦持ちの場合よりも拡大しないユーザーが多くなる傾向が見られましたまた 9~10.1 インチのタブレットユーザーはコンテンツエリアが 650px 550px のサイトにおいては縦持ち横持ちに関係なく拡大せずに閲覧しているユーザーが多い一方でコンテンツの表示エリアが 450px のサイトでは横持ちの拡大率が上がる傾向が見られましたこれは横持ちで画面幅が広くなるとコンテンツ以外のエリアも大きくなり視界に入ってしまい読みにくいため拡大操作でコンテンツだけを表示させてから文章を読んでいるユーザーが増えると推察できます図 6 タブレットの向き別に拡大したか否か ( 単一回答 ) 拡大した拡大しなかったそれぞれ n=300 サイト A-1(12px 650px) サイト B-1(14px 650px) サイト C-1(16px 650px) 0% 20%40%60%80%100% 0% 20%40%60%80%100% 0% 20%40%60%80%100% 縦向き (n=183) 全体横向き (n=117) インチ縦向き (n=75) 横向き (n=25) ~7.9 インチ縦向き (n=63) 横向き (n=37) ~10.1 インチ縦向き (n=45) 横向き (n=55)

12 拡大した拡大しなかったサイト A-2(12px 550px) サイト B-2(14px 550px) サイト C-2(16px 550px) 0% 20%40%60%80%100% 0% 20%40%60%80%100% 0% 20%40%60%80%100% 縦向き (n=207) 全体横向き (n=93) インチ縦向き (n=80) 横向き (n=20) ~7.9 インチ縦向き (n=70) 横向き (n=30) ~10.1 インチ縦向き (n=57) 横向き (n=43) サイト A-3(12px 450px) サイト B-3(14px 450px) サイト C-3(16px 450px) 0% 20%40%60%80%100% 0% 20%40%60%80%100% 0% 20%40%60%80%100% 縦向き (n=168) 全体横向き (n=132) インチ縦向き (n=67) 横向き (n=33) ~7.9 インチ縦向き (n=55) 横向き (n=45) ~10.1 インチ縦向き (n=46) 横向き (n=54)

13 サイドメニューのフォントサイズの違いによる印象評価ユーザーにタブレット端末で以下のサイトにアクセスし左側のメニュー ( 下図青枠部分 ) の中から任意のリンクをタップしてもらい質問に回答していただきました 3 サイトとも行の高さ (line-height) は 1.4 を指定サイト D( フォント 12px) サイト E( フォント 14px) サイト F( フォント 16px) 13

14 7 インチタブレットユーザーはタップミスと拡大してタップする割合が多いフォントが異なるサイト D E F でサイドメニューをタップしてもらった結果拡大しないでタップ出来たとの回答が多かったのは最もフォントが大きいサイト F( フォントサイズ 16px) となりましたインチ別にみると 7 インチユーザーは拡大したユーザータップミスをしたユーザーの比率が最も高くサイト D ( フォントサイズ 12px) においては 6 割以上が拡大するかタップミスをしているという結果が得られました PC 向けにデザインされたサイトメニューを提供する際には 7 インチ向けに配慮されたフォントサイズになっているかどうかが検証のポイントになると言えます図 7 リンクをタップできたか否か ( 単一回答 ) n=900 拡大してタップしたタップ出来た ( 拡大なし ) 狙ったリンクとは違うリンクをタップしてしまったサイト D( フォント 12px) 全体 (n=900) インチ (n=300) インチ (n=300) インチ (n=300) サイト E( フォント 14px) 全体 (n=900) インチ (n=300) インチ (n=300) インチ (n=300) サイト F( フォント 16px) 全体 (n=900) インチ (n=300) インチ (n=300) インチ (n=300)

15 ボタンサイズ別のタップミス発生率と押しにくさの印象評価ユーザーにタブレット端末で以下のサイトにアクセスしていただき画面に表示される 25 個並んだボタンのうち赤いボタンを押下してもらいその直後ボタンの押しやすさの印象を回答してもらいましたボタンの形状は正方形でサイズは 12px~48px までの 10 パターンを用意しその内の 5 パターンをランダムに表示して操作してもらいました説明画面テスト画面例 1 テスト画面例 2 印象評価画面 15

タブレットユーザーに最適なボタンサイズは縦横 32px 以上ボタンサイズが異なるボタンを押下した後にボタンの印象について回答してもらった結果サイズが 28px (button28) 以下のボタンではどちらかといえば押しにくい押しにくいと答えたユーザーが 10% を超え 20px (button20) 以下では半数以上が押しにくいと感じることがわかりました

16 タブレットユーザーに最適なボタンサイズは縦横 32px 以上ボタンサイズが異なるボタンを押下した後にボタンの印象について回答してもらった結果サイズが 28px (button28) 以下のボタンではどちらかといえば押しにくい押しにくいと答えたユーザーが 10% を超え 20px (button20) 以下では半数以上が押しにくいと感じることがわかりましたまた実際のミスタップの発生率を調査した結果サイズ 24px(button24) 以下のボタンはミスタップ発生率が 10% を超える結果となりましたインチ別で見るとミスタップ発生率が 10% を超えるボタンは 7 インチユーザーでは 24px 以下 7.7~7.9 インチユーザーでは 20px 以下 9~10.1 インチユーザーでは 16px 以下となりましたこれらの結果からサイトにおける重要なボタンに関してはタブレットユーザーを考慮して縦横 28px ないしは 32px 以上の十分なゆとりをもったボタンサイズが適切であると推察できます図 8 サイズ別のボタンの押しやすさの印象 ( 単一回答 ) 16

17 図 9 サイズ別のボタンのミスタップ発生率 ( 単一回答 ) 17

18 株式会社アイエムジェイについて ( インターネット領域に軸足をおき Web 及びモバイルインテグレーション事業における豊富な知見実績を強みにスマートフォンを含むマルチデバイス対応更には戦略策定集客分析 (Web データ解析効果検証等 ) まで様々なソリューションをワンストップで提供することで顧客のデジタルマーケティング活動における ROI( 投資対効果 ) 最適化を実現いたします文中に記載されている会社名商品名は各社の商標または登録商標です掲載されている情報は発表日現在の情報です検索日と異なる可能性がございますのであらかじめご了承ください画面写真データ等ご用意いたしておりますお気軽にお問い合わせくださいお問い合わせ先本調査に関する株式会社アイエムジェイ R&D 室 Research Unit 担当 : 嶋田 TEL: 報道機関からの株式会社アイエムジェイブランドコミュニケーション室広報グループ TEL: irpr@imjp.co.jp 18

IMJG Release

IMJG Release 株式会社アイエムジェイ東京都目黒区青葉台 3-6-28 代表取締役社長櫻井徹ガラケーユーザーの利用実態調査ガラケー向けのメルマガではモバイル端末保有者全体の 9% しか狙えない株式会社アイエムジェイ本社 : 東京都目黒区代表取締役社長 : 櫻井徹以下 IMJ はガラケーユーザーの利用実態調査を実施いたしました調査期間は 2013 年 3 月 26 日 ~3 月 28 日有効回答数は