SwapSkills Doubbble(Vol.9)「マルチデバイス時代の新常識 レスポンシブWebデザインの今とこれから」イベントレポート

この記事を読むのに必要な時間:およそ 4.5 分

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

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

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

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

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

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

第1部RWDの基礎
第2部ワークフローはこう変わるべき
第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 ToolsWEBPAGETEST(Mobitest)⁠といった計測サービスを紹介しました。こうしたツールを利用することにより,パフォーマンスを低下させる原因を知り,チューニングを実施することが大事です。

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

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

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

著者プロフィール

SwapSkills

都内でWebプロフェッショナル向けに講座の開催をしている allWebクリエイター塾が2008年より開催している Webの勉強会。講座では教えられない内容、実務についてのウェブの技術者にむけて無料・低価格にて提供しています。

コメント

コメントの記入