iPhone6対応のモバイルファーストなレスポンシブデザイン 前編

2014/9/30 5988hit

iPhone6とiPhone6 plusの登場によりiOSデバイスの画面サイズが一気に増えました。
仮にiPhone6とiPhone6 plusに個別対応したとしても大きなiPadの噂もあります。
将来登場する可能性のあるデバイスに事後対応していくのは無理があります。
また、Androidでは既に多種多様なデバイスが出回っていますし、Windowsタブレットの小型化も見逃せません。
今後はTVやタブレット、カーナビなど様々なデバイスがWebにアクセスしてくるようになります。
従来の特定デバイスに個別対応するのは非現実的で、現在ではあらゆる解像度や画面サイズで最適なサイトを構築する必要があります。

最適というのは、小さな端末ではシンプルに、大きな端末では、大きな端末を活かして表示できることを言います。
多解像度への解決策として、iPhone4向けにデザインしてそれより大きな画面のデバイスに対しては余白を付けて表示させるなんて話があったのですが、(残念なことにこの手法はPC向けのWebサイトで広く使われています)これはユーザーの持っている大画面のメリットを殺すことになるのでお勧めできません。
より大きなスマートフォンを持っている人はより多くの情報を見たいから携帯性を犠牲にしてそのデバイスを持ったわけなので、それに応えないサイトは最適なデザインで表示しているとはいえません。

もちろん世の中に出回っているすべての端末に対して個別に最適化を行うことは出来ません。
そこで、あらゆる解像度、あらゆる画面サイズにおいても柔軟にレイアウトを変化させるレスポンシブデザインが注目されています。
これから4回にわたってモバイルファーストなレスポンシブデザインを実践していきます。

目次

・前編 概念について
中編 ひな形をつくる
後編 ページを作る
完結編 PCに対応する

レスポンシブデザインをモバイルファーストで設計する利点

レスポンシブデザインでサイトを作る手法としてPC用Webサイトを元にモバイルに向けて機能を削っていく方法と、モバイル用のWebサイトを元にPCに向けて機能を追加していく方法の2つがあります。
もし、新規で開発するなら後者をおすすめします。複雑なサイトから機能を削っていくより、単純なサイトに機能を足していくほうが楽だからです。

考え方

コンテンツについて

・コンテンツ量を絞り込む
より画面が小さく、より利用時間の短いモバイルではページを見る時間も限られます。
そこでまずは伝えるべきコンテンツを絞りこみましょう。

・ページ数を抑える
主にガラケー向けサイトではページを細かく分割する方法が取られました。
これは当時のメモリーが少ない端末に最適化された方法でした。
ところが、今では一昔前のPCと同程度のメモリーとブロードバンドと言うにふさわしい帯域が確保されています。
さらに端末間のURL共有の問題もあります。

・端末ごとにコンテンツを変えない
UserAgentや画面解像度に応じて変化を起こして良いのはナビゲーションの手法やレイアウトだけです。
主要なコンテンツやページ数を分けたりしてはいけません。
スマートフォンのブラウザにはPCと今見ているURLを共有できる機能が付いているものがあります。
PCでコンテンツを途中まで見て、続きをスマートフォンで見ようとした時にコンテンツがなくなっていては困ります。
端末に応じた最適なUIを提供しながらなおユーザーには同じURLを見ているときは「同じものを見ている」という感覚を持たせなければいけません。
そのため、主要なコンテンツは全てのサイトで同じであるべきだし、スマートフォンだけページを分けるようなものもふさわしく有りません。

HTMLについて

・見た目に関するタグは使用しない。
HTML上で見た目を直接指示するタグ(FONTタグなど)は使用しないようにします。
HTML5上では見た目を指定するタグのほとんどが非推奨になっているのでw3c validatorを使って正しいHTML5になっていることを確認するのが簡単です。

さらに、
・コンテンツに優先順位を付けて優先度が高い順に記載する。
従来はHTML内のコンテンツはしばしばレイアウトの順番に依存していました。
例えば逆Lレイアウトだとこんな順番でHTMLに書かれることが多かったです。
ヘッダ、メニュー、コンテンツの順
しかし、この方法では本来一番伝えたいはずのコンテンツが一番最後になってしまいます。
そこで、以下のように順番を入れ替えます。
ヘッダ、コンテンツ、メニューの順
いずれにしても大事なのは画面上の見た目ではなく、「どの順番で見せたいか」というコンテンツの意味に依存しているということです。

見た目について

・同じブランドイメージを維持する
スマートフォンでアクセスした時にスマートフォンのネイティブアプリのように見せかけるサイトが有りますが、もしそのサイトがPCからもアクセスしうるならユーザーの「同じものを見ている」という感覚を阻害するのでふさわしく有りません。
・固定幅のデザインをしない
よくコンテンツの幅を800pxに固定し、残りを余白にするサイトがありますが、様々な解像度に対応させるためにコンテンツの幅は指定しません。
コンテンツの幅を固定せずに画面幅に応じてレイアウトを行います。
画面の幅に応じてコンテンツの幅を変えて、隙間の幅を固定したレイアウトを心がけます。
実際にデザインを組んでみると隙間がしっかりデザインされているサイトはコンテンツが間延びしてもしっかり綺麗に見えます。

・レイアウトを可能な限り流用する。
レスポンシブなデザインは従来の固定幅のデザインに比べて作業工数が増大してしまいます。
ページごとのレイアウトはトップページとサブページの2種類のみにするなどレイアウトのパターンを減らすことで、レスポンシブでありながら工数の増加を最低限に抑えることが出来ます。

機能面について

・機能を盛り込み過ぎない
機能は盛りこむほどトラブルの種になります。
何気ない気持ちで追加した機能が別の端末で問題を引き起こすことがあります。

・マウスでもタッチパネルでもアクセスできるようにする
タッチパネルにはマウスと違った機能が求められます。
マウスオーバーしてマウスカーソルのアイコンが変わったりしないため、リンクはより具体的に示してやる必要があります。また、リンクなどの部分は大きめにして他のリンクと距離を開ける必要があります。
UserAgentをみてAndroidやiOSではタッチパネルに最適なデザインを提供するという手法が取られていましたが、タッチ可能なPCも増えている中ではあらゆる端末でタッチパネルでもアクセスできるように作ってやるほうが良いでしょう。

次回はページ全体で使用するひな形づくりに入ります。
中編 ひな形をつくる

前:iPhoneが革新的じゃない?何を今更 次:iPhone6対応のモバイルファーストなレスポンシブデザイン 中編

関連キーワード

[iPhone][Android][モバイル][HTML5][IT]

コメントを投稿する

名前URI
コメント