Qiita掲載記事をnoteにもアップしてみるテストです

寒くなってきましたね。（執筆は11月末）
極暖ヒートテックも3年目になるとかなり限界だなと感じる2018年の冬です。

つい先程、丸佳浩外野手が巨人入りを表明しました。（執筆は11月末）
フリーエージェントは立派な権利です。一番評価してくれた球団に移籍するのはある意味当然の選択だと思います。新天地でも頑張ってほしいものです。僕は東京ヤクルトスワローズファンですが。

さて、そんなこんなで。
普段はスマートフォンアプリの制作ディレクターを軸に企画やプロデューサー的な領域もかじっている僕が、最近のプロジェクトでのデザインツール導入のアレコレと、個人的におすすめのデザインツールの紹介を ゆめみ Advent Calendar 2018 向けにサクッと書いてみようと思います。

デザインツールとは

アプリやWebサイトのユーザーインターフェース制作に特化したツールです。
常日頃から、やれ「アジャイル」だ、やれ「プロトタイプ」だ、やれ「スパイラル」だと、手法や思想はそれぞれあるけれど「細かい話は抜きにして、早く、とりあえず早く、イメージできるものをみたい。早く。」という強迫観念に迫られながら我々はお仕事をしているわけで、そんな（自転車操業状態な）僕らのお仕事を、かぼちゃを馬車に。ねずみをお馬さんに変えてくれる魔法のツールです。

（詳しくは、詳しく解説してるようなサイトをググってください）
（デザインツールで内部の制作がこんなに楽に！みたいなお話は、そちらにお任せします。）

どのようなプロジェクトに導入すべきか

基本的すべてのプロジェクトに導入すべきであると考えています。
アイデアと発想次第で、アプリ／Web制作以外でものプロジェクトにも活用できる可能性があります。ゆめみの総務業務にもデザインツールを導入できないかと密かに画策しはじめています。

クライアントワークでデザインツールを導入する際のポイント

 ①クライアントに理解がある
これがまず重要であり、一番の障壁になります。
一般的にデザインツールを導入していないプロジェクトの場合、構成案やワイヤーフレームをパワポやイラレやKeynoteや時にはエクセルなんてもので制作し、（ああだこうだユーザー目線じゃない理由で機能や優先順位が変更され、）確定したワイヤーフレームを基にフォトショやイラレで清書し、（ああだこうだユーザー目線じゃない主観で修正が入り、）デザインがFIXするという流れになりますが、これがすべてデザインツールに置き換わります。

なので、内容がなくてもドキュメント類での納品が必要なクライアント様や、PSDファイルだけがデザインファイルだと信じてやまないクライアント様を相手にした場合、デザインツールの良さを活かせないわけです。無理に内部でデザインツールを利用してもドキュメント化の手間が発生したりするわけです。そういう場合はフォトショで作ってパワポに貼るのが結果ハッピーである世界もまだあることは確かです。

なので、コンペでも提案でも最初の段階で、「デザインツールを導入することでパワポやフォトショはなくなります。ドキュメント化も極力なくなります。」という説明が必要です。

 ②クライアントを巻き込む
クライアント担当者が一定の理解を示してくれたら、もうひと押し。
口頭だけでの説明だけでは少々物足りないので、打ち合わせの場でデザインツールを動かします。
可能であれば、クライアント担当者にも触ってもらいます。
今までの制作フローの無駄なものがカットされてリルタイムでアウトプットされていく様を初体験すると、（Web制作やクリエイティブをちゃんと理解されているクライアント担当者であれば）一瞬で魔法にかかってくれるでしょう。

デザインツール導入後の苦労

晴れてプロジェクトにデザインツールを導入できたとして…
半月も経てば気がつくと自分しか触ってない。みたいなことになります。
基本的にクライアントワークとなると、クライアント担当者の役割は確認と修正指示と承認くらいなので、打ち合わせの場ですぐに修正してくれるだけで充分。くらいの感覚なのかもしれません。でもしかし、導入したのであれば「デザインにどんどん手を入れちゃう」までは期待しませんが、可能なら「アウトプットを勝手に確認してくれて、フィードバックをどんどんくれる。」くらいの変化は期待したいわけです。

そういう観点からもファイルを共有して開いてもらうより、URLを共有してどんどん機会点を増やす！触れさせる！そういう側面からもブラウザベースでも利用可能というのは、重要な機能だと考えています。
（だからといって、この時点でXDとSketchアウトーという話ではないので^^

で、主観的おすすめツール（2018年12月版）

結論からいうと「Figma」でございます。

理由①　軽い
やっぱり長く利用していくにはストレスを感じないことが大切で、これはXDが現時点では最強だと思います。
この時点でProttは候補から脱落してしまいます。が、Prottは提供終了してしまったApp版はよく出来ていたと思うの。まだまだ今後に期待してます。

理由②　UI設計に特化しすぎてない
UI設計だけじゃなく、デザインツールがメインの作業場になるといろんな作業を全部ひとつでやってしまいたくなるのです。
アプリとWebのデザイン以外も、その他のデザインも同時に共存していて、なんかメモ書きもあったり、ホワイトボード的な利用もしたり。カンバン方式にも利用できたり。
極端な話、どのツールでもできるんですが、これは個人の感覚ではXDとFigmaがその思想に近く、Figmaが馴染むんです。
Figmaが日本語対応する前まではXD優位だったのですが、日本語対応してからはFigmaです。

理由③　同時編集ができる
複数人で作業しても、全然軽く、快適。
いろいろと理由をつけましたが、現時点ではこれが最大の理由です。
ですので、単独作業が主なディレクターやデザイナーはXDで良いと思います。思いますが、いちいちプロジェクトメンバーがファイルを触ってるか確認したりするのは面倒ですし、とにかく速く、いろんな人の目を巻き込んで設計を進めていけることが理想だと考えるのです。
ぜひ一度、まわりのみんなでアカウント作って同時編集を試してみてください。もう離れられなくなると思います。

まとめてみると、こんな感じ。
【Figma】
軽さ：○　柔軟性：◎　同時編集：◎　ブラウザベース：◎
【AdobeXD】
軽さ：◎　柔軟性：◎　同時編集：✕　ブラウザベース：✕
【Sketch】
軽さ：○　柔軟性：○　同時編集：✕　ブラウザベース：△
【STUDIO】
軽さ：○　柔軟性：△　同時編集：✕　ブラウザベース：◎
【Prott】
軽さ：△　柔軟性：△　同時編集：✕　ブラウザベース：◎

XDが同時編集機能を搭載してくるまでは…Figmaなんです。

デザインツールを中心とした理想形

Figma＋Slack/Discord＋Illustrator＋Dropbpbox＋（AdobeXD）
試行錯誤を繰り返していますが、これが現時点での理想形です。

基本作業はすべてFigmaで行う
設計〜実装まで常にFigmaがベースになります。
ディレクターはワイヤーフレームをFigmaで作成し、デザイナーはFigmaを微調整しながらデザインを完成させ、エンジニアはFigmaをベースに実装を行えばデザインガイドの存在は不要となり、クライアント担当者はFigmaをチェックしフィードバックをすれば良いわけです。最高。

コミュニケーションはSlack、音声メインならDiscordでも
Slackだけですべて完結できる気もしますが、SlackのボイスチャットもDiscordくらいサクッと使えたらなという期待を込めて同列に。
Figmaにはコメント機能が実装されていますが、デザインツールのコメント機能はコミュニケーション用途ではなくメモ用途くらいに考えておくのが良いと考えてます。コメント機能に頼りすぎると大抵タスク漏れます。餅は餅屋にお任せするのが最終的に良いですね。

デザインデータはIllustrator
これは特にいままでと大きな変化はなく。あるとするならPhotoShopはいらないということになります。
Figmaでは表現できないデザイン成果物はすべてIllustratorで制作し管理します。また、インタラクション要素を含むデータはAnimateやAfterEffectsになるんでしょう。
制作したデータを適宜Figmaへ反映します。

データの保存場所はDropbox
ストレージに関してはご自由に。という話ですが。
Dropbox PaperだとFigmaがプレビューできます。議事録にPaperを利用している場合、地味に便利です。
また、XDならDropboxでプレビューができるのでDropboxのコメント機能をメモ利用という使い方もできるといえばできます。

AdobeXDでも基本的な考え方は同じ
FigmaじゃなくてXDを利用していたとしてもこのまま制作環境は整います。
また、Figmaを使っていてもXDをワンポイントで使いたいと最近思わせるのが、XDのアニメーション機能です。
XDでインタラクションを簡単に制作できるので、先述したAnimateやAfterEffectsの代替として利用できます。XDでは現状書き出しに対応はしていないので、これを書き出せちゃうとなると、パワーバランスが大きく変わることになると思います。
XDでインタラクションを簡単に制作できるので、先述したAnimateやAfterEffectsの代替として利用できます。XDでは現状書き出しに対応はしていないので、これを書き出せちゃうとなると、パワーバランスが大きく変わることになると思います。XDでインタラクションを簡単に制作できるので、先述したAnimateやAfterEffectsの代替として利用できます。XDでは現状書き出しに対応はしていないので、これを書き出せちゃうとなると、パワーバランスが大きく変わることになると思います。

…
……
………と言った感じで、能書きもこのくらいで。

みなさま、良いお年をお迎えください。