こんにちは、オフィス狛デザイン部のSatoです。
時代の波に追いつきたいと思い、一時期話題になったあのプロトタイプソフトの記事を書いてみました。（ちょっと遅いか）
先月InVision Studioのearly accessのメールが届いたのですが、SketchもXDも使った事の無い私は、通常の操作もあまりうまくできずに使うのを後回しにしていたのですが、公式の動画を見たり公式のGETTING STARTEDを見たりして、やっとアニメーションをつけたりする所までできるようになりました。
作ったモックアップ（iphoneXサイズ）
InVision StudioだとInVisionでお馴染みのリンクでの画面の遷移の再現や固定ヘッダーの再現だけでなくぬるぬるパーツが動きます！言葉で説明するのが難しい動きもこれでエンジニアさんに伝えられますね！
一番手こずったのがアニメーション機能で作る横から出てくるメニューだったので個人的に作り方を解説します。
（UIを載せるとよろしく無いそうなので、詳しいアニメーション機能についてはこちらの公式の説明を読んでみてください！）
横から入ってくるメニューは最初アニメーションのTransitionをPresetに設定し横にずれるような動きに設定してどうにかしようと思ったのですが、なかなかメニューが横から動くようには見えてくれませんでした……。
しかし、元の画面要素をコンポーネントとして登録し、別にコンポーネント化させたメニューを見切れるように配置し、TransitionをMotionにしてあげるといい感じに動いてくれました。
唯一、使っていて大きな欠点だなと思った点は日本語対応。
InVision Studio内は日本語もきちんと打ち込めますが、右上のプレビューボタンの横のアップロードボタンでInVisionにプロトタイプとしてアップロードできるという機能を使った後にプレビューで見てみると日本語部分が綺麗に消えてしまいました。
InVisionのソフトなのに日本語を使うとInVisionにうまい具合にアップできないのは痛い……。
こんなに素敵なのにクライアントさんにモックアップとして見せるのはまだ無理そうなのが勿体無い気がしますが、early accessだし海外製だから仕方ない。
他にも不具合な気がする不思議な挙動や実装されていない機能などありますが使う価値は大いにあると思います。
何よりearly access版は今の所（2018年5月現在）無料です！ぜひみなさま使ってみてください。
Invision , InVisionStudio
0 件のコメント:
コメントを投稿