こんにちは。デザイナの田名網です。
先日、エンジニア向けに社内勉強会をしました。
テーマは、デザインの基礎と、UX/UIについてです。
前回、新卒さん向けに行なった内容（新卒さん向けデザイン基礎研修をやりました。1回目 “デザインってなに？”）が好評いただいたので、基本はそのまま、今度はエンジニアさん向けに開催しました。
このスライドは前回も見ていただいたと思います。

 

デザイナ vs エンジニア？

巷では、デザイナ vs エンジニアに関する話で溢れていますね。
その様子は、対立というよりかは、近頃は「いかに仲良くやっていくかノウハウ」とか、「ハイブリッド型のエンジニア/デザイナであろう」といったような
平和な方向にシフトしているような感じがして、個人としては嬉しいです。仲が良い方がいいですね。
それほど言及されるのは、デザイナとエンジニア同士が日頃より論点や着眼点が違ったり、理解し合うのが難しい部分があるのでしょう。
「デザイン」と聞くと、余裕があったらやるデコレーションや、センスがものを言うアートだと勘違いされてしまいがちで、機能や重要度の部分が理解されづらいです。
そのため、実際の開発プロセスの中でも軽視されたり、省略されてしまうことも多いので、デザイナの立場から危惧していたところもありました。

エンジニアだらけの環境の中で考えたこと

ハンズラボは、管理部門を除く開発部門のうち、95%がエンジニアの会社です。
世界的に(!)理解し合えないと言われているデザイナとエンジニアですが、
ラボではデザイン思考やUXの大切さがじわじわと興味を持たれ、市民権を得てきています。
わたしはUXのデザイナなのですが、コードも書きますし、フロントエンドも実装するので、デザインだけやっているわけではなく、比較的エンジニア視点を持っていると思ってます。
そのせいもあって、デザインは、設計に近いロジカルなものだと考えることに馴染みがあります。
そもそも、デザインは、語彙の意味ですと本来はアートよりかは設計的な意味合いが大きいですし、
実際画面のユーザビリティについては特に、論理的な理由や裏付けが必要です。
デザイナが絵を描くだけの時代は、終わったと言われてますね。
 

実はエンジニアって、デザインを理解するのに向いているのでは？

デザインもロジカルな面があると知れば知るほど、なんだ、そんなことなら、エンジニアの思考と親和性あるのでは？と思ったのです。
今回は具体的に、エンジニアに、「デザインについてわかってほしいなー」というときに、どういう風に伝えたらいいか考えてみました。

最初にエッセンスだけ言っちゃいます。
以下。

デザインを理解したいエンジニアに、デザイナが説明するときのコツ

1 ロジック化する
　　1. 定義の整理
　　2. ルール
　　3. 歴史的背景
　　4. レファレンス
　　5. 同列、上位・下位の概念
2 モチベーションへの配慮
ひとつずつ説明をしますね。

1. ロジック化する

エンジニアのひとは、その性質から、言葉や概念を明らかにしたり、定義付けをする癖が付いていることが多い気がします。
ですので、その考え方にこちらも沿ってみると、理解しやすいかも。
ロジック化には、さらに下の5つの要素があります。

1-1. 定義の整理

この言葉が何を指すのか、辞書にはどう載っていて、自分はこの言葉をどのように使用するのか、ということを先に明示しておくと、説明する時に混乱や齟齬が少ないと思います。
わたしは、スライドや資料を作成したり、エンジニアの知らないであろうことについて説明するとき、まずは言葉の指す意味について最初に言及することにしています。

1-2. ルール

これは業務内でのコミュニケーションの一環ですが、
アプリやサイトなどの1プロダクト内で、普遍的に用いるデザイン上のルールをすでにデザイナ側で決めているなら、それを共有します。
画面のデザインですと特にそうですが、色や形状の指示書の他に、ルール提示書を作成しておくと便利です。
角丸がついている四角形はタップ可能だとか、警告色はこういうカラーセットだとか、そういった単純なルール群のことです。
ルール提示書も簡単でいいんですよ。
デザイナの頭の中では当たり前すぎて言及するほどのことでないと思っているような内容でも、その意図と目に見える結果を、他者向けに明らかに残しておくことは効果的です。
自分自身もブレずに済みます。

1-3. 歴史的背景

デザインに関する最近の流行などについて、時間軸で説明できることがあれば教えてあげます。
感覚的であったり一過性であったりするものを彼らはあまり好まないので、このデザイントレンドはどういった背景でいま話題なのかという理由を説明しましょう。
例えば、フラットデザインの流行は、身体により近くなった iPhone などのデジタルデバイスが物理世界のメタファに頼るのをやめ、よりコンテンツをインタラクティブに体験することを重視していった結果にあると言えます。などといった情報のことです。

1-4. レファレンス

「iOSヒューマンインターフェースガイドライン」や「Google Material Design」など、参照できるレファレンスがあればそれを紹介します。
プログラミング言語のレファレンスをよく読む彼らは、きちんとまとまった公式資料に頼りたくなる生き物です。

1-5. 同列、上位・下位の概念

わたしたちデザイナが、
「Node.JS」「AWS」「DynamoDB」「Swift」「サーバレス」「UIView」
と飛び交っているのを聞いて、頭がぐるぐるするのと同じく、
エンジニアの人は、
「UX」「ユーザ中心設計」「Sketch」「インタラクション」「カーニング」「jpeg」「ペーパープロトタイプ」
と聞いたときに、呼吸がしづらいような感覚になるはずです。
でもそれは、それらの単語が指す言葉が、どんな粒度で、頭の中の思考の地図のどこの辺にいるべき存在なのか、わからないからむずむずするのです。
そういうときには、その単語・概念同士の関係性を教えてあげると、彼らは落ち着きます。
「Sketch」は、「イラレ」や「フォトショ」と同じく、広く画像を描くための「ドローイングアプリケーション」のうちの一つで、画面のデザインをする段階で、本物に近いシミュレーション画像である「モックアップ」を作成するときに使うものですよ、と。
「UX」は「製品を使用する人が体験するすべて」のことで、主に機械を操作するときの画面をインターフェースとするときに、画面の構成のことをさすのが「UI」ですよ、と。

2. モチベーションへの配慮

デザイナもエンジニアも、つくることが楽しくてしょうがない人種であると考えています。
しかし、そこにはちょっとだけ、差がある。
例えるならば、DIYで簡単な木の棚をつくるとしましょう。
デザイナは、木材にこだわり、色にこだわり、それを置くインテリアがどうなるのかを考えてニヤニヤします。つまり、完成品を愛します。
一方でエンジニアは、のこぎりの切れ味や、インパクトドライバの機械スペックと、ネジの素材に関心があり、それらを使うことに喜びを覚えるはずです。プロセスを愛するでしょう。
これらは、あくまで傾向の話なのですが。
ですので、つくるプロセスにワクワクするのだというモチベーションの置き方を尊重し、そこに気持ちを沿わせてあげると、よいと思います。
具体的なところですと、
「デザインをするためのこのアプリケーションは、こういう機能があって、これを使って位置合わせをすると、楽だしきれいなんだよ」、
といったような様子で、ツールのクールな使いかたなど、デザインを教えながらも彼らが楽しめそうなことにも意識してみるといいかもしれません。
（わたしも、完成した美しいモックよりも、Sketch やイラレを操作中のキーボードコマンドやマウスの手の動きのほうが、やたら感心されます。）
 
いかがでしょうか。
裏付けが主観的ではあるのですが、いままでエンジニアばかりの職場で働いてきた経験や、趣味の読書（年間180冊くらい読みます）などから、考え続けてきたことをまとめてみました。
デザイナのみなさんも、業務で説明するときや、勉強会などで、こういう風に話の流れを立てたりするといいと思います。
デザインをわかってるデザイナの方々も、これらを心がけることでより「納得されるデザイン」をつくれると思いますし、エンジニアさんと仲良くやっていけると思います。本来は近い存在なのですから。
おわりですが、
エンジニアの会社で市民権()を得るべく奮闘しているデザイナさん、システム屋で孤独()なデザイナさん、
デザイン思考や人間中心設計をベースとした新しい価値を布教しているかた、おりましたらぜひ友達になってください。
お読みただきありがとうございました！
（写真提供元 https://www.pakutaso.com/ ）