Evernote社もご愛用〜InVision（インビジョン）の使い方：登録編：海外Webサービスのトリセツ（22）

海外Webサービスの使い方を「日本語で」分かりやすく説明するシリーズ、今回はプロトタイピングツール「InVision（インビジョン）」の登録方法を説明します。

[Nextremer 下岡聡子，＠IT]

連載目次

　海外Webサービスの使い方を「日本語で」分かりやすく説明するシリーズ、今月はWebサービスのデザインプロトタイプを簡単に作成できる「InVision（インビジョン）」を紹介します。

「InVision」のトップページ（クリックすると、大きなサイズの画像を表示します。以降も二重枠の画像は全て、クリックで拡大します）

※各固有名詞のカタカナ読みはユーザーによって異なるため、一つの参考としてください。

InVisionってどんなサイト？

　InVisionは、デザインのラフスケッチを共有し、複数人でアイデアを出し合いながらデザインプロトタイプを作成できるサービスです。以下のような、Web業界をけん引している一流企業もデザイン段階でInVisionを取り入れているそうです。

Evernote、ebay、razorfishなどの、世界中で知られているWeb企業も、こぞってInVisionを愛用しています。スタートアップ企業として「アジャイルで競争に打ち勝つ」ため、グローバル企業として「より良い製品をデザインする」ため、またデザインに特化したエージェンシーとして「顧客との関係を進化させ続けていく」ため――より良いサービスを作り世界にチャレンジするために、デザインの力が注目されています

InVisionの特徴

　InVisionの特徴を、ツアーページのガイドに沿って見ていきましょう。読み終わるころには、サービスのとりこになっていること間違いなし？

世界で最もパワフルなデザインプロトタイピングツール

　InVisionにデザインのラフスケッチを取り込むだけで、マウスジェスチャー、遷移、アニメーションなどを盛り込んだインタラクティブ（双方向的）で美しいデザインに変えてくれます。デザインは通常のWebに加え、iOS、Androidにも対応しています。

リアルタイムでデザインをプレゼンし、複数人で同時に作業できる

　取り込んだデザインの共有ができます。メンバーは送られてきたリンクを開くだけでデザインの状態が確認できます。リンク以外にも、LiveShareのプレゼンテーションツールを使用して、ワンランク上の「リアルタイム」なデザイン会議も開催できます。

シームレスなデザインコミュニケーション

　InVisionは、クライアントやプロジェクト関係者にデザインを共有してコメントをもらえます。もう複数個所に電子メールを送り続ける面倒な作業は不要ですね。フィードバックプロセスも極力シンプルにしたサービスは使い勝手が抜群です。

　「Seamless」は「継ぎ目のない」状態のことを指し、Web業界ではユーザーが複数のサービスを利用する際のハードルを低くする（＝最小限の操作で多数のサービスを利用できるなど）ことを意味します。ここでは複数の関係者間で「一つのサービスを使って確認プロセスを均一化」することを表しています。

　またデザインプロジェクトのマネジメントや、プロセスごとに完成したデザインファイルのバージョン管理もサポートしています。まさに、デザインという重要な工程を支えてくれる貴重なサービスです。

登録しよう

　早速登録してみましょう。無料登録を行うにはトップページ右上の「SIGN UP FREE」、もしくは中央の「GET STARTED FREE FOREVER！」をクリックします（今回は右上をクリックします）。

　新規登録画面が表示されます。

「No credit card needed（クレジットカードの登録は不要）」。Webサービスの中には登録時にカード登録を求められるところも少なくありません。すぐにチャージされないにしても、何となく不安な気がしますが、InVisionは最初に「不要」と断ってくれるので安心して登録できます

　必要な情報を入力して送信すると、登録完了です。

ログイン後のマイページ

「ログイン画面」「パスワードリセット画面」など、基本となるデザインの参考になりそうなプロトタイプがたくさんあります

　次回は、実際にInVisionを使用してデザインを作成します。Web開発に関わったことのある方なら感覚的に使える部分がたくさんあります。お楽しみに！

「海外Webサービスのトリセツ」バックナンバー

• ソースコードも送れるよ〜Slack（スラック）の使い方：コミュニケーション編
• GitHubやTrelloなど70以上のWebサービスと誰でも連携できるチャットサービス〜Slack（スラック）の使い方：登録編
• お気に入りはバケツにポイ〜dribbble（ドリブブル）の使い方：求人掲載＆応募編
• 「b」は3つ〜dribbble（ドリブブル）の使い方：登録編
• 履歴書をオシャレに〜Re.vu（レ・ビュー）の使い方：プロフィール作成編
• もはや履歴「書」ではない〜Re.vu（レ・ビュー）の使い方：登録編
• LinkedInの情報を3秒でコンパイル〜Kinzaa（キンザー）の使い方：レジュメ作成編
• LinkedInの情報をインポートして、見栄えの良いレジュメを作ろう〜Kinzaa（キンザー）の使い方：登録編
• オンもオフも一元管理〜タスク＆スケジュール管理サービス「Trello（トレロ）」の使い方：実践編
• Excelや付箋よサラバ！〜タスク＆スケジュール管理サービス「Trello（トレロ）」の使い方：登録編
• お手軽Webデザインモック作成サービス〜InVision（インビジョン）の使い方：実践編
• Evernote社もご愛用〜InVision（インビジョン）の使い方：登録編
• 日本にも来てくれるヨ！〜GitHub（ギットハブ）の使い方：公式トレーニングプログラム
• 絵文字だって使えちゃう〜GitHub（ギットハブ）の使い方：issueの裏ワザ編
• 使える度∞！〜「Udacity（ユーダシティ）」の使い方（2）：実践編
• 一流講師の授業を無料で受講する〜「Udacity（ユーダシティ）」の使い方（1）：登録編
• うわっ……うちの子、学び過ぎ……？　「Code Avengers（コードアベンジャーズ）」の使い方（4）：「Parent（保護者）」の設定方法
• オンラインで進捗管理　「Code Avengers（コードアベンジャーズ）」の使い方（3）：「Teacher（教師）」の設定方法
• エンジニアの王になる！――「Code Avengers（コードアベンジャーズ）」の使い方（2）：「Learner（学習者）」としての利用方法
• ゲーム感覚で開発を学べるオンライン学習サービス「Code Avengers（コードアベンジャーズ）」の使い方（1）：登録編
• 開発学習サービス「Dash（ダッシュ）」の使い方（2）：プロジェクト実践編
• 開発学習サービス「Dash（ダッシュ）」の使い方（1）：登録編
• SlideShare（スライドシェア）の使い方（2）：活用編
• SlideShare（スライドシェア）の使い方（1）：登録編
• Gitter（ギッター）の使い方（2）：チャット編
• Gitter（ギッター）の使い方（1）：登録編
• GitHub（ギットハブ）の使い方：連携サービス
• GitHub（ギットハブ）の使い方：issue（イシュー）編
• GitHub（ギットハブ）の使い方：グループの作成編
• GitHub（ギットハブ）の使い方：登録編
• Stack Overflow（スタックオーバーフロー）の使い方：Badge（評価システム）編
• Stack Overflow（スタックオーバーフロー）の使い方：質問＆回答編
• Stack Overflow（スタックオーバーフロー）の使い方：登録編

筆者プロフィール

Nextremer　下岡聡子

Javaプログラマー、フリー翻訳者（英語・中国語）を経て、Nextremerにてインドでのグローバル受託開発システムのマネジメント、新規ビジネス企画担当。大学ではロシア語を専攻。

ITエンジニア向けの英語サービスも提供中。