レスポンシブデザイン 今更聞けないwebデザインの基本とは?

記事公開日:2018.05.21

最終更新日:2018.05.23

1,298 PV


ここ数年で定着してきた『レスポンシブ Webデザイン』(Responsive Web Design)。日本語にすると『反応するWebデザイン』。『レスポンシブWebデザイン』とはどういうものなのかを簡単にご説明します。

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

現在、WEBサイトを見る環境はデスクトップPC、ノートPC、スマートフォン、タブレットなどさまざまなウィンドウ幅(画面幅)の端末があって、パソコンのディスプレイだけを対象とするPCサイトでは、ユーザーに不都合を生じることが多くなりました。
インターネットの利用状況
スマートフォンを使用する女性
ユーザーのデバイス(パソコン、タブレット、スマートフォン)に関係なく、同じURLで同じHTMLコードを配信しますが、デスクトップPC幅、スマホ幅などデバイスの画面幅の応じて最適化されるデザインをレスポンシブWebデザインと呼びます。単一URLにすることで検索ロボットがサイトを巡回しやすくなります。
レスポンシブwebデザインで作成されているサイト
サイト設計

レスポンシブのメリット

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

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

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

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

とても便利なレスポンシブWebデザインですが、古いブラウザでは新しい仕様に対応していないこともあるので、どのブラウザまでフォローするかという、考えさせられる部分もあります。
いろいろな検証機

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

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

レスポンシブ制作の仕方

・Viewportを指定するアイフォンやiPadでは、パソコン用のサイトもそのまま縮小して表示します。PC用のWebサイトをそのまま表示するので、端末の画面では小さくなりすぎます。画面が小さくなってしまうことを避けるために、Viewport記述をヘッダー内に指定し、デバイスの画面サイズで表示させるようにしましょう。

・メディアクエリ(Media Queries)を指定する
「Media Queries」は、従来のCSSからあった「Media Type」の仕様を拡張し、数値で指定した画面幅などの条件に応じて、読み込むCSSを区別することが出来るCSS3の機能です。CSS3を利用することによってパソコン、スマートフォン、タブレットなど書くデバイスでの表示を変えることができます。CSS3は今までのCSSに新機能が追加されたものなので、古いファイルを書き換える必要はありません。
パソコン
CSS3を使うときに問題となるのが、IE(InternetExplorer)でのCSSの対応が遅れていることです。レスポンシブWebデザインを実現するために最低限必要な「Media Queries」は、IE9から使用できますが、IE8以下のブラウザでは個別にCSSファイルを読み込むようにします。

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

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

制作時の注意点

・スマートフォンページの文字は大きめに
スマートフォンのディスプレイはパソコンの画面より小さくなるので、パソコンと同じ文字サイズでは、文字が小さくて読めなくなってしまうこともあります。
・テキストの量や改行の見直し
パソコンでは最適だと思われた文章も、スマートフォンで見ると、長文になりすぎて読みにくかったり、改行が綺麗ではなくなっていることがあります。テキスト量や改行は、スマートフォンの表示を考慮していれる必要があります。
・カラム数を調整する
画像だけではなく、Webサイト全体を見やすくなるように横並びだったコンテンツを、縦並びにする必要があります。
コーディング

アダプティブWebデザイン

レスポンシブwebデザインがパソコンやスマートフォン、タブレットなどさまざまなデバイスのディスプレイ条件に柔軟に対応できるということに対し、アダプティブWebデザインとは、WEBサイトを表示する複数のディスプレイを最初に決めて、複数のディスプレイの条件に基づいて作成していくというものです。

レスポンシブWebデザインとの違いは、レスポンシブWebデザインのように一つのHTMLを使うのではなく、デバイスの横幅サイズのブレイクポイントごとに、最適化した別のHTMLを用意するということです。

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

本記事を書いて

ユーザーがどのようなデバイスを使い、どのような時に利用するかを考えて、最適なデザインをする必要があります。また、スマートフォン、タブレットは続々と新商品が発売されています。
新商品の発売により、画面幅も多様化していくので、表示サイズ、表示方法の流行、画面幅にあった見せ方を常に模索する必要があります。

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

筆者

A.Haraguchi

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

筆者が最近執筆した記事