週刊アスキー

  • Facebookアイコン
  • Twitterアイコン
  • RSSフィード

レスポンシブデザインって何? ウェブレイアウトの種類を詳しく解説|Mac

 最近のウェブサイトは、パソコンだけでなくモバイルデバイスからのアクセスも視野に入れなければなりません。以前はパソコン/モバイル用の2種類のサイトを用意してユーザーエージェントで切り替え、表示対応させる方法が主流でした。

 これに加えて近年は、パソコン/モバイル用でHTMLを変えずに表示領域の横幅に合わせてCSSを自動的に切り替える方法が増えています。これは「レスポンシブ」デザインのMediaQuery切り替え型と呼ばれるもの。このように普段目にしているウェブサイトは、レイアウトによって基本的に4つのパターンに分けられます。

ソリッド
ウェブレイアウトの基本にして王道の固定幅デザイン

Mac
webdesign
ソリッドデザインを採用するアップルのサイト。デバイスが変わっても写真やテキストの配置が変わらない 
iPad
webdesign
iPhone
webdesign

 横幅を固定幅でデザインし、デバイスが変わっても見え方が変化しないウェブページデザインの基本。どんなデバイスであっても、つねに同じレイアウトであることは、ユーザーインターフェースに一貫性があり、ブランドイメージの強調という側面もある。

リキッド
ウィンドウの横幅に合わせて改行する流動的なデザイン

Mac
webdesign
「Wikipedia」はデバイスごとに読みやすい文字サイズで表示するため、改行位置が変わっている。iPhoneでは写真の位置を変えるなど、自動的に調整される 
iPad
webdesign
iPhone
webdesign

 リキッドデザインは、その名のとおり文章やコンテンツがリキッド(液体)のように可変するレイアウトのこと。ウィンドウの横幅に合わせて改行位置が自動的に変わるため、画面解像度の異なるデスクトップ機やAndroidデバイスには最適とされる。

レスポンシブ(User Agent切り替え型)
確実な表示が可能だが、デバイスごとにHTMLが必要

Mac
webdesign
「楽天」の検索ウィンドウやアイコンを見ると、デバイスごとに異なるレイアウトになっていることがわかる
iPad
webdesign
iPhone
webdesign

 ブラウザーがサーバーに対して情報を自己申告する「User Agent」はiPhone/iPadといった機種の種類やOSのバージョンのほか、これらの情報に合わせてURLを移動するスクリプトを組み込んでいる。つまり、デスクトップ/モバイル用など複数のHTMLを用意していれば、ウェブサイト側が自動的に表示を切り替える。

レスポンシブ(Media Query切り替え型)
HTMLが1種類のシンプル設計 横幅に合わせてデザイン変更

Mac
webdesign
テイボーのサイトは、各デバイスに最適化したレイアウトで表示される。しかし、別々に用意しているのではなく横幅に応じてCSSを切り替えている
iPad
webdesign
iPhone
webdesign

 Media Queryとは、スクリーンの横幅に合わせて読み込ませるCSSを切り替えるレイアウト。切り替え時にHTMLを変更する必要がないため、URLは変わらずWordPressで構築したサイトは1回の更新で済む。ただし、最初にウェブサイトを設計するときにしっかりとしたHTML構造と柔軟なCSSの構築が求められるため、最も上級者向けのレイアウトと言える。


 6月28日発売のMacPeople 8月号では、WordPressを使ったウェブデザイン講座「WordPressで作るレスポンシブウェブデザイン」を特集。閲覧するデバイスによってウェブレイアウトを工夫しなければならない理由など、パソコンやMacだけでなくiPhoneやiPadなどモバイルデバイス向けのウェブサイトを作りたいと考えている人は必見です。

MacPeople2014年8月号

 また、6月28日発売のMacPeople 8月号の特集ラインアップは「WordPressで作るレスポンシブウェブデザイン」に加えてWWDCでベールを脱いだOS X YosemiteとiOS 8の新機能総ざらい、アップルの新プログラミング言語Swiftパーフェクトガイド、Googleアナリティクス基礎講座──の4本です。電子版なら気になるキーワードで検索ができるほか、定期購読は紙よりも安くてお得ですよ!

MacPeople8月号はWWDC2014大特集
MacPeople2014年8月号
Amazonで購入は表紙をクリック

MacPeopleはNewsstandでも配信中
1ヵ月の定期購読なら最新号が600円!

Newsstand 電子雑誌をダウンロード

この記事をシェアしよう

週刊アスキーの最新情報を購読しよう