Justinmind でモバイル向けプロトタイプを作成!

Justinmind は、iPhone や Android などのスマートフォン向けのモバイル アプリや Web サイトの骨組みとなるワイヤーフレームを素早く、手軽に作成できるツールです。Justinmind があれば、プロトタイプへの画像の追加、 HTML 形式へのエクスポート、Microsoft Word 形式での仕様書の自動作成を簡単に行うことができます。これら全ては、プログラミング知識やコードを必要としません。

今すぐ、30 日間無償評価版をこちらよりダウンロードし、モバイル向けプロトタイプを実際に作成してみましょう。

  1. Justinmind を立ち上げると、Beginner または Expert モードを選択する以下の画面がポップアップします。今回は、 Beginner を選択します。
  2. 選択後、下記の welcome ウィンドウが画面上にポップアップします。今回は、新規プロトタイプを作成するので 2 番の [Create a New Prototype] をクリックします。
    ※上記画面を表示されない場合は、[File][New][Prototype] をクリックします。
  3. 次に、プロトタイプを作成するデバイスの種類をデバイスセレクターから選択します。Justinmind は、ウェブプロトタイプ、iPhone や iPad などのモバイルプロトタイプなど多くのデバイスに対応しています。今回は、iPhone を選択します。
  4. 選択後、[Next] をクリックすると、下記のウィンドウが表示され、 EmptyImagesExampleAnother のいずれかを選択します。今回は、Empty を選択し [Finish] をクリックします。

各オプションにより以下が可能になります。

Empty:
選択したデバイスに対応した新規プロトタイプを作成できます。
Image:
iPhone または iPad をデバイスとして選択した場合は、解像度を調整するために Justinmind が自動的に画像をリサイズします。
Example:
事前に読み込まれているプロトタイプサンプルのリストが各デバイスごとに表示されます。これらのサンプルは、Justinmind についてより理解を深めるのに最適です。
Another:
既存の .vp ファイルを使用して、新しいプロジェクトを開きます。また、プロトタイプのデバイスを変更することもできます。例えば、ウェブ プロトタイプからモバイル プロトタイプに変換することができます。

ワークスペース

これらの選択を終えるとワークスペースが表示され、プロトタイプ作成を開始することができます。その前に、ワークスペースについて確認していきます。

  1. メニューバー: タスクごとにメニューは整理されています。
    View: ワークスペースをカスタマイズします。
    Simulate: ウェブシミュレーターまたは実機にてワイヤーフレームまたはプロトタイプをシミュレーションします。
    Share: ワイヤーフレームやプロトタイプをオンライン上に公開します。
    Report: HTML、ドキュメント、画像のテクニカルドキュメンテーションをプロトタイプから作成します。
    Widget: UL 要素を管理および共有します。
    Teamwork: チームメンバーと共に共有されたプロトタイプを作業します。
    Plugins: Justinmind エディター内にプラグインをインポートします。
    Help: プログラム内についてツアーを開始します。
    ※無償版では、提供されていないメニューがございます。
  2. ツールバー: 選択したコンポーネントを素早く編集できます。ツールバーには、よく使用される編集ツールが表示されます。※[Copy Events] は、イベントをコピーし異なる要素の上に貼り付けを行います。
  3. Tab Selector: 全てのセクション内のタブを表示し、クリックにより現在のタブを作業したいタブへ変更します。セクションは、アプリケーションの主要な部分となり、プロトタイプの特定箇所に関する情報を定義、取得します。User InterfaceCommentsSite MapScenariosRequirements の 5 つの異なるタブから構成されています。
  4.  Widgets Palette: プロトタイプへ追加できるすべての予め用意された UI 要素を表示します。
  5. EventCommentsRequirements タブ: UI 要素に、イベント、コメント、必要事項を追加できます。
  6. Contents タブ: プロトタイプ内のすべてのスクリーン、テンプレート、マスターを表示します。ダブルクリックしすることで内容を確認できます。ツールバーは、スクリーンやフォルダーの作成、またはスクリーンの優先度を整理するために使用できます。
  7. Properties タブ/ Navigator: 選択したコンポーネントのプロパティを編集できます。また、要素の名前をデフォルトから変更できます。
  8. Outline タブ (Data Masters タブ / Variable タブ): 現在表示しているスクリーンの内容を表示します。キャンバス上にあるスクリーンのコンポーネントは、リストとしてここに表示されます。

インタラクティブなプロトタイプ作成

ワークスペースについて理解したところで、実際に簡単なプロトタイプを作成していきます。今回は、iPhone 上でメールアカウントにログインし、画面推移をするプロトタイプを作成します。

必要な作業:

  1. iPhone に対応した ログイン画面、ログイン後の画面作成
  2. サインイン後の画面推移イベントの作成

まずは、Wiedgets Palette より好きなウィジェットをドラッグアンドドロップし、キャンバス上に追加していきます。Justinmind は、作業時間を大幅に削減できる UI 要素を多数予め用意しています。この UI 要素は、Google、iOS、Android、Windows などに対応しています。以下は、これらを使用したサンプルとなります。

今回は、以下のように既存の iPhone iOS 用のウィジェットを追加します。次に、リンク先のページのスクリーンを作成します。新規スクリーンを追加するには、スクリーンタブ内にある [+] をクリックします。

新規スクリーンを作成した後は、Sign in ボタンをクリックによりスクリーンが移動するイベントを作成します。

■追加したボタンを右クリックし、[Add Link] を選択します。

■スクリーンタブ上で行うこともできます。
追加した SIGN IN ウィジェットを、右にあるスクリーンタブ内のリンクしたいスクリーンへドラッグします。

こちらのビデオより、リンクの詳しい追加方法をご確認いただけます。

このようにして、キャンバス上に予め用意されたウィジェットをドラッグ&ドロップで追加し、イベントをクリック操作で追加していくだけで、インタラクティブなプロトタイプが作成できます。

こちらより、Justinmind を使用したウェブ、アプリ向けプロトタイプのサンプルをご覧いただけます。また、その他のウィジェット ライブラリもダウンロードいただけます。

さらに、Justinmind で作成したプロトタイプは、シミュレートしたり、チームメンバーと共有したりすることができます。

シミュレーション

プロトタイプのシミュレーションを見るには、上部にある [Simulate] ボタンまたはキーボードの [F5] をクリックします。この機能を使用し、クライエントやユーザーからその場でフィードバックをえることができます。

HTML へのエクスポート

一度、エクスポートした HTML は、すべてのインターネットブラウザで開くことが可能となり、ユーザーやクライエントに提供することができます。受け取ったユーザーやクライエントは、実際に動かすことができ、動作やデザインを確認することができます。

この他にも、イメージやドキュメントとしてプロトタイプをエクスポートしたり、クラウド上に公開することにより、ユーザーやクライエントに配布することができます。

このように、Justinmind は、UX デザイナーの作業時間を削減しながら、完成品により近いプロトタイプを作成することで、アプリ開発コストおよび時間を大幅に抑える事ができます。

是非、30 日間無償評価版をこちらよりお試しください。商品の詳細は、こちらよりご覧ください。

記事参照:
Introduction to Justinmind Prototyping Tool

シェアする

  • このエントリーをはてなブックマークに追加

フォローする