様々な環境に対応させる際の製作労力を軽減しやすい「モバイルファースト」

単一ページでPCにもモバイルにも対応するレスポンシブ・ウェブデザイン

単一ページでPCにもモバイルにも対応するレスポンシブ・ウェブデザイン (ソニー製品情報サイトでの例)

ウェブサイトの製作では、「モバイル版」ページも「PC版」ページも同時に1ファイルで実現する「レスポンシブ・ウェブデザイン」が広く使われつつあります。その方が、閲覧端末別にHTMLファイルを分離する必要がないため、更新にかかる作業量が少なくて済み、管理が楽だからです。

このレスポンシブ・ウェブデザインを採用する際、「モバイルファースト」という設計方法でCSS(スタイルシート)を記述しておくと、デザインに関する記述量が少なくて済み、メンテナンスも楽になるメリットがあります。

今回は、この「モバイルファースト」な設計でのCSSの書き方をご紹介致します。フレームワーク等は利用せずに、CSSソースを1から全て記述する場合の基本的な書き方をご説明致します。その方が、「CSSをどのように書けば、どのような閲覧環境で、どう表示されるのか」が分かりやすいからです。

シンプルな共通デザインを先に記述し、諸々のデザインを後で付け足す書き方

(左)分離すると更新手間も倍になる/(右)共通部分の記述は一度で済む

(左)分離すると記述量と手間が多い/(右)共通部分の記述は一度で済む

たいていの場合、「PC(広い画面)用のデザイン」よりも「モバイル(狭い画面)用のデザイン」の方がシンプルな構成になるでしょう。その場合には、まず、「モバイル(狭い画面)用のデザイン」を全て記述しておき、そこに追加する形で「PC(広い画面)用のデザイン」を作っていくと、記述量を減らせる上に、更新の手間も少なくて済むCSSソースになります。

例えば、(1)スマートフォン用デザイン、(2)タブレット用デザイン、(3)PC用デザインの3種類を用意したい場合を考えます。


 
共通部分の記述は1度だけ

共通部分の記述は1度だけ

このとき、まずは、ベースのデザイン(=共通デザイン)として、スマートフォン用のデザインを記述します。右図では赤色で示しています。スマートフォンで閲覧された場合は、この赤色部分のスタイルだけが読まれるようにします。

次に、タブレット用デザインを記述しますが、ここでは、「スマートフォン用デザイン」と共通する部分の記述は省き、「タブレット用として追加するデザイン」だけを記述します。右図では黄色で示しています。タブレットで閲覧された場合は、赤色+黄色のスタイルが読まれるようにします。

最後に、PC用デザインを記述しますが、ここでは、「スマートフォン用デザイン」および「タブレット用デザイン」と共通する部分の記述は省き、「PC用として追加するデザイン」だけを記述します。先の図では緑色で示しています。PCで閲覧された場合は、赤色+黄色+緑色のスタイルが読まれるようにします。

上記のように、レイアウトが単純な「モバイル版デザイン」を先に設計・記述しておき、そこに広い画面用のデザインを付け足していく方法だと、共通するデザインの記述は1度で済むため、記述量が少なくて済み、更新作業も楽になります。

※「モバイルファースト」という用語は、主にモバイル端末での使いやすさを優先して製作するという意味で使われています。しかし、本記事では、設計上の「使いやすさ」については触れていません。あくまでも、レスポンシブ・ウェブデザインを採用する際に、CSSソースを楽に記述する(=記述量を減らしてメンテナンスを簡単にする)方法だけを解説しています。

それでは次のページから、CSS3のMedia Queriesの記述方法を使って、モバイルファーストなCSSを記述する方法を見ていきましょう。