WebサイトをiPhoneに対応させる -レスポンシブ・ウェブデザイン-

EC studio EC studio デザインブログ

EC studio
EC studio デザインブログ
EC studio デザインブログの記事一覧

2011年03月30日投稿者：西口誠二

WebサイトをiPhoneに対応させる -レスポンシブ・ウェブデザイン-

このところのスマートフォンの広がりにより、デザイン部でもWebサイトのスマートフォン対応の必要性をひしひしと感じています。

実際のスマートフォン対応の取り組みとしてはこれからなのですが、その時のために従来のサイトをスマートフォンに対応させる方法、特に今回は閲覧環境に応じてページレイアウトを柔軟に切り替える、~~レスポンシブ・デザイン~~　レスポンシブ・ウェブデザイン（Responsive Web Design）（ご指摘ありがとうございます。）に関していまさらながら調べてみたので、大枠的なことをふわっとまとめておこうと思います。

レスポンシブ・ウェブデザインって

まず「レスポンシブ・ウェブデザインとはなんぞや」と言うところですが、
Webサイトのページレイアウトを閲覧環境（パソコン、iPhone、Android など）に応じて動的に変更させる手法で去年あたりからよく耳にするようになりました。

ブラウザのウィンドウ幅に合わせてページ幅が変わるリキッド・レイアウトとも似ていますが、レスポンシブ・ウェブデザインは、閲覧環境に応じて、その環境に合わせたレイアウト構造に柔軟に切り替えるというところがポイントです。

そして、それを実現するためにメディア・クエリ（Media Queries）でスタイル（CSS）を振り分けてレイアウトなどを切り替えます。

スタイル（CSS）の振り分け

先程も書きましたが、スタイルの振り分けはメディア・クエリを利用します。
出力媒体、閲覧環境に応じてスタイルを切り替えることができるメディア・クエリですが、レスポンシブ・ウェブデザインでは、閲覧環境ごとでスタイルを設定します。

iPhone用に設定する場合は次のように記述します。

テキスト表示

HTML:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)"　href="iphone.css" />

iPhoneのmobile Safariはディスプレイを320 x 480 ピクセルで認識するようなので、
max-device-width を 480px にして、iPhone（正確にはディスプレイの最大幅が480pxのデバイス）で閲覧したら iPhone用のスタイルが書かれた iphone.cssが読み込まれるようにします。

また、CSS内に直接記述することもできます。

テキスト表示

CSS:

@media screen and (max-device-width: 480px) {
.column {
float: none;
iPhone用のスタイル
}
}

こうすることで、CSSを1ファイルだけで済ませることができます。

ページ構造をデバイスで切り替える

閲覧デバイスに応じて適用するスタイルの振り分けをおこないましたので、次にそれぞれでのスタイルを設定します。

今回は下記のようなPCサイトを例にレイアウト構造を切り替えます。
PC用の2カラムのレイアウト

PC用のサイトでは、”content”、”footer”が float で”nav”の右に配置される2カラムです。

しかしこのままのレイアウトだと、iPhoneで見た場合は、ディスプレイ幅が狭くなりますので若干見づらくなります。そのためにiPhoneの場合は1カラムにレイアウト構造を切り替えるような設定にしてみます。
iPhone用の1カラムのレイアウト

テキスト表示

CSS:

@media screen and (max-device-width: 480px) {
.nav,
.content,
.footer {
float: none;
}
}

という具合に、floatを適用しないようにスタイルを設定します。

各ブロックや要素のサイズを調整する

基本のレイアウト構造を振り分けたあとは、各ブロック（.content や .header など）や画像の幅を調整します。

各ブロックの横幅を%設定に

表示領域に合わせてレイアウトブロックの幅が動的に変わるように%指定に変更します。
例：表示領域 960px に 940px のヘッダーの場合
940 / 960 * 100 = 97.9166667%
なので

テキスト表示

CSS:

.header {
width: 97.9166667%;
}

と言う感じです。

細かなレイアウト設定もレスポンシブ・ウェブデザイン用に調整

レイアウト構造以外にも次のような設定をおこないます。

・画像も相対的に表示されるように、max-width を100% で指定
・スマートフォンはディスプレイが小さくなりますので、文字サイズの調整
・場合に応じては、各ブロック内のレイアウトも変更
　例（上記画像）：.nav内のナビゲーションをPC用では縦並びに、iPhoneでは横並び

などの設定をおこなうことで、各デバイスに合わせたレイアウトでWebサイトを表示させることができるようになります。

まとめ

今回調べてみたものは一つの方法で、この他にもいろいろなパターンがありますし、これからもまだまだ新しい手法が編み出されていくのだと思いますが、このレスポンシブ・ウェブデザインを取り入れることでWebサイトをスマートフォンに対応させることができます。しかし、そのためにはページ構造の組み立てがさらに重要になる、ページ設計段階でスマートフォン対応も見据えておく必要があるなと感じました。

また、モバイル・ファーストという言葉もあるように、見た目だけをスマートフォンに対応させるだけでは十分な対応とは言えないかもしれません。
各デバイスの特性にフォーカスしたコンテンツをそれぞれに用意して、アプローチを変えてWebサイトを展開していくのがこれからのモバイル対応ということになるのでしょうか。