乾燥肌でめっちゃ辛い状況な四条せつな（@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”を指定するメリットは、とても少ないのではないかと思います。
思いつくメリットと言えば・・・
- 拡大縮小の無効により、表示バグをなくす。
- ダブルタップの反応速度を早める。
これくらいでしょうか？
拡大縮小の無効により、表示バグをなくす。
これは、開発者のスキルによるのですが、スマホサイトというのは、PCサイトを構築するよりも、割と面倒なことが多かったりします。
OS依存の問題はもちろん、SafariとGoogle Chromeで違う・・・なんてことも、日常茶飯事です。もちろん、リセットCSSは使うんですけどね。それでも、厄介な問題ではありますね。
ダブルタップの反応速度を早める。
拡大縮小を無効にすることにより、デバイスが「これはダブルタップだ！」と認識する時間を短縮できます。
これが、ユーザーへのパフォーマンスやユーザビリティにつながると言えばそうかもしれません。イライラは減ると思うけど、その分拡大縮小できないイライラも付いてきますが・・・
“user-scalable=no”を使わない方が良いかも？
逆に、”user-scalable=no”を指定しないメリットの方が多いと思ってしまうんですけど、それが以下の理由です！
- 拡大縮小が可能による、アクセシビリティの維持。
- 地図等での、ユーザビリティの向上。
特に上記の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”はあまりおすすめできないという結論に至りました。
コメントを残す
コメントを投稿するにはログインしてください。