2.IDEA

JP only

user-scalable=noを使う理由と弊害(スマホのviewportを見直す)

最近、web界隈で「"user-scalable=no"は使うな」という声をよく聞きます。user-scalableといえば、スマホサイトや、レスポンシブウェブデザインを使ったサイトを制作する際のviewport指定の例で、以下のようなものを見かけたことがあるかと思います。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

簡単に言うと、「ページをデバイスの幅で表示させて、そこからいっさい拡大・縮小はできない」という指定です。この「拡大・縮小を不可能する」指定方法が、サイバーエージェントが監修した、「フロントエンドエンジニア養成読本」で紹介されたこともあり、主にアクセシビリティ推進派の人たちが「それはどうなの」と異論を唱え、物議を醸してい(るように見え)ます。

そこで、この記事では、user-scalable=noを使う意味(メリット)と、使う上での弊害(デメリット)について簡単にお話ししたいと思います。

目次

  1. user-scalable=noを使う理由(メリット)
    1. スマホアプリっぽくするため
    2. Android 2.3でfixedを有効にするため
    3. タップの反応を早めるため
    4. (今はもうない課題)iOS5以下で縦持ちから横持ちにしたときに拡大されるのを防ぐため
  2. user-scalable=noを使う上での弊害(デメリット)
    1. アクセシビリティを損なう
    2. ユーザビリティを損なう
  3. viewportの最適な方法
  4. 参考

1. user-scalable=noを使う理由(メリット)

user-scalable=noを使っている人の多くは、「スマホサイトの作り方の記事に載っていたから」や「有名なサイトがそうしていたから」など、実質的な理由よりもむしろ「業界がそう言ってっから!」という理由で使っているような印象を受けます。
もう一度、その利点について見直してみましょう。

1.1. スマホアプリっぽくするため

スマホサイトは、スマホ本体やスマホアプリのUIを意識してデザインされることが多いかと思います。それらが、スマホの操作に最適化されているためです。

その一環で、スマホ本体やスマホアプリでは拡大や縮小ができないからスマホサイトでもそれに準じて拡大・縮小不可にしたほうが良いのでは、という理由から、user-scalable=noを使用している人がいても不自然ではないです。

1.2. Android 2.3でfixedを有効にするため

Android 2.3ではuser-scalable=noを書かないと、position:fixedが効かないようです。
ただ、私個人としては、スマホでfixedを使うことには以下の理由から否定的です。

  • ただでさえ狭い画面を狭めてしまう(横持ち時のfixedヘッダーなんか最悪です)
  • android、iOSのfixedへのサポート状況がまちまちで、対応漏れが怖い
  • ↑への対応コスト
  • スマホを使っていて「fixedで良かった、便利」と思ったことがない

1.3. タップの反応を早めるため

これのみ、はっきり「メリット」と言い切れるものですね。

拡大縮小が出来る状態では、ダブルタップの操作が有効になっています。ダブルタップだと認識されるのは、タップされてもう一度タップされるまでの間隔が300ms以内のときです。

つまり、リンクやボタン等はタップしたあと300ms待って反応します。これは、人が「反応が遅れている」と感じるに十分な間隔で、完璧に快適な操作性とは言いがたいです。

そこで、拡大縮小を禁止することで、ダブルタップの操作を無効化して、タップの反応を早めることができます。詳細は、以下の記事をご覧ください。

1.4. (今はもうない課題)iOS5以下で縦持ちから横持ちにしたときに拡大されるのを防ぐため

iOS5以下で、以下のようなviewport指定をしているとき、縦向き(ポートレート)から横向き(ランドスケープ)にすると、1.5倍拡大される(というより320pxのviewportを保つ)仕様があります。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

これも、拡大・縮小を禁止(maximum-scale=1.0,minimum-scale=1.0)にすることで解決できます。が、以下のような理由から、そもそもそれほど課題ではない気がします。

  • 大前提:iOSをアップデートしてないやつが悪い
  • ピンチイン(縮小)の一手間だけで、通常通り閲覧出来る

※iOS6以上でも、縦から横に持ち替えると文字が拡大されますが、-webkit-text-size-adjust:100%を使えば解決できます。ちなみにこのCSSは、normalize.cssでも使われています(CSS内解説コメントで、without disabling user zoom(ユーザーによるズームを使えなくすること無しに)と意識的に書かれていたりします)。

2. user-scalable=noを使う上での弊害(デメリット)

こちらが本題です。主に、拡大を禁止することにデメリットがあります。

2.1. アクセシビリティを損なう

単純に、高齢者や視力の落ちた人に対して「拡大できません」と言うのは酷な話かと思います。ありそうな反論として、「スマホ本体の文字サイズ設定で大きく出来るから良い」というのが挙げられますが、絶対値(pxなど)でデザインされているものには適用されない上、拡大されたとしても十中八九デザインが崩れます。

またその反論は、ウェブの大きな2つの役割「探す」と「読む」のうち、「読む」にしか焦点を当てていないと言えます。
わかりやすいように、デモを用いて説明します。

以下の2つのリンクを、あなたが今求めているものを「イベントの開催日時と時間」という体で、スマホで閲覧してみてください。

  1. user-scalable=noを使わない場合
  2. user-scalable=noを使ってかつ拡大した場合

前者は、見出しだけ見てどこに何の情報があるかを把握し、見たい情報だけズームインすることができるのに対し、後者は、すべての文字が読みやすいものの、一番後ろのコンテンツを表示するまで延々とスクロールする必要があります。
特定の情報を得たい人にとっては、すごく煩わしく感じるかと思います。

実は、スクリーンリーダーでも、適切な見出しによって、自分が望んでいる情報に辿り着きやすくなります。(スクリーンリーダー利用者の見出しレベルの便利さについての調査結果

情報へのアクセスにハンデを抱えている人たちは、短時間に多くの情報を得ることが出来ないため、できるだけ情報を「選ぼう」とすると思います。そういった「情報の取捨選択」を促すためにも、拡大・縮小を禁止にすべきではありません。

2.2. ユーザビリティを損なう

先ほどのデモを見ていて気づいた方もいると思いますが、一般ユーザーでもuser-scalable=noで困るケースがあります。

レスポンシブウェブデザインでよくある、縮小された画像です。
写真やイラストだったらいいんですが、テキストを含む画像は縮小されることによって読めなくなります。その上、拡大ができないのでお手上げです。

デモの中では、地図に書かれた文字がほとんど読めなくなっているかと思います。

実際に読めなくて困った経験が何回かあるので、是非、意識してもらいたいです。

追記:先日、あるサイトでuser-scalable=noを使用していたために、十分なスペースが取られていないナビゲーションの誤タップを連発するという経験をしました。不快でした...

3. viewportの最適な方法

結局、デバイスごとにサイズを切り替えて、縮小はさせないようにするかたちが最適かと思います。拡大後、元に戻すときに必要以上に小さくしてしまう可能性がありますからね。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

実はこのviewport指定は、googleのアクセシビリティガイドラインページで使われているものです。googleがやってるなら間違いないだろう、とちょっと他力本願気味ですが。

いずれにせよ、アクセシビリティはもっと考えられるべきです。
よく「でも、そういう人たちってウェブ見なくない?」という意見を聞きます。しかし、その原因は「ウェブが情報を得にくいところ」と認識されているからだと私は思います。だから、アクセシビリティを浸透させて、その認識自体変える必要があると考えます。

ウェブの未来を作るのは、今ウェブに関わっている私たち以外にいないと思います。誰もがアクセスできるウェブを実現するために、アクセシビリティを考えることは現代のウェブ制作者の最低限の義務だと考えています。

4. 参考