レスポンシブWebデザインの例

レスポンシブWebデザインとは?メリットやデザインの作り方

レスポンシブWebデザインの例

スマートフォンが普及しWebサイトも多様化するにつれ、サイト制作の工数を削減やSEO対策のためにレスポンシブWebデザインが推奨されています。

本記事では、レスポンシブWebデザインの概要や制作のフローや難しいとされる実装方法の解説、効果的に使用されているサイトを紹介していきます。

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

端末ごとのレスポンシブWebデザイン

レスポンシブWebデザインとは、PCやタブレット、スマートフォンなどあらゆるデバイスに最適化されたWebサイトを単一のソースコードで表現する制作手法です。

ブラウザの画面サイズを基準としてレイアウトをCSSで制御し複数デバイスに対応したWebサイトを制作できます。

2019年現在、スマートフォンやタブレットからのアクセス数が増加している一方でWeb制作ができるエンジニアやデザイナーの数が十分であるとは言えません。それらを解決するための1つの方法がレスポンシブWebデザインです。

検索、IT大手であるGoogleもマルチスクリーン、マルチデバイス対応の一環としてレスポンシブデザインを推奨しています。サイトの管理側も運用が楽です。

レスポンシブWebデザインが実現できるメカニズム

共通のWebサイトを1つ用意し、リンク先URLや画像などもデバイスによらない1種類を用意します。デザインについてはHTMLではなくCSSにて制御します。CSS内ではデバイス幅をブレイクポイントとして定め、ブラウザのウィンドウ幅が指定したブレイクポイントごとに適用するCSSを設定しておけば自動で切り替わるという仕組みです。

ウィンドウ幅に応じてコンテンツを見やすく、利用しやすく配置することが重要です。

導入するべき企業層

サイト構築や運用にあまり人的コストをかけられない一方で、Webサイトを新規で作りたい、または刷新したいと思っている事業者にはおすすめする手法です。

また、コンテンツマーケティングを行っているサイトにもおすすめです。コンテンツマーケティングは基本的に検索エンジンからの流入にユーザー訪問を期待しており、レスポンシブWebデザインはSEO対策にもなります。

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

レスポンシブWebデザインをチェックする男性

では、レスポンシブWebデザインを採用するメリットにはどんなことがあるのでしょうか。

Sourceが1つのため管理しやすい

レスポンシブWebデザインではCSSでレイアウトを制御するため、サイトの構成を作るHTMLのソースコードは1つのみです。そのためコンテンツの追加や削除などを容易に行えます。

SEOに有効

デバイスごとにサイトを作り分けるとURLが別になってしまいますが、レスポンシブWebデザインではHTMLが1つのためURLが統一されます。そのためSEOの重要な要素である外部からのリンクが分散されません。結果としてサイトを作り分ける場合よりサイトとして良い評価を受けられます。

また、Googleなどの検索エンジンのクロールもデバイスごとに作られたサイト別に行う必要がないため、効率的にコンテンツを見つけられます。

新しいデバイスへも対応できる

スマートフォンやタブレットが普及したように、今後も新しいデバイスの普及が期待されます。レスポンシブWebデザインでは、新デバイスに対しても自動的に体裁を整えて表示するため新たな開発が必要ありません。

シェアされやすい

デバイスごとにサイトを制作しURLが複数存在すると、シェアされたPCのサイトURLをスマートフォンで開き、操作性に不具合を感じて離脱するという事象が起きる可能性があります。レスポンシブWebデザインではURLは統一のためシェアされるURLも1つです。

また、デバイスサイズ毎にCSSを切り替えるため操作性に不具合を感じることも少ないでしょう。

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

レスポンシブWebデザインで困る男性

レスポンシブWebデザインには様々なメリットがあることがわかりましたが、デメリットもあります。確認しておきましょう。

デバイスごとに細かい調整ができない

PC用やスマートフォン用に細かいレイアウトやデザインにこだわってサイトを制作できません。またそれぞれのデバイスで表示される際のコンテンツの見え方について精査する必要があります。

十分精査しない状態で公開してしまうと、結果としてユーザビリティを損ねることにもなりかねません。特に年配の方や子ども向けのページなどはデバイスごとに細かい調整を加えて最適化したほうが良いため、不向きであるかもしれません。

10代から40代などのスマートフォン、PC共に利用頻度が高くリテラシーの高い人々向けのサイトでは十分に機能するでしょう。

スマートフォンで表示する際重くなる

レスポンシブWebデザインではHTMLは1つです。スマートフォンはPCと比べて表示できるコンテンツの量が少ない一方で、読み込むHTMLは同じなため、読み込むのに時間がかかります。

特に大きな画像や動画など容量の大きいものはPCではスムーズに表示できるもののスマートフォンでは読み込みに時間がかかる場合があります。

必要以上に容量の大きいファイルを使わないよう心がけ、掲載する画像にも画像圧縮ツールを利用するなど容量を抑えることを心がけましょう。

また、Webサイトの表示速度を計測するツールPageSpeed InsightsがGoogleで用意されています。レスポンシブWebデザインではページの表示速度は重要な要素となるため、サイト制作の段階から確認しましょう。

PageSpeed Insightsとは?

Googleが公式提供しているWebサイトの表示速度計測ツールです。サイトのURLを入力すると100点満点で表示されます。また表示速度の遅いサイトには画像サイズの縮小やページリダイレクトの回避など改善策についても提案してくれるため、改善ポイントの切り分けが行えます。

ページの表示速度はユーザービリティだけでなくSEOにも影響する要素です。

表示速度を向上する方法

  • ブラウザキャッシュの有効期限を設定する

ユーザーのWebブラウザに、Webサイトのデータを一時的に記憶させる機能であるブラウザキャッシュの有効期限を設定することで、再訪したユーザーの表示速度を向上できます。

  • ソースコードを縮小化する

HTMLやCSSの不要なスペースや改行、インデントを削除することで読み込み行数を減らし、ページの表示速度を向上できます。

  • 素材画像を最適化する

画像はテキストに比べて容量が大きく、読み込みに時間がかかります。必要のない画像が使用されている際は取り除くことを検討しましょう。また、画像のサイズも見直しが必要です。画像圧縮ツールなどを利用しファイルサイズを小さくすることで表示速度の向上が期待できます。

レスポンシブWebデザインの作り方

レスポンシブWebデザインを考える

レスポンシブWebデザインの3要素

レスポンシブデザインは下記3つの技術的な要素で構成されています。

  • Fluid Grid(フルードグリッド)

Webページの要素を罫線に沿って配置するグリッドデザインとブラウザの横幅が変わってもレイアウトを維持したまま要素のサイズを調整するフルードデザインをかけ合わせた技術です。

レスポンシブWebデザインでは初めにグリッドデザインによってパーツをピクセル単位で配置し体裁が整った後にピクセルを割合(%)に変更しフルードデザインとします。

  • Fluid Image(フルードイメージ)

レイアウトの大きさに応じて画像のサイズを拡大縮小する技術です。CSSのみで実装が可能なため実装難易度も低いです。

  • Media Query(メディアクエリ)

画像の解像度、デバイス幅、向きなどの条件を検知し別々のCSSを適用する技術です。CSS3で実装された機能です。レスポンシブデザインではこの技術を用いてデバイスサイズに応じたCSSを適用します。

制作の流れ

1:サイトパーツの洗い出し

Webサイトに必要なパーツを洗い出します。ロゴ、文章、写真、ナビゲーションなど要素ごとに振り分けておきます。

2:ラフ画を作成

手書きやペンタブなどでおおまかなコンテンツの配置をスケッチします。

レスポンシブWebデザインではデバイスのサイズに応じてレイアウトが変わるため、スマートフォン、タブレット、PCなどサイトの表示が予想されるデバイスごとにスケッチを用意しましょう。

3:素材の準備

サイトに配置する画像やロゴなどを用意します。

レスポンシブWebデザインではCSSによって画像やロゴのサイズを制御するため、1つの画像に付き1サイズのみの用意で問題ありません。解像度を考慮し最も大きなデバイス以上のサイズの画像を用意し、スマートフォンなどでは縮小して利用しましょう。

4:ベースのHTMLを作成しViewportを指定する

サイト構成の基本となるHTMLを作成します。

その後に表示領域を定義する<head>要素内のmeta name =”viewport”について、下記の通りレスポンシブWebデザイン用の設定を行います。

<meta name=”viewport” content=”width=device-width,initial-scale=1.0”>

5:device-width設定

Viewportの幅をデバイスサイズに合わせるための文言です。widthパラメータにはピクセルサイズなど絶対値を入力することも可能ですが、デバイスサイズに合わせるよう指定することでレスポンシブWebデザインを実現します。

6:表は用いずグラフに置き換える

売上推移など表を用いたデータをレスポンシブWebデザインで表現するのは難しいとされています。

スマートフォンなどの小さなデバイスで表全体を表現すると文字が小さくなり、文字を読める大きさまで拡大すると表全体を表示できなくなります。また表ごとに項目の数や文字数なども異なるため、テンプレートを作るのが難しくなります。

そのためレスポンシブWebデザインでは表を円グラフや折れ線グラフなどの表現に置き換え視覚的に理解を促します。

7:CSSを記述する

各デバイスに応じたデザインをCSSで記載します。レスポンシブWebデザインを制作する際はCSSを効率よく記述するために、画面サイズの小さいデバイスのデザインから行います。

8:Fluid Imageを導入する

サイトパーツで準備した画像はサイズの大きなデバイスにも対応できるよう大きなものであるため用意したスマホ用のCSSを適用すると画像が見切れることがあります。画像をサイズ内におさめるために、下記の通りFluid Imageを設定します。

img { max-width : 100% }

9:Media Queryを導入する

レスポンシブWebデザインではMedia Query機能を用いてデバイス幅によるCSSの切り替えを行います。CSSを切り替えるしきい値(ブレイクポイント)を設定します。

10:Fluid Gridへ変換する

Media Queryを設定した状態では、デバイス幅がしきい値より大きくなった際にも画像が固定サイズで表示されてしまいます。ピクセル単位で設定されているサイトパーツのサイズを割合(%)に変換することで可変レイアウトを実現できます。

以上でレスポンシブWebデザインが完成します。

レスポンシブWebデザインの事例

それでは最後に、事例を元にレスポンシブWebデザインにてどのような違いや工夫をしているか見ていきましょう。

NIXON

ニコン_レスポンシブWebデザイン

サイトURL:https://www.nixon.com/jp/ja

スポーツ系の腕時計メーカーNIXONの公式サイトで、ECサイトとコーポレートサイトがあります。ファーストビューに特徴的なPR写真がありますが、デバイス幅に応じて拡大縮小しています。

またECサイトには不可欠な、メンズ、ウィメンズなどのナビゲーションがPCサイトでは画面上部に固定されて一覧表示されているのに対し、スマートフォンサイトでは初期状態では隠しハンバーガーボタンで展開しています。

デバイスによって表示できるコンテンツやパーツの量が考えられた設計となっています。

京都造形芸術大学通信教育部

京都造形芸術大学通信教育部_レスポンシブWebデザイン

サイトURL:https://www.kyoto-art.ac.jp/t/

大学の学部紹介サイトです。ターゲットである高校、大学生はインターネットのコンテンツ消費のほとんどをスマートフォンで行います。そのためスマートフォンサイトへの対応が必須です。

一方でカリキュラムや研究紹介など、多くの情報量が掲載されていますが、PCやタブレットなど比較的大きいデバイスサイズの際は画像で、スマートフォンではテキストで伝えたい情報を表示するなど工夫されています。

東京西徳洲会病院

東京西徳洲会病院_レスポンシブWebデザイン

サイトURL:http://www.tokyonishi-hp.or.jp/

当該病院を紹介するためのサイトですが、レスポンシブデザインとタイルデザインを組み合わせ見やすいサイトとなっています。

タイルデザインとは、一定のグリッドに沿ってタイル型のコンテンツを並べて表示するデザインです。ニュース系や雑誌系など、同様の体裁で多くのコンテンツが用意されているメディアではタイルデザインを利用しているところが多いです。

このタイルデザインとレスポンシブWebデザインを組み合わせ、デバイス幅に応じて横に並べるタイルの枚数を制御することでユーザビリティを守っています。

病院の紹介サイトでは、対応可能な料金、交通アクセスなど情報量が多いですが、PCサイトとスマートフォンサイトで表示する情報の量を制御することで、ユーザーがどのデバイスでも効率的に情報を収集できるよう実装されています。

おわりに

レスポンシブWebデザインはスマートフォンの普及を背景として注目され、今では主流となっています。

1つのHTMLを複数のCSSで制御する方法で実現されますが、サイト構成が1つであるためコンテンツの追加や削除などの管理がしやすく、SEOでも有利にはたらくといったメリットが挙げられます。

一方でHTMLが一つであるがゆえに、デバイスごとの細かい調整はきかず、コンテンツの多いPC用のサイトをスマートフォンでも読み込むため、スマートフォンで読み込みが重くなる場合があります。それを解消するために画像サイズやソースコードの見直しなどが必要です。

メーカーや大学、病院などの公式サイトでも用途に応じて利用されているレスポンシブWebデザインをこの機会に習得してみましょう。

WEBでのお問い合わせはこちら