Webサイトは、モバイルファーストの時代に突入し始めるのか

2013年1月20日

Webサイト閲覧のメインデバイスは何ですか? 常にパソコンを立ち上げていられる環境であれば、当然 PC でしょう。しかし、Webサイト利用者はそんな人たちばかりではないよね。携帯からスマートフォンへの買い替えが進んでその所有率が上がるほど、主流はそちらに移行しつつあるようです。モバイルの名のとおり、移動中や外出先でWebサイトを見る機会が劇的に増えています。

先日、インターネットコムと goo リサーチの最新調査が発表されていた。

調査対象は全国10代~50代以上の携帯電話ユーザー1,096人。男女比は男性40.1%、女性59.9%。年代比は10代3.4%、20代25.3%、30代33.1%、40代27.6%、50代以上10.6%。

まず、今回もパソコンを所有するユーザーが Web サイト閲覧時にどのようなデバイスをメインで使っているのかを見てみよう。パソコンを所有している回答者1,055人(全体の96.3%)に「インターネットの Web サイトを見る際、主に使用しているデバイスは何ですか」と質問したところ、「パソコン」が70.0%、「携帯電話」が4.7%、「スマートフォン」が22.2%、「タブレット端末」が2.7%という結果が得られた。

増え続けるスマホ利用者、減り続ける PC 利用者―定期モバイル調査「Web サイト閲覧」(6)

パソコン以外が30%。今後、スマートフォンのディスプレイサイズが大型化(タブレット端末の小型化も同じこと)し、通信速度が上がり費用も下がってくれば、ますますモバイルでという傾向は強まるのだろう。

それにともない、Webサイトのコンテンツ提供側もモバイル対応にシフトする兆しをみせている。このブログ『365hungry』は WordPress というブログプラットフォームを利用しているが、現在の最新バージョンである 3.5 のデフォルトテーマ『TwentyTwelve』では、ついにモバイルファーストのテンプレートが採用された。

ブログプラットフォームとしての WordPress のシェアが世界的にも高いことを思うと、これは大きな出来事かもしれない。他の CMS プラットフォームでは、まだそこまでの考え方をしていないのではないか(未調査なので自信がないが)。

WordPress は、以前のデフォルトテーマでも同様に『レスポンシブルWebデザイン』を採用していた。それは、最初にパソコンのディスプレイを基準にデザインされ、スマートフォンやタブレットといった小さなサイズのディスプレイで閲覧した場合に表示が切り替わるように設計したものであった。

ところが最新のデフォルトテーマでは、まずスマートフォンサイズでデザインが組まれており、次にタブレットサイズ、最後にパソコンのような大きなサイズでの閲覧の順に表示が切り替わるようになっている。順番が逆転しているわけだ。モバイルファースト、つまり、最初にスマートフォンありきになってしまった。
これは、あくまでも『CSS』というWebサイトの見栄えを制御するファイルの中で、『メディアクエリ』という拡張技術をどう使うかという制作側の話ではあるのだけれど。

どんなデバイスで観ても、“それなり”のデザインに

Webサイトをモバイル対応させるためには、『レスポンシブルWebデザイン』か『モバイル専用デザイン』かの選択を迫られる。モバイル専用の場合には最初から素で CSS を書いてデザインするというよりは、jQueryMobileというJavaScriptのフレームワークを利用することが多いと思うが、時間や費用、制作者のスキルによっては少し敷居が高くなってしまう。

さらに、増えてくるであろうディスプレイサイズの種類の多さを考えると、テスト環境を用意するだけでも大変だ。htmlコンテンツを2パターン用意して、アクセスしてくるデバイスによって振り分けをする必要があることもネックだ。

そう考えると、今後は『レスポンシブルWebデザイン』の採用が増えてくるだろう。テレビやカーナビといった、かなりサイズが異なるディスプレイへの対応にも柔軟性がある。問題は、閲覧時のファイル転送量がパソコンの場合とさほど変わらないために、3Gのようなネットワークでは閲覧スピードが遅くなりがちなことか。これも、LTEが普及してくれば影響は少なくなる。

いずれにしろ、社会がこういう時間軸の使い方になってしまった以上、モバイル使用の流れは止められない。今後は、Webサイトをモバイルファーストで作ることが主流になっていくのだろう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください