こんにちは、 id:uniq です。
このツールが好きすぎるというのはあまり無いんですが、
「こういう時はこのツールを選んでるよ」、という選択基準にちょっとはこだわりあるのかなあと思っています。
今回は「プロトタイプ」にしぼって、書いていきます。
この動きで良いかな？といった検証のために使うという目的です！
この中から選んでるよ
いまいまは、この3択です。
- Adobe XD
- Figma
- inVision
それぞれの特徴を、と〜っても簡単に紹介していきます。
Adobe XD
日本語化されており、PowerPointなどで画面イメージを作れる人なら、デザイナーでなくとも使えるでしょう。
プロトタイプのプレビュー画面をみつつ、デザインを作っていく作業は、コーディングしながらブラウザで動きを確認する作業にとっても似ています。（プレビュー画面が別画面になってくれるからかな？）
iPhoneにつなげて端末でも確認できます。
フロント実装のそういった作業が楽しく感じる方にはマッチするんじゃないかと思います！
ひとつのベースボードに複数のフローが作れて、それらを管理しやすいのも特徴です。ひとつのアプリデザインに対して、「ログイン導線のプロトタイプはこのURL、新規登録のプロトタイプはこのURLです」という共有ができますね。
最近、3D機能が実装されました。
3D Carousel のようなプロトタイプも作れますよ！
Figma
みんなで共同作業をすると他人のカーソルも見える、ブラウザでも見れる…というのがよくフォーカスされてますよね！
プロトタイプではどうでしょうか。
けっこう細かめなアニメーション設定ができます。下からシュっ。上からフワっ。など。
ここらへんの記事がいろんな動きを紹介してそうです。 medium.com
公式ヘルプはこちら https://help.figma.com/hc/en-us/articles/360039818874-Create-advanced-animations-with-Smart-Animate
そしてそして、プロトタイプViewでアニメーションgif が動いてくれるのが、実はありがたい！「画面ひらいたら、ここにフワフワしたのが表示されて〜 」とか「動画が再生されて〜」というデモができます。
https://www.figma.com/blog/bring-figma-prototypes-to-life-with-gifs//www.figma.com
個人的にはハック的な技が多いと思っています…。例えば、「クロール時も位置固定してる背景画像」を表現したいときは、Fix positon 機能をそのまま使うだけでなく、スクロールしたいものと、スクロールさせたくないもので、Frameを分けなければいけません。Figma のFix positon 機能は、設定すると必ず画面上部に配置されちゃうんですね。（z-indexの最上位になっちゃう。）
また、Page毎にフローが１個しか作れないので、プロトタイプのスタートURLをいくつか作りたいときは、Pageを分けなければいけません。
あと、これは、「共同作業しやすい」に由来されると思うのですが、Figmaのプロトタイプは重くなることが多い気がしています。「レビュワーに見せてる俺のアイディアたち」「私のボツデザインたち」等が膨れ上がってしまうせいかなと思います。アイディア出しは別のファイルにするなど、運用方法をしっかり作っていくと良さそうです。
InVision
画面イメージを jpg や png で持っていて、プロトタイプを手早く作って確認したいときは、こちらがサクッと作れますよ！
「FigmaやXDで作ったが、プロトタイプがはちゃめちゃ重い、おもすぎる…いますぐこの導線だけ確認してもらいたいんだけど…」というときにも使ってます。
細かいアニメーション設定（下からSlideInとかMoveInとか、アニメーションはEase Outだとか）はできません。
「画面遷移したときにスライド位置を変更しない」は設定できます。
固定パーツはアップロードした画像を部分的に位置指定することができます。
無料で使えるのも（限度はありますが）ありがたいです。
まとめ
Adobe XD を選択
- パワポだったら使ったことあります！
- 英語アプリが苦手。
- 普段フロント実装してる。CSS実装しながらブラウザ確認してる。
- Aの場合の導線、Bの場合の導線…と複数のプロトタイプURLを作りたい。画面を増やさずに。
- あの3Dっぽいスライド カルーセルを作りたい。
Figma を選択
- フワっとかシュッとか細かいアニメーションの確認が必要。
- 動画が再生されている風なのを再現したい。
- loading アニメーションが出てるのを表現したい。
InVision を選択
- jpgやpngあって、これだけで、さくっとプロトタイプ作りたい
- フワっとかシュッとか細かいアニメーションはこだわりない。
- Adobe に課金してない。
- XD や Figma が重くなってきてツライ。
こういったツールは日々アップデートされていくので、きっとこの情報も古くなる日がくるでしょう…。
ほんの少しの間でも、みなさんのお役にたてたら〜と思います。
以上、間違ってること書いてないかヒヤヒヤしまくりの id:uniq がおおくりしました〜。
