職種の違うメンバーに囲まれたチームの中でデザイナーにはどういう役割が求められるのか、プロジェクトが円滑に進んでいくためにはどう連携していけばいいか…。

私は普段、エンジニア主体のチームに唯一のデザイナーとして業務を行っています。
そこでの主な役割は“クライアントの考える要件や要望を視覚化して具体化する”という、いわゆるプロトタイプ制作です。
今回は、チームに欠かせないデザイナーになるために何をするのか、どんなことが必要かなどご紹介いたします。

大久保達哉(おおくぼ・たつや)
株式会社メンバーズ 大久保達哉氏
株式会社メンバーズ メンバーズキャリアカンパニー デザイナー
2016年12月メンバーズキャリア入社。
大手メディア企業に常駐し、自社サービスのサイトリニューアルや新規開発などをこれまでに担当。2019年Adobeアンバサダー就任。

重宝されるデザイナーに必要な要素

サイトをキレイに装飾していく。ユーザー視点でデザインする。デザイナーとしては仕事をする上でとても大切なことです。
そして、プロジェクトの全体像を俯瞰で見ることも大切です。

プロジェクトの全体像を俯瞰で見ることで、職種の違うメンバーに囲まれた状況でもうまく連携することができます。この課題はデザイン面の対応だけでうまくいくのか機能面から検討すべきなのか、このケースなら誰の意見で進めていくことが最も効果的か、こうした議論の場にデザイナーも参加していくためでもあります。

その中で職種の違うクリエイターやエンジニアとコミュニケーションを取ることは必須。他職種同士でも意見を交わしたりコミュニケーションが取れるデザイナーは重宝され、必然的にチームに欠かすことのできない存在になっていきます。
では、それをどうやってデザイナーが実現していくのでしょうか?

プロトタイプ制作による情報の可視化

提案書や要件定義書などの資料だけでは完成像をイメージできません。そのためクライアントやチーム全員の認識合わせるには「プロトタイプ」を作り、情報を可視化して共有しておくことがひとつのポイントです。
情報を可視化しておくことでクライアントやチームメンバーとの議論が噛み合い、打ち合せもスムーズになります。また、実際に操作することで想定していなかった課題が発見できたり、試作段階で失敗しておくことで早めに再検討できるという利点もあります。

プロタイプ制作の目的

  • スムーズな意見集約と伝達
  • 情報の可視化
  • UIや機能の検討材料

全員の案件の理解度が高まれば、成果物にも反映され良いものを作ることができます。
ではプロトタイプを作る上でのポイントをいくつかご紹介します。

Point.1 ちゃちゃっと作って、ダメならすぐ捨てる

ゴミ箱のイラスト

初期フェーズでの作り込みは必要ありません。画面遷移や固定要素など基本的なインタラクションに留める程度でOKです。

プロトタイプを作って関係者に共有

  1. クライアントに提出→フィードバック→検討→修正
  2. 定期的にチームメンバーからレビューを得る→検討→修正

この(1)(2)のサイクルをスムーズに回す、初期フェーズではしっかり作り込むというよりも「ちゃちゃっと作って、ダメならすぐ捨てる」という考えで進めることがポイントとなります。

プロトタイプは一回作って終わりというものではなく、それをもとにクライアントやPM、チームメンバーと一緒に議論していきます。その過程でデザイン変更が発生することも十分考えられる(ほぼ100%)ので、初期フェーズでの細かなデザインの調整やインタラクションの設定をする必要はないでしょう。

(1)(2)のサイクルに時間をかけたのちに、フィードバックなどがある程度落ちついてきたタイミングで作り込むようにすれば、時間と労力を節約しながら精度を上げることができます。

Point.2 XDを使う

Adobe XD画面

割と新しいデザインツールのAdobe XD。近年、デザイナー界隈では注目度も増し使えるクリエイターも増えています。
基本的な使い方としてワイヤーフレームやデザインカンプ作成、UIパーツの作成、プロトタイプの共有。他にも提案資料の作成やドキュメントとして残す際のガイドライン制作にも使える便利なツールです。

XDでよく使う機能

パーツをコンポーネント化

(Command + K)

  • コンポーネント化しておけば後からパーツを一括で編集することが可能
  • コンポーネント化されたパーツを組み合わせて作ることで新規ページ作成の時間も短縮

デスクトッププレビュー

(Command + Enter)

  • 作ったプロトタイプをまずは自分でチェック
  • 録画することも可能で、動きを説明する時やHowTo動画を作成する時などにも便利

共有

(Command + 2で遷移設定、Command + 3でリンク作成)

  • 作成したリンクを共有することで実際に操作してもらうことができる
  • コメントをつけることができるのでフィードバックやレビューがしやすい
  • 開発用にリンクを作成すれば実装もラク

プロトタイプ制作ツールは他にもSketch、figmaなどもあります。環境や状況に応じて使い分けると良いでしょう。

Point.3 認識を合わせる

認識を合わせる

数名のチームでプロジェクトを進めると、とくに他職種のメンバー同士なら認識の違いも起きやすく後々面倒なことになります。クライアントの要望がチームに正しく伝わらなければ無駄なコストも発生するでしょう。

認識を合わせることで、

  • 円滑なコミュニケーションが図れる
  • 無駄なコストが減る
  • チーム全員がゴールに集中できる/li>

このプロジェクトでは何をしたいか、何を作るのかを理解していない状況を生まないためにも全員の認識を合わせておく必要があります。

Point.1〜3を押さえてプロトタイプを作ることで、クライアントの要望を正しく把握できる、認識のズレが生じている場合でも素早く軌道修正することができる、手戻りを未然に防いだりミスを減らすことができる、関係者から意見やアイデアをもらいやすくすることで自分の感性だけでは見えなかったモノが見えデザインに反映させることができる。ということにつながります。

デザイナーがプロトタイプ制作を担うことでチーム内の連携の起点となり、他職種同士でも良質なコミュニケーションを図ることができる。デザイナーの働きがチームに大きなプラスを与えることになります。

ツールを使うのではなく「活かす」

デザイナーの必須アイテムはやはりデザインツール。ただ、そのツールを使うのではなく「活かす」ことができればデザイナーとしてかなり強みになり、チームに欠かせない存在になっていきます。

チームに欠かせないデザイナーとは

  • プロジェクトの全体像を俯瞰で見ることができる
  • 他職種同士でもコミュニケーションが取れる
  • イメージを共有できるプロトタイプが作れる

私はデザイナーですが、デザイナー(自分)の代わりはいくらでもいるという考えを持っています。
仕事に終わりはなく続いてくものであり、続かせるための行動をとる必要がある。ひとつのプロジェクトが終わってもまた声がかかれば実績も身につき、信頼もされていく。また次につながる。そんな良いサイクルを実現していきたいと思っています。