JUSTINMINDでカッコいいプロトタイプを作る

研究
この記事は約2分で読めます。

この記事は1年前の記事です。当時の情報、理解に基づいておりますのでご留意ください

はじめに

拙稿投げていながら、もうちょっと格好いいペライチ作れないだろうか?と思いググってみました。

Free prototyping tool for web & mobile apps - Justinmind
Easily create web and mobile app prototypes and wireframes with Justinmind UI prototyping tool. It's FREE. Start prototyping now!

早速アカウント作成のうえ、ダウンロードして試してみました。

試してみましょう

まず作りたいプロトタイプのサイズを聞かれます。
images、Sketchなどからもインポートできる模様です。
Web 1280で作ってみました。

左上のメニューからオブジェクトを配置できます。

画像ファイルの扱い方を聞かれます。
include image in prototype で試してみます。

カエラちゃんの画像が大きかったwアスペクト比をロックしたうえ、サイズを調整します。

四角いオブジェクトを挿入してみます。

Rectangleが入りました。

同様にElipseも入れて、ペライチ的なページができました!
(出演にゃんこ様:カエラちゃん、ふたくん@保護猫カフェ駒猫さん)

なおHTMLで出力できるようです。
ここまで使ってみて「フローチャートにも使えないかな?」とググると

ありました。UIKitです。
ただ懇切丁寧なチュートリアルを表示してくれたのはいいけど、英語なんだよなぁ…
以前はPleiadesプラグインで日本語化できたようなんだけど、たぶんバージョンアップでプラットフォームを変えたのでできなくなった模様。

Main menu options & settings in Justinmind prototyping tool
Everything you need to know about Justinmind main menu, options and settings. Take full control of the prototyping tool interface.

たぶん有料ユーザメニューですね。フローチャートに戻りましょう。

最初は見えないんですが、このMore librariesをクリックすると

利用するライブラリを選択できます。便利。

勿論無料プランではある程度の制限はあるようですが、モックアップとかフロー、図解程度でいい我々ならば十二分に使えそうです。

なお出演いただいたにゃんこ様のカエラちゃんとふたくんは、保護猫カフェ駒猫さんで会えます❤️(2020年9月現在)

保護猫カフェ駒猫
東京都世田谷区駒沢公園西口目の前にある里親募集型の保護猫カフェです。平日限定フリータイムサービスはじめました。

コメント

タイトルとURLをコピーしました