Webデザイン、これからどうなるの?(全10回)

あらゆる画面サイズに対応できるレスポンシブデザインの現在とは?

PC/モバイル両対応の手法のひとつであったレスポンシブデザインも、現代では標準的な存在となった。そのレスポンシブデザインをおさらいします(第4回)。
Webデザイン、これからどうなるの? キーワードから探るデザイン動向の現在と未来

この記事は、書籍『Webデザイン、これからどうなるの? キーワードから探るデザイン動向の現在と未来』の一部をWeb担向けに特別にオンラインで公開しているものです。

Chapter 2レイアウトNo. 12レスポンシブデザインレスポンシブデザインの現在

3行で理解!

閲覧環境や制作工数、SEOなどの観点から常識化している
レスポンシブデザインは「デバイス毎に対応する」のではない
あらゆる画面サイズに対応する意識を持つ

PC/モバイル両対応の手法のひとつであったレスポンシブデザインも、現代では標準的な存在となった。スマートフォンの多様化やタブレット端末の普及により、PC/モバイルの二元論ではなく、多様なディスプレイサイズに対応することが必要となった。

フレームワークの登場でより身近な存在に。 http://getbootstrap.com

レスポンシブデザインの誕生を振り返る

スマートフォンが世間に登場した当時は、PC向けのレイアウトとスマートフォン向けレイアウトを別々に作成し、それぞれを個別に表示させる手法が取られていました。この方法ではそれぞれの環境での表示を最適化できる一方で、作業量や管理するデータが倍になり、実質2つのサイトを作っているのと同じ労力がかかります。そこで登場したのが、レスポンシブデザインでした図1

図1同一のソースを用いて多種多様の画面解像度に対応する。

画面サイズに応じて適用するCSSを切り替えることで、同じHTMLソースにもかかわらず、環境によって別のデザインを表示することができるレスポンシブデザインは、制作量を軽減し、情報の一貫性などの多くの利点を持っています。レスポンシブデザインを取り入れたフレームワーク「Bootstrap」などの登場により、導入コストが下がり、認知が広がるとともにより身近な存在となました。

レスポンシブデザインの弱点としては、同一のHTMLソースを使用するため、PCとモバイル環境で大きく差のあるページが作りにくいという点がありました。しかし前述のとおり、モバイルファーストが通常となった現在では、むしろPCサイトがモバイルサイトに近づいています。レスポンシブデザインを導入する障壁は、以前よりもさらに低くなっていると言えるでしょう。

「どのデバイスか」から「どんなサイズでも」へ

レスポンシブデザインが登場した当時は「PCサイトのスマートフォン対応」といった文脈で語られることが多かったものですが、現代ではスマートフォンの画面サイズは多様化し、タブレット端末でもiOSのSplit ViewといったWebサイトの表示サイズを変更する機能が実装されています。こうなってくるともはや「どの端末に向けた表示」ではなく、「あらゆる表示サイズにも対応できる」デザインが必須と言える状況です。

画面サイズによるブレイクポイントの設定は、CSSのメディアクエリで行うことになります。主に、スマートフォンとタブレットの中間(600px程度)やタブレットとPCの中間(960px程度)に設定されますが、レイアウトによって、あるいはコンテンツによってはさらに細かなブレイクポイントを設定する必要があるかも知れません図2

図2あらゆる解像度にデバイスは分布している。

また、レスポンシブデザインで重要なのは各デザインがあらゆる解像度においてシームレスに変動することです。ブレイクポイントの前後で要素がはみ出てしまったり、想定よりも大きな画面サイズで表示した際にレイアウトが破綻してしまったりするケースをよく見かけます。

デザインの段階でスマートフォン、タブレット、PC、それぞれのデザインを作成するだけではなく、その中間の画面サイズの場合、どのデザインがどのように変動してカバーするのかを考慮してください。そして、レスポンシブデザインの挙動をチェックする際は、必ず無段階に画面サイズを変更しながら確認を行うようにしましょう。

「Quanta Magazine」図3では3段階のレイアウトに対応していますが、画面幅が狭くなってもメニューの文字が隠れないよう折り返し処理がなされるなどの注意が払われています。

図32カラムのレイアウトからシームレスにスマートフォンビューに
https://www.quantamagazine.org

近年では、Webブラウザーでもレスポンシブデザインの挙動の確認が容易にできるようになりました。Google Chromeのデベロッパツールや、Safariのレスポンシブ・デザイン・モードなど、ブラウザー内でデバイスや解像度を指定するだけで、簡単に状況の再現が可能です。また、GoogleはWebサイト上で各デバイスでの表示が確認できる「Resizer」図4というツールを公開しています。

図4各デバイスでの表示を同時に確認できる。
https://material.io/resizer/

Googleも推奨するレスポンシブデザイン

以前からGoogleはレスポンシブデザインを推奨してきました。モバイル環境のユーザーが増えたことに加え、特にデバイス毎にURLが分かれないこと、デバイス毎のコンテンツ(HTMLコード)に差異がないことを重視しています(注1)。

注1:https://developers.google.com/search/mobile-sites/mobile-seo/(Google Developers)

2015年からは、「サイトがモバイルフレンドリーであるかどうか」が検索結果に影響を与えるようになりました。

もちろん、「レスポンシブデザインを採用したら検索順位が上がる」という単純な話ではありませんが、今後さらにモバイル環境の多様性が広がり、コンテンツの内容が重視されることとなるのは間違いないと言えるでしょう。そのような状況において、レスポンシブデザインは今後も価値を発揮し続けるのは間違いありません。

他にも、Material Designのガイドラインの中には、レスポンシブUIについての記載があります(注2)。Material Designにおける表示サイズ変更時のデザインパターンも網羅していますので、画面サイズ変更時の挙動の参考にするのもよいでしょう。

注2:https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-surface-behaviors

画像もレスポンシブに

レスポンシブデザインの中でもネックになる要素として、写真画像などのビットマップ素材が挙げられます。例えば、背景前面に画像を使用したい場合、あらゆる画面サイズに対応するためにファイルサイズの大きな画像を指定したい、しかしモバイル環境でのロードを考えるとファイルサイズの小さな画像のほうが好ましい…。

一方で、ピクセル比の高いRetinaディスプレイ(@2x、@3x)への対応をする必要もあります。このような悩みを解決する方法として、imgタグのsrcset属性があります。想定される画面サイズと、そのときに読み込みたい素材のURLを設定することで、画面サイズに応じた画像を読み込むことができます図5

図5ディスプレイのピクセル比に応じて画像を出し分けする例
<img src="img@1x.jpg" srcset="img@1x.jpg 1x, img@2x.jpg 2x" />

見出しテキストを画像で作成するケースがありますが、高解像度対応ができていないために、本文のテキストは滑らかに表示されているのに、見出しテキストはぼやけている、というような光景をよく目にします。見出しもそのまま通常のテキストにすれば解決ですが、特別なフォントが使いたいなどデザイン上の理由もあることでしょう。このような場合、SVG形式を利用することをお勧めします。SVG形式はアウトラインでデータが作成されているため、いくら拡大したとしても滑らかに表示させることができます。見出しだけでなく、表示サイズが変動しうるアイコンなどもSVGで作成するとよいでしょう。

Step Up

picture要素とmedia属性

HTML 5.1で新しく加わったpicture要素とmedia属性を使用すれば、画像の出し分けをさらに細かく設定することが可能です。srcset属性と組み合わせて使うこともできます。

<picture>
  <source media="(min-width: 1024px)" srcset="large.jpg" />
  <source media="(min-width: 600px)" srcset="small.jpg" />
  <img srcset="other.jpg" />
</picture>
  • 著者:森本友理、鈴木慶太朗、福岡 陽、三宅太門 共著
  • 価格:2,000円+税
  • ISBN:978-4-8443-6730-7
  • 発行:エムディエヌコーポレーション

常に進化し続けるWebデザインの「最新」と「これから」がわかる。新しい手法の意義と効果を知る

本書は、「UI」「レイアウト」「グラフィック」「タイポグラフィ」「配色」の5つをテーマに、さまざまな手法で作られた実例とその意義・効果を知ることで、Webデザインの最前線とこれからのデザイントレンドを一望できる内容になっています。

各分野の第一線で活躍するクリエイターや識者が、「いまのWebデザイン」に対する独自の意見や見解を交えた「オピニオンコラム」も掲載。Webの制作・発注に関わるすべての人々、そしてグラフィックなど他のデザインに携わる方にも必ず役立つ一冊です。

この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

Web業界の転職情報

もっと見る
Sponsored by

今日の用語

なりすまし
ネットワーク上で他人に“なりすまし”て活動すること。「spoofing」と英語表 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]