「平成25年度　青少年のインターネット・リテラシー指標等」の公表（総務省）

平成25年6月から7月にかけて、全国24の公立・私立の高等学校等において、約3500名の１年生相当を対象にテストを実施。併せて、利用している機器やトラブル経験の有無等についてアンケートを行い、クロス集計を実施。（N=3512）

・青少年の99％がインターネット接続機器を保有
・スマートフォン保有者は昨年度(59％)から大幅に増加(84％)
・インターネットに接続する際、スマートフォンを最もよく利用する青少年が大幅増(48％→75％)

出所：総務省

その一方で、最近の日経BPコンサルティングの調べによると、高校生の閲覧者も多いであろう「大学Webサイト」のスマホ対応率は意外にも低く、【48.8%】に過ぎないということも明らかになりました。

大学Webサイトの使いやすさ1位は福岡工業大学 スマートフォン対応の大学は5割、うち1割は「メニューページだけ」（日経BPコンサルティング）

スマートフォン（以下、スマホ）の画面に合わせてデザインしたページを用意している大学は48.8％だった。ただし、このうち10.4％にあたるサイトでは、トップページを含むメニューページだけがスマホに対応。新着情報や入試情報といった情報ページ（コンテンツページ）はほとんどがPC用ページのままだった。

大学サイトにはスマホからのアクセスが急増しており、大学もこれに応えるようにスマホ対応を急いでいる。

出所：日経BPコンサルティング

大学のWebサイトなどは、利用者の年代や使うシチュエーションを考えると、むしろPCよりもスマホからのアクセスの方が多くてもおかしくないのではと思います。

そこで今回は、主な大学のWebサイトをスマホで確認し、現時点でそれぞれがどんなスマホ対応をしているのか確認してみました。以下の画面キャプチャは2013年11月現在のものになります。

国内の国立大学

まず初めに、いわゆる国内最難関校である【東京大学】【京都大学】【東京工業大学】【一橋大学】をチェックしてみました。しかし残念なことに、スマホ対応ページが用意されている大学は「ゼロ」という驚くべき結果となりました。

もしかしてトップページはPC向けだけれども、どこかにスマホ対応ページへのリンクがあるのでは？と丹念に探してみましたが、上記4校ともそうしたページを見つけることはできませんでした。

またどのサイトも画像や見出しの大きさにメリハリがなく、いわゆる「ジャンプ率」の低いデザインであるため、ピンチインで拡大しようにも、何の情報がどこにあるのか見当がつきにくくなっています。

東工大は、かろうじて右上に「入試情報」「アクセス」「資料請求」などへのリンクが大きめに掲載されていますが、クリックした先は引き続きPC向けの非常に見にくいページでした。

国内の私立大学（早慶上智）

次に私立の雄、【早稲田大学】【慶応義塾大学】【上智大学】を見てみます。この中では、早稲田と上智の2校がスマホ対応ページを用意していました。

早稲田、上智とも、画面下部にスクロールに追随するメニューバーを用意しており、そこには交通アクセスやFacebookページへの案内を表示しています。またページ右上の目立つところに、はっきりとPCサイトへの切替リンクもついているため、もしPCサイトに用があった場合にも困りません。

一方で慶応は、先の国立勢と同じく、スマホ対応ページは探しても見つかりませんでした。

国内の私立大学（MARCH）

私立大学をさらに見ていきます。いわゆる「MARCH」と呼ばれる【明治大学】【青山学院大学】【立教大学】【中央大学】【法政大学】です。

　
明治大学は、探してもスマホ対応ページの用意はありませんでした。ただ右側に掲載したとおり、学内の情報提供用の「iMeiji」という公式アプリがあるようで、そちらの出来はなかなかよさそうです。

　
青山学院大学は当初PCサイトのみかと思いましたが、よくよく見てみると、ページのフッターに小さな小さな文字でスマホ対応ページへのリンクが見つかりました。ちなみに「青山学院大学」で検索した際の検索結果ページには、スマホ対応ページへのリンクが出てきておらず、せっかく用意されたこのページも、自力で辿りつく人は少ないでしょう。

立教大学は、最初からスマホ対応ページが表示されました。これはMARCH内で唯一です。

　
中央大学は、最初はPC向けページが表示されましたが、最上段のリンクをタップすればスマホ対応ページに切り替えができました。切り替え後は、早稲田や上智と同じような作りになっています。

　
法政大学は、青山学院大学と同じ対応状況となりました。最初はPC向けページが表示され、スマホ対応ページへのリンクはかなり下の方にあり、通常の検索結果にも出てきません。またPC向けサイトに戻るためのリンクはファーストビューになく、ページの一番下に設置されていました。

海外の大学

参考として、【ハーバード大学】【オックスフォード大学】【マサチューセッツ工科大学】という海外の名門大学もチェックしてみます。

　
ハーバードは最初からスマホ対応ページが表示されました。そして上部に見えるリンクをタップすると、右のようなまた違ったタイプのスマホ対応ページが用意されていました。

　
オックスフォードは、最初は非常に見にくいPC向けサイトが表示されました。スマホ対応ページへのリンクを探したところ見つかりませんでしたが、改めて「oxford mobile」と検索したところ、右のような対応ページが表示されました。

　
MITは、初めてアクセスした際に「おっ、もしかしたら対応している？」と思いましたが、横にスクロールできる通常のPCサイトでした。スマホ対応ページへのリンクも見つかりませんでしたが、オックスフォードと同様、「MIT mobile」で検索したところ、右のような対応ページが見つかりました。海外のスマホ対応ページは、アイコンを並べたデザインが主流なのでしょうか。

また明治大学のように、MITのアプリも提供されているようです。

PCサイトとスマホサイトは、ユーザーや利用シーンがかなり違うので注意！

今回は全ての大学をチェックしたわけではありませんが、国立と私立、日本と海外でスマホ対応の様子が少しずつ違っていることが改めて確認できました。特に上述の国立4校がスマホ対応をしていなかったり、せっかく用意したスマホ対応ページも目にすることができないケースがあったのは残念に思いました。

冒頭で取り上げたように、今や高校生や大学生は全員がスマホを持っているといっても過言ではありません。志望校を選ぶのに、受験会場で、学内で最新情報を得るために等、かなり特徴のある利用シーンが思い浮かびます。またもうすぐお正月を迎えますが、風物詩である「箱根駅伝」を見ながら集まった親戚が各大学をスマホで検索というシチュエーションもありそうです。

大学サイトのように、PCとスマホのユーザーや利用シーンはかなり異なる場合があります。スマホ対応ページを用意する際は、ただPCサイトのコンテンツを羅列するのではなく、こうした利用シーンをしっかり把握したうえでデザインしたいですね。

先日、教室に第3世代iPadがデモ機として導入されました。

こちらでもiPad購入のお手伝いを行っているのですが、相変わらず引き合いが多いです。

そして年末にはWindows8＆Surfaceも発売されて、ますます「マウスを使わないフルブラウジング」待ったなし！といった様相を呈してきました。

こうしたWebサイトを利用する環境の変化は、「Webサイト制作の常識」にも徐々に影響を及ぼしつつあります。

そこで今回は、ディレクタや制作関係者が心得ておくべきこうした変化による影響とその対策をリストアップしてみました。今後はこちらのポイントを意識して、『タブレットフレンドリー』なサイトを目指しましょう！

タッチ操作に起因するもの：
・ターゲットの大きさは最低「1cm × 1cm」
・ブロック要素全体にリンクを設定する
・リンクの有無や遷移先が見ただけでわかるように
・マウスオーバーアクションに頼らない　etc.

ディスプレイ形状に起因するもの：
・「引いた絵」でもよくわかる、ジャンプ率の高いデザインに
・ファーストビューが下方向に長くなる
・縦に長いコンテンツが許容されやすい　etc.

ターゲットの大きさは最低「1cm × 1cm」

ターゲットとなるボタンやリンクが小さく隙間なく配置されたレイアウトでは、ユーザーはそれをタップするのに必要以上に気を遣ったり、押し間違いが発生しやすくなります。こちらは「FatFinger問題」と呼ばれ、よく知られているところです。

Yahooのトップページには、ところどころ指で押すのが難しい部分が見つかります。

対策としては、適切なリンク領域を確保することに尽きます。ちなみにニールセンノーマングループの調査では、実際の画面上で「1cm x 1cmは確保したい」と述べています。

プルダウンは横に長く作る

前述のターゲットの大きさの話ともかかわりますが、プルダウン、ラジオボタン、チェックボックスなどのUIパーツも、PCサイト向けに作ったものは非常に小さく表示されてしまい、タブレット端末においてそのまま操作するのは困難です。

こちらは、例えばプルダウンであれば横幅を長めに設定するだけでも、ターゲットが完全に指で隠れてしまうことを防げるので、タップ位置の認識がしやすくなり効果的です。

ベルメゾンの商品詳細ページのプルダウンは、横に長くなっています。

ブロック要素全体へのリンク設定

実際にタブレット端末でブラウジングしていて有効だと感じるのは、Appleやフェンリルのサイトで見られるように、ブロック要素全体にリンクを設定してしまうことです。

大きなビジュアルとどこをタッチしても反応する安心感は、ブラウジングの体験を変えてしまっていると思います。

リンクの有無や遷移先が見ただけでわかるように

タッチデバイスでは、ターゲットにマウスオーバーすることができません。
そのため、リンクかどうかの判別が難しくなります。

ちなみに初心者の方がiPadを使っているのを見ると、リンクだと勘違いしたところをグッと押し続けた結果、「選択」状態になって慌ててしまうパターンをよく目にします。

特に、画像リンクの有無はわかりづらいので、デザインに立体感をつけたり、テキストでそれがリンクであることを補足するなどしてうまく対応しましょう。

さらに地味なところでは、リンクにマウスカーソルを合わせたときにブラウザの隅に出る「リンク先のアドレス」も、タッチデバイスでは事前に確認することができません。

リンク先は外のサイトなのか？はたまたPDFなのか？こちらも補足テキスト等で、ユーザーが予測できるように十分に説明しておく必要があるでしょう。

マウスオーバーを用いたナビゲーションを避ける

マウスオーバーを利用したナビゲーションも気をつけたいポイントです。
Web担当者フォーラムの一部のナビゲーションでは、下のようにマウスオーバーを利用しないと到達できないページが存在します。

対策としては、こうしたギミックの仕様を避ける、または第一階層ナビゲーションにもしっかりリンクを設定しておき、第二階層以降はそのページから遷移させるしかありません。

「引いた絵」でもよくわかる、ジャンプ率の高いデザインに

iPadのディスプレイは9.7インチ。それに対して通常のノートPCは13-15インチのことが多いです。しかもiPadは縦方向に持って使うことが多いため、サイトの各要素はPCで表示するよりも小さくなってしまいます。

感覚としては、PCのブラウザの表示を「75%」くらいに縮小設定したときの見え方に近いと思います。

対策としては、各要素を大きくしたり、見出しと本文の大きさのメリハリをつけて、「ジャンプ率の高いデザイン」を目指すのがよいでしょう。

ファーストビューが下方向に長くなる

前述の項目とも関係しますが、これまでPCで考えてきた横長のディスプレイに比べて、かなり下の方までがファーストビューに含まれます。横960pxのサイトであれば、縦1100-1200pxまでが「タブレットファーストビュー」ということになります。

Yahooの例ですが、左側がPC、右側がタブレット端末のファーストビューです。

これを想定していないと、iPadで見たときに下が大きく余ってしまい、コンテンツのアピール機会の損失や、アンバランスな感じを与えてしまうことになります。

NAVERのサイトをタブレット端末で見ると、フッターが浮き、空白が目立ちます。

縦に長いコンテンツが許容されやすい

iPadの場合、連続してフリックを行うとスクロールスピードが加速されて、相当速く最上部や最下部に到達することができます。

スクロール操作が容易になると、縦に長くなるコンテンツが受け入れられやすくなり、またスクロールに追随するような固定ナビゲーションの必要性もなくなってきます。

これにより、今までのようにファーストビューに要素を細かく詰め込むレイアウトから、スクロールの利用を前提とした縦方向に長く余裕のあるレイアウトへと、トレンドがさらに加速すると考えらえれます。

実際、教室でシニア層の方々のネットの使い方を見ていると、いわゆる"楽天メソッド"的な縦に長いコンテンツは、スルスルと上手にスクロールして順番に内容を読んでおり、有効な見せ方だと感じています。

その他考慮すべきポイント

・リンクボタンや見出しは画像からCSSへ

モバイル通信環境、Retinaディスプレイなどの高解像度化を考えると、画像をCSSで代用できるところは積極的に置き換えていった方がよいでしょう。
幸いほとんどのタブレット端末のブラウザは最新のCSSに対応しており、買い替え頻度も通常のPCより高いと考えられます。

・Flashは原則使用しない

こちらも以前から言われていることですが、特に老舗ECサイト等では、いまだにFlashをトップに掲載しているところも多いです。

やずやのサイトはFlashでバナーを回していますが、タブレットでは機能していません。

・ライトボックスを重要なフローに用いない

タッチデバイスでは、ライトボックスなどのレイヤー表示は挙動が不安定になることがあります。特に商品の購入や申し込みなどのクリティカルな部分に利用することは避けた方がよいでしょう。

楽天トラベルのページでは、予約日の選択時にレイアウトが壊れてしまっています。

まとめ

これまで見てきたポイントをまとめると、今後は

・各要素の大きさや余白を十分にとり、
・タップ後の挙動が見るだけでも予測しやすく、
・縦方向に長いページ

の需要が高まってくるはずです。

特にシニア層や子供、ITに詳しくない女性などのタブレット端末人気を見ていると、近い将来、こうしたユーザーが集まるサイトでは、マウスを使う端末よりもタブレット端末からのアクセスの方が多くなるかもしれません。

そうしたとき、「PC向けサイトをタブレット端末にアジャストする」のではなく、「タブレット端末でこそ美しく使いやすいサイト」を最初から目指して制作する必要が出てきます。

今回ピックアップしたポイントが、少しでも将来のサイト制作のヒントになれば幸いです。

関連情報

• iPadに最適化したサイトがつくれるかもしれない5つの方法（基本編） - EC studio デザインブログ
• 011号：要点解説！ヤコブ・ニールセンのiPadユーザビリティ調査報告書 ? 情報提供ブログ「を！」 | シンクジャム
• iPadならではの特徴的なユーザ行動について (ユーザビリティ実践メモ)
• あなたのサービスは大丈夫？シニアがiPadを使ってみました（Web編） | マミオン有限会社
• 専用サイトじゃなくてもいいの？中小ECサイトのためのスマホ対応策のポイント | マミオン有限会社

しかし、今は忙しくて手が回らない！
新しく人を雇える訳でもないし、外注したらお金が…。

今回は、そんなオーナーさんやデザイナーさんのために、
最低限のユーザビリティを確保した
費用対効果の高いスマホ対応方法について考えてみましょう。

一般的なスマホユーザビリティのポイント

スマホ対応の方法として、大きく分けて「スマホ専用サイト」「アプリ化」の2つが考えられますが、両方に共通して用いることができるユーザビリティのポイントが各所で紹介されています。

• 【スマートフォン向け開発】ユーザビリティチェックリストを作ってみた
• Webサイトのスマートフォン対応 7つの基本ルール | Web担当者Forum
• iPhone専用サイトにおけるユーザビリティ調査～ユーザーにとって使いやすいiPhoneサイトとは？～スマートフォンの特徴である「指を使っての操作」を考慮した制作がポイント / IMJモバイル
• 「スマートフォンのインタラクションデザインに関するユーザビリティ調査」を発表～最も支持されるJavaScriptの表現方法とは～ / IMJモバイル

またスマホ対応サービスのユーザビリティランキングも発表になっているので、こちらの上位サイトから学べることも多いでしょう。

• Webユーザビリティランキング2012スマートフォンサイト編｜トライベック・ストラテジー

しかし、こちらで紹介した内容は、どれも「スマホ専用サイト」や「アプリ」制作の際に役立つようなポイントが中心です。

自分のお店用のアプリを作るなんて無理だし、スマホ専用サイトを作るのだって、一からデザインしたらいつまでかかるかわからない。さらには、最近気になるiPadも専用サイトを作らなければならないのでは…？

こう考えると、ちょっと気が重いですね。

スマホ対応する必要、ホントにありますか？

スマホ対応について考える時に、まず大事なのは、「何のために」「誰のために」行うのか確認する事です。

基本的に、画面が小さく通信速度も遅いモバイル環境で、商品を買うという行動はなかなか起こしにくいものです。

それでもサイトに来るユーザーは、一体どこから、何を求めて来るのでしょう？
アクセス解析で、モバイルから流入してきた人の参照元や検索ワードをぜひチェックしてみてください。

またユーザーのタイプも、以下のように大別できます。
・パソコンは持っておらず、スマホが唯一のネットの入り口という人（主婦、学生など）
・普段は家のパソコンを使うが、たまたま外出先から訪問した人（サラリーマンなど）

特に後者向けで、緊急性のないもの、高額なもの、検討に時間を要するものなどは、費用対効果の面から無理なスマホ対応は行わなくてもよいかもしれません。

まずはスマホ対応の必要性やターゲットをしっかり確認した上で、次のステップに進むことが大事です。

必ずしもスマホ専用サイトを作る必要はない

もちろん、専属のデザイナーやエンジニアの方の十分な工数があれば、各機器に対してバッチリ専用サイトを用意するのもよいとは思いますが、実際にはなかなかそうもいきません。

そこでご紹介したいのが、こちらのAppleのサイトに関する記事。

“今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。予算がないとか、ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。”

pxt | 考察：Appleはスマホサイトを作らない。

iPhoneを開発したApple自身は、特別なスマホ専用サイトを作っていないんです。
それでも、しっかりとユーザーの目的を達成させている。
つまり、「スマホ対応」自体を目的にするのは良くないということです。

だからこそ、最初のステップの「何のために」「誰のために」の定義が必要なのです。

例えばネットショッピングにおいては、その店の全体の雰囲気や品ぞろえを確認したい人は、まず「引いた絵」で全体を眺め、必要に応じて興味のあるところにズームアップできればよいと思うでしょう。

一方で、すでに買うものが決まっていたり、毎回利用しているサイトの場合は、検索やショートカットで効率的に間違いなく購入手続きを済ませたいと思うでしょう。

あなたのサイトは、どういった使われ方を想定していますか？

「うちは、スマホ専用まで用意しなくてよさそうだな」
そう考えていただいた場合でも、最低限のユーザビリティには配慮する必要があります。

ここからは、一般サイトをスマートフォンで見てもらう際に、気をつけておくべきポイントを整理してみましょう。

「引いた絵」でも、どこに何があるか見当がつくか？

スマートフォンで一般サイトに来訪した場合、最初にサイト全体の絵が表示されると思います。しかもPCで見る場合よりも、画面が縦長になっています。

この状態で、「商品はこの辺に並んでいるな」「このエリアはメニューだな」「検索フォームはあそこにあるのか」といった“全体の地図”が把握できるのが理想です。

そのためには、見出しやタイトル、重要なボタン類などを大きく表示し、一般的に「ジャンプ率が高い」と言われる状態を目指すのがよいでしょう。

情報にメリハリがないと、どこを拡大して見るべきなのか、スマートフォンから見ているユーザーには判断がつきません。引きの絵で全体像が把握できれば、ユーザーは必要に応じてエリアを拡大して使ってくれるでしょう。

　　
左2つのメンズファッションのフリークスストアのサイトは、特にスマホ対応を行っていませんが、引きの絵でも画像や見出しがしっかり確認でき、スッキリした印象です。
一方で右のヨドバシカメラのサイトは、各ブロックを拡大するまで内容がわかりづらく、全体的に雑多に見えます。

ダブルタップ時に、ボタンの大きさや余白が適切になるか？

多くのスマートフォンでは、サイトの任意の位置をダブルタップすると、そのブロックに合わせて表示が拡大されます。
そのとき、中の要素は操作しやすい大きさになっているでしょうか？

スマートフォンで難しいのは、細かい部分をタップする作業です。
もしダブルタップでブロックを拡大しても、まだその中にあるプルダウンやフォーム、ボタンなどが小さいままだったり、要素同士が詰まっていたりすると、操作ミスやストレスの原因となってしまいます。

こうした細かいインタラクションが必要とされる部分は、サイドバーなどの幅の狭いブロックに配置し、ダブルタップですぐに適切な大きさで表示されるようにしておきたいところです。

　
左側のJTBのサイトでは、左カラム内に絞込み用のプルダウンが配置されているので、その近くをダブルタップすれば適度な大きさに操作パネルが拡大されます。
一方で右側の旅行社では、絞込み用プルダウンが中央の幅広いブロック内にあるため、ダブルタップで拡大しても十分大きくなりません。

また要素の適切な大きさの基準として、Appleが発表しているヒューマン・インタフェース・ガイドラインが参考になります。

iOS Human Interface Guidelines（大容量PDF注意）

オーバーレイ表示で不具合が出ていないか？

商品のサムネイルをクリックすると大きな画像がオーバーレイ表示されることがありますが、この方式はあまりスマートフォンでの閲覧に適していません。

スマートフォンでオーバーレイ表示を行うと、スクロールの挙動がおかしくなったり、拡大縮小の操作時に不具合が出たり、レイアウト崩れを起こすなど、その他思いがけないエラーが発生することがあります。

　
前述したフリークスストアのサイトでは、商品拡大のオーバーレイ表示をすると、拡大縮小をした際に挙動が不安定になってしまいます。

ボタンやリンクが押せそうに見えるか？

こちらは、スマホ専用サイトやアプリと共通のポイントです。
スマートフォンでは、マウスオーバーのアクションができないので、最初の見た目で「押せるか押せないか」を判断するしかありません。

下線や色味のないリンクテキスト、ボタンらしく見えないボタン、一般画像と見間違えるバナーなど、デザインを見直すべき部分を確認しておきましょう。

モバイル通信環境でもストレスなく見られるか？

ブロードバンドの普及に伴い、昔ほどサイトの容量は気にされなくなってきました。しかしモバイル環境については、依然としてサイトの軽量化は重要なテーマです。

ほとんどのスマートフォンは最新のCSSにも対応していますので、メンテナンス性のことも考慮し、画像の代わりにCSSを積極的に使ってデザインしていきたいところです。

• Lesson 11 応用編(2) ユーザビリティ向上のためのUIデザイン - HTML5＋CSS3 次世代Webコーディングの超・最新動向・Smartphone編 - MdN Design Interactive
• Lesson 12 応用編(3) スマートフォン向けパーツデザインと実装 - HTML5＋CSS3 次世代Webコーディングの超・最新動向・Smartphone編 - MdN Design Interactive

Flashからの脱却

マミオンのサイトでは、スマートフォンからのアクセスのうち、iPhoneが半分以上です。

そのiPhoneでは、ご存知のようにFlashコンテンツは表示できませんので、JavaScript、HTML5などの代替手段を用意しておきましょう。

まとめ：スマホ対応目的と、改修優先度を意識しよう

• 「引いた絵」でも全体像がわかるように、各要素の大きさを調整する
• プルダウンや検索フォームなどは、幅の狭いサイドバー内に置く
• オーバーレイ表示は見なくても問題ないものに限定する
• ボタンやリンクは押せることがわかるようにデザインする
• HTML5、CSS、JavaScriptでサイトのスリム化、脱Flash

以上、今回は「最低限のユーザビリティ」として上記のポイントに絞ってご紹介しましたが、何より一番大切なのは、冒頭でも触れた「どういう目的で、誰のためにスマホ対応するのか」を考え抜くことだと思います。

それを考えたうえで、専用サイト化するか否か、するのならどこまでやるのか、しないところのユーザビリティはどう確保するか、などを順番に検討していくべきです。

またスマホ専用サイト化の優先度としては、比較的デリケートでタップする回数の多い「会員登録」や「カート」「決済」ページから取り組むとよいのではと思います。

マミオンでは予算や規模、サイト目的に合ったスマホ対応のアドバイスを行っていますので、ぜひご相談ください。

関連情報

• スマホ対応サイトのユーザーインターフェースについての考察 - downstairs lab
  //www.stairsdesign.jp/blog/2012/02/post-3.html
• スマートフォンユーザが検索するキーワードとスマホサイトの必要性 | パシのSEOブログ
  //www.jweb-seo.com/blog/wordpress/2011/12/12/2565
• iPhone、iPadのユーザーテストが簡単に！Reflection.appを試してみた - stj064 Life Lab
  //d.hatena.ne.jp/stj064/20120415/p1

新型iPadが発売されてから約1か月。

教室にいらっしゃるシニアの皆さんは、意外とAppleの製品情報に詳しいんです。

片隅にiPad2が転がっていると、「これ、新しいやつが出たんでしょ？」と興味深々で集まってきてくださいます。

我が家の目の前に住むおばさまも（確か７０歳近いはず）、
本日パソコン教室の受付にいらした８０歳近いおばさまも、
「パソコンとiPadどちらがいいかしら」と相談してくる。

もう、iPadにジェラシーを感じざるを得ない。

iPad がすごい。: 使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)

こちらは弊社代表・森の2年前のブログ記事ですが、現在でもiPad熱は引き続きアツい状態にあると言えるでしょう。

そこで今回は、旅行を検討している60代シニア女性の方にiPadを使って予約作業をしていただき、そこから気付いたシニアに優しいiPad向けUIデザインのポイントをまとめてみたいと思います。

試したのは、Safariから楽天トラベルを表示し、好きな宿を探して予約してもらうプロセスです。ちなみにこちらの方は、すでにiPhoneをお持ちなので、iOSの基本的な操作には慣れているという前提です。
（※楽天トラベルにはiPadアプリがありますが、こちらは次回以降検証してみたいと思います。）

実際の操作の様子は、こちらからご覧になれます。（12分程度）
//youtu.be/T5xeb6XcD0k

プルダウンが小さすぎる

旅行サイトでは、「条件による絞込み」操作を、必ずと言っていいほど行います。
しかし、WebのUIをそのまま持ってきたようなページでは、プルダウンやフォームの選択の際に、いちいち拡大するなど非常に苦労されているようでした。

シニアにとってiPadは、「iPhoneはちょっと小さすぎるけど、これなら大きくていいわね！」とウキウキして買われるものなので、そのiPadで細かい作業を要求されるのは本末転倒ですね。

ライトボックス表示は混乱を招く

上の画像の状態では、いわゆるライトボックス表示になっていますが、まずレイアウト崩れが起きてしまっています。

そして下にある情報を見ようと指でスクロールすると、中央のエリアは動かず、裏の黒いページだけがスクロールされるという不自然な操作しか行うことができませんでした。ここでピンチアウトして拡大表示をしようものなら、触っても全く反応しないページのできあがりです。

またシニアの方がインターネットを使う際は、何かおかしいことが起こると、すかさずブラウザの「戻る」ボタンを押す傾向が高いです。ライトボックスのようにレイヤーを重ねる「オーバーレイ表示」は、こうした行動と相性が悪いので意識しておきましょう。

頻繁に“長押し”してしまう

これはiPhoneの操作においても共通して見られることですが、タッチの強さや長さの感覚がつかめない方が多いようです。ページのある個所をちょっと力を入れて触ると、すぐ選択状態になって「コピー」の青枠が出現してしまい、戸惑われる場合があります。

WordやExcelの場合もよく見られるのですが、「選択状態の把握」や「関係ないところを押して選択状態を解除する」という操作は、なかなか腑に落ちるものではないようです。

通信状況がわからない

iPadのSafariでは、アドレス表示欄がプログレスバーを兼ねていますが、シニアはそれにもなかなか気付きません。ちなみにPCでインターネットをしていても、あまりプログレスバーに注意を払わない方が多いです。

プログレスバーが確認できないので、自分の押し方が悪かったと思ってさらに何度もクリックやタッチを繰り返してしまい、状況をさらに悪化させる場面をよく見かけます。

まとめ：サービスのアプリ化でシニアを迎え入れよう

• プルダウンが小さすぎて押せない
• ライトボックス表示は大きな混乱を招く
• 頻繁に“長押し”してしまう
• 通信状況がわからない

上記のポイントからわかるように、PCサイトそのままの状態では、特にシニアにとって使いやすいと言える状況ではないでしょう。

しかし幸いなことに、これらのポイントはサービスのアプリ化によって解消できるものばかりです。

プルダウン部分は大きなボタンに変更できます。ライトボックスではなく、スライド式の画面遷移を使えます。長押ししても大丈夫です。タッチしたらすぐにUIを反応させられます。

また、シニア層は一度サービスを利用し始めるとそれを使い続ける傾向が高いので、アプリをホーム画面に常駐させられるメリットは非常に大きいと思います。

ということで、近日中にシニアのiPadアプリに対する評価も行ってみたいと思います。楽しみにお待ちください。