プロトタイプの作成に役立つ!デザインツールInVisionの使い方【初心者向け】

InVisionというプロトタイプの作成に便利なツールの使い方について解説しています。誰でも使えるように初心者向けに書いているので、大枠の流れを理解することができるはずです。ぜひデザインする際に使ってみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

プロトタイプの作成でよく使われているInVisionというツールの使い方を解説している記事になります。
デザインツールとして便利な機能も多いのでぜひ利用してみてください。

InVisionの便利なところや登録から実際に使うまでの流れを説明しています。

 

なお本記事は、TechAcademyのUI/UXデザインオンラインブートキャンプの内容をもとに紹介しています。

 

InVisionとは

InVisionはWeb上で無料で使用できるプロトタイプ作成ツールです。

スクリーン画像をアップロードし、リンクを繋げることによって簡単にプロトタイプを作ることができます。

 

InVisionの便利な点

  • DropboxやSlack等の外部サービスと数多く連携しています。
  • リアルタイムで共同編集ができるモードなど、特にグループでの作業に特化しています。
  • 無料プランでもZIPやPDFでのダウンロードが利用可能です。

複数人で1つのアプリやWebサイトのデザインする際に便利です。デザインに対してのフィードバックや指導などアプリ内で完結してやり取りすることができるので、ぜひ試してみてください。

 

[PR] 最短4週間でUI/UXデザイナーを目指せる方法を動画で公開中

InVisionの使い方

まず、以下のリンクにアクセスします。

InVision

以下の部分をクリックするか、一番下までスクロールすると新規アカウント作成用のフォームが表示されます。

inv_p_1

ユーザーネーム・メールアドレスとパスワードを設定し、一番右のボタンをクリックすれば完了です。

inv_p_2

アカウント登録後は右上の「LOGIN」からアドレスとパスワードを入力することで管理ページに移動することができます。
無料プランでは作成できるプロトタイプの数がひとつに制限されていますが、PDF形式でのダウンロードなどは自由に利用可能です。

inv_p_3

 

実際にInVisionで作業してみよう

プロジェクトの追加

まず、新規のプロジェクトを作成します。
以下の画像、右上のプラスマーク部分をクリックします。

inv_p_4_1

プロジェクト名を入力し、形式を選択します。ここではWebとしています。

inv_p_4

「CREATE PROTOTYPE」をクリックします。

inv_p_5

新規のプロジェクトを作成する際は、この手順で行っていきましょう。

 

スクリーンのアップロード

プロトタイプに使用するスクリーン画像をアップロードします。

画像はPCのデスクトップなどから画面にドラッグ&ドロップでアップロードできる他、DropboxやGoogle Drive内から使用することもできます。

inv_p_6

画像はいつでも新しく追加が可能です。

inv_p_8

編集したいスクリーン画像にマウスカーソルを合わせ、「VIEW SCREEN」をクリックします。

inv_p_9

 

リンクの設定を行う

下メニューの以下の部分をクリックすると、クリックやタップで反応する箇所を指定するモードになります。

inv_p_10

リンクを設定したい場所をドラッグで範囲選択します。

inv_p_11

選択した範囲は後からでも右下の部分をドラッグすることで大きさを自由に調整できます。

inv_p_ex1

また、範囲の上にマウスカーソルを合わせてドラッグすることで移動が可能です。

inv_p_ex2

範囲を作成するとその箇所をクリック・タップした時に実行される処理を設定することができます。このメニューは後からその部分を右クリックすることでいつでも表示が可能です。

例えば、「Link To:」欄から「Prototype Screens」の中の他にアップロードしたスクリーン画像のファイル名を選択すると、そのスクリーンへのリンクが設定されます。

inv_p_12

リンク先は他のスクリーン以外にも現在のスクリーン内の別の場所に設定することができます。

右クリックのメニューから「Another point on this screen」を選択します。

inv_p_13

「Set anchor position」をクリックします。

inv_p_14

アンカーのマークを現スクリーン内の飛ばしたい場所に合わせてからクリックして設定します。

inv_p_15

リンクの設定が完了したら「Save」をクリックします。

inv_p_16

 

プレビューモード

下メニューのこのアイコンをクリックするとプレビューモードになり、実際の動作が確認できます。

inv_p_17

 

コメントを使用する

下メニューのこのアイコンをクリックすると、スクリーン画像内の任意の場所にコメントを残すことができます。複数人でデザインを作成する場合、ディレクターなどがフィードバックする際に便利な機能です。

inv_p_ex3

 

プロトタイプを共有する

「SHARE」をクリックすると、共有用のURLを表示したり指定のメールアドレスにリンクを送ることができます。コメント機能同様、チーム内の人に共有をしたり、クライアントに共有する際に便利な機能です。

inv_p_18

 

ライブシェアを使用する

「LIVESHARE」をクリックすると、他のユーザーとリアルタイムで共同作業ができるライブシェアを始めることができます。

inv_p_19

inv_p_20

ライブシェア時には各メンバーがポインタで動作を確認したりその場でコメントを残したりすることができるほか、スクリーン内やホワイトボードに直接書き込んでやり取りすることも可能になっています。

inv_p_21

inv_p_24

inv_p_22

inv_p_23

 

ダウンロードの方法

プロトタイプのデータをダウンロードする場合はプロジェクトのページから上メニュー右の「…」をクリックし「Download Prototype」を選択します。

inv_p_25

ZIPあるいはPDFを選択し、下のGENERATEボタンをクリックするとファイルが生成され、ダウンロードが可能になります。

inv_p_26

 

以上、InVisionの使い方について紹介してきました。

簡単なデザインから本格的な業務まで幅広く利用できるツールなので、ぜひ使ってみましょう。

他にもSketchの使い方などを解説しています。デザインツールを使えるようにしたい方は合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。