SwapSkills Doubbbleの第9回となる「レスポンシブWebデザインの今と未来」が、2013年3月9日（土⁠）⁠、東京都品川区の「きゅりあん」にて開催されました。本稿では本イベントのレポートをお届けします。

レスポンシブWebデザイン（RWD）は、2012年には日本でも話題となりバズワードの一つに数えられました。マルチデバイス対応を可能にするデザイン手法ですが、技術的には過渡期にあるため、レスポンシブWebデザインを間違って認識しているケースも少なくないようです。

本イベントでは、RWDについての正しい情報やノウハウを提供することを目的に、以下の5人のスピーカーが4セッションに分かれて講演しました。それぞれの専門領域からRWDの実装面でのノウハウや、現在、起こりつつある最新動向について解説しました。

• 「レスポンシブWebデザインで変わるワークフロー」（⁠渡辺 竜氏）
• 「レスポンシブWebデザインのパフォーマンスチューニング」（⁠猪狩丈治氏、諸星一行氏）
• 「ツールで直感的にレスポンシブWebデザインが作成できる！」（⁠轟 啓介氏）
• 「フルードグリットを理解することからレスポンシブWebデザインは始まる」（⁠菊池 崇氏）

渡辺 竜氏セッション「レスポンシブWebデザインで変わるワークフロー」

まず、テンプル大学ジャパンキャンパス Webマスターの渡辺 竜氏が登壇しました。渡辺氏は、テンプル大学でのWebサイトリニューアルでのRWD導入の経験を通じて、以下の3点とテンプル大学での制作フローをもとにデモを交えて制作側の目線で解説を行いました。

テンプル大学のWebサイトは、2011年10月にリニューアルされ、その際、RWDによりマルチデバイスに対応しました。現在は、英語と日本語の2ヵ国語で運営されています。

第1部として、渡辺氏はまず、RWDの基礎について解説しました。スマホ所有率の増加や、一人のユーザーが複数の端末を使い分ける利用シーン、さらに未知の端末への対応など、今後ますます「ユーザーがどんなデバイスを使ってWebを閲覧するかわからない」状況に対応するRWDは、制作者側、ユーザー側双方に様々なメリットをもたらします。制作者側のメリットとしては「1つのURLでコンテンツが提供できる」「⁠様々な画面サイズに対応できる」「⁠未知の端末にも対応しやすい」「⁠運用面での省力化」「⁠SEOの効果（検索エンジンに易しい構造⁠）⁠」などが挙げられます。一方、ユーザー側のメリットは、「⁠自分の使うあらゆる端末の画面サイズに対応している」「⁠どの端末からも同じ情報に辿り着ける」「⁠デバイスごとに同じURLでリンクをシェアできる」などが挙げられます。

次に第2部として、RWDにおけるワークフローが解説されました。従来のサイト制作のワークフローは、「⁠プランニング」「⁠情報設計」「⁠コンテンツ制作」という基本設計の工程を経て、「⁠デザイン」「⁠開発」「⁠テスト」という工程を行います。こうした一つひとつの工程をクライアントの承認を得ながら進めていく、いわゆる「ウォーターフォール型」のワークフローが一般的でした。しかし、RWDにおいては、「⁠プロトタイプを中心にしたワークフロー」や「アジャイル型のワークフロー」がよいということです。アジャイルとは制作の各工程フローを短期間で行って、それを何度も繰り返していくやり方です。

というのも、RWDでは、実機での検証を通じて細かい変更に臨機応変に対応していく必要があるからです。ですから、実際に動くプロトタイプを中心として、短期間での工程を繰り返しながら制作を進めていくやり方が、RWDには向いているのです。

渡辺氏は、RWDにおけるワークフローについて、基本設計の考え方を3点示しました。

1. すばやく作成、修正できる手法を選ぶ
2. デザイン・コンセプトを作る
3. 表示パフォーマンス最適化を盛り込む

その上で、「⁠サイト構造づくりの工夫」「⁠コンテンツ制作の工夫」「⁠レイアウトスケッチの工夫」「⁠デザイン・コンセプトづくりのポイント」など、実践的なテクニックやツールなどについて解説していきました。また、プロトタイプ作りについて、プロトタイプは最初から全ページつくるのではなく、主要ページから段階的につくることや、ラフなデザインで作っておき、詳細なデザインは次の工程で作り込んでいく、といったポイントが示されました。渡辺氏は、デモを通じ、テンプル大学での事例におけるデザイン各工程についても示しました。

最後に第3部として、ワークフローを変えるために必要なポイントが解説されました。渡辺氏は、デバイスごとに表示が異なることを受け入れ、臨機応変に対応していくことの重要性や、クライアントとの関係性を含めた制作体制の見直し、そして、制作チームが備えるべきスキルなどについても言及し、セッションを終了しました。

猪狩丈治氏、諸星一行氏セッション「レスポンシブWebデザインのパフォーマンスチューニング」

引き続き、株式会社Lei Hau'oliの猪狩丈治氏と諸星一行氏によるセッションが行われました。まず、猪狩氏は、RWDにおけるWPO（Webパフォーマンス最適化）について、以下のポイントを解説しました。

1. なぜRWDでWPOなのか?
2. まず、モバイル高速化
3. プログレッシブ・エンハンスメントの再来
4. デバイス毎の処理の振り分け方法
5. 高解像ディスプレイの対応

モバイルにおける高速化というテーマは非常にシビアです。主に、デバイスの性能や回線速度といった影響で、モバイルの方がページを表示するスピードが遅いといわれます。一般的な水準で、デスクトップで1秒で表示するスピードは、モバイルだと6秒程度のページ表示速度に相当するそうです。それだけモバイルの高速化は難しい問題なのです。

RWDでは、モバイルである点と、マルチデバイスに対応している分どうしてもサイトの容量が重くなるという問題があります。ですから、RWDでは通常以上に、真剣にサイトの高速化を考えるべきなのです。そこで猪狩氏は、モバイル高速化のアプローチとして以下の2点を示しました。

100Kルール

ページのファイル容量を100KB以内に抑えようという指標

1分ルール

ユーザーがサイト訪問してから1分以内に訪問目的を達成できるようなサイト設計をすべきという指標

こうした指標を踏まえた上で、RWDの実装では、グラフィック画像はCSSとSVG（XMLによって記述されたベクター画像形式）を駆使し画像を減らすことと、画像のベクターデータ化を徹底すべきであることが示されました。また、アニメーションなどの重い処理もなるべく避けることが大事です。一方、デスクトップはコンテンツのレベルを上げ、よりリッチに見せるサイト作りが求められます。これは、デスクトップに比べ、低スペックであるモバイル端末を基準としてサイト設計を行う、いわゆる「プログレッシブ・エンハンスメント」の考え方そのものです。

猪狩氏は、低スペックであるモバイル端末向けに軽い画像を使い、高スペックのデスクトップ向けに重い画像を使うなどの処理を行わせるための分岐処理のテクニックについて解説していきました。

分岐処理が増えるとコードが増え、ファイルが重くなり、仕様管理も面倒になります。その意味では振り分けを最小限にする方がWPOの観点からは望ましいことです。しかし、マルチデバイス化という点からは振り分けを行う画面サイズの分岐点（ブレイクポイント）は多く設定したいところです。案件の仕様等にもよりますが、RWDでは、デバイス振り分けのための分岐処理・分岐コードの増量を見込んだ上でのWPOが大切になってきます。

猪狩氏は、サイト高速化に対応しつつ、高解像度ディスプレイへ画質が劣化せずに画像や写真を表示させるための実践的なテクニックについても披露し、諸星氏へバトンタッチしました。

引き続き、諸星氏が登壇し、RWDのパフォーマンスを改善するためのテストやチューニング方法について解説しました。

1. パフォーマンスチェック
2. フロントエンドのパフォーマンスチューニング
3. その先にあるパフォーマンスチューニング（主にサーバーサイド）

まず諸星氏は、「⁠Pingdom Tools」「⁠WEBPAGETEST（Mobitest⁠）⁠」といった計測サービスを紹介しました。こうしたツールを利用することにより、パフォーマンスを低下させる原因を知り、チューニングを実施することが大事です。

次に、フロントエンドのパフォーマンスチューニングについて解説していきました。これらは、「⁠（⁠ファイル容量を）軽くする」「⁠（⁠HTTPリクエストを）少なくする」「⁠（⁠サーバーまでの距離を）近くする」という考え方に基づいています。

諸星氏は、CSS3やSVGを用いたimage要素の代替表現やJavaScriptのライブラリを用いたファイル容量の軽減施策、アイコンフォントやSVGスプライトを用いて画像の点数を減らし、HTTPリクエストを削減する施策、CDN（Contents Delivery Network）を用い、サーバーまでの距離を物理的に近くする施策などについて解説しました。

そして、サーバーサイドのパフォーマンスチューニングについても解説し、お2人のセッションは終了しました。

轟 啓介氏セッション「ツールで直感的にレスポンシブWebデザインが作成できる！」

続いて、アドビシステムズ株式会社の轟 啓介氏がセッションを行いました。アドビ社からは、画面を見ながら直感的にRWDをデザインできるツールの発売が予定されています。轟氏は、こうしたツール類を使った実装方法や新たな可能性について、デモを交えて解説しました。

まず「Web標準の推進」として、アドビ社のCSSに関する新しい取り組みが紹介されました。例えば、「⁠CSS Regions」は、雑誌のようなレイアウトをCSSで表現するための仕組みです。「⁠Region」とは「領域（カラム⁠）⁠」のことで、あらかじめ設定されたカラムにコンテンツ（文字列）を流し込むことをCSSで設定できます。これにより、スクリーン幅の変化に応じて、カラム数が変化し、変化したカラムに文字列が切れ目なく配置されます。JavaScriptを書かなくても、RWDに対応したレイアウトが実現できるというものです。

CSSの記述は非常にシンプルで、「⁠flow-into」というプロパティを、流し込みたいコンテンツに指定し、「⁠flow-from」というプロパティを、流し込み先のレイアウト部分に指定するだけです。

また、「⁠CSS Exclusions」という仕組みは、自由な領域にテキストを流し込むためのツールです。CSS上で「shape-inside」「⁠shape-outside」というプロパティを用い、指定の領域の内外に文字を配置することができます。複雑な図形や、SVGフォーマットにも対応可能なため、写真を用いた複雑なレイアウトに、自由に文字を流し込むことが可能となります。

そして、「⁠CSS Custom Filters」という仕組みは、マウスオーバーで白黒になったり、波打ったり、様々な視覚効果が実現できるというものです。轟氏は、アドビ社が実用化に向けて働きかけているこうしたツールを、デモを通じて紹介していきました。

次に、いわゆるモダンブラウザー上でRWDの動的なプロトタイプを制作する「デザイニング・イン・ザ・ブラウザ」を可能にするツールが紹介されました。アドビ社は2012年2月に「Adobe Edgeツール＆サービス」をリリースしました。この中から、轟氏は「Edge Reflow」について紹介しました。

「Edge Reflow」はRWD専用のツールで、動的なプロトタイプを制作することが可能なツールです。ブレイクポイントを自由に設定できる機能や、CSSスタイルを自由に設定できる機能、強力なプレビュー機能を備えています。

「Edge Reflow」の画面上でデザインを描くと、CSSが裏で自動生成されます。画面上で、ブレイクポイントを設定すると、CSSのメディアクエリーが設定できるのです。実際に矩形ツールを使って、ヘッダーや記事領域を設定する様子がデモを通じて示されました。また、文字の大きさやレイアウト、加飾についても画面を見ながら簡単に操作でき、直感的な操作でプロトタイプが作成できることがわかりました。

このツールを用いることにより、今までPhotoshopやIllustratorを使って作っていた「静的な」デザインカンプから、実際にブラウザ上で動く「動的な」デザインカンプが容易に、スピード感をもって制作することが可能となります。ツール上で生成されるコードは、そのまま実プロジェクトで使えるものではありませんが、書き出したソースに制作者側で手を加えることも可能です。会場では、実際に「Edge Reflow」を使って制作された「Adobe MAX 2013」のサイトがデモで示されました。「⁠Edge Reflow」はプレビュー版が公開中で、誰でも無料でダウンロードし、利用することができます。

最後に、「⁠Edge Reflow」と連携した「Edge Inspect」というツールが紹介されました。これを利用することにより、「⁠Edge Reflow」上で行ったレイアウトの調整が、「⁠Edge Inspect」で接続された端末上でリアルタイムに反映されていきます。こうしたRWDの実機検証を強力にサポートするツールが紹介され、轟氏のセッションは幕を閉じました。

菊池 崇氏セッション「フルードグリットを理解することからレスポンシブWebデザインは始まる」

イベントの最後として、Web Directions Eastの菊池 崇氏が登壇しました。菊池氏はまず、RWDは以下の3つの技術を用いて実現するものだと定義しました。

• フルードイメージ（閲覧者のスクリーンサイズにあわせて画像サイズを拡大縮小させる技術）
• フルードグリッド（閲覧者のスクリーンサイズにあわせてレイアウトを可変させる技術）
• CSSのメディアクエリー（閲覧者のスクリーンサイズ等に応じて、表示させる条件をCSSに指定できる仕組み）

しかし、端末のスクリーンサイズのバリエーションが増え、いわゆるブレイクポイント（表示を切り替える分岐点）の設定がどんどん難しくなってきています。これがうまくいかないと、ある端末でコンテンツが切れたり、逆に余白が大きくなったりするのです。では、単にブレイクポイントを増やしていけば問題が解決するかというと、そうではありません。

RWDは、テキストや画像、動画などの見やすさ、消費のしやすさを最適化することが本質です。そのための具体的なテクニックとして、まず菊池氏が提唱するのが、文字サイズの指定をピクセルによる数値指定ではなく、「⁠em」を用いた相対指定で行うことです。

emは相対的な単位で、CSSで指定した親要素のfont-sizeプロパティの値を「1」とした場合の大きさのことです。つまり、デバイスごとに文字の大きさがどのサイズであれば快適か、という視点で文字サイズを設計しようというのです。デスクトップはピクセル指定で12～14ピクセルくらいで可読性がありますし、スマホもタブレットも大体14～16ピクセルくらいあれば見やすさが損なわれません。では、TV画面はどうでしょうか。TV画面に表示される字幕の文字サイズは相当大きく、70ピクセルくらいのサイズが必要です。

菊池氏は、これからのマルチデバイスはテレビ画面（スマートTV）を抜きにしては語れないため、文字サイズを意識したサイト設計を心がける必要があると提唱しました。

次に、フルードグリッドの具体的なテクニックについて解説しました。フルードグリッドとは、コンテンツが表示されるグリッド（カラム）のサイズを、ピクセルによる数値指定から、比率（％）による相対指定で行う方法です。これを一歩進めて、グリッドだけでなく、Viewport（画面サイズの割合指定）にあわせて、文字サイズまで比率で指定してデザインする手法が紹介されました。

この手法を「プロポーショナルグリッド」といいます。具体的には、「⁠vw」「⁠vh」「⁠vm」という単位を使います。

• vw＝viewport width
• vh＝viewport height
• vm＝viewport minimum

例えば、vhを使えば、いわゆる横長のディスプレイでコンテンツを閲覧したときも、ページの縦幅の比率を保ったまま、コンテンツを表示させることが可能になります。さらに、この単位は、文字サイズの指定にも使えます。画面が大きくなるとフォントも指定した比率に応じて大きくなり、反対に、画面が小さくなるとフォントサイズが小さくなる、また、画面が小さくなっても、このサイズよりもフォントが小さくならないようにする、といった指定が可能になります。

「vw」「⁠vh」「⁠vm」という単位を使えば、理論上はブレイクポイントが必要なくなります。現在はまだ、Androidには対応していませんが、近い将来、実用段階に入る技術であるといえます。

最後に、RWDは過渡期にあり、色々な葛藤や議論がある段階であるため、私たち制作者がますます技術研究を進めていく必要があることに言及して、菊池氏のセッションは幕を閉じました。