企画・デザイン

ウェブページやアプリのプロトタイプが無料で作れる「Justinmind」

投稿日:

作るのが大変なモックアップですがどのようなソフトを用いてモックアップを作成していますか?Justinmindを使えば無料でウェブサイトやアプリなどのモックアップを作成することができます!ここではJustinmindのインストールや使い方についてご説明します!

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

  • Windows・Macでプロトタイプを作ることができる
  • 誰でも無料で簡単に利用することができる

使い方

Googleで「Justinmind」と検索してください。検索結果に「Justinmind: Free prototyping tool to design web & mobile apps」というページがありますのでクリックしてください。

Justinmindの公式ページが表示されたら「DOWNLOAD FREE」というボタンがありますのでクリックしてください。

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

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

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

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

ログインが完了するとビギナーモードかエキスパートモードかを選ぶ画面が表示されます。自分のレベルに合わせて選択してください。ここではビギナーモードを選択しました。

 

Justinmindのホーム画面が表示されます。Newのところにある「Create a New Prototype」をクリックしてください。

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

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

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

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

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

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

作成したプロトタイプは右上にある「Simulate」をクリックすることで試しに利用することができます。

プロトタイプを共有するには「Share」をクリックしてください。

このような画面が表示されたら共有は完了しています。

解説動画(YouTube)

特徴

プロトタイプを作れるサービスは多くあり「STUDIO」というサービスでもプロトタイプを作成することができますが少し作るのが難しいサービスが多いのが現状です。しかし、Jusrtinmindは無料で使いやすく設計されたソフトでプロトタイプを作成することができます!

価格

有料ライセンスは主に2種類あり「Professional」は年間払いで228ドル/1年間 「Enterprise」は年間払いで468ドル/1年間です。月額払いも利用できますが、年間払いで支払うことで35%の節約ができます!

サイト情報

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

運営会社:justinmind

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

Copyright© WebCli , 2018 All Rights Reserved.