ブログ

ワークフローから考えるレスポンシブWebデザイン

最近、某記事を書いてから問い合わせが何件かありましたが、レスポンシブWebデザインのワークフローを理解していない人も多いようです。
そこで、テーブルレイアウトからCSSレイアウトへの移行と比較して、(デザイナー・コーダーだけではない、広義な意味での)ワークフローからレスポンシブWebデザインを考えてみます。

テーブルレイアウトからCSSレイアウトへの移行

2005年くらいから、それまで使われていた「テーブルレイアウト」に変わって、「CSSレイアウト」が使われはじめました。
それまでは、CSSの実装がまだ未成熟だったため、本来は表組に使うべき「table要素」をWebデザインの表現のために使われていたのです。

では、「テーブルレイアウト」ではなく「CSSレイアウト」が使われはじめてから、何が変わったのでしょうか?

制作者(デザイナー・コーダー)側では、コーディングするときに、「CSSでレイアウトを構成する」ように変わりました。

一方、ワークフローはどのように変わったのでしょうか?実際のところ、何も変わっていません。

  1. プロデューサー・ディレクターが中心となってワイヤーフレームを作成
  2. デザイナーがPhotoshopでビジュアルデザインを作成
  3. コーダー(デザイナーが兼任する場合も)がHTMLコーディング・JavaScriptの実装もおこなう
  4. (CMSの実装・フォームなどのプログラムの実装)
  5. クライアント検証・それにともなう修正

この10年、案件の進行は、だいたいこのような形で進んできたのではないでしょうか?

なぜならば、デザイナー・コーダーの担当するワークフローの部分が「テーブルレイアウト」から「CSSレイアウト」に置き換えれば、ワイヤーフレーム・ビジュアルデザインの部分は置き換える必要がなかったからです。

レスポンシブWebデザイン、ワークフローはどう変化するの?

では、レスポンシブWebデザインの案件ではワークフローはどう変化するのでしょうか?(インブラウザデザインとかはひとまず除外して)

それは、テーブルレイアウトからCSSレイアウトへの移行のときに起きたような、「コーディングのワークフローの置き換え」だけではないことです。

レスポンシブWebデザインの案件では、ワイヤーフレーム・ビジュアルデザインの部分にも影響を及ぼしてきます。

今の段階で、レスポンシブWebデザインの案件をこなしたことのないディレクター・デザイナー・コーダーは、以下の問いに答えられますか?

  1. (ある程度までの)正確な工数と費用を出せますか?
  2. レスポンシブWebデザインの実装について知識のないディレクターが、実装に問題のないワイヤーを作れますか?
  3. デザイナーが、カンプを作る場合、すべてのページ×ブレイクポイント数のカンプを作れますか?
  4. デザイナーが、モバイル・タブレット・デスクトップのカンプを同時に作成できますか?
  5. 用件定義は、実装に無理のないものですか?あとで「できません」と言わなくても大丈夫ですか?
  6. レスポンシブWebデザインの案件は、PCサイトのみの案件と同じ工数でできます、と言えますか?

ここに列記したのはほんの一例です。ほかにもたくさん考えなければいけないことがあるでしょう。

まずは、社内で実際の案件を想定して作ってみるのも大切です。そこから何を改善すべきかでてくるのではないでしょうか?

まずは、簡単なものからはじめてみる

ここ数ヶ月に聞いた話で一番不思議なのは、「レスポンシブWebデザインをやったことがない」「そもそもスマートフォンサイトの案件すら最近はじめた」ようなWeb制作会社さんが、いきなり30ページとか70ページとか受託していることです。

ついでに言うと、予算も工数も、普通のPCサイトと同じものもあったりします。他人事ですが、それって大丈夫ですか?と心配になります(某炎上案件はもっとすごかったですが)。

レスポンシブWebデザインをやるのならば、まずは、数ページの簡単なものからはじめてみてはどうでしょうか?

やったことがない技術をいきなり大規模案件に取り入れるのはリスクがあります。長谷川泰久さんが「レスポンシブとか、そういうことの前に」で語っている内容ではないですが、まずはやってみて、何ができるか理解することが大切です。

そこから、レスポンシブWebデザインのワークフローを考えてみるのが大切だと思います。

おまけとかの類のお話

うちにくる案件の依頼として、デスマーチ[謎]の後始末(やるとしても高いです)や、全部丸投げでレスポンシブWebデザインの要件定義から考えてほしいとか、PCサイトを元にレスポンシブWebデザインの構成全部考えてほしい、という依頼とかありますが、決して世間のイメージより簡単ではないですね。

レスポンシブWebデザインの案件で、分業は現時点ではとても厳しいと思っています。たまにコーディングだけの依頼が来ますがすべて断っています。現時点では上位レイヤーから関わらないとしんどいケースが多いです。そんな話とかはそのうち書く予定です。(とりあえずページ数だけで見積もり出してほしいと言われても、概算の見積もりも出せないのですけど。。。。)

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。