壊れたデザインプロセス（「The Broken Design Process」日本語訳）

2012年8月12日 著

以下の文章は、Philip Zastrow氏の書かれた「The Broken Design Process」を翻訳したものです。レスポンシブWebデザイン関連の記事をこの数ヶ月、いろいろ斜め読みしてきましたが、これは是非とも翻訳しておきたいと思ってZastrow氏にコンタクト、翻訳と掲載につき了解を得ました。ただし、この翻訳には誤りが含まれている可能性があります。英語が読めるなら、原文のほうを是非お読みください。

壊れたデザインプロセス

Webデザインのプロセスは壊れており、レスポンシブWebデザイン（訳者注：以後「RWD」と表記）の推進によって、モダンなアプローチを余儀なくされつつある。

典型的なデザインプロセスでは、理想化されたWebサイトのコンセプトイメージが写真編集アプリを用いて制作される。そして、コンセプトイメージを顧客または承認する立場にある権威に渡し、フィードバックや批判を得るのだ。彼らからの賛同を得るための要件を満たすよう修正がなされると、コンセプトイメージはマークアップとスタイルシートでもってゼロから再構成される。この再構成のプロセスは、コンセプトイメージを作ったのと同一人物が担うこともできるが、大抵はそうではない。

横幅の固定された前提において、このプロセスはうまくいく。コンセプトイメージを作った人間の予期せぬ問題が発覚し、再構成する人間とのあいだで議論が起こるのは珍しくない。結果的には、画像から再構成されたWebサイトは完璧に機能する。しかし、ピクセルをパーセンテージで置き換えてなお、このプロセスは有効たり得るだろうか？RWDが登場する以前は、往々にしてルック＆フィールのための優れたビジョンをもつデザイナーがすなわちコンセプトイメージの作り手であった。同様に、ビジョンを現実のものとするべく再構成する人々をして開発者と呼んだ。

RWDの登場以来、議論は開発者、すなわち再構成する人々にフォーカスしている。RWDにおいて重要な要素は、ターゲット÷コンテクスト＝求めるパーセンテージという、固定された横幅から流動的でスケールするオブジェクトへと変換する公式に由来する。導き出されたパーセンテージでは、小数点以下に数字が続きがちだ。ひとつの解決策が、これまで容認されてきたWebデザインのプロセスにおける欠点を明らかにする。開発者であり私の同僚のErik Runyonは、最近のBlog記事でこう書いている：

......ブラウザーベンダーは小数点以下をどう扱うかに合意できていない。これは、ピクセル単位で完璧なPhotoshopでデザインされたレイアウトを構築しようとしたとき、私たち開発者にとって悩みの種となる。私見だが、ブラウザー間にある不一致が問題ではないと思う。問題は、私たちがいまだにPhotoshopで作られた960グリッドのファイルをWebサイトとして再構成しようとしていることだ。そうでなければ、24.2485AHHHHH%なんてカラム幅を誰が指定しただろう？答えはノーだ。

不運にも、ピクセル信奉者はあまりに長い時間を写真編集アプリに費やし過ぎた。彼らのツールセット、デザイン認識は歪んでいる。デザインとは、論理と芸術の美しき調合だ。左脳と右脳の出会いの場でもある。私は、Webデザインがそうした調合のなかでも最も調和のとれたものと信じている。今はまだ、Webデザイナーは習慣的に自らを単一の道具の使い手に終始させ、また開発者によって解決される類の論理を放置してはいるが。WebデザイナーはWebというメディアを理解しておらず、そしてRWDはWebの奥深い知識を必要としている。

レスポンシブにデザインされたWebサイトでは、もはやレイアウトはひとつだけではない。それどころか、潜在的には無限の数のレイアウトを有する。個々のレイアウトは、デザイナーによって表現される趣意が求められる。これは、Webデザイナーにとって基本的なツールがもはや写真編集アプリではなく、CSSであることを意味する。Webデザイナーが対象とするメディアは流動的であり、異なる思考法が必要なのだ。たとえばスクリーンサイズが広がったり狭まったりした際のタイポグラフィーにまつわる課題などに、デザイナーは取り組む必要がある。

つまり、デザイナーの役割は変化している。理想化されたコンセプトイメージは不十分で、不正確で、結局のところ不親切である。唯一、真のデザインとは、当該メディアすなわちブラウザーにおいて成し遂げられるものだ。完璧主義者の性向は、ピクセル単位で完璧なPhotoshopファイルを正確にレイアウトしてWebサイトをデザインすることから変更されなければならない。私たちの使う道具は、その能力を最もよく発揮するように使うべきだ。写真編集アプリは、画像やテクスチャーを作るのに向いている。レイアウトや色、カタチ、タイポグラフィーといったデザイン要素は、CSSとマークアップで扱われる。それらのツールとペアを組んだ理解力のあるクリエイティブなデザイナーは、パワフルで万能の力を生む。

しかし、デザインプロセスについてはどうだろう？デザインプロセスがどう変化するか、私にはわからない。ここノートルダム大学において、変化はまだ始まったばかりだ。以前のポジションでは、私はデザインのすべてを自分で作っていたけれども、プロセスは同じだった。希望としては、より多くの時間をワイヤーフレームの作成や概念化に費やしたい。ラフスケッチはPhotoshopで描くかもね。そうしたらWebデザイナーにとってのレイアウトアプリ、テキストエディタに移る。いったん動作するモックアップが承認されたら、無限にあるスクリーンサイズですべてがフィットするよう、デザイナーは肝心かなめの部分にフォーカスできる。そして開発者は、マークアップやデザインの決定に気をもむことなく、よりハイレベルな機能にフォーカスできる。

最終的に、それは時間と忍耐、トライ＆エラーを必要とするだろう。顧客は、納品物に何を期待すべきかの教育を必要とするだろう。プロジェクトマネージャーは、タイムラインとプロジェクトフェーズの調整を余儀なくされるだろう。しかし、必要に迫られ変化は起こるはずだ。Webデザインはいまだ若く、また多くの可能性を有している。HTML5とCSS3がもたらす進歩、そしてRWDの発展とともに、今がWebデザイナーにとって本当にエキサイティングな時期であると思う。