イベント・セミナー

未来へレスポンシブに対応するための設計と戦略

「コンテンツ」と「制作プロセス」がレスポンシブWebデザインの鍵になる

最後のセッションに登壇したのは、デザインやコンサルティングを通じてWebの仕事に携わる長谷川恭久氏だ。長谷川氏は「未来へレスポンシブに対応するための設計と戦略」というテーマで、レスポンシブWebデザインの本質に迫る考え方を、米国の最新事例を交えながら、説得力あふれる語り口で惜しみなく披露してくれた。

なお、講演内容は長谷川氏のブログ記事「レスポンシブWebデザインから始まる適応への道」でも触れられているので、そちらも参照してもらいたい。

登壇した長谷川氏は、まずレスポンシブWebデザインの主な対象が、スマートフォン、タブレット、PCに限定されている状況はあと1～2年で終わると述べる。

長谷川恭久氏

「テレビやウェアラブルデバイスなど、今後はさまざまなスクリーンでWebにアクセスする機会が増えてきます。またレスポンシブWebデザインは、小さなスクリーンへの対応という話になりがちですが、逆に大きなスクリーンでどう見せるかという方向性もあります。デバイスもますます増えてきて、iPhone、iPad、Androidという単純な構図ではなくなってきています」

Android端末だけを見てもスクリーンのサイズは多様化している。また、さまざまなブラウザに搭載されているWebKitも27種類のバージョンがある。「何百パターンもの組み合わせをテストし、同じデザインを再現するのは正気の沙汰ではない」ということから登場したのが、レスポンシブWebデザインだという。

長谷川氏は、このレスポンシブWebデザインを設計するうえでのキーポイントを、「コンテンツ」と「制作プロセス」の2点に分けて紹介した。長谷川氏が改めて指摘したのは、コンテンツの重要性だ。

「コンテンツがなければ、コンバージョンもシェアも起こらない。ではコンテンツとは何なのか。さまざまなデバイスに情報発信するなかで、何が御社の最高のエッセンスなのか。このコンテンツについては、もっと議論されなければならないでしょう」

従来のPCサイトには、本当にそこになければならないコンテンツが非常に少ないケースが実際にあるという。スクリーンサイズが大きく、さまざまな情報を詰め込むことができてしまうことがその原因だ。

「Web制作のプロセスでは、スマホの小さなスクリーンに、PCサイトのコンテンツをどうやって載せたらいいか悩むことが多いと思います。しかし、それは考え方が逆で、今まではコンテンツの本当の重要性を見ずに、何でもサイトに入れていたに過ぎません。PCを前提とするサイト構築から脱却し、モバイルファーストの考え方で、そのページで最も出さなければいけないコンテンツのエッセンスをまず把握する。これが設計のスタートになります」

重要なコンテンツを見いだすために、長谷川氏が勧めるのが「コンテンツシート」の作成だ。「それぞれのWebページで、利用者に何を見てもらいたいのか、目的を明記し、そのためのコンテンツの入手先を洗い出してシートにします。そして3段階くらいでプライオリティを付けるのです。こうすることでレスポンシブにしたときに、どのコンテンツを上位に持ってくるか、下に下げるかが見えてくると思います。コンテンツは最初から揃っていることはまれで、Web制作と同時進行で作っていくことがほとんどでしょう。しかし、1つのシートで、どこにどんなコンテンツを入れるかを管理していれば、たとえコンテンツそのものがなかったとしても、設計しやすくなります」

長谷川氏はさらに、次のように付け加えた。「今後、コンテンツが自分たちのページから離れて、たとえばソーシャルメディアに行き、未知のデバイスでまったく違う形で化けることもあるでしょう。想定していないような未知のデバイスへの対応は、コンテンツの意味付けから始まると思います」

2点目はレスポンシブWebデザインの「制作プロセス」についてだ。結論として長谷川氏は、「従来のWeb制作プロセスと、レスポンシブWebデザインの制作プロセスは変わってくる」と話す。ブレークポイントごとにワイヤーフレームつくり、それを見せただけでは、多くのクライアントは何がどうレスポンシブになるのか、想像できないからだ。

「従来のWeb制作は、まず見た目を作り、その後マークアップして、時間が空いたらコンテンツを流し込むというプロセスになっていると思います。しかし、レスポンシブWebデザインではコンテンツの位置付けが重要ですから、まずデザインをしてからテストをし、その結果をレビューするという流れになるでしょう。簡単なものを最初に作り、レスポンシブWebデザインとは何かをクライアントに体感してもらったうえで、徐々に作っていく形が最適だと思います」

“すべてのブラウザで同じデザインにする”という固定概念を捨てる

レスポンシブWebデザインにする方法としては、CSSによって要素を隠す、ナビゲーションをコンパクトにするなどさまざまな方法がある。長谷川氏は、こうしたテクニックは「この数年、Webデザインをやってきた方であれば、簡単に実装できる」と話すが、レスポンシブWebデザインには、実装以外の部分で2つの課題が残っていると説明する。

1つは、デバイスに画像を最適化させる処理だが、この課題についてはJavaScriptやサーバー側の設定の工夫で、解決可能だという。問題なのは、サイトに掲載する広告の取り扱いだ。現状では広告やその契約がレスポンシブWebデザインを想定していないため、スマートフォンで閲覧したときには広告を非表示にしているサイトも多い。

従来の広告は「サイト上のこの位置に何ピクセルで載せます」ということを保証して広告枠を販売している。しかし、レスポンシブWebデザインでは、指定された位置に決められた大きさで広告が表示されるとは限らない。この問題が解決しないと、レスポンシブWebデザインは普及しないのではないか、と長谷川氏は危惧する。

しかし、米国ではいくつかの解決策が登場しているという。1つは「レスポンシブ広告」というもので、デザインと広告を1つのパッケージにして販売する方法だ。つまり、機種によって表示位置やサイズが変わることを前提に、広告を用意してもらう。

「そしてもう1つは、私からの提案ですが、タップすると拡大する広告を設置し、問い合わせや買い物ができるようにする。つまり、広告のなかでコンバージョンを実現してしまうといった、インタラクティブな広告の設置です。今後は、広告の考え方もレスポンシブになり、新しいモデルが生み出されていくでしょう。広告は固定した枠ではなく、Webの空間を使っているという意識転換が必要になってくると思います。レスポンシブWebデザインと広告との関係は、未成熟な領域です。今後、さまざまな業界の方と話し合えたらよいと思っています」（長谷川氏）

Webが普及し始めてから15年ほどが経つが、進化の余地はまだまだ残されている。その1つがレスポンシブWebデザインだ。しかし、レスポンシブなデザインを実現するには、「サポートしているすべての端末・ブラウザで、見た目を同じにしなければならない」という無意味な固定概念をまず取り払う必要があると、長谷川氏は強調する。

「レスポンシブWebデザインを導入するには、何のためにWebを使ってコミュニケーションをしているのか、コンテンツを消費しているのかについて理解が求められます。それらを理解することによって、コンテンツをより適した形で提供できるようになると思います」

自分のライフスタイルに合わせて、1人が何台ものデバイスを使い分ける時代は、もうすぐそこまで来ている。そのときにレスポンシブWebデザインは完璧ではないが、有力な解決策の1つ。時代は待ってくれないので、新しいものをテストし、模索することが大切だ。最後に長谷川氏はこのように話し、セッションをまとめた。

[Sponsored]