スマホのブラウザの拡大・縮小を無効にする「user-scalable=no」は、使うべきか否か

スポンサーリンク

乾燥肌でめっちゃ辛い状況な四条せつな(@nuconeco_)です!

少し前から、webデザイナーの中で「”user-scalable=no”は使わないほうが良い」という意見を耳にします。

この「user-scalable=no」というのは、スマホのブラウザで拡大・縮小を禁止するものです。えーと、簡単に言うと「ブラウザをアプリのように表示倍率を固定する」ってことですね!

そもそもは、制作側がデザインを綺麗に見せたり、バグを減らす為に、コードを記述していた場合が多いのですが、最近では反対に「”user-scalable=no”は使わないほうが良い」となってきたのです。どうしてでしょう?

ということで、今回は「”user-scalable=no”は使わないほうが良い」と言われる理由と、使う際の注意点を解説しますね!

“user-scalable=no”のメリット・デメリット

ではまず、“user-scalable=no”をどうやって記述するかを解説しますね。

上記のように、<head>〜</head>タグの中に記述すればOKです!普通のmetaタグですからね。

それでは、本題。この”user-scalable=no”のメリット・デメリットを考えていきたいと思います!

“user-scalable=no”のメリットは少ない

タイトルに結論を書いてしまったのですが、現状、“user-scalable=no”を指定するメリットは、とても少ないのではないかと思います。

思いつくメリットと言えば・・・

  1. 拡大縮小の無効により、表示バグをなくす。
  2. ダブルタップの反応速度を早める。

これくらいでしょうか?

拡大縮小の無効により、表示バグをなくす。

これは、開発者のスキルによるのですが、スマホサイトというのは、PCサイトを構築するよりも、割と面倒なことが多かったりします。

OS依存の問題はもちろん、SafariとGoogle Chromeで違う・・・なんてことも、日常茶飯事です。もちろん、リセットCSSは使うんですけどね。それでも、厄介な問題ではありますね。

ダブルタップの反応速度を早める。

拡大縮小を無効にすることにより、デバイスが「これはダブルタップだ!」と認識する時間を短縮できます。

これが、ユーザーへのパフォーマンスやユーザビリティにつながると言えばそうかもしれません。イライラは減ると思うけど、その分拡大縮小できないイライラも付いてきますが・・・

“user-scalable=no”を使わない方が良いかも?

逆に、”user-scalable=no”を指定しないメリットの方が多いと思ってしまうんですけど、それが以下の理由です!

  1. 拡大縮小が可能による、アクセシビリティの維持。
  2. 地図等での、ユーザビリティの向上。

特に上記の2つが挙げられますね!

拡大縮小が可能による、アクセシビリティの維持。

これは先程の逆になるんですけど、拡大縮小が可能ということは、お年寄りや視力が悪い人でも、「拡大して閲覧できる」ということを意味します。

いわゆる「アクセシビリティ」というやつですね。

当たり前ですが、ユーザーがどの画面の大きさの端末で使用しているかわからないですし、これは考えなければいけない事項の1つです。

地図等での、ユーザビリティの向上。

“user-scalable=no”をすると実は、画像も拡大できなくなってしまいます。

なので、画像や地図に書かれた文字を見ようとしても、拡大も出来ず、対処不可能となってしまうのです。

これもユーザーにとってはフレンドリーではないですよね・・・

やはり、”user-scalable=no”は使わないべき!

やはり使わない方がいい?

やはり使わない方がいい?

結論からすると、”user-scalable=no”は使うのはおすすめしませんね。ユーザーへのデメリットが大きい気がします。

もちろん、”user-scalable=no”が「悪」とは言い切れません。採用しているサイトもありますしね!

iOS10では”user-scalable=no”は無効?

iOS10のSafariでは、この”user-scalable=no”はOS(ブラウザ?)側で「無効化」されており、仮に設定したとしても、拡大・縮小動作ができるようになってしまうとのことです。

Appleの考えは、やはり”user-scalable=no”は「ユーザビリティを損なう」ということでしょうか?どちらにしても、”user-scalable=no”を記述する際は、気をつけなければならない事項が増えましたね・・・

まとめ

ということで、「”user-scalable=no”は使わないほうが良い」という意見について考えてみました。

もちろん、”user-scalable=no”を指定するメリットもありますけど、使う弊害も多い気がします。

こればっかしは、個人の判断ですが、”user-scalable=no”はあまりおすすめできないという結論に至りました。

スポンサーリンク

コメントを残す