皆さんはデザインツールで何を使っていますか？

私の会社ではWebサイトのデザイン制作時にPhotoshopを使用していたのですが、Adobe XDに乗り換えました。と言ってもまだまだXD単体で全てデザインすることはなく、業務でベストなツールは何かと模索中です。

そこで先日デザインツールに関するイベント「Design & Collaboration 」があり参加してみました。

以下に該当する方向けでイベントのレポート記事をまとめています。

・新しいデザインツールを検討している方
・今の制作フローに問題を感じている方
・InVision Studio、Adobe XD、Figmaを知らない方

イベント概要

新しいデザインツールが登場していますが、実際にどのデザインツールがいいのか？と一度は考えたことがある方も多いかと思います。デザイナーだけで仕事を完結することは難しく、職種を超えてコミュニケーションを取りながら進める機会が多いですが、そんな中でデザインツールをデザイナー都合だけで決めていいのでしょうか。DMMの河西さん（＠norinity1103）は「デザイナーだけ使えるデザインツールは意味がない」とおっしゃっています。

今回のイベントテーマは主に2つありました。1つは「デザイン」で、特にデザインツールに関するお話。もう1つはデザイナーが職種を超えて他の人と一緒に課題に取り組むことに関する「コラボレーション」のお話です。

本記事ではイベントで取り上げられた最新のデザインツールの紹介もしていますが、主に「デザインツール導入を検討する際に抑えておくべきポイント」という観点でまとめています。その為、ツールの細かい操作方法は割愛していますのでご了承ください。

次世代デザインツール3選

1.InVision Studio

登壇者：吉竹さん（@ryo_pan）
登壇資料：未公開
公式サイト：https://www.invisionapp.com/studio

InVision Studioはプロトタイピングツールで有名なInVisionが発表したデザインツールでアニメーションまで作成可能。基本機能はSkechと似ていて、今月の10日から誰でもダウンロードが可能になりました。ただベータ版なので、成果物の公開は大丈夫ですが「StudioのUIが含まれる画像等の公開は避けるように」とInVisionさんが注意喚起しているそうです。

特徴①アニメーション機能
画面遷移の設計ができるプロトタイピング機能もありますが、それに加えアニメーション作成も可能。当日は横スワイプのデモがありました。大まかな作成イメージとしては対象となるアートボードを複製して、スワイプ前後で変化のある要素を調整していく感じです。

特徴②レスポンシブデザイン
要素でwidth○○pxを○○％という数値で入力が可能。さらに画面の拡大/縮小時にその%値が維持されるので、自動的に要素のサイズ調整が行われるようです。

特徴③コンポーネント
コンポネートで個々の色やオブジェクトの位置を柔軟に変更が可能。ただSketchのシンボルリストと少し異なり、何がどれかとわかりにくい部分があるみたいですが、今後アップデートで改善されるのでは？とのこと。

＊コンポーネントでアニメーション作成するとうまくできず、グループ化に戻す作業が発生するのも今後のアップデートで改善されるそうです。

2.Adobe XD

登壇者：湯口さん（@risay）
登壇資料：https://twitter.com/risay/status/994902072754520064
公式サイト：https://www.adobe.com/jp/products/xd.html

Adobe XD（Experience Design）はUIデザイン、プロトタイプ作成、共有までを1つのアプリで実現するデザインツール。最近はPhotoshopデータの読み込みも可能。XDを導入したい方はスターターキットが用意されているのでご活用くださいとのこと。
＊Creative Cloudライブラリ連携や今後出るファイルのバージョン管理もAdobeのサーバーを使用するそう。外部のクラウドを使用できない会社さんは導入する際に検討が必要みたいです。

特徴①少ないメモリ容量
メモリ容量の少ないMacbookAirやビジネス用Windows10でも使用できるほどXDは軽く、そのためアプリの起動時間やアップデートも約1分たらずで終わります。ちなみに私のPCで他のAdobe製品のサイズと比較してみると確かにXDはメモリの使用容量が少なかったです。（Adobe XD CC：159.9MB、Adobe Illustrator CC 2018：1.34GB、Adobe Photoshop CC 2018：2.23GB）

特徴②最小限のツール
XD登場の2年前と比較して機能が増えてもUIの複雑になっていないXD。使用するツール（矢印や描画系）はOffice製品とも比較しても数が少ないのでデザイナーに限らず簡単に使用できます。今までExcelやPowerPointで企画書や仕様書などを作成していた方にもおすすめです。
＊ディレクター向けの勉強会が2月にあったので、イベントレポートを書いています。気になる方はご覧ください。

特徴③目的別のプロトタイプ
使用フェーズによっては必要なプロトタイプが変わるとのこと。今のXDが得意としているのは、画面情報が知りたい人向けのワイヤーフレーム・簡単なプロトタイプから、サイト構成や流れを確かめたい人向けの忠誠度の低いプロトタイプです。今後のアップデート予定としては、心地よさをテストしたい人向けのマイクロインタラクション機能だそう。ただ、本番さながらの手間のかかったプロトタイプはできません。

3.Figma

登壇者：三橋さん（@3284_m）
登壇資料：https://note.mu/3284/n/n163214d200aa
公式サイト：https://www.figma.com/

FigmaはブラウザベースでUIデザインからプロトタイプ作成まで行うことができるデザインツール。デザイナーに対して、PMやフロントエンドなどの関わる人数が多いチームにおすすめとのこと。オープンなプロダクト作りができ、形になるまでかかる時間が早くなったと実感しているそうです。

特徴①共同編集機能
複数人で同時にアイデアを試せる共同編集機能があります。データは常に最新。実際の画面ではGoogleスプレッドシートのようにユーザーアイコンや操作中のカーソルが出てくるそう。ただ共同編集なのでデザイナーはプロダクトデザインをリードする上で、ディレクションする役割も必要になります。

特徴②ブラウザベースの作業環境
ブラウザベースで作業が可能。いちいちアプリをインストールしなくてもよく、URLのシェアだけで済むとのこと。従来の制作フローと比較しても、「このデザインファイルは私のもの！」のようなデータ所有欲はなくなり、チームのものと変わった。そして、よりオープンになったそうです。

特徴③コメント機能
どんな職種でも簡単にデザインに対してコメントができる機能があります。「文言は○○に変更お願いします」ということもスレッド形式でやりとりが可能。これは、デザインの早い段階でフィードバックがもらえることに繋がり、プロダクトが形になるまでかかる時間を短縮しているそうです。

今後求められるデザインツールとは

最後に長谷川さん（@yhassy）を中心にパネルディスカッションがありました。先ほどご紹介した3つのデザインツールを踏まえて、まずはデザインツールに関するお話から。

Webサイトやアプリケーションなどをリリース上で、アイデアから形にするフローは「アイデア」「デザイン」「テスト」「実装」の4つに分解されます。

では現在のデザインツールの問題は、このフローで言うとどの部分になるのでしょうか。

それは各段階の間。その間をどう埋めるのかが問題です。長谷川さんは「部分的な解決策としてはInVision StudioやXD、Figmaがあるけど、まだ完璧なソリューションはない。デザインをどうやってコードに変えていくのか？これは多くの会社で悩んでいるのでは？」とおっしゃっていました。

クリエイティブプロセスについて

「デザイナーがエンジニアに合わせるクリエイティブ プロセスが必要なときとは」（河西さん）
スタートアップ系とグロース系ってアプローチの仕方が異なるそうですが、例えばグロース系のEコマース系の電子書籍系や動画だと、新規でインターフェースを作ることが少なく、ABテストや細かい修正などの実装になるとのこと。機能がどのようにユーザーのアクションに繋がるのか構造的に理解することが必要で、そのためデザイナーは今までやってきたクリエイティブプロセスが多少崩れても、エンジニアリングやコンポーネント設計の知識が不可欠になってくるそうです。

「オープンなプロダクト作りの向き不向きについて」（三橋さん）
Figmaは共同編集機能もあり、従来のデザインツールと比較するとオープンなプロダクト作りになります。一方「デザイン途中の工程を他人に見せたくない」という人は壁を感じるかもしれません。なのでプロダクトを早く作りたいというマインドがあるチーム体制には向いているとのこと。

デザインツールの向き合い方について

「デザインツールの導入時するときに気をつけたいこと」（長谷川さん）
デザインツールと向き合うのはデザイナーですが「機能表を見て、機能が多いツールAにしよう」とか「従来のツールと比較してできていた表現ができないなら止めよう」という判断だけでそのツールを使わないのはもったないとのこと。そのツールの強みは現状のどの問題を解決できるかきちんと考えるべきだそうです。

「各ツールは強みとは」（吉竹さん、湯口さん、三橋さん）
「InVision Studio」は現段階だとデザインとテストの間が強い。他にもサービスがあるInVisionは、自分たちのプラットフォームをいかに横断して一気通貫できるかというところもあるので、今後実装面も期待できるとのこと。
「XD」はアイデアを相手に伝える部分が強い。 特にデザインを残す為ではなく、アイデアを作って壊すという思想が根本にあるとのこと。
「Figma」は、XDと同様にアイデアを試すということが強い。特にデザインの所有欲が薄れてきて、チーム全員で作ろうというマインドになるとのこと。

コードに変えるフローについて

「現在の実装フェーズの課題」（長谷川さん）
「アイデア」「デザイン」「テスト」の部分はデザインツールとの付き合い方で解決できても最後のコードに変える工程で悩む人が多いのではないでしょうか。ここで言う「実装」だとzeplinのような設計書を作るツールではないそうです。

「従来の制作フローとは逆にするツール」（河西さん）
最近Airbnbが開発した「React Sketch.app」だと制作工程を逆の流れにするので、コードで画面に再現したものをSketch上に描画するものもあるそう。

「コードを不要にするプラグイン」（吉武さん）
コードをいじるのが本当に正解なのかということがあり、コードが人間の手に入らなくても最終的なプロダクトにできるのが理想なのではという考えているそうで、その一つとしてAnimaが出しているSkechのプラグイン「Launchpad」があるのではと考えているそうです。ただそのコードがいいとはまた別の話になります。

職種を超えたコラボレーション

続いてデザイナーが職種を超えて他の人と一緒に課題に取り組むことに関してのお話です。

今まで出てきたデザインツールですが、どういう風に普及していくのか？と考えると「ツール」は必要な要素の一つですが、他にも「ワークフロー」「人間」「ガバナンス（メンテナンス、教育プログラム等）」も考慮して考えるといいそうです。

「ツールは何でもいいけど思考プロセスが重要」（河西さん）
DMMさんでは、Skechがツールとして主流になってるそうで機能の使いこなしは問題ないとのこと。ただ、どういう風にどういう粒度でシンボル化していくのかと考えたときに人によってばらつきがあり、その問題を解決することがツールよりも重要だそうです。（デザインツールの操作は似ている部分が多いため）

では、デザイナーやフロントエンドエンジニアの人たちとスキルを一定化するためにどうしているのか？それは「モブデザイニング」という手法があるらしく、同じディスプレイの前で共通認識をもたせ、どんどん抽象度を下げてプロトタイプを作っているそう。手を動かしながら作業していくので体力の消耗が激しいみたいですが、小さい成功体験を積むことができ、一人で勉強するより目の前で一緒に作業することが効率的ともおっしゃっていました。

＊モブデザイニングを含めDMMさんの取り組みが綺麗にまとまった登壇資料「デザインツールを導入したシームレス開発＆チームビルディング」はこちらから確認できます。（実際はこちらの詳細説明もありましたが、長くなるため割愛しております。すみません。）

「他の職種の人を巻き込むときのポイント」（長谷川さん／河西さん）
新しいツールを導入するときに相手に何がメリットなのかとか機能の話を伝えるより、こういうものができるんですと実際に作った成果物を見せた方が納得してくれるのではとのこと。
特にエンジニアの人には、デザインのワークにどうすれば興味をもってもらえるか、そのワークにどういう価値があるのか理解してもらうことが重要。その上でデザイナーからエンジニアにどの情報を渡すのかが理想なのかなども踏まえること。職種を超えてツール検討を一緒に行うことが必要だそうです。

最後に

今回のイベントでは事業会社のデザイナーさんのお話が中心だったので、制作会社で働く私からすると、そういう視点や手法もあるのかとかなり勉強になりました。会社やプロジェクト内容によって制作フローや課題は異なるとも分かったので、一概にデザインツールはこれを使えばいいと共通の答えが出るものでもないのかなと感じました。

現在多くの会社で普及しているIllustratorやPhotoshopはデザインの表現上まだまだ欠かせない部分も多いかと思います。ただお話にもあったように、実装が絡む制作ではデザイナーだけで仕事が完結することはなく、他の職種の人とのコミニケーションは欠かせません。どんなツールが出てきたとしてもこのコミニケーションの部分はなくならないと思うので、今回学んだことを活かし社内でも役立てていければと思います。

みなさま貴重なお時間をありがとうございました。

＊＊＊

いけたむのTwitterアカウントはこちらです。

記事を読んでいただきありがとうございました。もし、記事に関して質問やアドバイスなどございましたら、上記からご連絡ください。今後とも宜しくお願い致します。