members

members

アプリUIデザインで使っているツールまとめ

Tweet

おつかれさまです。色々なプロトタイピングツールを使ってみたいなと思っていて、最近ProtoPieを衝動買い(年契約)しました、メンバーズの宮町です。

以前「ノンプログラミングでIoTと連携できるプロトタイピングツール『Noodl』の紹介」をしましたが、今回はモバイルアプリのUIデザインにおいて現在使用しているツールをご紹介します。

 

【使用ツール紹介】

1.Sketch

主な用途:UI作成

アプリのUI作成全般で使用しています。Figma/XDが盛り上がっていますが、Sketchもかなり高頻度でアップデートがかかって機能が更新されています。また、豊富なプラグインがあり、欲しいと思った機能は検索するとだいたい存在します。Sketch Mirrorを入れれば、簡単に実機での確認が可能です。

 

2.Zeplin

主な用途:デザインの納品、開発への共有

完成した画面のUIはZeplinを通じて納品する事で、Sketchを持っていない人でもマージンやカラー、テキストスタイルの確認が簡単にできるようになっています。使用するカラーやフォントスタイルなどを登録できるので、デザインの指示書がいらないです。修正が必要な箇所や開発からの質問も、デザイン上に直接コメントをつけられるようになっています。バージョン管理機能もあります。

 

3.InVISION

主な用途:遷移の確認

プラグイン「Craft」を使用してSketchやPhotoshopから画面遷移を作成後に簡単にアップできます。モード切り替えでマージン計ったりコメントつけられたりとZeplinと同様の機能もあります。また、現状Sketchが主なのでInVision Studioは使用していません。

 

4.Adobe Illustrator / After Effects (+Bodymovin)

主な用途:アイコン・イラスト / アニメーション制作

イラストレーターはアイコンやイラスト制作、アフターエフェクトはアプリ内に組み込むアニメーション制作後にBodymovinというプラグインを使用してJSONファイルに書き出して実装してもらっています。書き出しに対応していないエフェクトもあるので、こちらで確認してから作成することをお勧めします。

書き出したJSONファイルはLottie Filesで確認でき、iOS, Androidアプリもあるのですぐに実機で見れるのは助かります。

 

【おすすめSketchプラグイン】

便利なプラグインがたくさんありますが、特に活躍してくれているものを2つ紹介します。(画面数が多く、同じファイル内に複数のページが入っていてデータが肥大化している際に特に有効なもの)

 

・ Find and Replace Text

ファイル内のテキストを検索して一括置換できます。一つのファイル内にページ分けされたたくさんの画面UIが入っているため、一括で検索置換できるのが大変助かります。ちゃんと置換する時のスコープや”Aa”一致など、オプションの選択もできるところがありがたいです。

text replace image

Symbol Instance Locator

ファイル内で、指定したシンボルの所在地を探してリスト化してくれます。一括選択できますので、編集や入れ替えが一瞬でできます。これも画面数が多いファイルでちまちま選択しなくて済むので、かなり時間削減に貢献してくれています。ただ、コンポーネント数が多くなりすぎると読み込みに少々時間がかかります。Automateにも同様の機能があるのでそちらで代用もできます。(現状ショートカットが楽なのでSymbol Instance Locatorを使用していますが、Runnerの様なランチャーが使えればAutomateを使いたい)

symbol instance locator image

 

 

 

コラム執筆

miyamachi shiori

宮町 志織(みやまち しおり)

2018年4月入社。

ECサイトの運用を経て、現在はモバイルアプリのUIデザイナーとして日々勉強中。