はじめてでも、プロトタイプを作成できます

リッチでインタラクティブなワイヤーフレームを作成して Web アプリやモバイル アプリを定義することで、作業のやり直しや、誤解を避ける事ができます。

プロトタイプをドラッグ&ドロップでビルド

ワイヤーフレームからインタラクティブなプロトタイプへ

iPhone、Android、Web アプリのプロトタイプ作成

Prototyper を使用することで、豊富なコンポーネントやアクションのギャラリーを用いて、非常にインタラクティブなワイヤーフレームを簡単に描くことができます。長方形やテキストなどの基本図形は、もちろんのこと、メニュー、フォームフィールドやデータ一覧など、ディスプレイ特有のコンポーネントも提供しています。

モバイル アプリのプロトタイプ用ジェスチャー

iPhone、Android モバイル アプリのプロトタイプ用ウィジェット

iPhone, Android, iPad 向けアプリケーションのすばらしいプロトタイプを作成できます。作成したプロトタイプ内で、スワイプ、タップ&ホールド、ピンチや回転のジェスチャーのシミュレーションが可能です。デバイスの向きのキャプチャも可能で、反応の良いデザインのシミュレーションが可能になります。

オリジナル ウィジェットの作成

iPhone、Android、Web アプリのプロトタイプ作成

オリジナルのウィジェットを作成して、独自のウィジェット ライブラリに含めることができます。アイテムをグループ化し、ウィジェット ライブラリにドラッグするのと同じくらい簡単です。Justinmind では、iPhone, SAP, iPad, Blackberry や Android 用のウィジェット ライブラリを提供しています。

スタイルの定義

iPhone、Android モバイル アプリのプロトタイプ用ウィジェット

ガイドラインや丸まった角、画像のクロップや色のグラデーションを使用して、忠実度の高いワイヤーフレームを作成することができます。Justinmind のテンプレートやデザイン ツールを使用することで、コンポーネントのビジュアル アスペクトをピクセル単位で設定できます。

画像の読み込み作業も簡単

iPhone、Android、Web アプリのプロトタイプ作成

Photoshop の様なデザイン ツールや Web ブラウザーから画像をドラッグ&ドロップでインポートできます。カラーキャプチャ ツールで、作成するデザインの色のキャプチャや保存が可能です。

変更部分をすぐにテスト

iPhone、Android モバイル アプリのプロトタイプ用ウィジェット

[Simulate (シュミレート)] ボタンクリックするだけで、変更したプロトタイプのデザインをすぐに確認できます。このプロトタイプ作成ソフトウェアにより、すぐに作成したアプリケーションのプロトタイプのシミュレーションができます。

アクションの追加

すぐに動作のシミュレーション

iPhone、Android、Web アプリのプロトタイプ作成

一行のコードも書かずに、"show and hide content (コンテンツの表示/非表示)", "change styles (スタイルの変更)", や "conditional navigation (条件付のナビゲーション)" などのアクションのシミュレーションが可能です。これらのアクションは、Onclick, OnMouseOver, OnkeyPress などのイベントがきっかけとなり動作します。

フォーム&データグリッドのシミュレーション

iPhone、Android モバイル アプリのプロトタイプ用ウィジェット

フォームやデータグリッドの動作のシミュレーションも可能です。更にフォームのバリデーションやメッセージも追加することができます。コーディングやデータベースの知識は必要ありません。

画像データの追加

iPhone、Android、Web アプリのプロトタイプ作成

ワイヤーフレームに画像を追加し、イメージマップ コンポーネントでリンクやアクションを追加することができます。Justinmind のコンポーネントで静的な画像に双方向性を追加することで、より生産性の高いプロトタイプの作成が可能になります。

If…Then… (条件分岐もコード不要)

iPhone、Android モバイル アプリのプロトタイプ用ウィジェット

ドラッグ&ドロップで、条件分岐やフォームのバリデーションを作成できます。演算子やフィールド、変数やデータの組み合わせなどの技術的な専門知識なしで、ワイヤフレームで高度な動作のシミュレーションが可能です。

再利用と一括変更

iPhone、Android、Web アプリのプロトタイプ作成

テンプレートを使用して、すべてのコンポーネントが規定の外観になるようにワイヤーフレームのスタイルガイドを設定できます。

データの共有

iPhone、Android モバイル アプリのプロトタイプ用ウィジェット

変数を使用することにより、任意のデータを特定の画面から別の画面に移動したり、ある条件の確認に使用することもできます。変数やデータ マスターを使用して、動的なアクションやビジネス ロジックのシミュレーションが可能です。

ドラッグ&ドロップのシミュレーション

iPhone、Android、Web アプリのプロトタイプ作成

アニメーション ユーティリティを使用すると、コンポーネント上で、プログレスバーや動的なメッセージや動作をワイヤーフレームに追加することができます。

オンライン コンテンツ, HTML & Flash

iPhone、Android モバイル アプリのプロトタイプ用ウィジェット

インターネット上にある Flash やビデオ コンテンツも追加できます。Google マップや YouTube ビデオ、またオリジナルのオンライン ウィジェットもワイヤーフレームに追加可能です。

共同作業 (共有&エクスポート)

ワンクリックでドキュメントができます!

iPhone、Android、Web アプリのプロトタイプ作成

Justinmind Prototyper で、作成したプロトタイプのすべての情報を Microsoft Word または Open Office ドキュメントにエクスポートでき、簡単に仕様書を作成することができます。

インタラクティブ HTML へのエクスポート

iPhone、Android モバイル アプリのプロトタイプ用ウィジェット

作成したワイヤーフレームをすべてのアクション、コンディション、バリデーションを含めてエキスポートできます。HTML のプロトタイプをユーザーやお客様、プロバイダーへ送り、彼らの Web ブラウザでテストすることができます。

一つのプロトタイプを複数のデザイナーで共有

iPhone、Android、Web アプリのプロトタイプ作成

チーム内で、同時に同じプロトタイプで作業することができます。特別なサーバーなどを用意する必要もありません。Justinmind のクラウド サービス ("Usernote") ですべてのことを処理できるので、Prototyper のみ必要です。

アプリのプロトタイプをモバイル デバイスでテスト

iPhone、Android モバイル アプリのプロトタイプ用ウィジェット

作成したワイヤーフレームをクラウド コラボレーション サービス (別名 "Usernote") で公開し、iPhone や iPad などのモバイルデバイスでテストすることができます。 詳細はこちら

便利な機能

弊社のブログでも、Justinmind の便利な機能について案内していますので、 ぜひご覧ください。

機能 概要
基本的なプロトタイプ作成 基本的なモバイル向けプロトタイプの作成方法
SVG ファイル デバイスに左右されないイメージを提供する SVG ファイルの活用方法
Sketch との統合 Sketch で作成したデザインをプロトタイプへ変換する方法
外部リンクの実装 ビデオ、オーディオなどの外部リンクをプロトタイプへ実装する方法
メッセンジャーアプリの作成 メッセンジャーアプリを作成する方法

 

 

ページトップへ