もうWebデザインしないなんていわないよ、絶対（4）

［番外編］
消費されずに成長するための
デザイナの3つの命題

ワンパク　宮城秀雄、吉森大介、野村政行
2009/11/26

新人デザイナよ。君は、Web制作がどんな体制で行われ、デザイナが何を担当して、何をすべきなのか、を考えているか

インターミッション

　右も左も分からないままに歩き出したWebデザイナへの道。チームプレーを学び（第1回「入社1年目、デザインしないデザイナなんて!?」）、スキルを磨き（第2回「デザイナーは消費されるもんだぞ」）、プレゼンでもまれて（第3回「デザイナーのためのUI設計段階のデモ制作6カ条」）、僕は少しずつ進歩してきた。

　「消費されずに成長し続けるWebデザイナ」として1人前になるべく、これからの物語は新たな局面を迎えるわけだが、今回は外伝として理想の制作体制について僕なりに考えてみることにする。『フォレスト・ガンプ』でいうと、ここはチョコレートを食べながらバスを待つベンチ。皆さんには僕の回想シーンからいったん現代へと戻ってきていただきたい、という趣向だ。

　なお今回の話は、僕の経験に基づいたものなので、「100％納得いただけるものではないだろう」ということをあらかじめお断りしたい。うまく回っているシステムは無理に変える必要はないと思う。だが、もしもあなたが実際の現場で何か心に引っ掛かる部分を感じていて、このコラムが解決のヒントにでもなっていただけるのならうれしい。

Web制作は、どんな体制で行われているか

　第1回で、僕は自分がチームの中の1人であることを知った。

プロジェクトごとに組まれるチームの組織図の例（第1回の図を再掲）

　J. J. ギャレット氏の著書『ウェブ戦略としての「ユーザーエクスペリエンス」(The Elements of User Experience)』によると、Webサイト制作は「戦略」→「要件」→「構造」→「骨格」→「表層」の5段階に区別される。

　「戦略」〜「要件」段階は企画の提案から受注するまでの流れに相当する。このときの主なプレイヤーは営業とプロデューサーだ。クライアントの要望（RFP）に基づき企画やおおよその要件をまとめ、工期や予算を確保する。クリエイティブディレクタ、アートディレクタがクリエイティブの方向性を考え、テクニカルディレクタがアイデアの実現性などを検証しこれを補佐することになる。Web制作の現場にもプレゼン能力の高い方は多くいらっしゃるが、「やはり広告代理店の方々はすごい！」と感動させられるのも、この段階だ。

　企画書を提案する際に、ラフデザインも一緒に提出することもある。アートディレクタがクライアントにプレゼンすることになるが、実際のラフデザインの制作には作業者としてデザイナも参加することも多い。「とにかく見栄えのいいものを突貫で作れ」と無茶ぶりされ、要件も予算も確定していないので、脇の甘いラフデザインを提案してしまい、後でつじつまが合わなくなって泣きをみることもあったりする。

　プレゼンが成功して案件の受注が決まると、次は詳細な要件を詰めて設計を始める「構造」〜「骨格」段階へ移行する。ここでは、クリエイティブディレクタを中心にアートディレクタ、テクニカルディレクタがWebサイトの隅々まで設計してドキュメントを起こしていく。トーンマナーを計画して正式なデザインを提案し、場合によってはモックアップをプレゼンすることもある。もちろん、アートディレクタの指示の下でデザイナも作業に参加する。

　ただ何度もデザイン案の修正〜確認を繰り返すと、クライアントもディレクタもデザイナも疲弊してしまう。ディレクタが「細かいところは実装でなんとかします」などと、なんとか次のフェイズへ進めようとするのもこの段階の特徴といえる。あまり「実装でなんとかする」といい過ぎると、本当にクライアントから「実装で赤を青に変えてくれ」と無茶ぶりされることもあるから注意が必要だ。

　そして、最後が「表層」段階、すなわち実装作業だ。「制作会社の本懐」といってもいいかもしれない。それまでの段階で工期が押した場合のツケを払わされるのも、この段階だ。デザイナやマークアップエンジニア、システムエンジニアが中心となってごりごりと制作を進める。

　この段階になってデザイナやエンジニアが増員されることがある。増員されたメンバーは、これまでの経緯や仕様の詳細、プロジェクトの実態をほかのメンバーと連携することになる。そのため「実装でなんとかする」はずの修正個所には大抵気が付かなかったりする。

　よって、この段階での追加要求や仕様変更は工期に非常に影響を与える。前段である「構造」〜「骨格」段階でドキュメントなどの形があるものによる合意が得られているかどうかが、ボディーブローのように後から響いてくるというわけだ。

　さて、このようにWeb制作の現場では、何人かのプレーヤーがそれぞれ担当する段階と役割を持っていると同時に、互いの段階や役割に少なからず、かかわりを持ちながら制作を進行させていくという実態がある。

Webデザイナは、何を担当しているのか

　チームの中で、Webデザイナである僕の役割はもちろん「デザイン」だ。ただ、デザインという言葉の懐の広さに惑わされ、知識も経験もないうちは具体的な作業の分担について混乱しがちだ。Webサイトは企画され、設計されてから実装される。その中で、Webデザイナはどのフェイズを受け持っているだろうか。

　制作チームが作るものは表層の、つまりHTMLだったり画像パーツだったりFlashだったり動画だったり、そういったサイトに公開される「ファイル群」であるというイメージは強いと思う。特に受注案件の場合、実際に求められている能力が緊急かつ大量なパーツ制作能力だったりすることが多い。

　「実際にフィニッシュワークにかかわれる」という点で、表層の作業は決して侮れない。意外に思われるかもしれないが、パーツの量産であってもセンスが求められることは多い。切って張るだけの簡単な仕事なんてものは存在しない。本気で打ち込んだ仕事ならば、細かな気配り1つでクオリティが何倍も高まる瞬間に、軽く身震いを覚えたこともあるはずだ。何より、大抵の場合はクライアントやユーザーは完成したWebサイトそのものにしか触れられない、ということを忘れてはならない。

　Webデザイナがデザインすべきものは何だろうか。思い起こせば、最初に僕に与えられた役割は端的にいえば、「表層のクオリティを高める」というものだったと思う。「フィニッシュワークをでき得る限りの高い精度で仕上げる」という役割のために、数多のテクニックを研究したものだ。

　だが、そもそもワイヤーフレームがひどかったり、盛り込もうとしている要件が変だったり、戦略としてターゲット層の理解が間違っていたりすれば、表層段階のデザインで何をやっても「良い」という評価はもらえない。同様に、せっかく良い戦略に基づいたワイヤーフレームをデザイナが渡されていても、そこにある「良さ」を正確にくみ取ることができなければ、やっぱり「良い」という評価はもらえない。ユーザーはフィニッシュワークにしか触れられないが、かといって小手先のテクニックを見たいわけでもない。どう企画され、どう設計されたのかを踏まえた「完成品」に触れたいのだ。

　Webデザイナが役割をより良くこなすために、僕はその表層に至るまでのワイヤーフレーム、そして戦略・企画の意図を的確に理解していく必要があることに気付いた。Webデザイナの役割、それは「みんなを代弁してビジュアルをアウトプットする」ところなのではなかろうか。

Webデザイナは、何をすべきなのか

　Webデザイナにとって必要なスキルについて、第2回でのトピックをもう少し掘り下げたい。

スキルの相乗効果の相関図（第2回の図を再掲）

　僕がデザイナになったのは、デザインがやりたかったからだ。ネットワークのこともシステムのことも分からないし、知る手段もないし、そもそも興味がなかった。

　だが、「Webサイトを完成させるにはネットワークやシステムが必要だ」ということを知った。また、先に述べたように僕はチームのメンバーのアイデアを具現化する役割を担っていることも分かった。

　Webサイトを制作するということは、多くのメンバーによって企画され設計されたアイデアを具現化して、メンバーの思いを代弁するということだ。だから、制作されたものにそのプロジェクトのすべてが集約されなければならない。

　企画書や仕様書、ワイヤーフレームを渡されて、「これは本当に良いWebサイトなのか？」と疑問を抱いたとしよう。そのときWebデザイナがすべきこと、それは「そのWebサイトの戦略や要件に対してデザイナとしての意見を持つ」ことだ。そして可能ならば、その意見をチームのメンバーに伝えられるようにしたい。

　もしも自分が新米で、企画書や設計書に意見具申ができない立場だったなら、ただ言われるままに作業を始めたとしても仕方ない。だが、自分がチームのほかのメンバーから意見を求められる位置にいられたとしたら、明日自分が制作しなければいけないWebサイトのために、いま何かできることがあるはずだ。また逆に考えれば、「自分が必要だ」と考える意見をチームのほかの誰にも伝えることができないとしたら、自分かあるいはそのチームにこそ重大な問題があるといえる。

　もう1つ、プロジェクトを遂行するためには、マネジメントが不可欠だ。工期や予算の調整を怠れば、Webサイトはいつまでたっても完成しないし、必要な工期や予算を確保できないとクオリティはあっという間に下がる。

　得てして企画や設計で工期を取られて、Webデザイナには厳しい納期を突き付けられることが多い。こればっかりはこの先10年たっても変わらない気もするが、だからといって愚痴をいっても仕方がない。

　良い仕事をするためには、自分の作業時間を把握するということが重要だ。感覚的に「間に合う」「間に合わない」だけで仕事をしていては、いつまでも厳しい納期からは逃れられない。デザインは感性の仕事だから時間なんか計れない、いざとなれば徹夜をすればなんとかなる、などと安直に考えてはいけない。

　「自分なら、このデザインを何時間で終わらせられるか」を計算し、それをスケジュールに的確に組み入れてもらう、これもWebデザイナがやらなければならない重要な役割の1つだろう。

OUTRO

　「フォレスト・ガンプ」はどんな時代も走り続けていた。僕も走り続けていた。新米だ、新米だとチヤホヤされていたのは一瞬で（待てよ？ そもそもチヤホヤされてない……）、いつの間にか後輩もできて、右も左も分からない半人前ではいられなくなっていた。

　次回は、僕がWebデザイナとしての大きな一歩を踏み出せたと実感できたプロジェクトの話を紹介する。半人前から、1人前へ。この物語の、第1章のクライマックスだ。

著者プロフィール：ワンパク（1PAC.INC.）：Webサイト企画・制作・運営を行う。人、アイデア、技術、モノを最適なカタチで組み合わせる仕事で注目される

■ ＠IT関連記事

WebとUIをつなぐトリックスター　 Webサイト制作の要となるエンジニアとデザイナのチームワーク。異なる者同士をつなぐトリックスターからヒントを探る デザインハック ＜ リッチクライアント

GoogleSitesを使って制作プロジェクトをハックしよう GoogleSitesでプロジェクト管理（1）　Web制作の現場をサンプルに、GoogleSitesをツールに用いたプロジェクト管理の方法を紹介する。使いこなしてプロジェクトをハックしよう デザインハック ＜ リッチクライアント 2009/3/17

クリエイターであるためにFlash待ち受けを出し続ける D89クリップ（9）　 トイレメーカーのサラリーマンはいかにしてFlashアニメ作家になったのか？ クリエイターになる1つの方法を聞くとともにFlash待ち受けの簡単な作り方を教えよう デザインハック ＜ リッチクライアント 2009/6/5

デザイナーとの飽くなき闘争−前哨戦 ASP.NET Webアプリ開発の裏事情　Webデザイナーとチームを組んでのWebアプリ開発は今や当たり前。感性も思考方法も異なる彼らと共同作業するためには…… 「Insider.NET」フォーラム 2004/11/27

ルネサンスの巨匠たちに学ぶエンジニアリングの技 The Rational Edge　偉大な絵画の多くはチーム作業の成果だ。師匠がデザインを描き、重要な部分を塗る。そして、熟練労働者や見習いが残りの作業を分担した 情報マネジメント > アーキテクチャ 2005/9/23

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）