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

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

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

Free prototyping tool for web & mobile apps – Justinmind

Design Systems Keep consistency in your Style Guides, UI component libraries, interactions, templates and other deliverables. Share your assets with design teams, business analysts and developers.

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

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

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

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

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

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

Rectangleが入りました。

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

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

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

Main menu options & settings in Justinmind prototyping tool

This article lists all operations from the main menu. Justinmind – settings include references, services and quit. Note that this item is for Mac users only File – settings related to the handling of Justinmind prototypes (open, save, close, export, import etc.)

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

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

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

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

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

保護猫カフェ駒猫

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

コメント

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