The Dribbblisation of Design

Paul Adams
Yuya Saito
Credit

This article is translated with permission of Paul Adams.
You can find original article at The Dribbblisation of Design.

本記事はPaul Adams氏の了承を得て翻訳された記事です。
原文はThe Dribbblisation of Designにて掲載されています。

DribbblePostHeader.png

これらの天気アプリのうち1つだけが本質的な問題の解決をしようとしている。

プロダクト/インタラクションデザインコミュニティでは分岐が起ころうとしている。Ryan Singer氏やJulie Zhuo氏が書くような素晴らしい記事達が我々の生み出すものをよりよくし続けている一方で、多くの人がDribbbleに自身の作品を投稿し、議論をしている。それらを集約した結果は我々の生み出すものを後退させている。この記事はDribbbleそのものについてではなく、コミュニティ全体から見たDribbbleの価値がなんなのかについてである。ここで私は『プロダクトデザイン』という用語を使うが、この語にはUXやインタラクションデザインも含めていると考えて欲しい。

『かっこいい!』　Dribbbleコミュニティにおける表面的なデザイン・ワークへの見返り

私は昨年、Facebook、そして現在はIntercomにて、求職者から提出されたたくさんのプロダクトデザインのレビューを行ってきたが、あまりよくないパターンに気がついた。デザイナの多くが本質的なビジネスの問題を解決するためにではなく、自分の仲間の関心をひくためにデザインをしているのだ。この問題はクリエイティブ広告業界で長らく問題視されてきていて(クリエイティブそのものがクライアントのビジネス目標のためではなく、賞を取るためのものになってしまう)、プロダクト、インタラクションデザインにも目立つようになってきている。

私が最近レビューしてきた求職者からのプロダクトデザインは表面的な、Dribbbleに目を向けたものがほとんどだ。見た目は美しいが、うまくは機能しない。ピクセル単位で完璧なフラットデザインなのかもしれないが、ビジネスゴールについて取り組んだものではなく、人々が毎日抱えている問題の解決にもならず、ビジネスのエコシステムについてほとんど考えられてはいないのだ。カラーパレットやUIの中で突出した見た目上のディテールという部分についてDribbbleは確かにコミュニケーションを形作ってはいる。人は見て、そして模倣する。Dribbble内のプロダクトデザインの大多数はよく似ている。ソーシャル・ソフトウェアであろうと、アカウント・ソフトウェアでも、マーケティングサイトでも、天気のアプリでも、同じスタイルが適応されている。目を細めてそれらを見て違いを見つけ出して欲しい。

最も重要なプロダクトデザインワークは大抵は最も醜いもの

対照的に、もっとも優れた求職者たちは彼ら自身の思慮課程そのものを送ってきた人たちだ。スケッチ。ダイヤグラム。賛否両論の議論。現実的な問題。妥協と解決。インタラクションやアニメーションを説明するプロトタイプ。実際に動き、変化し、アニメーションするもの。実際のデータを利用したもの。

もっともひどかったのが平面的なPNGファイルを送ってきた人たちだ。ワイヤフレームであふれたPDF。明確な問題の解決も見えず、ビジネスや技術の制限への解決も示さない。コンテキストが存在しないものだ。これらのピクセルパーフェクトで、Retinaディスプレイにすら対応している成果物はDribbble上では素晴らしい作品に見えるのだろうが、現実のプロダクト製作環境において、主要なデザインツールとしての価値は低下しつつある。

この事こそが、他者のデザインをリデザインすることが愚行である理由だ。例えば、新しいYahooのロゴ、iOS7、Facebook、新・新Twitter、アメリカン・エアラインのリブランディングなどがそうだ。他者はこれらのプロジェクトにおける意思決定においてなに一つのコンテキストも知らない。要求や制限、あるいは組織のポリシーもだ。

プロダクトデザインがある特定のビジネスにおける制限の問題解決であるとするなら、プロダクト/UXデザイナと自らを呼ぶ人たちの多くが、実際にはデジタル・アートを実践しているに過ぎない。彼らはアーティストなのだ。彼らはスタイリストなのだ。美しい見た目のものを創作することは重要なスキルに違いない、しかし、それとプロダクトデザインを行うこととは別だ。

プロダクトデザインとは: ミッション、ビジョン、そしてアーキテクチャ

広義の概念からピクセルレベルでのディテールにおいて、常にデザイナは自身の会社のミッション、ビジョン、そしてプロダクトのアーキテクチャについて考え続ける必要がある。デザイナがやること全てはこのフィルタを通さなければならない。

デザインは会社のミッションとともに、会社のトップに立つ人から始まる。それから会社のビジョンが続く。明確で、実行可能なミッションとビジョンなしに、組織内で優れたデザインを生み出すのは非常に難しい。この重要性を過小評価してはならない。もし会社そのものが明確なミッションを持たないとすれば、それを作ることを促進することを自分のタスクとするべきだ。

ミッションとビジョンの後に続くのがプロダクトのアーキテクチャである。これは技術的なアーキテクチャではなく、プロダクトのコンポーネントとそれらがどうお互いに関連し合うのかについてであり、システムそのものである。Facebookでの初日の朝、Chris Cox(プロダクト統括責任者)は素晴らしい導入スピーチを行う(ここからその本の一部を見ることができる)。様々な職務の人たちの前で、どんなトピックについて話すこともできるのに、彼はプロダクトアーキテクチャとそれらが社のミッションとどう関わり合いがあるのかについて話すのだ。

Facebookにおいては、そのアーキテクチャは人とその友達のディレクトリ、そして彼らの興味関心か、グローバルブランドから地元のお店を含む、ビジネスのディレクトリを意味する。そのディレクトリ上にすべての関係性を示すマップが存在している。ミッションとプロダクトとの関係は直接的で誰が見ても明らかなものだ。私個人の経験から、わかりやすく定義されたプロダクトアーキテクチャなしに素晴らしいデザインを生み出すことは非常に難しいものであると考えている。そして多くの場合、ミッションと同じように、そのアーキテクチャを理解し、発展させていく手助けをすることはデザイナとタスクなのだ。私はFacebookを外部のパートナに説明する際には、以下のようなダイアグラムをホワイトボードに書いている:

プロダクトアーキテクチャはインフォーメーションアーキテクチャとは別ものだ。ページ郡がどんな風にリンクしあうのかということではなく、あるいはモーダルウィンドウを表示して、ボタンが何をするのかを説明するものでもない。プロトタイプを利用する方がそれらの説明をするのにはいつだって適している。プロダクトアーキテクチャはもうすこし深いレベルにある話なのだ。それは構造であり、構成単位であり、システム内のオブジェクトとそれらの関係性である。Intercomにおいても、我々はデザインをプロダクトアーキテクチャという文脈で考慮している:

Dribbbleでプロダクトアーキテクチャについて説明されていたことは一度もないと記憶している。デザイナが自身の成果物がどのようにミッションと関連するのか、ビジョンを前進させるのか、そしてプロダクトアーキテクチャ内で必要な重要度でどのように位置づけられるのかについて話すことは非常にまれだ。そうすることは例外ではなく、基準であるべきである。

明確なミッションやビジョン、そしてプロダクトデザインを持ってから、ようやく他のディテールについて考え始めることができるのだ。ディテールとは、ユーザの目的と何が彼らを幸せにし、充足させることができ、成功させることができるのかであり、自身のプロダクトがどんな役割を持っているのか、どこがよくて、どこが悪いのかである。

荒く汚いスケッチや落書きでも、それらについて説明することはDribbbleにアップロードされるようなPNGよりも遙かに重要だ。プロジェクト開始から実働するプロダクトを作るまでのプロセスにおいて、PhotoshopのファイルやPNGは私にとってはもっとも興味を引かず、重要でもない側面だ。もっと大切なのはどこに妥協点を設けるかの議論であり、賛否両論の比較がどこでなされたかであり、どこで我々が会社のビジョンとアイデアを紐づけるのか、プロダクトアーキテクチャをベースに何を前進させるべきなのかである。ホワイトボードに書いたスケッチや手書きの絵、ナプキンの裏に書かれた問題解決の方法こそ、デザイナがDribbbleにポストするべきものなのだ。それらを私に見せて欲しい。何を作るのかについて文字で説明することのほうが、PNGやPDFよりも重要なのだ。

デザインにおける4つのレイヤとはなにか

デザインとは複数のレイヤに渡るプロセスである。私の経験ではそれらのレイヤをどの順番で進めるのが最適なのかについての答えはあると考えている。もっとも単純なバージョンは以下の4つのレイヤで考えることだろう:

デザイナというデザイナは他のレイヤについて熟慮せず、4つ目のレイヤについてのみフォーカスしているのをよく見る。上から順に、ではなく下から上に順を追っているのだ。グリッドやフォント、色、そして見た目のスタイルは他の3つのレイヤにおける問題が解決していなければ、意味をなさない。多くのデザイナは上から順を追っていると言うが、実際には実行されていない。なぜなら、複雑なビジネス的な決定や異なる意見を持つ人たちの応対をするよりは、きれいな絵を描いたり、ピクセルに身を任せた方が楽な場合もあるからだ。それはそれでいいだろう。4つ目のレイヤにだけ止まっていればいい。しかし、それらはアートでありデザインではない。あなたはデジタルアーティストであって、デザイナではないのだ。

Webが浸透していくにつれ、システムをデザインすることは重要になっていく

Webの発明は産業革命以来の大きな変更を社会に与えることだろう。Webはすべてに浸透し始めている。我々の家にも、仕事場にも、寝ているときにベットのそばにも、そしてどこへ行くのにもポケットの中にあるものだ。Webは常に我々と共にある。すでに車の中にも、服の中にも、持っているものの中にも、我々の健康をモニタするものにも存在する。2020年までには(もっと前でなければ)、全てのビジネスはWebビジネスになるだろう。Charles Eames氏がかつて言ったとおりに『いずれ全てのものはつながり合う』のだ。

静的でリンクされたウェブページをデザインすることは死に行く職業だ。モバイルテクノロジやAPI、SDK、そしてプラットフォームとプロダクトのオープンな関係性の素晴らしい発展は、我々全員がシステムをデザインしている未来図を明確に描いている。ワイヤーフレームで溢れかえったPDFは死に行く提出物となり、Photoshopはプロダクトデザインツールとしてはその命を終える。デザイナは自らの制作物をスケッチやホワイトボード、そしてプロトタイプツール(Quartz Composer、After Effects、Keynote、CSS/HTML)を使って前進させるだろう。

このことが多くの人がデザイナはコードを書くべきであるという理由の1つでもある。コードを書くべきか否かについて賛否はあるだろうが、デザイナはピクセル上ではなく、システムにおけるコンポーネント間で何が起こるのかという部分について問題と解決を説明する必要が確実にある。だからこそ、プロトタイプを作成し、コードを書き始め、実際のデータが必然的に導くであろう予測できなかった、あるいは見落としていた事柄などのディテールを詰めていくのだ。実際のデータを使ってインタラクションを製作することで、よりよい感覚を得ることができるはずだ。

ジョブを中心にデザインをしていく

Intercomでは、Clay Christensen氏によるジョブ・フレームワークをプロダクトデザインに活かしている。我々はすべてのデザインの問題に対してジョブという枠組みを作って、イベントの発生や状況、モチベーションと目的、そして狙っている結果にフォーカスしている:

_ する時、私は _ したい、そうすれば、_ ができるようになる。

例として: 新しいユーザがサインアップしたら、お知らせを届けて 欲しい。そうすれば、彼らに話しかけることができる 。

こうすることでより物事が明確になってくる。このジョブとミッションを関係付け、重要度を適切に判断することが可能になる。こうすることで常にデザインにおける4つのレイヤすべてについて考えることが必須になるのだ。システム内において、どのコンポーネントがジョブ内のパーツの部品となるのか、そして、そららとの必要な関係性とインタラクションを促進することができるようになる。デザインをレイヤの上から下へ進めていけるようになり、ビジュアルデザインに入る前に、効果やシステム、インタラクションについて考えることができるようになる。

ジョブを利用するとともに、現在我々はシステム起源であるデザインを反映させるためにパターン・ライブラリの制作をしている。Photoshopを使うことなく、多くのデザインをこのライブラリ・コードから製作している最中だ。これは完璧なプロセスではない。これから我々も常に反復して修正していく。

アップデート

TwitterやHacker Newsにて、何人かが私がビジュアルデザインとUXデザインを融合させているという指摘をしていたが、私はそうは思わない。システムデザインとインタラクションについて考えることなく、インタラクティブなビジュアルデザインを考えることができないというのが私の意見だ。我々はグラフィックデザインをしているのではない。我々はポスターをデザインしているのでも、標識をデザインしているのでもないのだ。

ノート

本記事のタイトルについてはDesに感謝したい。

Intercomでは現在プロダクトデザイナを募集中! :)

4つのレイヤは7、8年前にFlowというUXコンサルティング会社で利用していた6レイヤモデルの改作で、それ自体、Jesse James Garrett氏による独創的なダイアグラムの改作である。

Dribbbleはそのものは素晴らしいプロダクトであり、記事は本質的には彼らについての話ではない。彼らはもしかしたら、表面的な美しさから離れて、より実質的な問題解決に向けた方向になればより良くなるかも知れない(もちろん、Dribbbleがデジタル・アート用の場であれば、話は別だ。:)

ヘッダのDribbbleデザインは: bwaddington kolage claudioguglieri alden BillSKenney dash から、またはumbrellaアプリはこちらから :)