
InVisionとは?料金、使い方、日本語、無料、プロトタイプ、Figma、Studioを徹底解説
1. InVisionとは?
InVisionは、InVisionApp Inc.が提供する、デジタル製品デザインプラットフォームです。「プロトタイプを素早く作成したい」「デザインの共同作業を効率化したい」「デザインシステムを構築したい」というデザイナーや開発チームの要望に応えてくれます。プロトタイピング、デザインコラボレーション、デザインシステム管理などの機能を提供しています。Freehand (オンラインホワイトボード)、Prototypes (プロトタイピング)、Design System Manager (DSM) などのツールがあります。Webベースで利用でき、直感的なインターフェース、リアルタイム共同編集、豊富な連携機能などが特徴です。まるでチーム全員が、同じ場所に集まってブレインストーミングしているように、デザインプロセス全体を効率化し、より良いデジタル製品を生み出せます。
【目次】
- InVisionとは?
- InVisionの料金
- InVisionの使い方 (Freehand)
- 日本語対応について
- 無料版について
- プロトタイプ機能について
- Figmaとの比較
- InVision Studioについて
- InVision Cloud について
- まとめ
2. InVisionの料金
InVisionの料金プランは、以下のようになっています (2024年5月現在)。
-
Free:
- 最大3ユーザー。
- 最大3ドキュメント。
- 基本的な機能。
-
Pro:
- 月額$7.95/ユーザー (年払いの場合、$95/ユーザー/年)。
- 最大15ユーザー。
- 無制限のドキュメント。
- 高度な機能。
-
Enterprise:
- 料金は問い合わせが必要です。
- 無制限のユーザー。
- Proプランのすべての機能。
- エンタープライズ向けのセキュリティ & 管理機能。
料金プランの詳細は、InVisionの料金ページで確認してください。価格やプラン内容は変更される場合があります。
3. InVisionの使い方 (Freehand)
ここでは、InVisionの主要ツールの一つであるFreehandの使い方を説明します。
-
InVisionアカウントの作成:
- InVisionの公式サイト (https://www.invisionapp.com/) で、アカウントを作成します (無料)。
-
Freehandの新規作成:
- ログイン後、ダッシュボードから [Freehand] を選択し、[Create New Freehand] (新しいFreehandを作成) をクリックします。
-
テンプレートの選択 (オプション):
- ブレインストーミング、ワイヤーフレーム、フローチャートなど、目的に合ったテンプレートを選択できます。
- または、空白のキャンバスから始めることもできます。
-
キャンバスの操作:
- ツールバーから、図形、テキスト、ペン、付箋などのツールを選択し、キャンバス上に要素を追加します。
- 要素を移動、サイズ変更、編集できます。
- Zoom in/out (拡大/縮小)、Pan (パン) などの操作で、キャンバスを自由に移動できます。
-
共同編集:
- 他のユーザーをFreehandに招待し、リアルタイムで共同編集できます。
- コメント機能を使って、フィードバックを交換できます。
-
共有:
- Freehandを共有リンクで公開したり、画像としてエクスポートしたりできます。
より詳しい使い方については、InVisionのヘルプやチュートリアルを参照してください。
4. 日本語対応について
- InVisionのWebサイトとインターフェースは、英語で提供されています。日本語には対応していません (2024年5月現在)。
- ただし、InVision上で日本語のテキストを入力・表示することは可能です。
- 日本語フォントも利用できます。
- InVisionのドキュメントは、英語で提供されています。
5. 無料版について
- InVisionには、Freeという無料プランがあります。
- 無料プランでは、最大3ユーザー、最大3ドキュメントまで利用できます。
- Freehand, Prototypesなどの基本的な機能を利用できます。
- より多くのユーザーやドキュメント、高度な機能を利用するには、有料プラン (ProまたはEnterprise) へのアップグレードが必要です。
6. プロトタイプ機能について
- InVisionのPrototypes機能を使うと、インタラクティブなプロトタイプを素早く作成できます。
- 静的なデザイン画面 (Sketch, Photoshop, Figmaなどで作成) をInVisionにアップロードし、ホットスポットを追加することで、画面遷移やインタラクションを表現できます。
- アニメーションやトランジション効果を追加できます。
- プロトタイプを共有し、他のユーザーからフィードバックをもらえます。
- モバイルデバイスでプロトタイプをプレビューできます。
7. Figmaとの比較
InVisionとFigmaは、どちらもデザイン & プロトタイピングツールとして人気があります。主な違いは以下の通りです。
-
主要な機能:
- InVision: プロトタイピング、デザインコラボレーション、デザインシステム管理に強み。
- Figma: UIデザイン、プロトタイピング、共同編集に強み。デザインツールとしての機能がより豊富。
-
プラットフォーム:
- InVision: Webベース。
- Figma: Webベース (ブラウザ上で動作)。Windows, macOS, Linuxなど、さまざまなOSで利用できます。
-
料金:
- InVision: フリーミアムモデル (無料プランあり、有料プランはPro, Enterprise)。
- Figma: フリーミアムモデル (無料プランあり、有料プランはProfessional, Organization, Enterprise)。
8. InVision Studioについて
- InVision Studioは、InVisionが提供していたmacOS/Windows用のデスクトップアプリケーションです。
- 高度なアニメーション & プロトタイピング機能を備えたUIデザインツールでした。
- InVision Studioは、2024年1月31日にサポートが終了しました。
- InVision Studioのユーザーは、Figmaなどの他のツールへの移行を推奨されています。
9. InVision Cloudについて
- InVision Cloud は、InVision の各種ツールや作成したデータを管理・共有するためのプラットフォームです。
- Freehand, Prototypes, DSM などで作成したコンテンツは、InVision Cloud 上で一元管理されます。
- InVision Cloud を通じて、チームメンバーとの共同作業や、クライアントへのデザイン共有が可能です。
10. まとめ
InVisionは、プロトタイピング、デザインコラボレーション、デザインシステム管理に強みを持つ、デジタル製品デザインプラットフォームです。無料プランもありますが、機能制限があります。日本語のインターフェースには対応していませんが、日本語の表示・入力は可能です。InVision Studioはサポートが終了し、Figmaなどの他のツールへの移行が推奨されています。
デザインツール、InVision、Figmaに関する情報をもっと知りたい方は、www.sucoi.jpもおすすめです。役立つ情報が豊富に紹介されています。ぜひチェックしてみてください!
関連ナビゲーション


Adobe XD

Uifaces

Mockup

coolors

Principleformac

Figma
