最強のチームワークのために知っておきたい!エンジニアがデザイナーに求める仕事とは?

皆さんは普段、インターネットでどのようなサービスを利用しますか? 画面上で普段私たちが目にしているのは、サービスのビジュアル(デザイン)のみですが、その運営にはエンジニアの存在が欠かせません。そしてサービスの開発には、デザイナーとエンジニアの連携が重要です。そこで今回は、現役エンジニアの皆さんに「デザイナーに求める仕事の仕方」について、お話を伺いました!
(※ここでのエンジニアは、プログラマーと兼業されている方について述べています。エンジニアとプログラマーの違いについては、こちら【エンジニアとプログラマーの違いって何?】をご覧ください。)
編集・執筆 /CHIEKO WATANABE,AYUPY GOTO

今回お話を伺ったエンジニアの皆さん

櫻本 静香さん (WEB/アプリ)

TECH::CAMP(株式会社div)にてインターン。メンターとして受講生にプログラミングを教える傍ら、社内のシステム開発を行っています。冬に行われた社内の新規事業立案ハッカソンで優勝し、現在はアプリのリリースに向けて開発を行っています。詳細はこちら→http://blog.tech-camp.in/?p=665
TECH::CAMP(https://tech-camp.in/)

山村 武史さん (WEB/アプリ)

東京大学大学院修士1年。学部に入ってからプログラミングを始めました。現在は、Tech::campでメンターとしてrails、iosを教えながら、内部開発を行っています。
TECH::CAMP(https://tech-camp.in/)

髙橋 宗也さん (WEB/アプリ)

TECH::CAMPでメンターをしている東京電機大学4年です。RailsとiOSエンジニアです。「人に感動してもらえるものを作る」をもっとーに生きています。 iPhoneでSNSサービスを出してます → 文通(http://bun-tsu.com/
TECH::CAMP(https://tech-camp.in/)

赤石 剛史さん(WEB/アプリ)

株式会社セプテーニ・クロスゲートのエンジニア。自社のアフィリエイトサービスxmax(クロスマックス)を開発。最近は主にiOS/Androidアプリを制作している。

川本 佑樹さん(WEB)

複数のベンチャー・スタートアップ企業を経て、ビビビットの技術責任者に就任。 デザイナー・クリエイターの方々を支援できるよう日々ビビビットを改善しており、 「楽しく開発」をモットーに、まずビビビットを開発しているメンバーが楽しんで働けるよう邁進しています。

Q1.一緒に仕事をして楽しいのは、どんなデザイナーですか?

櫻本さん:気配りのできる人です。最初の段階で仕様などについて細かく言ってくださる方は助かります。

山村さん、高橋さん:仕事が早い人です。コードも書けるデザイナーだと、仕事が早くなるので嬉しいです。

赤石さん:こちらのささやかな発信も、いち意見としてしっかり聞いてくれる人ですね。(反映するかどうかは別として)

川本さん:デザインを楽しんでいる人です。こんなデザインはどうでしょう?とガンガン提案してもらえると、こちらも発想が広がって良い仕事ができます。

Q2.認識のずれを無くすために心がけていること、行っていることはありますか?

櫻本さん:わからないところはそのままにせず、すぐに質問するようにしています。

山村さん:こまめにやり取りを行なっています。

高橋さん:朝MTGをしています。

赤石さん:wikiに対応内容を残すようにしています。

川本さん:何のために作るものなのか、誰がどのように使う事を想定しているのか、などの背景や前提条件は事前にしっかり確認するようにしているのと、悩んだ際に共有できるようにオープンなチャットを用意したり、定期的にMTGを行ってフランクに話せる場を用意しています。

Q3.デザイナーとのやり取りで、印象に残っているハプニングやモメごとはありますか。またそれはどのように解決しましたか?

櫻本さん:デザイナーさんの指示の中で「余白」とだけ伝えられて、余白が何なのか具体的にわからなかったため質問することで解決しました。

山村さん:特に今までないですが、遅れる時は遅れると早めに言ってほしいです。

高橋さん:デザイナーからの画像提供が遅れていましたが、slack(チャットツール)でプッシュしたら送ってもらえました。

赤石さん:画像の加工をこちらでやっていたらモメたことがあったので、それからはちょっとした加工も都度お願いするようにしています。

川本さん:幸いとても優秀な方達と仕事をしてきたので、大きなトラブルが起きた記憶がないです。

Q4.デザイン素材納品の際に、なるべくやっておいてほしいことがあれば教えてください。

山村さん:jsコードやcssを書くときは、書き方が統一された、きれいなものを書いてほしいです。

高橋さん:iPhoneアプリを作るときは、全デバイスに合ったサイズの画像を用意してほしいです。

赤石さん:画像の名前に日本語は使わず、全て半角英数字の小文字にしてほしいです。たまに拡張子が大文字になっていることがあります。

川本さん:容量は極力軽くしておいてほしいですね。開発時の扱いやすさ以外にも、パフォーマンスに影響出る箇所なので。

Q5.デザイナーに知っておいてほしい最低限の知識、ツールを教えてください。

山村さん、高橋さん:html、css、javascriptですね。

赤石さん:Macは英字の大文字小文字を区別しないので、ファイル名が大文字小文字で区別されていても同じものと認識してしまい、トラブルが起こりやすくなります。

川本さん:デザイン周りの動向をキャッチアップしておいていただきたいのと、 gitなどでのバージョン管理を基礎だけ把握しておいてもらえるとチーム開発がスムーズに行えるので嬉しいです。

Q6.プログラミングで作るアニメーションの動きは、デザイナーがどのように伝えたら完成系のイメージがしやすいですか?

櫻本さん、山村さん:類似したアニメーションや、実現したい動きと似たwebサービスなどを見せてほしいです。

高橋さん:絵に描いてほしいです。

赤石さん:理想の動きと動く時間、イージング(アニメーションに緩急をつけるために使うプロパティ)の3点の数値を、開発ツール上で直接入力してもらえれば、そのまま反映します。

川本さん:言葉や文章だけだと認識にズレが起きやすいので、参考にするものなどを挙げていただくとコミュニケーションが楽です。

Q7.デザイナーのこだわりで、理解しにくい ( しにくかった )ものはありますか?

櫻本さん:感覚で意見を言われた時は理解できなかったです。「あと1ミリずらして」など詳細に教えていただきたいです。

山村さん:少なくとも、自分の関わったデザイナーは、そういうことはありませんでした。むしろ、明確な理由をもって一つ一つのデザインを決めていました。

赤石さん:グラデーション(単にフラットデザインが好きだったからだと思いますが)。

Q8.デザイナーにされて嬉しかった対応があれば教えてください。

櫻本さん:なぜそのようなデザインにしたのかを教えていただいた時。デザイナーさんが普段どのようなことを考えてデザインしているのか知れたため。

山村さん:頼んで30分後におおまかなトップページのデザインを作ってくれた時。

高橋さん:画像を迅速に提供してくれた時。

赤石さん:素材をguiツール(cocos studio, cocos builder, storyboardなど)でそのまま納品してくれると助かります。

川本さん:気づいていなかったデザイン上の不備や、やってみて気づいた改善点など、フィードバックを頂けるととても嬉しいです。やはりエンジニアとデザイナーさんでは目線が違う事が多いので、どんどん意見交換しながら仕事がしたいですね。

Q9.その他、デザイナーにお願いしたいことはありますか?

櫻本さん:「余白」などではなく、「右側に1ミリ余白あるよ」など詳細に教えていただきたいです。

高橋さん:コードを書けるようになってほしいです。

赤石さん:なぜそうデザインしたのか答えられるようにしてほしい(どういう思いでこうしたという具体的な内容があると安心するので)。

川本さん:誰がどう使うもののためのデザインなのか、という事を意識していただけると良い仕事ができると考えているので、対象となるユーザーさんが普段どういうデザインに触れているか、どういう状況で使うか、などに興味を持っていただきたいです。

10.これからweb/アプリデザイナーになる学生さんに向けて、伝えたいことがあれば教えてください。

山村さん:最低限のプログラミングの知識は必要であるし、jsのフレームワークなどへも理解のあるデザイナーが増えると嬉しいです。

高橋さん:Web/アプリのデザイナーになるのであれば、コーディングは必須スキルです。デザイナーは前提としてエンジニアと共に仕事をするので、エンジニアのことを理解し、彼らと同じスピード感で仕事をしなければなりません。 Web/アプリデザイナーに求められるのは、コードを書けることと、速さの2つだと思います。 なので、学生のうちにプログラミングを学ぶことをお勧めします。TECH::CAMP(https://tech-camp.in/)という短期集中のプログラミングスクールがお勧めです。

赤石さん:歩み寄ることが自分の作りたいものの実現への第一歩。

川本さん:どんなに素晴らしいwebサービス・アプリを作っても、デザインがしっかりしていないと価値が伝わらなかったり、半減したりしてしまいます。とてもやりがいのある仕事だと思いますし、僕の周りには楽しそうに仕事をしていらっしゃるデザイナーさんが大勢いらっしゃいます。ぜひデザインを楽しんでください。

最後に

ご協力くださったエンジニアの皆さん、ありがとうございました!今回ご紹介させていただいた方のご意見だけでなく、実際に一緒に仕事をされるエンジニアが何を考えているのか、こまめにコミュニケーションをとって理解することが何より大切だと思います。デザイナーとしての意見もしっかり持ちつつ、良いサービスづくりに向かって楽しんでお仕事しましょう!
また、エンジニアがデザイナーに求めることについて、赤石さんから下記のスライドをご紹介くださいました。実際の制作を元にした内容で、大変わかりやすいのでぜひご参考ください!
http://www.slideshare.net/MayumiNarisawa/xcode-up-5

(2016.4.15)

著者

渡辺知絵子

フリーランスのイラストレーターです。動物をモフモフ描くのが好きです。うさぎを描くことが多いですが、猫派です。

記事一覧へ

ポートフォリオでデザインチームとつながろう

ポートフォリオをつくる

作品を投稿してデザインチームとつながる日本最大のマッチングプラットフォーム。もちろん、ポートフォリオのみの活用も可能です。

作成する

デザイナーを採用する

国内最大のデザインプラットフォームで、チームにマッチするデザイナーに声をかけてみませんか?

採用する