タブレット向けサイトの文字サイズは16pxがいいとの調査結果……イマドキの文字サイズの話

今日は、タブレット端末でユーザーが好むWebサイトの調査結果を紹介しながら、昨今のユーザーがWebサイトを見るのに使っているデバイスにどう対応するかを少しだけ考えてみます。

タブレット端末で使いやすいサイトとは？

「タブレット端末でのサイトユーザビリティ調査」というレポートを、IMJさんが発表していました。

・ IMJ調査レポート「タブレット端末でのサイトユーザビリティ調査」
→ http://www.imjp.co.jp/press/release/20130515_000959.html （リリース）
→ http://www.imjp.co.jp/press/assets/201305/imj20130515.pdf （調査データPDF）

ざっくりその内容をまとめると、こんな感じです。

• 7インチタブレットユーザーの最大34％はスマートフォンサイトを支持
  （でも大半がPC向け表示を支持）
• PCサイトを好む理由は「画像が見やすかったから」が約7割
  （スマホ向け表示を好む理由は「本文が読みやすかった」「文字の大きさが適切」）
• 7インチユーザーの70%以上は縦持ちでWebサイトを閲覧する
• タブレットユーザーが読みやすいと感じるフォントサイズは16px
  （ただし9インチ以上を使う20代～30代は14pxを好む）
• 9～10インチのタブレットユーザーは、縦持ち、横持ちに関係なく拡大しないで文章を読む
• 7インチタブレットユーザーはタップミスと拡大してタップする割合が多い
• タブレットユーザーに最適なボタンサイズは縦横32px以上
  （24px以下ではミスタップ率が12%～58%に）

調査はインターネットリサーチで行われ、有効回答数は900サンプル。7インチ～10.1インチのiPad・Androidタブレットユーザーに対して行ったものです。

原則としてタブレットユーザーはスマホ向け表示よりもPC向け表示のほうがいいと思い込んでいましたが、小さなタブレットではスマホ向け表示が好まれる場合もあることに気づかされました。

しかし、気になったのは、スマホ向け表示を好んだ理由に「本文が読みやすかったから」「文字の大きさが適切だと感じたから」が比較的多かったこと。PC向け表示をタブレットで見ると、PCで見るよりも小さく見えてしまうから、スマホ向け表示のほうが読みやすかったということですね。

※IMJ「タブレット端末でのサイトユーザビリティ調査」より

調査でもその点はポイントの1つのようで、さまざまな文字サイズの表示を見せた調査から「タブレットユーザーが読みやすいと感じるフォントサイズは16px」としています。

調査データPDFでは、年代と画面サイズごとにどの文字サイズ表示を好んだかや、ボタンのサイズによる操作ミスの発生率などのデータもありますので、詳しく知りたい人はオリジナルをご覧ください。

Webサイトの文字サイズ、ホントに良いのはどれぐらい？

文字サイズにひっかかったのは、最近、いろんなサイトで文字を読みづらく、拡大して表示することが増えてきたと感じているからです。

スマホで見るときもそうですし、PCでもディスプレイが高解像度になっているからか、標準の文字サイズでは小さくて読みづらいと感じることが増えているのです。

以前に「ワイドディスプレイの普及でWebの文字が大きくなる？」という記事でも書きましたが、同じ16pxの文字サイズを指定していても、24インチの1920×1200ディスプレイでは1文字が約4.3mmの大きさで表示されますが、13.3インチの1440×900ノートパソコンでは約3.2mmの大きさになります。

サイトで指定している文字サイズが変わらなくても、実際に表示される文字は解像度が高くなればなるほど小さくなってしまうのです。そりゃ、ディスプレイの解像度が高くなっていくほど文字を読みづらくなるわけですね（決して老眼のせいではない……ですよね）。

• ワイドディスプレイの普及でWebの文字が大きくなる？

改めて、Webサイトの文字サイズをちゃんと考えるべきときなのかな、と。

もちろん自分はブラウザのズーム機能を使って読みやすくして見ます。でも、ユーザーのなかにはそういう機能を知らない人もいますし、知っていてもいちいち調整するのを面倒に感じる人もいるでしょう。スマホやタブレットでも、いちいちズームする必要があるならば、それはユーザーに優しくないということです。

そもそも、昔から「デザインに凝ったサイトは文字が小さすぎて読みづらいことが多い」というのは言われていましたよね。

IMJさんの調査では「PCサイトの一般的な本文フォントサイズは12px～14px程度」とありますが、タブレットでの閲覧もふまえて、PCサイトでも基本の文字サイズはデバイスを問わず16pxほどはあったほうがいいようです（Yahoo!ニュースや各社ニュースサイトがそのサイズであるように）。

そのうえで、いま考えているのは、PC向けサイトであっても、レスポンシブWebデザインの手法で文字サイズだけ調整するのはいいやり方なのではないか、ということ。つまり、同じPC向け表示でも、解像度が高いデバイスで見ている場合には、少し大きめの文字サイズを基本スタイルに指定するということです。

公共機関のWebサイトなどではユーザーが文字サイズを「大」「中」「小」と選べるようにしているところがありますが、それ以前の基本文字サイズを変えるということですね。

そのうえで、フォームのボタン類も<button>要素を使うようにしてサイズをem指定にすれば、自然と押しやすいボタンになるのではないかと考えています。

Web担のサイトではいろんなデザイン調整をしている部分にどう影響があるのかわからないためすぐにはできませんが、ちょっと試してみようと思っています。

みなさんのサイトでは、イマドキの環境に適切な文字サイズをどう考えていますか？ ご意見や「こうするといいよ」という案があれば、ぜひ教えてくださいませ。