WCK Sessions Vol.10「レスポンシブWebデザイン現場のメソッド」レポート

2016年9月2日（金）高知市文化プラザかるぽーとにて、WCK Sessions Vol.10「レスポンシブWebデザイン現場のメソッド」が開催されました。

書籍『プロが教えるレスポンシブWebデザイン現場のメソッド　レイアウト・UIのマルチデバイス対応手法』の出版を記念して、岡山より著者の前川昌幸さん（株式会社　イー・ネットワークス）をお迎えして行われた今回の勉強会。
高知のWeb制作現場でも直面することの多くなったレスポンシブWebデザインの「なぜ？」「どうする？」について、現場のプロからしっかり学べる2時間となりました。

---

レスポンシブWebデザインのWhyとHow

前半のセッションでは「レスポンシブWebデザインのWhyとHow」として、レスポンシブWebデザインがなぜ必要なのかという背景と、実装のための基本原則について解説いただきました。

スマホの普及と脱PCの流れ

近年のWebを取り巻く環境の変化として、スマートフォンの普及＝脱PCの傾向が進んでいることが挙げられました。

機器の普及率だけでなく、利用時間によるPC／スマートフォンの比率についても、総務省の統計情報「通信情報白書」を引用して解説いただきました。
また、いわゆる“バズ”が起こった時のユーザーの閲覧環境は、スマートフォンが80%を超えるというデータも紹介されました。

加えて、マルチデバイス対応の手法としてのレスポンシブWebデザインとその他の方法の特徴とメリットも解説いただきました。

「スマホ対応」や「レスポンシブ」の言葉だけが一人歩きしがちな地方の制作界隈ですが、これらの背景と特徴を押さえておくことで、社内やクライアントへの説明もずっとしやすくなりそうですね。

作る環境 ≠ 見る環境

セッション内で印象的だったのは「作る環境≠見る環境」のフレーズ。
Webサイト制作時には、制作者も発注者もPCで作業を行うため、デスクトップでの閲覧を前提に考えがちです。しかしユーザーの立場になってみれば、スマートフォンやタブレットでWebを閲覧する機会が圧倒的に増えていることは、肌感覚としても実感できるものです。
「作る環境≠見る環境」ということを自覚して意識を改めることが、イマドキの・これからのWeb制作には必要なのだと痛感しました。

モバイルスタートのすすめ

次に、レスポンシブWebデザインを制作する上での考え方について解説いただきました。1ソースでPCからモバイル端末まで対応できるレスポンシブWeb。その構成・デザインをデスクトップ表示から考えるか、モバイル表示から考えるかというお話です。

たくさんの情報を掲載できるPC表示から考え始めると、モバイル表示にする際、要素を隠したり小さくするなどの無理が生じて、制作工数がかさむ原因になってしまいます。
一方、表示領域の限られるモバイルから構築し始めると、伝えるべき情報とその順序が精査されるため、合理的に制作を進めることができます。制作工数を抑えられるというレスポンシブWebデザインのメリットは、モバイルスタートでこそ生きてくるということでした。

現状ではまだまだデスクトップスタートの案件が多い印象ですが、エンドクライアントと直接やりとりできる現場では、初期段階から制作者とクライアントの意識を統一することで、モバイルスタートでの制作を取り入れやすいとのお話でした。中小規模の案件が多い高知は、かえって新しいワークフローを取り入れやすいのかもしれませんね。

実装力と見切り

とはいえ、すべての人に等しく知識と理解を行き渡らせるのは難しいものです。
現場の困ったあるあるに対処するには、実装力と判断力を高めて乗り切る、という力強いお言葉をいただきました。少々の無茶振りや無理解を嘆くより、実装力をつけて経験を積もう、という意欲が湧いた方も多かったのではないでしょうか。
　

ホワイトボードをたくさん使って解説してくださった前川さん。

レスポンシブWebデザインの3原則

続いては、レスポンシブWebデザインを実装する上で外せない viewport の設定と、基本の3原則について解説いただきました。

レイアウトを比率で構成する fluid grids
画面幅に応じて変化する flexible image
ブレークポイントごとにCSSを切り替える media queries

基本原則の概要に加えて、要となる技術の解説やよくある勘違い、「px と em どちらが正解？」「ブレークポイントはどこに設定する？」といった気になるポイントについてもお話いただきました。
書籍やネット上にたくさんの情報はあれど、「実際のところみんなどうしているの？」というのは知りたいものです。今回前川さんに「僕の場合は〜」とお話いただけたことで、とても心強い指針を得ることができました。

レスポンシブWebデザインでのUI実装

後半のセッションでは「レスポンシブWebデザインでのUI実装」として、レスポンシブWebデザインで頻出のUIについて、ソースコードを見ながら具体的な実装方法を解説いただきました。
　

Web制作を加速する確認ツール

実装解説の前に、制作時の確認作業に使えるツールを、デモを交えながらご紹介いただきました。
定番の Chrome デベロッパーツールにも知らなかった便利な使い方があったり、ブラウザと連携させて使えるシミュレーター、拡張機能などを知ることができました。実際の開発の中で、前川さんがそれらのツールをどんな流れで使われているかも教えていただきました。

レスポンシブWebデザインの基本と頻出UIの実装方法

続いては、前半セッションで出てきた「レスポンシブWebデザインの3原則」や様々なUIの実装方法について、ソースコードやWebサイトの事例を見ながら解説いただきました。

レスポンシブWebデザインの実装で外せない viewport の設定
fluid grids を実現する box-sizing と width の比率指定
flexible image を実現する max-width と height の指定
media queries の記述方法
Retina ディスプレイ対応あるいはアートディレクションとしての Responsive Image
メイン画像の背景展開に使える background-size の指定
カルーセル、動画背景におすすめの jQuery プラグイン
media queries と JavaScript を利用したドロワーメニューの実装方法

また「% 指定の小数点以下は何桁まで？」「メディアクエリをどこに書く？」といった意見の分かれるトピックスにも触れていただき、コーディングする上でのもやもやが解消されました。

「聞きたかった」が聞けました

今回の勉強会には、ディレクター、デザイナー、エンジニア、企業のWeb担当など様々な職種の方にご参加いただきました。レスポンシブWebデザインの背景から基本的な概念、具体的な実装方法まで、経験豊富な前川さんに分かりやすく解説いただけたことで、みなさんそれぞれに持ち帰れるものがあったと思います。

アンケートや会場からは、普段周りに同じ立場の人がおらず、聞くことができなかった疑問が解消された、現場ですぐに使えそうな情報が学べたという声がたくさん聞かれました。

Twitter コメントまとめ
2016年9月2日（金）WCK Sessions Vol.10「レスポンシブWebデザイン現場のメソッド」– storify
ハッシュタグ：#kochiweb
　

---