UIデザイナー版：働き方改革！〜デザインツール編〜
はじめまして。
Sansanのプロダクトデザイナーをしていますちゃんあべこと阿部です。
もみあげが長くて昔は、ルパンと呼ばれていました。何も盗めない奥手なボーイです。
去年所属していた医療系のスタートアップから、Sansanに転職しました。社員数も桁違いに多いので、最初は戸惑いましたが、最近では慣れつつ日々を過ごしています。（ここについては別記事て執筆予定）
以前のスタートアップと比べると、人数規模の違いからか、進んでいるプロジェクトは比較にならないほど多く、その中でもデザイナーには「高速プロトタイピング」が求められているように感じられます。
個人的な考えですが、「高速プロトタイピング」というのは「自身が考えた設計をいかに素早くUIデザインに起こして、検証サイクルを回せるか」と
と解釈しています。
1つのUIパターンに特化するのではなく、様々なパターンを設計し、各UIパターンのメリ・デメを把握・考慮した上で、事業に貢献していくか。そういった部分がデザイナーには求められているように感じています。
要するに、「高速！試してナンボ」ってことですね。
そんな、試してナンボな世界観を実現するために、どのように設計を進めるのが効率的なのか。今回は環境：デザインツールなどの目線から書いてみたいと思います。（最近の作業曲を添えて...）
これまでの体制
これまで、Sansanのデザイングループでは、下記のようなツールを用いながらUIデザインを進めていました。
UIデザイン
Sketch (https://www.sketch.com)
モックアップ
Invision (https://www.invisionapp.com)
バージョン管理
Abstract (https://www.abstract.com)
UIデザイナー界隈ではよくある手法だと思います。前職でも上記のような使い方で進めていましたし、Sansanでもこのような手法でした。Sketchを使う場合はこれがスタンダードな気がしています。（Adobe XDの方はあまり知見がなく...）
ですが、上記のような体制で進めていると、ぶち当たる壁が大きく２つ。
それらを解決しなければ、高速！試してナンボな世界は作れないと思っています。
ぶち当たる壁１：「デザインファイルが重くなりすぎる」
サービスリリース当初は、そこまで意識していなかったのですが、リリース後、機能改善/運用フェーズが始まってくると、デザインデータは増えていくし、ゴミデータも増えていくし、その結果ファイルがどんどん重くなってしまう。。。
そんなことはありませんか？自分はずっとぶち当たっていますw
UIコンポーネントをうまく活用するために、Symbolを拡張性を持って設計していたのですが、Symbolの階層が増えれば増えるほど、invisionやabstractでのアップロードには多大なる時間がかかってしまいます。
もちろん、Atomic Designを担保するため、プロトタイピングを高速に回すために、Symbolを整理するのですが、その結果としてアップロードに時間がかかっていては本末転倒です。
また、アップロードに時間がかかるようになると、アップロードを避けるようになってしまうのが人間の性、いやデザイナーの性ではないでしょうか。
その結果、Abstractにコミットしないようになり、Abstract上にブランチが大量に発生し、マスターにマージする時には....（この後はご想像にお任せします。）
ぶち当たる壁２：「ツール間の移動に嫌気が...」
3つのツールを行き来していると、こんなことはありませんか？
「よし！UIデザインできたから、モックアップを作ろう！」
↓
「invisionにアップロード完了！ここのリンクはここにつながるよな」
↓
「あ、ここ間違ってる。デザイン少し変更しなきゃ。」
↓
「また、invisionにアップロードして、リンクを調整して」
↓
「あ、こここっちの方がいいかも。」
↓
「また、invisionにアップロードして、リンクを調整して...」
：
何度invisionにアップロードするのか。。。デザインファイルが軽ければ問題ありませんが、重かった時の影響は測り知れません。
Abstractでも同様のケースが存在すると思います。
「コミット後に、調整箇所見つけてしまった...」
「上司に指摘されて、調整をはかる」
デザインデータを調整することはむしろ大歓迎なのですが、それに伴うアップロードの時間や、ツールのスイッチングコストに懲り懲りしていました。
そんな２つの課題を解決できないか。
調べた先に、出会ったのがそう、Figmaです。
Figmaは2~3年前に触った時には、「なんだろこのツール、プラグイン少ないし、Sketchの方がいいや」と諦めたツールでした。
プラグイン数も大幅に増え、少し興味をもったので、機能を調べてみることにしました。料金形態は少し複雑ではありますが、２つの壁をぶち壊し、悩みを駆逐するそんな可能性を感じたので、その部分についてまとめてみました。
時間がかかっていたアップロードがほぼ０秒に！
ぶち当たる壁１：「デザインファイルが重くなりすぎる」において記載をしましたが、デザインファイルが重くなることで生じる課題は、invisionやabstractにアップロードする時間がとてもかかってしまうということです。
「デザインファイルが重い」→「デザインファイルが軽い」そんな状態を作りたいわけではなく、そこから生じる「アップロードが遅い」を解決することが必要なわけですね。
Figmaでは、自身で作成したUIに対して、そのままインタラクション設定をすることが可能なので、デザインを調整すればインタラクションを保持したままUIを調整することが可能です。Sketchとinvisionを合体したツールのようなイメージです。
要するに、Figmaではこれまでかかっていたアップロードにかかっていた時間を、ほぼ０にすることができます！。画期的！
invisionによるアップロードはこれでほぼ０になりました。ではAbstractのバージョン管理についてはどうでしょうか。
Abstractの場合、各ブランチのSketchファイルを保存し、いつでもアクセスできるようにするため、編集できる過去データにアクセスすることができます。
誰がいつアップロードしたのか、コンポーネントやUIの差分比較できることがAbstractのメリットですね。バージョン管理をするために、アップロードが重いのが、難点ですが。。。
Figmaの場合、過去データにアクセス可能なのですが、閲覧のみになります。こちらもAbstractと同様、誰がいつデザインを変更したのかを閲覧可能ですし、そこにラベルを設定することも可能です。
Googleのスプレッドシートやドキュメントのようなバージョン管理のイメージに近く、デザイン作業をしているだけで、バージョン管理されているような仕様となっています。要するに、アップロードにかかる時間が０になります！
※料金体系によって、バージョンの保管期間が違うので、注意が必要です。
同一ツールで、UIデザインからモックアップまで一気通貫！
次に、ぶち当たる壁２：「ツール間の移動に嫌気が...」へのアプローチです。前の段落で少し記載しましたが、Figmaでは、UIデザインからモックアップまで一気通貫で運用することができます！
そこで気になるのは、FigmaとSketchのできることの差ですが、今では遜色ない（個人的にはそれ以上）の機能を持ち始めています。
もちろん、運用の方法によってメリットデメリットは変わってくると思いますが、「高速プロトタイピング」という視点から考えると、Figmaは最適でした。
※Sketchにも同様にプロトタイピングの機能は存在します。今回はSketchとFigmaの比較ではなく、Sketch+invisionとFigmaの運用比較となります。
※注意点１
invisionと比較して、Figmaはプロトタイプの初回表示には時間がかかってしまいます。invisionはskechデータをpng化することで軽量化し（※多分）、それらをアップロードしてモックアップを作ることができますが、Figmaはデザインデータでそのままモックアップを作成するため初回の表示には時間がかかってしまいます。
プレゼン前などは事前にプロトタイプを開いた上で臨むことをお勧めします。
機能については、別記事で書いていきますが、自分が一番感動した物としては、Auto Layoutです。
動画を見てもらうと、イメージはつきやすいと思いますが、高速プロトタイピングをする上では神機能ですね。
プロダクトデザインをしていると、同じコンポーネントを並べたりするシーンは大量にあると思います。これまでは下記のような流れで、少し手間な印象でした。
Sketch
1. コンポーネントを作成する
2. コンポーネントを必要なだけコピーする
3. バラバラに配置する
4. Align（揃える）
5. マージン調整する
途中で、いらないものが出てきたときは、3~5を繰り返します。少し厄介ですね。
Auto Layoutでは、上記の流れを簡略化することができます。
Figma Auto Layout
1. コンポーネントを作成する
2. コンポーネントを必要なだけコピーする
3. グループ化して、Auto Layoutを設定
4. コンポーネントとコンポーネントの余白を設定する
途中で、いらないものが出てきてもコンポーネントを一個消すと、なくなった分勝手に詰まります。そう、勝手に詰まるのです。大切なことなので、もう一度言います。
勝手に詰まります。
ちなみに、プロジェクトマネージャー/クライアントに
「１個目のコンポーネントと３個目のコンポーネント入れ替えたものも見てみたい」
これまでは、なぬっ！となる気持ちを抑えて、グループ外して、入れ替えて、整理してをして、マージン調整して見せていましたが、
Figmaでは、Auto Layoutでグルーピングされているコンポーネントを選択して、「↑」「↓」を押すだけ。
また、プロジェクトマネージャー/クライアントに
「一覧のアイコンが冗長に見えるのだけども、消したやつ見せてくれない？」
と言われても、アイコンを削除すれば勝手に詰まります。書いていて、泣けてきました。
おわりに
そんな背景から、今回SansanではSketch+Invision+Abstractの運用から、Figmaへの運用へと移行することを決定しました！
Figmaのいいところばっかり書いてしまいましたが、バグもまだ存在します。テキストを入力すると、勝手に意味わからない文言が入力されたりとか、マージン調整を細かくしていくと、ズレが発生したりとか。
その部分は、改善を待ちます。
実際に導入を始めていますが、勝負はこれからです。最初の学習コストが少し高いですが、試してナンボな世界観を実現していきたいと思います。
では！😎
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Sansanではいろんな職種で採用活動を絶賛おこなっています！
俺の方がプロトタイピング早い！この方が効率的だ！という方、是非お話ししましょう！
いただいたサポートは、書籍や、新しいツールの調査に使わせていただきます！