モックアップが作成できる「Justinmind」

アプリケーションの開発時にモックアップから作るプロジェクトも増えてまいりました。今回はモックアップ作成に便利なJustinmindをご紹介します。Justinmindは、Webサイトやモバイルのモックアップが作成できるアプリです。

Justinmindの使い方

インストール

はじめにインストーラのダウンロードを行いましょう。サイトにある「DOWNLOAD FREE」ボタンをクリックしてください。

アカウント登録画面が表示されます。Justinmindではアカウント登録が必要ですのでメールアドレスとパスワードを入力後、「GET STARTED」をクリックしてください。

アカウント登録が完了するとこのようなページに移動されます。「DOWNLOAD AND INSTALL」をクリックしてください。(今回はMac版をインストールしています)

ダウンロード終了後にプログラムを実行するとこのような画面が表示されますのでアプリケーションフォルダにインストールしてください。

Justinmindのインストールが終わったら起動してください。起動するとログイン画面が表示されますので、先ほど登録したアカウントでログインしてください。

モックアップを作成する

ログインが完了するとビギナーモードかエキスパートモードかを選ぶ画面が表示されます。自分のレベルに合わせて選択してください。ここではビギナーモードを選択しました。Justinmindのホーム画面が表示されます。Newのところにある「Create a New Prototype」をクリックしてください。

プロトタイプを作るデバイスを選択する画面が表示されます。ここではWebを選択しました。

プロトタイプの大きさやテンプレートなどを選択する画面が表示されます。幅や高さなども設定できます。ここではサンプルを選択しました。

プロトタイプの作成画面が表示されます。

左側にあるウィジェットからテキストやウェブページを構成するh3などのパーツをドラッグアンドドロップすると簡単にプロトタイプを作ることができます。

例えば数分でこのようなウェブページのプロトタイプを作成することができます。

Justinmind上部にあるメニューでフォントやサイズなどを編集することができます。

作成したモックアップは右上にある「Simulate」をクリックすることで試しに動かすことができます。

また、モックアップを共有するには「Share」をクリックしてください。

以下のような画面が表示されたら共有完了です。

Justinmindの特徴

モックアップを作成できるサービスは他にも多くありますが、保存や共有するためには有償のものが多いです。Jusrtinmindは無料でも保存や共有ができる点が特徴です。

Justinmindの価格

無料でもお使いいただくことができますが、有料版ではPDF出力などの機能が使えるようになります。「Professional」は年間払いで228ドル/1年間 「Enterprise」は年間払いで468ドル/1年間です。月額払いも利用できますが、年間払いで支払うことで35%の節約ができます！

Justinmindのサイト情報

URL：https://www.justinmind.com/

運営会社：justinmind