WCK高知のWeb業界を盛り上げるコミュニティウェブクリエイターズ高知はこちらです。現場のメソッド」が開催されました。イー・ネットワークス)をお迎えして行われた今回の勉強会。高知のWeb制作現場でも直面することの多くなったレスポンシブWebデザインの「なぜ?」「どうする?」について、現場のプロからしっかり学べる2時間となりました。---レスポンシブWebデザインのWhyとHow前半のセッションでは「レスポンシブWebデザインのWhyとHow」として、レスポンシブWebデザインがなぜ必要なのかという背景と、実装のための基本原則について解説いただきました。スマホの普及と脱PCの流れ近年のWebを取り巻く環境の変化として、スマートフォンの普及=脱PCの傾向が進んでいることが挙げられました。引用して解説いただきました。いわゆる“バズ”が起こった時のユーザーの閲覧環境は、スマートフォンが80%を超えるというデータも紹介されました。加えて、マルチデバイス対応の手法としてのレスポンシブWebデザインとその他の方法の特徴とメリットも解説いただきました。「スマホ対応」や「レスポンシブ」の言葉だけが一人歩きしがちな地方の制作界隈ですが、これらの背景と特徴を押さえておくことで、社内やクライアントへの説明もずっとしやすくなりそうですね。見る環境セッション内で印象的だったのは「作る環境≠見る環境」のフレーズ。Webサイト制作時には、制作者も発注者もPCで作業を行うため、デスクトップでの閲覧を前提に考えがちです。ユーザーの立場になってみれば、スマートフォンやタブレットでWebを閲覧する機会が圧倒的に増えていることは、肌感覚としても実感できるものです。「作る環境≠見る環境」ということを自覚して意識を改めることが、イマドキの・これからのWeb制作には必要なのだと痛感しました。モバイルスタートのすすめ次に、レスポンシブWebデザインを制作する上での考え方について解説いただきました。1ソースでPCからモバイル端末まで対応できるレスポンシブWeb。その構成・デザインをデスクトップ表示から考えるか、モバイル表示から考えるかというお話です。たくさんの情報を掲載できるPC表示から考え始めると、モバイル表示にする際、要素を隠したり小さくするなどの無理が生じて、制作工数がかさむ原因になってしまいます。表示領域の限られるモバイルから構築し始めると、伝えるべき情報とその順序が精査されるため、合理的に制作を進めることができます。制作工数を抑えられるというレスポンシブWebデザインのメリットは、モバイルスタートでこそ生きてくるということでした。現状ではまだまだデスクトップスタートの案件が多い印象ですが、エンドクライアントと直接やりとりできる現場では、初期段階から制作者とクライアントの意識を統一することで、モバイルスタートでの制作を取り入れやすいとのお話でした。中小規模の案件が多い高知は、かえって新しいワークフローを取り入れやすいのかもしれませんね。実装力と見切りとはいえ、すべての人に等しく知識と理解を行き渡らせるのは難しいものです。現場の困ったあるあるに対処するには、実装力と判断力を高めて乗り切る、という力強いお言葉をいただきました。少々の無茶振りや無理解を嘆くより、実装力をつけて経験を積もう、という意欲が湧いた方も多かったのではないでしょうか。ホワイトボードをたくさん使って解説してくださった前川さん。設定と、基本の3原則について解説いただきました。どちらが正解?」「ブレークポイントはどこに設定する?」といった気になるポイントについてもお話いただきました。書籍やネット上にたくさんの情報はあれど、「実際のところみんなどうしているの?」というのは知りたいものです。今回前川さんに「僕の場合は〜」とお話いただけたことで、とても心強い指針を得ることができました。後半のセッションでは「レスポンシブWebデザインでのUI実装」として、レスポンシブWebデザインで頻出のUIについて、ソースコードを見ながら具体的な実装方法を解説いただきました。Web制作を加速する確認ツール実装解説の前に、制作時の確認作業に使えるツールを、デモを交えながらご紹介いただきました。デベロッパーツールにも知らなかった便利な使い方があったり、ブラウザと連携させて使えるシミュレーター、拡張機能などを知ることができました。実際の開発の中で、前川さんがそれらのツールをどんな流れで使われているかも教えていただきました。続いては、前半セッションで出てきた「レスポンシブWebデザインの3原則」や様々なUIの実装方法について、ソースコードやWebサイトの事例を見ながら解説いただきました。指定の小数点以下は何桁まで?」「メディアクエリをどこに書く?」といった意見の分かれるトピックスにも触れていただき、コーディングする上でのもやもやが解消されました。「聞きたかった」が聞けました今回の勉強会には、ディレクター、デザイナー、エンジニア、企業のWeb担当など様々な職種の方にご参加いただきました。レスポンシブWebデザインの背景から基本的な概念、具体的な実装方法まで、経験豊富な前川さんに分かりやすく解説いただけたことで、みなさんそれぞれに持ち帰れるものがあったと思います。アンケートや会場からは、普段周りに同じ立場の人がおらず、聞くことができなかった疑問が解消された、現場ですぐに使えそうな情報が学べたという声がたくさん聞かれました。レイアウト・UIのマルチデバイス対応手法』を3冊もいただきました。パッケージがかわいい岡山名物きびだんごのお土産もいただきました。勉強会の後は、前川さんを囲んでの懇親会が行われました。勉強会の盛り上がりの熱を受けて、いつになく(?)真剣な話が飛び交う贅沢な時間となりました。