「ゴールは同じ」デザイナーとエンジニアの意思疎通を考える

初めまして、デザインとフロントエンド実装を兼任している玉村です。
ウェブ制作業界では、デザイナーが画面をデザインし、エンジニアが実装するといった分業の会社がまだまだ多いと思います。
今回は、「うまく意思疎通ができない」「どうにも話が伝わらない」という悩みをどうすれば解消できるかについて考えていきたいと思います。

ミスコミュニケーションが起きる理由

実際にあった例

以前勤めていた職場でこんなことがありました。
ローディングのアニメーションで、「このアイコンがくるくると回っていてほしい」とデザイナーがエンジニアに注文し、エンジニアは言われた通りにくるくると回しました。その出来上がりを見たデザイナーは、「もっさりしていてなんだか違う…。もっと気持ち良いアニメーションに」と修正指示を出しました。エンジニアは回転速度を上げて調整しましたが、デザイナーは出来上がりに満足を得られず、「気持ち良くのニュアンスがどうしても伝わらない」と何度も修正依頼を出すことになってしまいました。

なぜこのようなすれ違いが起きてしまうのでしょうか。

すれ違いは「目指すところの違い」から起きる

デザイナーは美しく、見やすく、気持ちがよいということを目指し、1pxの細部にまで気を配っています。それに対してエンジニアは、ちゃんと動くかどうかに対して注力しています。この”ちゃんと”というのは、あらゆる環境で見てバグがなく動くか、ページを読み込むまでに時間がかからないかといった機能面や、メンテナンスしやすいコードを書いているかといった管理面を指しています。
このゴールの微妙な差が両者の意思疎通のズレとなり、溝となっていきます。
デザイナーは思い描いていたイメージが形にならないことに苛立ったり、エンジニアは仕様通りに実装しているのに何度も曖昧な修正依頼を出されることにうんざりしてしまう。
一度「伝わらない」と思ってしまうと、その溝はどんどん深くなって「ものをつくりあげる仲間」のはずが「理解できない相手」という認識になってしまうかもしれません。

では、そんな状況にならないために、どのような努力ができるでしょうか。

改善のためには「気持ち良くいい感じ」を具体的に

デザイナーは動かせなくともサンプルを集める

まずデザイナーがすぐに始められる第一歩は、自分でつくれなくても実装の参考になるようなサンプルを集めることです。ニュアンスを他人と共有するのは簡単なことではありませんが、すでに形になっているものを参考にすれば理解度が増します。

全く同じものを見つけ出せなくとも、動きの話だったら「こっちよりはふんわりした動きで、こっちよりはスムーズに」などと指示することができ、より具体的な目安になります。

ツールを利用してイージングを指定してみる

気持ち良いアニメーションというのは速度だけでなく「イージング」と呼ばれる動きの種類も大きく関わってきます。最初はゆっくり始まってだんだん速くなり、最後はまたゆっくり止まる、こんな動きが「気持ち良さ」につながっています。

stylie

こちらの「Stylie」というツールを使えばコードが書けなくても簡単にイージングの調整ができます。数字で指定もできるし、曲線を動かして調整できるから直感的に動かすことも可能!しかもコードが出力できるからエンジニアは完全に再現することができます。便利。

つくるまではしなくとも、「Easing Function 早見表」を見ながらイメージを共有し説明するのも良いと思います。

エンジニアはあらかじめ動きのストックを作っておく

一方、エンジニアができることとして、ナビゲーションやボタンなどの動きのサンプル集をあらかじめ作っておくというのも手だと思います。使いまわせるようなコードを書いておけば実装の時にも時間短縮になりますし、デザイナーの提案を待つだけでなくエンジニアの方から動きを提案できれば、デザインから実装までスムーズになります。

「ゴールは同じ」という認識とリスペクトを忘れない

前述の例はあくまでたくさんあるやり方のなかの一部ですが、こういったコミュニケーション方法の改善の他にもう一つ大事なことは、両者の目指すゴールは同じだという認識をともに持つことです。
ディレクターが方向性を決め、それに沿ったデザインを行ってからエンジニアが実装するといった完全な分業ではなく、企画段階からデザイナー、エンジニアにも参加してもらうことで、チーム全体で目的達成のビジョンがより明確に共有できます。
先に述べたミスコミュニケーションの例でも、デザイナーが具体的な説明をできるようにすることも大切ですが、「ここに気持ち良いアニメーションを採用するのは、ゴールに向けてこんな意味がある」ということをエンジニアがしっかりと認識することも重要です。そうすれば、ただ実装するだけで終わらず、“気持ちよさ”を追求する目的意識が生まれ、思い描くイメージをより正確に再現しようと努めやすくなります。

そして大前提として大切なことは、相手の仕事内容をきちんと理解し、相手が大事に思っているこだわりを知ること、リスペクトを忘れないことです。当たり前のことではありますが、仕事をする上で本当に大切なことですよね。社内にデザイナーしかいない、エンジニアしかいないという環境で働いている方は、社外で行われているデザイナー/エンジニアの交流イベントに参加してみて、お互いの考え方を知るのもいいかもしれません。

 

2016.10.31