今更聞けない?レスポンシブwebデザイン

レスポンシブデザインとは?

ここ数年で定着してきた『レスポンシブwebデザイン』(Responsive Web Design)。日本語にすると『反応がするwebデザイン』。

現在、ホームページを見る環境はパソコン、スマートフォン、タブレットなどさまざまなサイズの端末があってパソコンのディスプレイだけを対象とするホームページではユーザーに不都合を生じることが多くなりました。ユーザーのデバイス(パソコン、タブレット、スマートフォン)に関係なく、同じURLで同じHTMLコードを配信しますが、画面サイズの応じて最適化されるデザインをレスポンシブwebデザインと呼びます。単一URLにすることで検索ロボットがサイトを巡回しやすくなります。

レスポンシブwebデザインのメリット

レスポンシブwebデザインのメリットとしては、どのデバイスでも同じファイルを利用できるため、管理が非常に簡単になること、デバイスごとの表示エラーを減らすことにあります。現在多くのブラウザによってサポートされているCSS3を使用しているため、汎用的であり、より多くの人に見てもらえます。カラムや画像が、スクリーンサイズに合わせて自動的に適切なサイズになります。

そのためサイトの情報適切に得ることができます。HTMLを分けるモバイルサイトでは、デバイスの数だけHTEMを増やしていかなければならないが、レスポンシブで制作するとファイルが同じなので管理がしやすい。修正も一つのHTMLだけでいいので、モバイルサイトは更新されていないなどといった事態を防げます。

レスポンシブwebデザインのデメリット

レスポンシブwebデザインを使用した際のデメリットは、スマホサイト上で起こるものがよくあります。スマホでの方がパソコンと比べてスペックが劣るので、データの読み込みなどの作業に負荷がかかります。負荷がかかるとサイトの読み込みに時間がかかったりと、ユーザビリティに大きく影響するため、表示する情報はシンプルにし、できるだけ読み込み時間がかからないようにすることが重要です。他、デメリットとしては、CSSデザインが複雑で記述テクニックが必要となります。表示サイズによってデザインが崩れることもあるので、それを想定したデザイン構成力が必要になります。

とても便利なレスポンシブwebデザインですが、古いブラウザは新しい仕様に対応していないので、どこまでフォローするかという問題もあります。

制作を行う際に必要な知識

・リキッドデザイン
幅を%で指定して横幅を可変させ、レイアウトを変化させるデザイン
・フレキシブルデザイン
幅を%で指定して横幅を可変させ、レイアウトを変化させるデザイン
※リキッドデザインとの違いは最大値(max-width)、最小値(min-width)を設定してデザインの崩れを抑えることができる。
・グリットデザイン
縦幅の格子状に均等に分割されたところにコンテンツを配置していくデザイン
・可変グリッドデザイングリッドレイアウトとリキッドデザインを組み合わせたデザイン

レスポンシブwebデザイン制作の仕方

・Viewportを指定するアイフォンやiPadでは、パソコン用のサイトもそのまま縮小して表示します。パソコン用のサイトをそのまま表示するので端末の画面では小さくなりすぎます。これを避けるためにMETAタグで、Viewportをヘッダー内に指定し、デバイスのスクリーンサイズに合わせた幅で表示させるようにしましょう。

・メディアクエリ(Media Queries)を指定する

「Media Queries」は、従来のCSSからあった「Media Type」の仕様を拡張し、数値で指定した画面サイズなどの細かな条件に応じて、読み込むスタイルシートを振り分けることが出来るCSS3の機能です。これによってパソコン、スマートフォン、タブレットなど書くデバイスでの表示を変えることができます。CSS3は従来のCSS2に新しい機能が加わったものなので、古いファイルを書き換える必要はなく、そのまま追加することが出来ます。

CSS3を使う際、特に問題となるのが、IE(InternetExplorer)での対応が遅れている点です。レスポンシブwebデザインを実現するために最低限必要な「Media Queries」はIE9から実装されていますが、IE8以下では個別にCSSファイルを読み込むようにさせます。

どの幅でパソコン、スマホ、タブレット用のCSSを使うかという指定を『ブレイクポイント』と言います。これは自由に設定することができますがスマートフォンやタブレットはどんどん新しい機種が発売され、高性能になっていくので、それに合わせて『ブレイクポイント』を決める必要があります。指定する『ブレイクポイント』は、主要なスマホサイズなどを考慮して決めてください。

・メニューの切り替え
パソコンとスマートフォンでは
グローバルメニューが異なる場合が多いです。
このような場合、CSSの表示・非表示で
デバイスごとに切り替えましょう。

レスポンシブデザイン製作時の注意点

・スマートフォンページの文字は大きめに
スマートフォンのディスプレイはパソコンの画面より小さくなるので、パソコンと同じ文字サイズでは、文字が小さくて読めなくなってしまうこともあります。

・テキストの量や改行の見直し
パソコンでは最適だと思われた文章も、スマートフォンでみると、長文になりすぎてよみにくかったり、改行が綺麗じゃなくなっていることがあります。テキスト量や改行は、スマートフォンの表示を考慮していれる必要があります。

・カラム数を調整する
画像だけではなく、サイト全体を見やすくなるように横並びだったコンテンツを縦並びにする必要があります。

アダプティブwebデザインとは?

レスポンシブwebデザインがパソコンやスマートフォン、タブレットなどさまざまなデバイスのディスプレイ条件に柔軟に対応できるということに対し、アダプティブwebデザインは、表示する複数の想定ディスプレイをあらかじめ決めて、それらの条件に基づいて作成していくというものです。レスポンシブwebデザインとの違いは、レスポンシブwebデザインのように一つのHTMLを使うのではなく、デバイスの横幅サイズのブレイクポイントごとに、最適化した別のHTMLを用意するということです。

レスポンシブwebデザインとくらべて更新などは面倒な感じですが、アダプティブwebデザインの方が、調整に限界があるわけでなく、無駄な非表示要素がなくなり、読み込み速度が速くなるという利点があります。さまざまなデバイスに対応する』という面で見ればレスポンシブwebデザイン、『ブレークポイントに最適化する』という面では『アダプティブwebデザイン』という感じでしょうか。

まとめ

さまざまなデバイスに対応するレスポンシブwebデザイン、ブレークポイントに最適化する『アダプテイブwebデザイン』について紹介しましたが、メリットもあればデメリットもあります。ユーザーがどのようなデバイスを使い、どのような時に利用するかを考えて、最適なデザインをする必要があります。また、スマートフォンやタブレットは新商品が次から次へと発売されています。それにより、ディスプレイサイズも多様化していくので、どんな表示サイズ、表示方法の流行、それにあった見せ方などを常に模索する必要があると思いました。

このエントリーをはてなブックマークに追加

筆者

A.Haraguchi

Bigmac inc. 制作部所属。2016年3月に入社しました。 ほぼ未経験の状態で入社し、戸惑うこともたくさんありましたが、会社のメンバー達に支えられながら今に至ります。 2児の母なので休日は子供との時間にしています。一緒に料理したり、家事を手伝ってもらったり、娘達が自分でできるようになっていく姿をみることが最近の楽しみです。

筆者が最近執筆した記事