なぜエンジニアとデザイナーは一緒に仕事をする必要があるのか

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Carrie Cousins氏によって投稿されました。

 

エンジニアとデザイナーは一緒に仕事をするべきだという考えは、理にかなっていると思えるかもしれません。

しかし両者は、同じプロジェクトにおいてさえ別々に仕事をすることが一般的です。デザイナーはより優れた外観の要素、カラーパレット、タイポグラフィを作成し、エンジニアはコーディング、Webパブリッシングの準備を担当します。

このような担当分野の違いは、エンジニアとデザイナー間のすれ違い、ひいては最終的なデザインについての意見の不一致を起こす原因となります。

 

もしエンジニアとデザイナーが終始一貫して一緒に仕事をしたら、より一貫性の高いプロジェクトとなり、美しいユーザーインターフェース、クリーンなコードを生み出すことができるでしょう。また、仕事の量や修正も減り、プロジェクトにかかる時間を短縮する効果も期待できます。

 

エンジニア vs. デザイナー

従来よりエンジニアとデザイナーは全く別の職種でした。

典型的には、デザイナーはAdobeのPhotoshopやIllustratorなどのソフトウェアを使って、Webサイトや要素の外観をデザインします。次にエンジニアが、この美しく作られたデザインを、HTML、JavaScript、jQuery、CSS、その他プログラミイング言語を用いてコーディングします。

エンジニアとデザイナーは別々のオフィス、ときには別々の国で仕事をしますが、より完成度の高いWebサイトを作るためには、互いに相手のスキルを必要としているのです。これが一緒に仕事をするべき理由です。

 

一緒に仕事をすることのメリット

エンジニアとデザイナーが一緒に仕事をするべき最大の理由は、プロジェクトでより完成度の高いWebサイトを作るためだと述べました。共同作業をすることで、外観のデザイン、インタラクション、ユーザーエクスペリエンスに至るまで、より高い成果を生むプロジェクトとなるのです。（近年においては、共同作業をしないことは、ほとんど不可能ともいえます。）

また共同作業では、インタラクションデザイナーをチームに加えることも忘れてはなりません。

 

その他多くのメリット

• 第三者的な視点から考えることができるので、欠陥やミスを見つけやすい
• より創造的なブレインストーミングとデザインが生まれる
• デザイナーがエンジニアが何を作れるのかを理解すれば、より完成度の高いユーザーエクスペリエンスが生まれる
• 統一感があり、美しいインタラクションを備えた完成品を作ることができる
• 互いに相手の仕事（デザインまたは開発）のプロセスを把握できる
• アイデアを取り入れて、より良いプロジェクトを生み出すことができる
• デザインプロジェクトの課題と目標に集中するのに役立つ

 

一緒に仕事をすることのデメリット

一方、一緒に仕事をすることのデメリットがないというわけではありません。特に次の2つのデメリットについては、よく考える必要があります。

1. エンジニアとデザイナーが同じ場所にいない場合、共同作業にはコストがかかります。メンバー全員が同時刻に同じ場所に集合できないときには、遠隔会議、オンライン上でのデータ共有によってコミュニケーションを図りましょう。
2. 意見の衝突が生じることもあります。こういう場合には、冷静な大人の分別をもって解決しましょう。

 

実践方法

以上、エンジニアとデザイナーが一緒に仕事をするべき理由について考えたところで、次は実践方法について考えてみます。最初に、明確なコミュニケーションを図ることから始めます。

エンジニアもデザイナーも、プロジェクトの過程で決定を下すときには、プロジェクトを何より最優先して、全体像から考えなければなりません。その中で自分の意見が通ることもあれば、そうならないこともあると心得るべきです。

 

まずは、共同作業をするエンジニアまたはデザイナーを昼食、コーヒー、散歩などに誘ってみることから始めてみましょう。設計の下書きやワイヤーフレームを作成する前に、相手のやり方を聞いておくためです。チーム全体の同作業の進め方についてあなたの計画を伝え、基本的なルールを決めておきます。

プロジェクトのメンバー全員が、必ず互いに話し合いを持つようにします（プロジェクトの計画カレンダーに書いておくのもいいでしょう。）。

ただし相手への礼儀は忘れてはなりません。批判は建設的な内容にして、他のメンバーからのフィードバックは快く受け入れましょう。

 

デザイナーへの5つのアドバイス

• デザイン理論をエンジニアに説明するときには、わかりやすい言葉で伝えます。
• インタラクティブな要素は、その動作性を考えてデザインします。全ての要素は、インタラクティビティの段階に応じてデザインします。
• 完成レベルのデザインにしておきましょう。エンジニアが部分的に修正してくれることを期待してはなりません。要素は利用可能なレベルまでデザインしておきます。
• 途中で助けを求めても構いません。たとえば、特定のフォントがWebサイトで上手く機能するかわからなければ、質問しましょう。
• デザインした要素を提供するときには、利用可能なファイル形式、Web上での利用に適した解像度とサイズにしておきましょう。

 

エンジニアへの5つのアドバイス

• デザインについて学んでみましょう。色彩、フォントの種類、専門外の言語について少し知っておくのも役に立ちます。
• 自分のできること、できないことについては率直に伝えましょう。もしデザイナーがWeb上では上手く機能しない設計を進めていたら、なるべく早めにアドバイスをしましょう。
• デザインの過程においては、快く質問を受け付け、メンバーを助けましょう。
• プロジェクトのデザインの過程には、最初から参加しましょう。良いユーザーエクスペリエンスを生み出すデザインについて、ブレインストーミングで意見を伝えましょう。
• 開発の過程においては、デザインの一貫性を保ちましょう（たとえ気に入らない、または賛成できない部分があるとしても）。「開発」に関する正当な理由もなしにデザインを変更すれば、敵を作るだけです。

 

エンジニアとデザイナーへの最良のアドバイスとして役立つものの1つが、『アジャイルソフトウェア開発宣言（Manifesto for Agile Software Development）』です。Webデザイナー、エンジニア、インタラクションデザイナーが従うべき指針として、次の4つの原則を示しています。

1. プロセスやツールよりも個人と対話を
2. 包括的なドキュメントよりも動くソフトウェアを
3. 契約交渉よりも顧客との協調を
4. 計画に従うことよりも変化への対応を

『アジャイルソフトウェア開発宣言（Manifesto for Agile Software Development）』日本語訳

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

エンジニアとデザイナーの両者がメリットを得られるスキル

エンジニアとデザイナーが隔たりを解消して、より良い仕事を共同で進めるには、互いに相手の言葉で話す必要があります。まず自分自身のスキルセットをより伸ばすことから始めましょう。

エンジニアとデザイナーとも、次のことについて基本的な理解や知識を備えておくべきです。

• 色彩、余白、タイポグラフィなどに関するデザイン原則
• 画像のファイル形式、サイズ調整
• HTMLやCSSについての基本的な理解
• Webフォントの利用方法
• デザインや開発のトレンド
• ユーザーのニーズの理解
• グリッドデザイン、フレームワーク、ワイヤーフレームについての理解

 

結論

問題の本質は、なぜエンジニアとデザイナーが一緒に仕事をするべきなのかの理由よりも、どうしたら両者がより良い仕事をして、互いに相手の仕事を理解できるかを見出すことにあります。

結局のところ両者の目標は、「素晴らしいWebサイトを作ること」で一致しています。

 

今後は「開発のためのデザイン」を考える必要があるかもしれません。なぜなら現実的には、開発はデザインでもあり、Webデザインは開発でもあるからです。どちらもWebサイトを作るには欠かせないのです。

このことはWebデザインがより複雑になるにつれて、現実味を帯びてくると思います。もしかしたら、Webデザイナーとエンジニアのスキルを兼ね備えた、「Web開発デザイナー」というような名前の新たな職種が生まれる可能性すらあります。

[お知らせ]TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。プログラミングやデザインのスキルを身につけたい方はぜひご覧ください。