「いまやパソコンよりもスマートフォンやタブレットによるアクセスのほうが多いことは珍しいことではない」。そう感じているコンテンツマーケターも多いだろう。これらスマートフォンやタブレットの世界では、次々といろいろな種類のデバイスが登場している。もはや現在どのくらいの種類が流通しているのか、数えきることもなかなか難しい。
コンテンツを「デバイスに最適化されたものにする」のは非常に重要な視点だ。しかし、デバイスが増え続ける状況にコンテンツをどう対応させていくことが望ましいのだろうか。そこでぜひ耳を傾けたいのはレスポンシブWebデザインというアイデアだ。
レスポンシブWebデザインとは、今まさに生じている「Webを閲覧するデバイスの多様化」に対するひとつの処方箋といえる考え方である。そして、このレスポンシブWebデザインという考え方には「コンテンツファースト」というコンセプトが内在されている点が見逃せない。コンテンツマーケターにとっても非常に興味深い考え方といえるだろう。
そこで今回はこのレスポンシブWebデザインの専門家、Web Directions East LLCのCEO菊池崇氏に話を伺い、レスポンシブWebデザインの考え方およびコンテンツマーケティングとの関連性について今回より5回に渡ってお伝えしていく。初回の今回はコンテンツマーケターが知っておくべき観点からレスポンシブWebデザインが注目されるに至った背景についてレポートします。
書籍『レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック』の著者でもある菊池崇氏
そもそもレスポンシブWebデザインとは、1つのHTMLファイルをCSS3で管理して、複数のデバイスに対応したページレイアウトやデザインを柔軟に調整するデザイン技術のこと。
このレスポンシブWebデザインが注目されることになった最大の背景には、Webブラウザを閲覧できるデバイスが多様化していることがあります。デバイスといえばスマートフォンやタブレット、デスクトップパソコンの3種類だけだと思っている人も少なくありませんが、Google Glassやスマートウォッチなどのウェアラブル端末も含め、Webブラウザを含むもののすべてがデバイスだと考える必要があるんです。
デバイスの数だけスクリーンの形やサイズは異なります。閲覧環境に応じてページレイアウトが柔軟に切り替わるよう、Webサイトのマルチデバイス対応は欠かせません。そんな状況下においてWebデザインをするときに、求められることは2つあります。
まず1つ目はなんといっても柔軟性。ブラウザ上での表示に関わることなので、前提条件としてブラウザが持つHTMLやCSSの機能を上手く活用することが必要です。たとえば、レスポンシブWebデザインではCSSを切り替えるだけで、単一のHTMLがさまざまなデバイスにぴたっと合うよう調整できるんです。
そしてこの柔軟性が2つ目の「運用しやすさ」に繋がります。多種多様なデバイスを把握し切れない時代に、デバイスごとにHTMLを分けるなんて難しい話です。今後さらにデバイスの数は増えていくことでしょう。Webは作っておしまいではなく、作った先には定期的な運用が待っています。
たとえば運用フェーズに入った1週間後、あるページにちょっとした情報を追加しなくてはならなくなったとします。デバイスごとにHTMLを作っていたならば、その追加修正はそのデバイスの数だけ生じることを意味します。つまり1点の追加修正対応だとしても対応するデバイスの数だけコストがかかるのです。これがコンテンツマーケティングのように、継続的に見込み客が必要とする情報を提供する手法で考えたらどうでしょう。運用予算に占める更新コストの割合が高まり、肝心のコンテンツ開発が手薄になる、という本末転倒な状態にもなりかねません。
一方、レスポンシブWebデザインならば、異なるスクリーンサイズとOSを持つ複数のデバイスに対し、同一のコンテンツを安定的に届けられます。このことこそが注目される背景なのだと思います。
レスポンシブWebデザインが海外で注目され始めた時期についても振り返っておきましょう。以前から源流はありましたが、言葉そのものが初めて正式に世に出たのは2010年5月、Tech系Webマガジン「A List Apart」内で公開された記事の中でした。
イーサン・マルコッテ氏（アメリカ）によって寄稿されたA List Apart内の記事“Responsive Web Design”
マルコッテ氏は以前から、ページを罫線やマス目に区切ってレイアウトするグリッドデザインと、ブラウザの横幅に合わせてサイズを調整するフルードデザインを組み合わせた「フルードグリッド」という技術を使っていました。レスポンシブWebデザインはこのフルードグリッドを含め、「フルードイメージ」「メディアクエリ」の3つの技術で構成されています。
一方、日本にレスポンシブWebデザインが入ってきたのは2012年頃のことでした。言葉として耳にすることが増えたのは2012年後半。タイムラグが生じたのは、独特なガラケー文化がひとつの原因だと私は考えています。ガラパゴス携帯ともいわれるように、Webブラウザ機能のついたフィーチャーホンは、キャリア主導でほぼ日本国内のみに展開され独自の進化を遂げていました。このガラケー全盛期にはほとんど海外の端末も上陸していません。そのため、レスポンシブWebデザインのような海外発のアイデアが注目される必然性がなく、当たり前のようにHTMLの振り分けは行われていました。
一方で、欧米にはBlackBerryやWindows Phone、一時的にはNokiaがあり、さらにはOSにはAndroidとiOSがあり、それぞれで言語が違うこともあって、すべてに対して個別に対応するHTMLを作ろうとすると、開発コストが日本の数倍に膨れ上がってしまいます。そのため、レスポンシブWebデザインで1つのHTMLに統一し、開発コストを抑える必要性があったんです。
しかし、徐々に日本にも海外の端末がどんどん入ってくるようになりました。とはいえ、iOSから始まりAndroidが入ってくる程度で、今でもまだ二極です。そのため現状、レスポンシブWebデザインを導入する必要性はまだまだ認識されにくい状況なのかもしれない、と捉えています。
Windows Phoneなどが上陸し始めて端末数が増加すると、手間やコスト削減の目的でレスポンシブWebデザインに手を挙げる人も増えていくことでしょう。