デザイナーと一緒に仕事をする上で気をつけていること

はじめに

この記事は CrowdWorks Advent Calendar 2016 6日目の記事です。

僕はエンジニアなのですが、クラウドワークスに入る前はウェブサイトの受託制作を主にやっていて、必然的にデザイナーと一緒に仕事をすることが多かったことから、どうしたらケンカせずに仲良くやっていけるか両者の価値を最大化できるかについて、よく考えたりしてきました（いまも考え続けています）。

ウェブデザイナーとコーダー（マークアップエンジニア）との違いだとか、デザイナーもコードが書けるべきだという議論だとか、最近は特にデザイナーとエンジニアの境界が曖昧になってきた印象もありますが、それでもやっぱり、エンジニアとデザイナーとでは理解し合えていない部分が少なからずあったりするかと思います。

そこで今日は、いままでの経験から、エンジニアである僕がデザイナーと仕事をする上で気をつけていること、気に留めていることを紹介しようと思います。何かの一助になれば幸いです。

「いい感じに」とか「適当でいいから」とか絶対に言わない。

怒られるやつです。新しく実装した機能の見た目を良くしてほしいとき、UI を修正した際に全体のバランスを調整してほしいとき、つい言ってしまいがちですが、そもそもデザイナーの仕事は「見た目を整えること」ではありません。というか、「整った見た目」というものが背景や目的によって変わるものなので、やりようがない、といった感じでしょうか。

とは言っても、諸々の事情で背景や目的が自分でもはっきりしていないとき（これはこれで問題ですが）、時間がないときなどはこちらも「いい感じに」としか言いようがなかったりします。それでも出かけた言葉を呑み込んで、「最低限ユーザーに違和感を感じさせないように」とか「この期間でできる範囲で」といった感じで言い換えるようにしています。

（たぶん言い換えているだけってことはバレていると思いますが。）

1px はとても大事（らしい）。

ピクセルだとか色指定だとか、自分では大した違いに思えないような部分にデザイナーはものすごいこだわりを持っていたりします。実装時に勝手に変えたりでもしたらいつまでも根に持たれます。そのデザイナーに「エンジニアの何が嫌か？」と訊いたら、一番最初に「1pxの大切さを分かっていないところ」と言われました。めっちゃ根に持たれています。それくらい大事らしいです。

英文フォントの「O（オー）」は、上下と左右で線の太さが違うらしいです（太さを変えないと錯覚の影響できれいな円には見えない）。これはあくまで一例ですが、つまり、非デザイナーやユーザーが知覚はできないけれども知らないうちに感じ取っている差を、デザイナーは知覚できているのだなーと。どこまで実現するかはともかく、決して細かいことを気にする奴だと思ってはいけません。

（ただ、デザイナーにも1pxを妥協しないことが技術的にどれだけ大変かは知ってほしいものです。）

Bootstrap は「デザイン」ではない（らしい）。

UI コンポーネントを組み合わせただけで「デザインできている」と思ってはいけません。もちろん、「組み合わせるだけで成り立つ UI コンポーネント」があることが理想ですが、少なくとも Bootstrap を持ってきただけでデザインが不要になるわけではないらしいです。確かに、見た目は整っているのにものすごく使いにくいサービスとかあったりするので、気をつけたいものです。

UI コンポーネントはあくまで部品であって、部品をどう組み合わせるか、どう配置するかを考えるのもデザインなんだと思います。そしてこの領域において、やっぱりデザイナーは知見やスキルを持っています。ちなみに、 Bootstrap で組まれた UI ってエンジニアでも見ただけですぐに分かるかと思いますが、僕の知っているデザイナーは使われている写真が素材集から持ってきたものかどうかすぐに分かります。

（僕もある程度分かります。駅の広告とかでも平気で使われていてびっくりします。）

「すごい」とか「ヤバイ」とか安易に言わない。

ポジティブ、ネガティブ、いずれにしても、デザインについて評価するときに個人的な趣味や感性を基準にしてはいけないのは基本だと思います。ただ、例えそのことを分かっていたとしても、非デザイナーが説明もなしに「すごい」とか「ヤバイ」とか「マジヤバイ」とか言うと、「こいつ表面的なところしか見てないな」と思われてしまう気がしていて、僕は言わないようにしています。

きっと、言葉のニュアンスであったり何が「ヤバイ」のかが共有できていれば問題ないとは思うのですが、まずはそれらが共有できているとは限らないという意識を持つことが大事なのかなと思っています。もちろん、そのあたりを共有していくこと、ひいては共通言語を作っていくことが理想ですが、一朝一夕でできるものではないということを忘れないようにしています。

（エンジニアも「固い」とか「強い」とか言いますよね。）

エンジニアは万能ではないということを分かってもらう。

もう5年くらい前の話ですが、マークアップしたものをデザイナーに見せたら、「私の画面と色が違う」と文句を言われたことがありました（ディスプレイメーカーに言ってくれ）。ただそこは「勉強しろ」ではなく、自分もデザインについて分からないことがあるのだから、デザインをする上で必要となる技術的な知識はエンジニアが積極的に共有していくべきだと思っています。

実務上の効率もありますが、そのデザインが何故実現できないのか分からないままだと、極端な話、エンジニアがサボっていると思われかねません。そうすると信頼関係も損なわれてしまいます。だから、改行がカンプ通りにならないのは僕のせいじゃないんだ……と思っていたら、SmartNews が形態素解析を使って改行を制御しているということを知って、もっと頑張らなきゃと思いました。

（もう大抵のことではIEのせいにできない時代になりました。）

デザインを変更するときはせめて一声かける。

開発・制作の体制にもよりますが、急ぎであったり正規のルートではない依頼といった理由で、デザイナーが関わらないままエンジニアがデザインを変更する場合、事後であったとしても、できるだけ速やかに、関係しているデザイナーにはそのこととその理由を共有するべきだと思います（ディレクターみたいなことをやっていた頃は特に気をつけていました）。

感情的な問題もありますが、主な理由は2つあって、1つは非デザイナーが把握していないデザイン上の意図や目的を破壊してしまいかねず、知らないうちにユーザー体験を低下させてしまう危険性があるため。もう1つは、こういう部分を疎かにしてしまうと、「デザイナーがいなくても何とかなる」という意識が根付き、デザインやデザイナーに対する理解を一層阻んでしまうと思うからです。

（分からない人に勝手にコード触られて困るアレと一緒だと思います。）

まとめ → 面倒くさがらない。

デザイナーといえば、やたら細かいこと言ったり抽象的な話をしてきたり擬音で説明してきたりしますが、エンジニアとは扱っているものが違う以上、それが必要な過程なんだということを忘れずに、決して面倒くさがってはいけないと自分に言い聞かせています。そして、理解が難しいからこそ、全然違う両者が力を合わせることで良いプロダクトが生まれるのだと思います。

本稿はあくまでエンジニア視点における話であって、一方的にデザイナーを持ち上げることが趣旨ではありません。デザイナーにもエンジニアのことをもっと理解してほしいですし、必要なのは相互理解と信頼関係だと思います。エンジニアが作ったものを修飾することがデザイナーの仕事ではないですし、デザイナーが考えたものを動かすことがエンジニアの仕事ではないはずです。プロダクトを作ることが我々の仕事だと思います。

それでも挫けそうになるときは、SMAPの『セロリ』を聴けばいいと思います。

育ってきた環境が違うから好き嫌いはイナメナイ
夏がだめだったりセロリが好きだったりするのね

この記事は CrowdWorks Advent Calendar 2016 6日目の記事でした。明日は面倒くさいデザイナーである @KotaroHamano が何か書きます。