レスポンシブWebデザイン制作

モバイルファーストの考え方

モバイル端末であるスマートフォンは、画面サイズや回線速度などの制限が多いのが特徴です。“ワンソース”で様々なデバイスに対応させる場合、そういった制限をクリアすることを優先的に考えて構築していくのがモバイルファーストという考え方です。スマートフォンやタブレットといった端末は、外出や移動中だけではなく、自宅にいても利用されることが多いため、モバイルファーストという考え方は現状にあった考え方の１つです。
魅せ方の妥協も時には必要

コンテンツ内容や構造を記述するHTMLに対して、CSSファイルはデザインや装飾を指定します。CSSの最新版（正式勧告前）であるCSS3では、従来では画像でしか表現できなかったボタンの角丸やシャドウ、透過などを、CSSの記述だけで実現することができます。画像をできるだけ使わずにCSSをうまく活用できればデータ転送量を抑えることができ、回線速度が遅いモバイル環境でも快適に閲覧することが可能です。また、画面サイズによって異なる画像を用意する必要もないため、更新性にも優れています。しかし、CSS3に対応していない古いブラウザなどでは装飾は反映されません。またCSSの理解の仕方がOSやブラウザで異なるケースもあり、すべての閲覧環境でまったく同じような装飾を表現することは難しいといえます。
高精細ディスプレイ対応（Retina対応）

AppleのiPhone、iPadなどのRetinaを代表とする、高精細ディスプレイの解像度は従来の約4倍以上。従来通りの作り方では、高精細ディスプレイで見たときに画像の解像度が足りず、ボヤけた状態で表示されてしまいます。今後は画面の高解像度化が広まることを想定すると、高精細ディスプレイで閲覧してもシャープでくっきりとした画像を表示したいものです。しかし、画像を高解像度の大きなファイルで作成してしまうと、LTEなどの高速回線に対応していないデバイスで見たときに表示が遅くなり、パケット通信量も増えてしまいます。そこで、大小の画像をあらかじめ用意しておき、ディスプレイにあわせて適切な解像度の画像を表示させるといった高精細ディスプレイ対応（Retina対応）を施しておくのが、現状にあった対応策だといえるでしょう。
WEBフォントの活用

モバイル環境では回線速度が遅いケースがあり、閲覧する端末の解像度も高精細ディスプレイ（Retina）など様々な状況において、文字は画像ではなくフォントを利用するのが最適です。端末側には必ずフォントが存在し、拡大表示されても文字がぼやけることはありません。しかし、こちらが指定したフォントがすべての端末で用意されているとは限りません。端末側にフォントがない場合は、代わりに別のフォントに自動的に置き換わるため、見え方に違いが出てきます。最近ではWeb上にアップロードされているフォントファイルを読み込んでそれらを利用するWebフォントが活用され始めています。日本語フォントは英語フォントよりも種類が少ないのが現状ですが、少しずつ豊富になってきています。フォントの種類をきちんと選びたい場合は、月額料金や買い取り料金が必要ですが、Webフォントサービスなどの検討も視野にいれます。

ポイント