SwapSkillsDoubbble W9 「マルチデバイス時代の新常識 レスポンシブWebデザインの今と未来」参加レポート

2013年3月9日(土曜日)、花粉が激しく舞う中、品川区立総合区民会館きゅりあんで開催されたSwapSkillsDoubbble W9 「マルチデバイス時代の新常識 レスポンシブWebデザインの今と未来」に行ってきました。

有償なセミナーだったのですが内容が興味深かったので参加してきました。自分にとってはレスポンシブWebデザインについて間違った認識もあったので有意義でした。

#1 レスポンシブWebデザインで変わるワークフロー

最初のセッションは、「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック(ソシム)」の著者の渡辺竜さんのセッションでした。

渡辺さんの本は今年の初めに購入していたので楽しみなセッションのひとつでした。

なぜ、レスポンシブWebデザインなのか、メリットはあるのか?

レスポンシブWebデザインの基礎の話から、
まず、なぜ今レスポンシブWebデザインなのか?というと以下の3つを挙げられました。

  • スマートフォンの対応が必要になっている。
  • タブレットが登場してマルチデバイス対応が必要。
  • 未知の端末への対応

海外では2年前くらいから普及していて、今は成熟期に入っているとのことです。
(日本は遅れているんですね…。ちなみにレスポンシブWebデザインの発端は、2010年5月25日のイーサン・マルコッテ氏の記事

レスポンシブWebデザインにした場合の制作側のメリットとして

  • ワンソースで提供できる
  • 様々な画面サイズに対応できる
  • 未知のデバイスに対応できる
  • 運用面でメリットがある
  • SEOにもいい(かも)?

ということを挙げ、またユーザー側のメリットとして

  • どんな端末サイズでも対応している
  • どんな端末から見てもデザインの統一感があるのでサイト内で迷わない
  • パソコン、スマートフォンで同じURLを扱える

ことを挙げられました。

制作側、ユーザー側にとってもメリットになる制作手法のひとつだと思います。これから先を見据えるとレスポンシブWebデザインは定番な制作手法になるんだろうなと個人的に思っています。

レスポンシブWebデザインのワークフローは「プロトタイプを中心にしたアジャイルなワークフローが向いている」

続いて、レスポンシブWebデザインのワークフローについては、これまでのウォーターフォール型のワークフローではなくて、レスポンシブなワークフローにするということ、ひとつは「プロトタイプ*を中心にしたワークフロー」、もう一つは、「アジャイル*型のワークフロー」だと述べられました。

プロトタイプ: 動くサイト・試作版のこと。デザインカンプではない。
アジャイル:制作工程を短期間のサイクルで繰り返すこと。

このワークフローにすると以下の3つのメリットがあるという。

  • 細かい調整に対応しやすい。
  • 実験と検証がやりやすい。
  • 問題を未然に防げる。

レスポンシブWebデザインの制作は発展途上なところがあって、実験とか繰り返していかないといけないことが多かったりするのでそれに対応しやすいのと、短期間なサイクルで制作を回していくので問題が大きくなる前にしっかり解消していけるということ、レスポンシブWebデザインのような作業が多くなるような制作に向いていると述べ、レスポンシブWebデザインのワークフローというのは、「プロトタイプを中心にしたアジャイルなワークフローが向いている」とまとめました。

レスポンシブWebデザインどのように進めていくべきか?

次に、レスポンシブWebデザインをどのように進めていくべきかについては箇条書きで記しておくことにします。(まめとる力がない(T_T))

基本設計

  • 書類設計 書類作成は素早く。修正も素早く行う。
  • デザインコンセプトを作る。ラフなデザインをプロトタイプにいれる。
  • 表示パフォーマンスの最適化を基本設計のところから考える。これは、最も重要な要素のひとつ。
サイト構造作りの工夫
  • ホワイトボードにページタイトルを付けた付箋を貼るのがいい。クライアントと一緒に初期段階で作業ができたらベスト。
  • 技術的な面では構造はシンプルに階層はフラットに作るように心がける。
コンテンツ制作の工夫
  • 文書構造を意識して文書を書いていく。見出し、小見出し、リストなど
  • プロトタイプに使うテキストは最終版を使うのが重要。ダミーテキストを入れてスマホで検証してもそれが実際読みやすいのかというのは、ダミーテキストだとわからない。なので、ダミーテキストは使わないで、最終版かもしくは最終版に近いものを使う。
  • 文書作成は markdown を使うと効率的。
レイアウトスケッチ(ワイヤーフレーム)の工夫

ワイヤーフレームの目的は、ページのレイアウトのアイデアをチーム間でコミュニケーションするツール、またはクライアントと確認するためのツールである。綺麗なワイヤーフレームは目的ではない。すばやくアイデアを伝えるために手書きがいい。ラフにスケッチでやるといい。

スケッチする画面数はスマホとデスクトップの2つ。もしくはタブレットを含めた3つ。そのあいだの調整に関してはプロトタイプを作る際に細かく調整していくといい。

デザインコンセプトの工夫

デザインのコンセプトを作る際には、サイトの世界観を確認するためのツールとして STYLE TYLES を使うといい。

STYLE TYLES というのは、デザインのコンセプト確認のために使うツール。「ロゴはこういう扱いにしまましょう」とか、「ヘッダーはこういう感じにしましょう」とか、「色はこういうのを使いましょう」というのを決めておくためのもの。何パターンか作って今回のプロジェクトはこっちの世界観がいいよねとか・・

レスポンシブWebデザインでのプロトタイプのポイント

  • 段階的にプロトタイプを作っていく。ナビゲーションや主要なページから作る。その後に「パターンライブラリ」を作って検証。パターンライブラリとは、ページに使われる構成要素を一覧にしてまとめたものである。
  • ラフなデザインを施す。STYLE TYLES をベースに大まかな世界観がわかるようにする。作り込みはデザイン工程でやる。

また、プロトタイプを作りっぱなしではもったいないので、制作会社では自社のフレームワークにすると良い。アメリカの ZURB という制作会社では Foundation というフレームワークを提供しているので、日本でも日本産のフレームワークが出てくると良い。

「これからの制作はウェブサイトではなくフレームワークを作る」イメージで!

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

ブラウザ上でデザインする「Designing in the Browser」という手法を用いる。

この手法のメリットは

  • 動かしながらデザインができる。
  • カンプと最終デザインに差がない。
  • デザインを修正する際にHTML・CSSを修正するだけで済む。
表示パフォーマンスを意識する。
  • CSS3を駆使する。
  • テキスト画像はできる限り避ける。
  • アイコンフォントやSVGを使用する。
  • サイズを考えながらデザインする。
レスポンシブWebデザインの制作に便利なツールを使い倒す。
  • Adobe Edge Inspect
  • Codekit(Mac OS)
  • VIEWPORT RESIZER
  • ブラウザに付いてる開発者ツール

レスポンシブWebデザインでのテスト

テスト環境を整える。

レスポンシブWebデザインでは実機でテストするのが大事。

  • 今から端末を収集を始める。
  • バーチャルな環境を整える。
  • 端末レンタルもあるが高価。

制作会社ではデバイスラボ、テストラボという端末を集めたラボを作って行く必要がある。
海外の制作会社では、テストラボを近隣の方々に無料で提供しているそうで、日本でもこういうのが広まるといいなと述べていました。
私はこの話を聞いて制作会社以外にコワーキングスペースなどでも提供されるといいなと思いました。

テストの効率化

テストも初期段階のプランが大事。ブラウザのシェアに応じたプランを作る。シェアの少ないブラウザでは、デザインは崩れても基本的な情報が見れればいいとかなど。そして Yslow とか pagespeed などでパーフォーマンスのチェックも忘れずにやること。

ワークフローを変える – 変わるために必要な3つのこと –

1 Web制作の考え方を見直す。

デザインを無理にコントロールしないこと。

1pxもズレていないデザインはユーザーにとってはメリットではない。ユーザーは自分の好きなようにページを閲覧する。

スタイルシートはページのデザインを提案するもの。デザインの一つの提案でしかない。
ページのデザインは1つの提案でしかない

レスポンシブWebデザインは、ユーザーのメリットを第一に考えることが大事。

2 制作体制を見直す。

  • クライアントと制作会社はパートナーで「一緒につくる」というイメージを持つ。
  • お互いに広い心を持つ。
  • 双方がベストを尽くせるように配慮して、密接なコミュニケーション

3 垂直統合型のスキルを持ったチームを構築する。

  • デザイナーがHTML/CSSなどの技術を学ぶ
  • コーダー、プログラマーがデザイン・レイアウトを学ぶ
  • ライター、編集者がレスポンシブWebデザインを学ぶ

皆でわいわいやりながら制作するのがベスト。

今こそ自分の領域でない知識を深めるのが大事で、お互いの仕事をちょっと知っているか、まったく知らないかで制作物は相当変わってくると思いました。

セッションのまとめ

  • プロトタイプを中心にしたアジャイル型のワークフロー
  • Webサイトを作るのではなくフレームワークを作るイメージで制作する。
  • デザインに関しては、デザイニングインザブラウザで、テストラボで実機でテストできるように整備する。
  • 制作の考え方を見直す。
  • 発注側も制作側も広い心をもって臨機応変に対応していく。

そうすることで、みんながハッピーな制作ができるんではないかと締めくくりました。

感想

私はこのセッションを聴いて、今後のWeb制作は変わっていくのは間違いないと思いました。

一筋縄ではいかないレスポンシブWebデザインですが、ピクセルパーフェクトな時代は終わりを告げて新しい次元に突入するので、いろいろ準備、勉強・研究しようと思います。(本音いうと焦ってる。)

特に、自分の守備範囲でない知識を深めるということは、間違いなく必要になるのではないかと思います。

いきなり全部実現するのは難しいですが、取り入れられるところは取り入れていきたいものです。

他にレスポンシブWebデザインの最適化の話や、Adobeのツールの話、レスポンシブWebデザインの未来の話も聞けて、とても有意義で行って良かったです。

セミナー後日、ワークショップの紹介がありました。

来月、世界的Webデザイナーのアンディ・クラーク氏が来日して、東京(2013.04.06)と大阪(2013.04.07)でワークショップが開催されるそうです。

ちょっと高価なワークショップですが、得るものも大きそうですね。