読者です 読者をやめる 読者になる 読者になる

株式会社ネクスト エンジニアBlog

不動産・住宅情報サイト HOME'Sを運営する株式会社ネクストのエンジニアが提供する技術ブログです。エンジニアに役立つ情報の発信や、弊社エンジニアの活動を中心にお届けします。

デザイナーと一口に言うけれど

デザイン

Apple原理主義者の大坪です。

最近

「UXとUIは何が違うのか」

といった議論を時々みかけます。それぞれの言葉について、合意のとれた定義がないから正解はないのですが、この問題に対してのあれこれの議論は時として興味深いものになります。

というわけで昨日見つけた記事について。

記事の題名は"Recruiting a Designer? Here's What You Should Know"

「デザイナーを探している人が知っておくべきこと」

デザイナーという言葉はとても幅広いわけです。車などのプロダクトデザインもあれば雑誌のデザインもあり、web、アプリなどのデザインもある。この記事ではweb、アプリなどを対象にしたTech Industory(日本語ではIT業界なのですかね)での様々なデザイナーの役割について書かかれています。

記事中それぞれの「デザイナー」が使っているツールとかもでているのですが、如何せん疲れたエンジニアにはよくわからない。というわけで、大胆に省略して自分で理解できた、と思ったところだけを訳します。

UX デザイナー:

主に考えること:ユーザは製品を使ってどう感じるか?

お気に入りのツール:Photoshop, Sketch, Illustrator, Fireworks, InVision

例えばこんなことを言う:ユーザが登録を終了したら、「ありがとう」のページを出そう

UIデザイナー

主に考えること:個々のページはどのようにユーザと視覚的にコミュニケーションするか?

お気に入りのツール:Photoshop, Sketch, Illustrator, Fireworks

例えばこんなことを言う:ログイン/新規登録のリンクはページの右上におくべきだ

ビジュアルデザイナー(グラフィックデザイナー)

主に考えること:ピクセルと格闘して、美しいアイコン、コントロール、それにフォントを作る

お気に入りのツール:Photoshop, Sketch(訳注:あれ、Illustratorは?)

例えばこんなことを言う:カーニングをオフにして、ボタンは1ピクセル左にすべき

インタラクションデザイナー(モーションデザイナー)

主に考えること:ユーザが触った後に、画面はどう動くべきか?

お気に入りのツール:AfterEffects, Core Composer, Flash, Origami

例えばこんなことを言う:メニューは左端からease-inで800msecで現れるようにしよう

UXリサーチャー(ユーザリサーチャー)

主に考えること:製品のユーザは誰なのか?そして何を望んでいるのか?

お気に入りのツール:Mic, Paper, Docs

例えばこんなことを言う:リサーチの結果、典型的なユーザは..

フロント開発者(UI開発者)

主に考えること:製品のインタフェースを実装する

お気に入りのツール:CSS, HTML, JavaScript

例えばこんなことを言う:960px 12カラムのグリッドシステムを使ってるよ

プロダクトデザイナー

会社によって定義が異なり、これまでに記述した内容のどれでもあり、どれも含みうる。

ーーー

この記事を転載したこちらのページではコメント欄でいろいろな議論がなされています。

多くの指摘は

「役割は分けられるにしても結局全部できなきゃだめだよね」

というものです。一番極端な意見では

In the end, an experienced senior designer should be able to do all the roles above. They should also understand how HTML/CSS (front-end) and various programming environments (back-end) effect their designs; capabilities/requirements/limitations.

via: UI, UX: Who Does What? A Designer's Guide To The Tech Industry | Co.Design | business + design

経験をつんだシニアデザイナーは上記の役割全部をこなす必要がある。HTML/CSS(フロントエンド)からバックエンドの環境がどのようにデザイン上での機能/要求/制約に関係するか理解しなくてはならない。

なるほど、、とは思いますがそれができれば苦労はしない、と言いたくもなる。 加えてあれですよ。Apple原理主義者としては

「HTML/CSSだけでは足らん。iOSで何ができるか、できないか理解してもらわなくては」

と言いたくもなるわけですが、そうするとここに書かれた「シニアデザイナー」はますます非現実的なものになっていく。

というわけで結局

「専門性を持った上で、専門が異なる人ときちんと会話できることが必要だよね」

ということになるのかな、と思うわけです。別の記事から引用します。

At Etsy, like many companies these days, product designers are responsible for staying active and involved throughout the entire development process. From product definition to user flows to wireframes to visual design to, yes, writing and deploying their own HTML and CSS, designers are tasked with staying involved from start to finish.

via: Why Designers Really Should Learn to Code

Etsyでは昨今多くの企業でなされているように、プロダクトデザイナーは開発の全てのプロセスに関わり、そして責任を持つ。製品の定義からユーザフロー、ワイヤフレーム、ビジュアルデザイン、そしてHTML,CSSの作成まで行う。デザイナーは開発の最初から最後まで関わることになる。

なぜEtsyではこういう方法をとっているのか。例えばデザイナーが自分でコーディングまで行うとするとエンジニアの

「そんなの無理」

という「言い訳」に悩まされる必要がなくなる。つまりデザイナーが独立して思うがままに開発を進められる、、、からではない、とこの文章は続きます。

However, we expect the same of our engineers and product managers - we push everyone on a team to be involved in every step of creating great products.

中略

What’s been most interesting to me about requiring designers to work in code is that, instead of making our designers more independent, working in code has actually created a deeper collaboration with their engineering partners.

via: Why Designers Really Should Learn to Code

しかしながら、エンジニア、プロダクトマネージャーも同じようにすることが期待される。つまりチームの全員が製品開発の全てのステップに関わるようにしているのだ。

(中略)

デザイナーがコードを書くことの一番興味深い点は、それによってデザイナーがより独立する、ということではなく、コードを書くことによって、エンジニア達とよりよく共同作業できるという点にある。

お互い共同しましょう、と言っているだけではなく、実際に協力する相手の作業を担当してこそお互いの立場が理解できる。

That’s what collaboration really is - crossing boundaries and finding common ground so that we can work together and share a mutual understanding.

via: Why Designers Really Should Learn to Code

お互いの境界線を越え、一緒に働ける共通の場所を見いだし、互いに理解し合う。それこそが真の協力というものだ。

あれですよ。私のような疲れたエンジニアが自分で製品のUIをデザインしたとする。それに対してデザイナーさんが出してきた案をみて

「をを、こんなに違う。当たり前とはいえこの差異はなんなのか」

と驚愕する。この驚愕はきっと無駄ではない、と信じたい。

と無理矢理前向きにまとめたところで今回はおしまい。