【初心者でも分かる!】デザインツールJustinmindの使い方

初心者向けにデザインツールJustinmindの使い方について解説しています。Justinmindを登録するところから実際に作ってみる流れが分かるはずです。ワイヤーフレームやプロトタイプを作成する上で役に立つはずです!

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

初心者の方でも分かるようにJustinmindの使い方について解説している記事です。

サイトのワイヤーフレームやプロトタイプを作成する上で非常に便利なツールなので、ぜひ活用してみてください。

 

なお本記事は、TechAcademyのUI/UXデザインオンラインブートキャンプの内容をもとに紹介しています。

 

Justinmindとは

Justinmindは、Windows・Mac両方に対応したデザイン作成デスクトップアプリケーションです。チュートリアルが丁寧で使いやすく、また無料でも充分に豊富な機能を利用することができるようになっています。ブラウザで実際の動作を確認することも可能です。

 

Justinmindの使い方

まず、以下のリンクにアクセスします。

http://www.justinmind.com/

「Download Free」をクリックします。

jim_p_1

アカウントの作成画面が表示されるので、メールアドレスを入力しパスワードを設定します。

jim_p_2

ログイン後、以下の画面の2番から本体のダウンロードを行うことができます。ダウンロード後、Win・Macそれぞれの手順に従ってインストールを行います。

jim_p_3

 

[PR] スマホアプリの開発で挫折しない学習方法を動画で公開中

Justinmindで何か作ってみる

ファイルの新規作成と基本操作

実際にプロトタイプを作成してみます。
Justinmindを起動すると以下の画面が表示されます。今回は「New」を選択します。

jim_p_4

デバイスの一覧が表示されます。今回は「Web」を選択します。

jim_p_5

作成するファイルの状態は全く何も編集されていない真っ白なスクリーンの他に、サンプルなど基本の形が出来上がっているものも選択することができます。今回はサンプルの中から「Responsive」を選択します。

jim_p_6

作業画面が表示されます。

jim_p_7

画面の拡大・縮小はこのメニューから行うことができます。

jim_p_8

表示されている画像やテキストなどをクリックすると、その部分を選択した状態になります。各要素はドラッグにより大きさの変更や移動を行うことができます。

jim_p_9

また、編集したい箇所を選択し右クリックするとコピーや削除などの操作が可能です。

jim_p_10

今回はスクリーンを新しくひとつ作成し、現在表示されているスクリーンからリンクを貼るまでの作業を行います。

「Screens」のメニューから「+」のアイコンをクリックします。

jim_p_11

スクリーンの名前を設定します。ここでは「Title2」としています。

jim_p_12

左の「Widgets」メニューから各要素を追加していきます。
使用したいものをスクリーン内にドラッグ&ドロップで移動します。

jim_p_13

設置したものはドラッグで拡大・縮小・移動することができます。
また、テキストに関するステンシルの場合はダブルクリックで文章を編集することができます。

jim_p_14

「Widgets」メニューにある素材の他に、PCから画像ファイルをドラッグ&ドロップでスクリーン内に入れることも可能です。

jim_p_15

ここで設置した画像もドラッグで自由に編集することができます。

jim_p_16

また、各要素を選択した状態で「Properties」メニューを見ると、その要素に設定されているIDなどの詳細が確認できます。テキストの編集や画像の大きさの編集(px値などを直接入力できます)はここからでも行うことが可能です。

jim_p_17

最初のシートの編集に戻りたい時は、「Screens」メニューから該当のシート名をクリックします。(このサンプルでは「Desktop Layout」という名称になっています)

jim_p_18

次に、この最初のスクリーンから先ほど作成した「Title2」スクリーンへのリンクを作成してみます。
リンクを貼りたい箇所をクリックで選択します。

jim_p_19

下の「Events」メニューから「Add Event」をクリックします。

jim_p_20

アクションを行う条件と、その際の動作を選択します。ここでは「on click」により「link to」が行われるように設定します。

jim_p_21

リンク先として選択できるスクリーンの一覧が表示されます。
移動先として指定したいスクリーン(ここではTitle2)を選択し、必要な場合は下から効果を選択して右下の「OK」をクリックすれば完了です。

jim_p_22

 

プレビューを使用する

右上の「Simulate」ボタンをクリックすると、ブラウザでプロトタイプをプレビューします。リンクの状態もこの時確認することができます。

jim_p_23

 

保存とエクスポート

上メニューの「File」メニューから「Save」を選択すると現在の状態が保存されます。

jim_p_24

また、「File」メニューからはHTMLやPNGなどの形式でエクスポートすることも可能です。(※有料版あるいは無料体験期間のみ)

jim_p_25

 

プロジェクトの共有

「Share」ボタンをクリックし、アカウントのメールアドレスとパスワードを入力すると作成したものを共有することができます。

jim_p_23-1

 

以上、Justinmindについて紹介してきました。今回はWebのプロトタイプを作成しましたが、もちろんタブレットやスマホアプリのプロトタイプも作成できます。

ぜひWebサービス・アプリ開発に役立ててみてください!

[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。