ホーム > IT情報 | Kyamoシップ > Webサイトのタブレット最適化 概論!時代に乗り遅れないために・・・

Webサイトのタブレット最適化 概論!時代に乗り遅れないために・・・

        

Microsoft タブレット Surface の発売が近付いてきました。公式サイトで発売されただの、32GBで足りるのかなど、Microsoftの動向に多くの方が注目しています。

また、iPad miniの話題も沸々と見られるようになりました。自分はNexus 7 購入したので、もういいけどね・・・・

とにかく、2012年末はまさにタブレット競争が熱い!!それはつまり、従来PCで見れていればよかったWebサイトも、タブレット端末で見苦しくないものに最適化しないといけないというわけです。

surface2

Webサイトのタブレット最適化 概論!時代に乗り遅れないために・・・

Microsoft Surface に、Appleの iPad mini 、Google Nexus 7 に、Amazon Kindle・・・ 2012年末はまさにタブレット競争が熱い!!

従来PCで見れていればよかったWebサイトも、タブレット端末で見苦しくないものに最適化しないといけない時代も、もう目前です。『iPhone/iPad アプリ なんて作らないから関係ないよ』ではすみません。主流OSを開発するMicrosoftが、主力をタブレットに集中してきたパワーはとても強大です。まして、Appleの開拓したスマートフォンの爆発的な普及は、スマホ/タブレットでの閲覧を驚異的なスピードで広めています。スマホ/タブレット対応は他人事ではありません。Webサイトを公開する誰しもに当てはまることなのです。

そこで今回は、Webサイトのスマホ/タブレット対応に必要なことを調べてみました。今回とても良い記事を見つけたのですがちょっと長かったので、その中から「Webサイトを “タブレット” 対応する」ことに絞って、簡潔にまとめてみます。僕の記事を読んでみて物足りないと感じた方は、ぜひ参照サイトを読んで頂くことをお勧めします。

⇒参照サイト:スマートフォン/タブレット対応の最新潮流

■■スマホ/タブレット対応って、つまり何をすればいいの?■■

「スマホ/タブレット対応」とは、スマホ/タブレットで閲覧できることを意味するわけですが、大きくは、

  1. PC・携帯サイトをスマホ/タブレット用に最適化したWebサイト
  2. スマートフォン/タブレット専用サイト
  3. ネイティブアプリ

という3種類に分けることができます。

スマホ/タブレット対応と聞くと、「3」をイメージしてしまいますが、実は「1. PC・携帯サイトをスマホ/タブレット用に最適化したWebサイト」
がとにかく大事になってきます。それは、スマホ/タブレット端末にもデフォルトでChromeなどの標準ブラウザが搭載されており、ブラウザを通してWeb閲覧するという行為は無くなっていないためです。アプリの利用が念頭にない限り、検索等の情報収集行為は依然として端末に搭載されたWebブラウザを使います。よって、わざわざ新しいものを作るよりも、今あるWebサイトをスマホ/タブレットに最適化することが何よりも大事になってくるわけです。

■■タブレットはOSの種類と特徴■■

世間には数々のタブレット端末が出回っていますが、もしそれを大きくカテゴライズするとすれば、iOS / Android / Windows Phoneに分けられます。他にもありますが、今は考えなくて良いでしょう。iOSはApple社製品のみに限られ、またWindows Phone7.5はそのハードウェア基準でハードウェアを拘束するため、この両者はハードウェア仕様に対する自由度はほぼない。言い換えれば、基準に合わせてスマホ/タブレット最適化すれば、頭を悩ませることはありません。ただ困ったのはAndroidで、世界中の多くのメーカーが好き勝手な規格で機種を発売しているため、端末の検証が『非常』という言葉がかわいく思えるくらいにめんどくさい。これはGoogleさんに苦情を言うしかない。2012年6月4日の段階で、なんと400種類のデバイスでテストしている会社もあるそうです!!(参照記事

まとめると、ハードウェア仕様に対する自由度は iOS < Windows Phone < Android ということになります。

個人的には、大フィーバーのiOS対応をまずはお勧めします。Apple製品の人気は、もう少し長引くと感じるからです。ただ、Googleという巨人の繰り出すAndroidもほっておいてよい問題ではありません。Surface が爆発的な広がりを起こさない限り、2番目はAndroidの認識で良いでしょう。

■■Webサイトをタブレットに最適化するポイント■■

タブレット対応については、ビジネス上大きなメリットがない限り専用サ イト制作は必要ありません。既存のWebサイトを タッチパネルに最適化することで問題ないでしょう。

Webサイトをタブレットに最適化するポイントは次の4点です。

  1. 画面表示サイズ
  2. リンクなどの挙動をわかりやすく
  3. タッチ操作の最適化
  4. ファイルサイズの軽量化
  5. JavaScript中心のインターフェース

1. タブレットには、Portrait(縦画面)とLandscape(横画面)が存在します。利用者の用途によってどちらで見られるかわかりませんので、どちらで見られてもおかしくないよう調整しなくてはいけません。

2. タッチパネルは基本指で操作されます。すると、触れた所が指で隠れ死角ができてしまうため、ロールオーバーしてもユーザーには認識ができないのです。リンクなどは、挙動が見てわかる必要があります。

3. タッチ操作は指で行われるため、押し間違いが発生しないよう適切な行間・余白・文字サイズに調整する必要もあります。

4. 現状タブレットはPCよりも基本スペックが劣るため、処理負荷をかけ無いようにしなくてはいけません。重い画像を使用している箇所は、CSSで代用できるのであれば置き換えましょう。

5. ご存じの方も多いと思いますが、「iPhone」、「iPad」ではFlashを閲覧することができません。Flashの代替処理を行うことはとても重要かつ必要なことです。JavaScriptを中心としたユーザーインタフェース・テクノロジーを使用し、よりリッチなユーザーエクスペリエンス構成に仕上げましょう。

現在、有効な手法としてはユーザーインタフェースとコンテンツを分離し、コンテンツはXMLで管理しておく手法である。たとえば、PCサイト用にFlashで制作されたコンテンツをXMLとして管理していれば、HTML5 canvas タグ+JavaScript やAjax、ネイティブアプリによるユーザーインタフェースを追加することで「iPhone」、「iPad」での表示が可能になる。

スマートフォンとタブレット

ios

スマートフォンとタブレットでも、一見すると画面サイズが違うだけですが、両者の最適化に対する考え方は変わってきます。今は同じような利用をされていますが、タブレットが普及してくれば、写真・通話はスマホ(比較的瞬間的な利用)、調べ物・エンタメ・電子書籍はタブレット(比較的閲覧時間のある利用)、といったすみ分けになっていくでしょう。ユーザーに利用してもらうアプリを作るのでもない限り、Webサイトは特にタブレットを意識して最適化していく必要があるわけです。

いわゆるパソコンは、今後はタブレットに置き換わっていく可能性が十分にあり得ます。手遅れになる前に、取り急ぎタブレット最適化を行うことをお勧めします。

関連する投稿





RSS リーダーで購読する

コメント:0

コメントフォーム
プロフィールと個人設定

トラックバック:0

このエントリのトラックバック URL
http://kyamon.com/it%e6%83%85%e5%a0%b1/2012-10-19/web%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e3%82%bf%e3%83%96%e3%83%ac%e3%83%83%e3%83%88%e5%af%be%e5%bf%9c-%e6%a6%82%e8%ab%96%ef%bc%81%e6%99%82%e4%bb%a3%e3%81%ab%e4%b9%97%e3%82%8a%e9%81%85%e3%82%8c/trackback/
Listed below are links to weblogs that reference
Webサイトのタブレット最適化 概論!時代に乗り遅れないために・・・ から Kyamoシップ ~Web/ガジェットの羅針盤~

ホーム > IT情報 | Kyamoシップ > Webサイトのタブレット最適化 概論!時代に乗り遅れないために・・・

カレンダー
« 10 月 2012 »
S M T W T F S
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
アーカイブ
ページ

ページのトップに戻る