こんにちは、デザイナーのもとまつです。
さて、ARCHETYPではWEBサイト制作のご依頼が多いのですが、最近プロトタイプ制作の案件もお声がけいただきます。
プロトタイピングツールの「Adobe XD」と「InVision」を軽く使ってみたので、感触を簡単にまとめてみました。
今回はプロトタイピングツールをまだ触ったことがない方向けです。
この記事では、以下の状況を想定しています。
状況
・Adobeユーザー（普段PhotoshopやIllustratorを使っている）
・各画面デザインは既に制作済み
・各画面の遷移を設定する
・共有リンクで担当者が確認できるようにする
・共有リンクにパスワードをかける
・モバイルデバイス用のデザインは実機で確認できる
—
Adobe XD
操作性 ：★★★★☆
トランジション ：★★☆☆☆
Photoshopとの連携：★★★☆☆
コスト ：★★★★☆ *Creative Cloudコンプリートプラン加入済み想定
・画面遷移を一覧表示のまま、素早く設定可能
・とにかく軽快。特に普段Photoshop等のAdobe製品を使っている方は親和性が高いと思います
・Photoshopでコピー、XDでペースト可能
・Creative Cloudコンプリートプランを使っている人は追加料金なしで利用可能。
単品購入の場合は、個人：2,180円/月、法人：2,980円/月（税別）
・共有リンクにパスワードがかけられない
→リクエストはされているようなので、将来に期待
・モバイルデバイス用のデザインは実機で確認可能
・PDFやPNG、SVGで書き出しが可能
・Adobe XD CCがリリース！（2017年10月17日）
InVision
操作性 ：★★☆☆☆
トランジション ：★★★★☆
Photoshopとの連携：★☆☆☆☆ *Craft未使用時
コスト ：★★★☆☆
・画面遷移はそのページの編集画面まで移動しないと設定できない
・SketchやPhotoshopと連携できる「Craft」というプラグインがあり、これを使うと便利そうです
（今回は未使用）
・無料プランあり、有料プランは15$〜/月
・共有リンクにパスワードがかけられる
・モバイルデバイス用のデザインは実機で確認可能
・作成後、htmlやPDFをDL可能
・デザインツール「InVision Studio」が2018年1月にリリース予定！
—
まとめ
2つのツールを使ってみて一番違いを感じたのは、画面遷移の設定方法でした。
InVisionは編集画面を一枚ずつしか表示できず、しかも個別の編集画面まで移動しないと設定ができません。（もしかしたらもっと良い方法があるのかもしれませんが）
※先日発表されたInVision Studioでは改善されていそうです。
Adobe XDは各画面を一覧表示したまま設定できるため、驚くほど素早くできます。
とりあえず画面遷移をさくさく設定したい場合はAdobe XD、
ヘッダーを固定したり、共有リンクにパスワードを設定したり、少し高度なことをしたい場合はInVisionがおすすめです。
今回は共有リンクにパスワードをかけることが必須だったため、最終的にInVisionを使用しました。
Adobe XDでもリクエストはされているようです。クライアントワークでは重要度が高い機能なので、切にお願いします！
今後
この記事を書いている最中、Adobe XD CCのリリースとInVision Studioの発表がありました。
またGoogleからもプロトタイピングツール「Gallery」がリリースされるかもとのこと。
活況を呈するプロトタイピングツール界隈。
今後の動向にも注目です。
関連リンク
・Adobe XD CC
・InVision Studio
・Gallery
—
プロトタイピングツールの比較記事
今回ご紹介したツールは、プロトタイピングツールのごく一部です。
世の中には素晴らしいプロトタイピングツールの比較記事がたくさんありますので、さらなる情報をお求めの方にいくつかご紹介。
・2017年最新！おすすめのプロトタイピングツール5選（web design trends）
・2017年最新版！プロトタイピングツールのまとめ（Supership Tech Blog）
・【2017年版】海外のプロトタイピングツール11選（機能比較表つき）（UX MILK）