CSSだけでできる?の判断スキル向上など、失敗から得た5つの気づき

2012年6月6日(水)
白石 俊平

2. レスポンシブWebデザインはモバイルファーストとともに実践しよう

今回はPCサイトのデザインを先に行っていたのですが、それを途中で破棄し、モバイル向けサイトを先に作るという判断を下しました(細かい顛末は前回の記事を参照してください)。いわゆる「モバイルファースト」です。が、今回は制作の都合上、やむを得ずそうなったというだけなので、「モバイルファーストで作りました」と胸を張って言えるようなものではありません(本来のモバイルファーストはもっと戦略的に、マーケティングの観点などからも語られるべきでしょう)。

とは言え、経緯はどうあれ、やってみて初めて分かることも多々あります。ぼくらが得た気づきとしては、「モバイルファーストはやるべき。レスポンシブWebデザインであればなおさら」というものです。

図3:今回、こちらのスマートフォンサイトを先に作った

図4:スマホサイトを元にレイアウトし直して作成したPCサイト

先ほども申し上げたように、レスポンシブWebデザインの大きな価値の一つが「1ソース、1URL」を実現できることです。しかし、複数のスクリーンサイズ、異なるコンテキスト向けのビューを1ソースで「作らねばならない」というのは、やはり制作上の大きな「制限」ではあります。

そうした制限の元で、PCサイトのマークアップ/スタイリングを先に行っていた時分は、常に「このコードがモバイルでも動作するのだろうか」という不安が付きまとっていました。このコンテンツ設計で、モバイルサイトでも問題ないだろうか?ファイルサイズが大きすぎるのではないだろうか?そもそもこのコードを、CSSメディアクエリだけでモバイルに最適化できるのだろうか?

そして、おそらくこれらの不安はかなりの確率で「悪い方に的中する」という変な予感もありました。ならばやはり、こうした不安を解消するためにも、制限の多いモバイルサイトから作り始めるべきだと思えたのです。

モバイルファーストでの制作を実施すると、CSSにも変化が訪れました。最も顕著な変化は、デフォルトのCSSがスマホ向けになり、メディアクエリを用いて「より大きな」スクリーンサイズ向けのCSSを記述していくことになるというものです。

/* スマートフォン向けのスタイル */

@media only screen and (min-width: 480px) {
  /* 幅480px以上のスクリーンに対するスタイル */
}

@media only screen and (min-width: 768px) {
  /* 幅768px以上のスクリーンに対するスタイル */
}

@media only screen and (min-width: 1140px) {
  /* 幅1140px以上のスクリーンに対するスタイル */
}

少し前までは、PC向けのCSSに対して「max-width」を指定することで、「より小さな」スクリーンサイズ向けのスタイルを記述していくという例がよく見受けられましたが、モバイルファーストの場合は全くの逆になることがお分かりでしょう。

今回の案件を通じて、モバイルファーストは単なる「心がけ」や「戦略」にとどまらず、CSSの記述方法のような具体的な方法論にまで影響を及ぼす、大きなパラダイムシフトだということに気づくことができました。

株式会社シーエー・モバイル

株式会社シーエー・モバイル Web先端技術フェロー、株式会社OpenWeb Technology代表取締役。HTML5開発者コミュニティ「html5j.org」管理人、Google公認 API Expert (HTML5)、Japan Java User Group幹事、Microsoft Most Valuable Professional 2010/2011 (IE)なども務めています。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています