これだけは知っておきたい！レスポンシブWebデザイン発注のポイント【第三回】

夏休みも終わり、そろそろ秋が来る頃ですね。

この時期になると、もうすぐ新型のiPhoneが出る、という話題が盛り上がってきます。
次はiPhone7の予定ですが、。どんなものになるのか楽しみですね！

さて、今回は”これだけは知っておきたい！レスポンシブWebデザイン発注のポイント”【第三回】です。

これだけは知っておきたい！レスポンシブWebデザイン発注のポイント”【第一回】はこちら

これだけは知っておきたい！レスポンシブWebデザイン発注のポイント”【第二回】はこちら

前回、メディアクエリーという機能についてお話しました。

メディアクエリーとは、スマートフォンなどのデバイスの画面の解像度や幅、向きなどに応じて別々のデザインを表示させる機能です。

レスポンシブWebデザインには必須の機能なのですが、この機能を使用するためには、クライアントと確認しておかなればいけないことがあります。

それは、Webサイトをどのデバイス（例えばiPhoneやiPad、PCなど）に対応させるか、具体的に決める、という作業です。

なぜ対応デバイスを決める必要があるの？

スマートフォンやタブレット、PCと様々なデバイスに一括対応してくれるレスポンシブWebデザインは大変便利なWebサイトの作成法ですが、魔法の様なやり方ではありません。

対応デバイスが具体的に決まり、それに合わせて技術的な設定をして、はじめてレスポンシブWebデザインを実現することができます。

レスポンシブWebデザインを実現するにはメディアクエリーを使いますが、メディアクエリーは前述のようにデバイスの縦のピクセル数や横のピクセル数に応じて別のデザインを表示させるケースがあります。

例えばユーザーがiPhone6を縦向きにしてWebサイトを閲覧している場合はAのデザインを、iPadを横向きにしている場合はBのデザインを表示させるといったケースですが、これを実現するためには対応するiPhoneとiPadを具体的にクライアントと決める作業が必要です。

同じiPhoneといっても、例えばまだ現役で使われていることの多いiPhone5と、最新のiPhoneであるiPhone6SPlusとでは、横のピクセル数が異なります。

実際こんなケースは少ないと思いますが、iPhone5だけに対応する場合と、iPhone5とiPhone6SPlusの両方に対応する場合は、メディアクエリーは異なるものになります。

ですので対応デバイスをあいまいにすると、メディアクエリーの設定ができずレスポンシブWebデザインを実現できませんので、注意が必要です。

現場ではどのように対応しているか

では実際に、レスポンシブWebデザインを行う際、どのデバイスに対応するのが良いのでしょうか。

これはクライアントのWebサイトの目的にもよりますので絶対的な正解はありませんが、弊社の場合

• 一般消費者向けのWebサイトの場合、1.スマートフォン 2.PC 3.タブレットの優先順位で、スマートフォンはiPhone、PCはメジャーなブラウザの最新版を搭載できるスペックのPCを想定、タブレットはiPadを基準にして、iPhoneとiPadに関しては具体的な対応機種名まで決定する
• 法人向けのWebサイトの場合、1.PC 2.スマートフォン 3.タブレット　の順番で、対応PCはクライアントによってはかなり古いものまで対応機種に含め、スマートフォンはiPhone、タブレットはiPadを基準にして、iPhoneとiPadに関しては具体的な対応機種名まで決定する

という形が多いですね。

ただこれは繰り返しになりますがクライアントとWebサイトの目的に応じて随時変更の必要があります。

対応デバイスの種類が増えると基本的に時間も予算も増えますので、納期や予算も考慮しながら、最適な対応デバイスをクライアントに提案し、対応デバイスを決定させる必要があります。