企画・デザイン

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

投稿日:2018年11月4日

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

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

このアプリで仕事が効率化できる理由

  • Windows・Macでモックアップを作成できる

使い方

インストール

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

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

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

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

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

モックアップを作成する

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

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

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

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

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

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

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

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

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

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

特徴

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

価格

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

サイト情報

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

運営会社:justinmind

Justinmindの評判(口コミ)

平均:  
 0 件
口コミを書く
1
2
3
4
5
送信
     
キャンセル

口コミを書く

-企画・デザイン
-, , , , , ,

Copyright© WebCli , 2019 All Rights Reserved.