連載
» 2015年02月04日 18時00分 UPDATE

海外Webサービスのトリセツ(23):お手軽Webデザインモック作成サービス〜InVision(インビジョン)の使い方:実践編

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

[Nextremer 下岡聡子,@IT]
本連載「海外Webサービスのトリセツ」のインデックス

連載目次

 デザインプロトタイプを作成できるWebサービス「InVision(インビジョン)」のトリセツ、今回は自分で作成したWeb画面のラフスケッチを取り込み、編集&共有に挑戦します。

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


ログイン

 まずは右上の「LOGIN」をクリックします。

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

 ログインできました。

tori23_2.png ログイン後のマイページ。デモプロジェクトのプロトタイプが並んでいます。これらは実際にボタンクリックで次画面に遷移するモックアップの例です。基本的な作りですが大変参考になります

「MY」デザインスケッチを取り込む

 まず、マイページの「Projects」で新規プロジェクトを作成します。

tori23_3.png

 次に、プロジェクト名を入力し、作成するアプリ(Web、iPhone、Androidなど)のタイプを選択します。

tori23_4.png

 選択したら、「CREATE PROJECT(プロジェクトを作成)」をクリックします。

tori23_5.png

 プロジェクトが作成されました!

tori23_6.png

 プロジェクト画面で、自分で作成したデザインスケッチを取り込めます。現在サポートされているファイル形態はPNG、JPG、GIF、PDFなどです。Illustratorなどのツールで作成したファイル(PSD、AIなど)は現在ベータ版で、今後サポート可能となるようです。

 ドラッグ&ドロップで簡単にファイルをアップロードできます。Dropbox、boxなどのオンラインストレージからも直接取り込めます。また「capture from a live url」のリンクをクリックすると、現在稼働中のWebサイトからキャプチャを取り込めます。

 Excelで作成したシステムデザインスケッチ画面を、キャプチャーして4枚の画像にして、取り込んでみます。

tori23_7.png サクサク動いて使い勝手抜群

 取り込めました。

tori23_8.png

 画像をクリックすると、プレビュー画面が開きます。

tori23_9.png ログイン画面のイメージ

モックアップを作成する

tori23_10.png

 モックアップも簡単に作成できます。最初は「プレビュー(閲覧)モード」で画面が開くので……


tori23_11.png

 「目」マークの右横にあるアイコンをクリックして、「ビルドモード」に切り替えます。


 ビルドモードでは、モックアップに欠かせない「ホットスポット」を追加できます。これは各ボタンを押したときのリンク先となる画面を設定する作業です。

tori23_12.png
tori23_13.png

 「Sign In」ボタン右横の画像に「クリック&ドラッグでホットスポットを作成」と書かれています。


 ホットスポットを作成する範囲を指定します。「Sign In」ボタンの端でクリック→反対側の端までカーソルをドラッグしてボタン全体が青色に変わったところでストップ。カーソルを放すと、リンク先の画面を指定するダイアログが表示されます。

tori23_14.png

 次に、リンク先の画面を指定します。取り込んだ画像の画面名にカーソルを合わせると画面イメージが表示されます。

tori23_15.png

 リンク先の画面と各オプションを指定したら「Save」ボタンをクリックします。

tori23_16.png

 リンクする際のアクティビティは、「クリック」「Hover(カーソルを乗せる)」の2つから選択できます。

 「Maintain scroll position after click(クリック後もスクロール位置を維持)」「Include hotspot in template(テンプレートにホットスポットを含める)」というオプションもあります。

※テンプレートとは、複数の画面で使用するパーツのことです。InVisionではこれらのパーツを、ホットスポットのリンク付きで保存できます。企業Webサイトのヘッダー(会社紹介、お問い合わせ、過去実績)など、タブ仕様で複数のページに共通するパーツを作成する場合に便利です。

 ホットスポットを指定した状態でプレビューモードに戻ると……

tori23_17.png
tori23_18.png

 「Sign In」ボタンをクリックすると、指定した画面に遷移するようになりました。感動!

 動画でも見てみましょう。

デザインの共有

 作成したプロジェクトは、チームのメンバーと共有できます。

 メールなどでプロジェクトのリンクを共有するには「Share」を、Web上でミーティングを開催するには「LiveShare」をクリックします。

tori23_20.png

 一瞬で共有用のURLが作成されました。これをメンバーに送信するだけで共有できます。

tori23_21.png

 LiveShareボタンをクリックすると……

tori23_22.png

 最初の画面がミーティング仕様で開きました。

tori23_23.png

 右側のツールバーを使って、フリーハンドで画面に書き込んだり(いびつな赤丸)、テキストを追加したり(緑丸で囲まれた赤文字)、デザインに対するコメントを画面上に表現したりできます。

tori23_24.png

 上部の「Screen / Whiteboard」を切り替えると、真っ白なスクリーンに書き込めます。

tori23_25.png

 チャットにメンバーを追加する場合は、右側のツールバーにある「人」マークをクリックし、生成されたURLを相手に送信します。

tori23_26.png

 受信者がURLを開いて、自分のInVisionアカウントを入力すると、進行中のミーティングに参加できます。

tori23_27.png

 いかがでしたか? こんなに便利なサービスがあれば、チームミーティングがますます楽しくなりそうですね。

 来月は、便利なタスク管理ツール「Trello」の使い方を紹介します。

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

筆者プロフィール

下岡聡子

Nextremer 下岡聡子

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

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


Copyright© 2017 ITmedia, Inc. All Rights Reserved.

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。