WCAN mini Design Vol.9「Web design process for the future」に参加しました

6月8日(土)にベースキャンプ名古屋で開催された「WCAN mini Design Vol.9」に参加しました。
講師はこもりまさあきさん。聞きしに勝る時短術の神でいらっしゃいました…。

Web design process for the future / こもりまさあきさん

Webの閲覧環境の多様化が進む昨今、従来のピクセルパーフェクトを追い求めたWebデザインプロセスはいつまで成立するのでしょうか。本セッションでは、Responsive Web Designの最新事例や技法を取りあげながら、次世代のWebデザインプロセスへのステップアップするために必要な考え方やその方法を紹介します。

勉強会の内容

  • Responsiveって実際のところどうなの?
  • 未来を考えるとワークフローはどうなる?
  • そして、次世代のWebデザインプロセスへ

ちょっとぎょっとするような数字から、セミナーが始まりました。

7,000 different device types ar used to access Facebook each day.

1日にFacebookにアクセスする端末の種類は、なんと7000種類。
日本だけでも春夏モデル・秋冬モデルでそれぞれ何機種ものスマートフォンがリリースされていることを考えると、びっくりしつつも納得ですよね。

こうした具体例を交えて、Webの閲覧環境がPCだけでなくスマートフォンやゲーム機に多様化している実状をお話いただきました。
また、カンプを制作してからコーディングをする一般的なWeb制作のワークフローの問題点と、従来のワークフローに替わる技法やツールを実演を交えながらご紹介いただきました。

Photoshopでカンプ→コーディング、というスタイルはこれから通用するのか?

「デバイスがこれだけ増えてきて、考えることがたくさんあるのに?」
ピクセルパーフェクトにこだわる時間を減らして、コンテンツの内容に力を入れた方がいいんじゃない?というお話でした。

たしかに、文言の変更があるたびにPSDを編集しなきゃならないのは(私みたいな修行中の身ならともかく)プロの人には馬鹿にできないタイムロスです。

グラフィカルなWEBサイトを見るのも作るのも大好きな身としては複雑な内容でしたが、同じ「16px」でもパソコンとスマホじゃ見映えが全然違う、Retinaも視野に入れたら「ピクセル」という概念すら怪しいというのは納得でした。

まとめ

視覚表現も大事だけど、先に考えるべきなのはコンテンツ。
情報をどうやって組み込んで、どういう形で届けるのか。

  • 増え続けるデバイスへの対応を考えたら当たり前
  • いまあるワークフローが適切か、変えられるか
  • これまでの無駄をなくし、これからの仕事をスムーズに

気になったツール

ご紹介いただいたツールの中で、これなら使えるんじゃないかと思ったものをピックアップ。

  • Sass
  • CSSフレームワーク
  • Git
  • Backbone.js

SassとBootStrapはちょこちょこ弄っていましたが、本腰を入れてみます。
Gitはこの翌々日に初心者講習があったので(これについてはまた後日書きます)、なんとかコンフリクトの解消までできるようになりました。

初心者が最初から時短テクを駆使するのは(それが使えない環境に置かれる可能性を考えると)なかなかリスキーなので、基礎を固めつつ「こんな応用法もあるよ!」と知識を深める姿勢が大事なのかなぁと考えさせられる勉強会でした。
技術が日進月歩な以上、そんな心配も杞憂かもしれませんけどね。

最後に、一番印象に残った言葉をひとつ。

Don’t Repeat Yourself!
別案件でも、自分の中で同じ作業をしなくてすむようにしよう。