スマートフォン用サイトでビューポート設定(ピンチ可)は必須にして欲しい

更新日:2015/6/19 公開日:2015/06/17 iPhone, インターネット, スマホ

この記事は2015年6月19日に最終更新したものです。
現在は状況が異なる可能性がありますのでご注意ください。

この記事が気に入った方は「いいね」してくださるとヾ(*≧∀≦)ﾉﾞ嬉ｽｨ～★♪です。

この記事を読むのに必要な時間は約 5 分です。

こんにちは。

自分はWEB開発者では無いド素人ですが、Blogと複数のサイトを運営しています。

デザインセンスは皆無ですが、気を付けていることがひとつだけあります。

それは、スマートフォン用に作るページには、必ず、ビューポートの設定をズーム可(ピンチ可能)にしている事です。

具体的には、

<meta name=”viewport” content=”width=320, minimum-scale=0.25, maximum-scale=1.8″>

としています。(iPhone5まで)

または、

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

と指定しています。

これで合っているか自信が無いのですが、自分のiPhoneとAndroid端末で見たときには、ピンチすることができます。(user-scalableをあえて設定していない)

何故、これに拘るのかというと、

「老眼」

だからです。

ピンチが出来ないと小さな文字のサイトは目がすぐに疲れてしまうのです。

WEBサーフィンしていると、一見、良く出来ているサイトにも、ピンチ出来ないサイトが数多くあります。

それも大手のサイトです。

多くのメジャーサイトは、次のように設定してあり、ユーザーに拡大、縮小の選択肢を無くしています。

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

Yahoo! Japan

<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0″>

Google

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

Twitter

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″/>

Facebook

<meta name=”viewport” content=”initial-scale=1,maximum-scale=1,user-scalable=no” />

Amazon

<meta name=”viewport” content=”width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no”>

楽天

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

多分、これには理由があるからなのでしょうが、出来ればピンチ可能にして貰いたいですね。

端末を大きく(iPadとか)したり、端末の設定で文字を大きくしたりすれば済むことですが、文字以外にも個々で自由に大きさを変えられたほうが便利なことが多いのではないかと思います。

ぜひ、サイト開発者の皆さんには、見る人に優しいサイト作りを心掛けて欲しいと思います。