年寄りを困らせる「レスポンシブWebデザイン」

画面サイズのみで“端末の種類”を判断する

「レスポンシブWebデザイン」（以下、レスポンシブ）とは、ブラウザーの画面サイズに応じてレイアウトを変更させるWebページの作り方。パソコンとスマホから同じURLにアクセスし、同じHTMLファイルを開くと、パソコンにはパソコンに適したデザイン、スマホにはスマホに適したデザインが表示されます（中には、タブレット向けデザインを用意しているサイトもあります）。

レスポンシブを採用するサイトは最近増えています。筆者らが毎年調査している大学サイトはスマホ対応を急いでいるサイト群の1つですが、国内211大学のうち13大学がレスポンシブを採用していることが分かりました（「全国大学サイト・ユーザビリティ調査」より。調査期間は2013年7月20日～9月30日）。調査後にレスポンシブへ変更した大学もあり、その数は今後さらに増えるでしょう。海外では米ハーバード大学や英ケンブリッジ大学がレスポンシブを採用しています。

レスポンシブを採用しているサイトかどうかは、パソコンのブラウザーで確認できます。例えば文部科学省のページをパソコンのブラウザーで表示させてから左右に狭めていくと、ある幅でページのレイアウトが切り替わります。その幅より狭い画面サイズの端末は“スマホである”という判断なんですね。興味のある方は実際に試してみてください（Internet Explorer 8以前のブラウザーをお使いの方は、Starbucks Coffee Companyのサイトで試してください）。

ブラウザの拡大機能に反応してしまう

端末の機種を個別に判別するのではなく、画面サイズで端末を分類するというアイデアは、新機種が次々と出るスマホやタブレットに対応する方法としては優れたアイデアです。しかし、一方で問題もあります。実はブラウザーの拡大機能にも反応してしまうのです。

最近の高機能ブラウザーは、拡大機能（ズーム機能）を備えています。近ごろ筆者も、小さな文字が読みにくくなったためよく使うのですが、操作は簡単。［Ctrl］キーを押しながらマウスのホイールを前に回転させるか、［Ctrl］キーを押しながら［＋］キーを押します。Internet ExplorerもFirefoxも、Chromeもこの操作で表示がどんどん拡大します。

ところがレスポンシブのページは、拡大していくとあるところでスマホのレイアウトに切り替わります。拡大するにつれて、ブラウザーの画面サイズが相対的に“狭く”なったと判断してしまうんですね。Starbucksのサイトを拡大するとこんな風になります。

レイアウトが替わると、今まで見ていた文字が画面の外に配置されてしまうこともあります。そのたびにスクロールして探す。見つけても、思ったほど文字が大きくないので、また拡大する。するとまた画面の外に･･････。

つまり、ページ画面を大きくして見たいパソコンユーザーにとっては、ユーザビリティ（使い勝手）の悪いサイトなのです。これが“年寄りを困らせるレスポンシブWebデザイン”の問題点その1です。

スマホでパソコンの画面が確認できない

問題点その2は、スマホ利用者の立場からのものです。

いつもはパソコンでWebサイトを見ていて「外出時に確認の意味でスマホを使う」という人は多いと思います。そうしたとき、筆者などはパソコンで見たレイアウトの記憶を頼りにします。つまり「このページの左下にあった、あの情報」を確認したいのです。

ところがレスポンシブの場合、スマホでパソコンと同じようなページレイアウトは表示されません。強制的にスマホ向けのレイアウトで表示されます。そのため、スマホ向けレイアウトの中で探すわけですが、これが結構な苦労だったりするのです。

また、そもそも「モバイルサイトはパソコン向けサイトとは別で、掲載しているコンテンツも違う（あるいは少ない）」と考えている人は多いようです。そうした人が、モバイルサイトで得られる以上の情報が欲しいからパソコン向けサイトを探すということもあるでしょう。ですが、レスポンシブを採用しているサイトではそれは徒労に終わってしまうのです。

ユーザビリティに配慮した東北大学

さて、前述した2つの問題を解決する方法は果たしてあるのでしょうか。できればレスポンシブをあきらめるのではなく、メリットを享受しつつ問題を解決する改善策を見つけたいところです。

答えの1つは、各ページに「パソコン」と「スマホ」の切り替えボタンを付けることです。パソコン向け表示デザインとスマホ向け表示デザイン、どちらを選ぶのかは（画面サイズで一意に決めるのではなく）利用者に選択させる方法です。

こうすれば、パソコンで拡大機能を使っているときに勝手にスマホ向けデザインに切り替わることはありません。読んでいた文字が画面の外に移動してしまう煩わしさがなくなるのです。スマホでもパソコン向け表示デザインを選べますから、「このページの左下にあった、あの情報」も確認できます。

「それはレスポンシブではない」という指摘があるかもしれません。しかし、制作手法はレスポンシブとほぼ同じです。1つのURLに1つのHTMLファイル、それでいてパソコンにもスマホにも対応するというレスポンシブのメリットはそのまま引き継いでいます。確かに、ブラウザーの幅を動かしてデザインが切り替わる“お遊び”はできなくなりますが、このお遊びを目的に作っているわけではありませんから、実用上は何ら問題ないでしょう。

パソコン向け表示デザインとスマホ向け表示デザインを切り替えるボタンを備えた東北大学のサイト

東北大学のWebサイトでは、既にこの手法を採用しています。聞くところによると、同大学は当初、通常のレスポンシブを採用するつもりでした。ところが、大学内で説明したときに「スマホでもパソコン向けの表示デザインを確認できるようにしたい」という声が高まり、議論した結果、このボタン方式の採用に至ったそうです。

流行のスタイルをそのまま取り入れるのではなく、利用者の使い勝手を考えてきちんと吟味し、改善策を実践する。この姿勢は素敵だと思いませんか。