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

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

» 2015年02月04日 18時00分 公開
[Nextremer 下岡聡子,@IT]
本連載「海外Webサービスのトリセツ」のインデックス

連載目次

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

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


ログイン

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

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

 ログインできました。

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

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

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

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

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

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

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

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

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

サクサク動いて使い勝手抜群

 取り込めました。

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

ログイン画面のイメージ

モックアップを作成する

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


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


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

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


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

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

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

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

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

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

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

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

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

InVisionで作成した「レストラン予約システム」のモックアップ

デザインの共有

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

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

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

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

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

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

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

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

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

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

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

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

筆者プロフィール

下岡聡子

Nextremer 下岡聡子

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

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


Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

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

メールマガジン登録

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