プロトタイプの作成に役立つ！デザインツールInVisionの使い方【初心者向け】
InVisionというプロトタイプの作成に便利なツールの使い方について解説しています。誰でも使えるように初心者向けに書いているので、大枠の流れを理解することができるはずです。ぜひデザインする際に使ってみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
プロトタイプの作成でよく使われているInVisionというツールの使い方を解説している記事になります。
デザインツールとして便利な機能も多いのでぜひ利用してみてください。
InVisionの便利なところや登録から実際に使うまでの流れを説明しています。
なお本記事は、TechAcademyのUI/UXデザインオンラインブートキャンプの内容をもとに紹介しています。
InVisionとは
InVisionはWeb上で無料で使用できるプロトタイプ作成ツールです。
スクリーン画像をアップロードし、リンクを繋げることによって簡単にプロトタイプを作ることができます。
InVisionの便利な点
- DropboxやSlack等の外部サービスと数多く連携しています。
- リアルタイムで共同編集ができるモードなど、特にグループでの作業に特化しています。
- 無料プランでもZIPやPDFでのダウンロードが利用可能です。
複数人で1つのアプリやWebサイトのデザインする際に便利です。デザインに対してのフィードバックや指導などアプリ内で完結してやり取りすることができるので、ぜひ試してみてください。
[PR] UI/UXデザインで挫折しない学習方法を動画で公開中
InVisionの使い方
まず、以下のリンクにアクセスします。
以下の部分をクリックするか、一番下までスクロールすると新規アカウント作成用のフォームが表示されます。
ユーザーネーム・メールアドレスとパスワードを設定し、一番右のボタンをクリックすれば完了です。
アカウント登録後は右上の「LOGIN」からアドレスとパスワードを入力することで管理ページに移動することができます。
無料プランでは作成できるプロトタイプの数がひとつに制限されていますが、PDF形式でのダウンロードなどは自由に利用可能です。
実際にInVisionで作業してみよう
プロジェクトの追加
まず、新規のプロジェクトを作成します。
以下の画像、右上のプラスマーク部分をクリックします。
プロジェクト名を入力し、形式を選択します。ここではWebとしています。
「CREATE PROTOTYPE」をクリックします。
新規のプロジェクトを作成する際は、この手順で行っていきましょう。
スクリーンのアップロード
プロトタイプに使用するスクリーン画像をアップロードします。
画像はPCのデスクトップなどから画面にドラッグ＆ドロップでアップロードできる他、DropboxやGoogle Drive内から使用することもできます。
画像はいつでも新しく追加が可能です。
編集したいスクリーン画像にマウスカーソルを合わせ、「VIEW SCREEN」をクリックします。
リンクの設定を行う
下メニューの以下の部分をクリックすると、クリックやタップで反応する箇所を指定するモードになります。
リンクを設定したい場所をドラッグで範囲選択します。
選択した範囲は後からでも右下の部分をドラッグすることで大きさを自由に調整できます。
また、範囲の上にマウスカーソルを合わせてドラッグすることで移動が可能です。
範囲を作成するとその箇所をクリック・タップした時に実行される処理を設定することができます。このメニューは後からその部分を右クリックすることでいつでも表示が可能です。
例えば、「Link To:」欄から「Prototype Screens」の中の他にアップロードしたスクリーン画像のファイル名を選択すると、そのスクリーンへのリンクが設定されます。
リンク先は他のスクリーン以外にも現在のスクリーン内の別の場所に設定することができます。
右クリックのメニューから「Another point on this screen」を選択します。
「Set anchor position」をクリックします。
アンカーのマークを現スクリーン内の飛ばしたい場所に合わせてからクリックして設定します。
リンクの設定が完了したら「Save」をクリックします。
プレビューモード
下メニューのこのアイコンをクリックするとプレビューモードになり、実際の動作が確認できます。
コメントを使用する
下メニューのこのアイコンをクリックすると、スクリーン画像内の任意の場所にコメントを残すことができます。複数人でデザインを作成する場合、ディレクターなどがフィードバックする際に便利な機能です。
プロトタイプを共有する
「SHARE」をクリックすると、共有用のURLを表示したり指定のメールアドレスにリンクを送ることができます。コメント機能同様、チーム内の人に共有をしたり、クライアントに共有する際に便利な機能です。
ライブシェアを使用する
「LIVESHARE」をクリックすると、他のユーザーとリアルタイムで共同作業ができるライブシェアを始めることができます。
ライブシェア時には各メンバーがポインタで動作を確認したりその場でコメントを残したりすることができるほか、スクリーン内やホワイトボードに直接書き込んでやり取りすることも可能になっています。
ダウンロードの方法
プロトタイプのデータをダウンロードする場合はプロジェクトのページから上メニュー右の「…」をクリックし「Download Prototype」を選択します。
ZIPあるいはPDFを選択し、下のGENERATEボタンをクリックするとファイルが生成され、ダウンロードが可能になります。
以上、InVisionの使い方について紹介してきました。
簡単なデザインから本格的な業務まで幅広く利用できるツールなので、ぜひ使ってみましょう。
他にもSketchの使い方などを解説しています。デザインツールを使えるようにしたい方は合わせてご覧ください。
[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
