[iOS] イラストレーター×モックアップアプリで、簡単プロトタイピング(前編)


半澤です。
日曜日、半沢直樹が最終回でしたね。

今回は、POP(Prototyping on Paper)というiOSモック作成ソフトとIllustratorを使った、
カンタンに、かつ見栄えの良いモックアップ作成手法を紹介したいと思います。

準備物

POP(https://itunes.apple.com/jp/app/pop-prototyping-on-paper/id555647796?mt=8
Illustrator(CS4~)

紙でのモックアップではできない事

モックアップを作るには、当然、一番てっとり速いのは紙でつくって、それを撮影し、ユーザーに触ってもらうこと。

今回使用するPOPも本来はそのような使い方がメインで想定されています。

ただし、早く作れる!と思われがちな紙ベースのモックアップ作成には、意外に面倒な点が多いのも事実です。

・厳密なサイズ感を再現しようとすると、意外にホネが折れる。
・特にフォントサイズや文字数を厳密に再現しにくい
・汎用的なパーツを何度も書きなおさなくてはいけない。
 →タブバーを何度も書くのはかなりストレスフル
・微妙なニュアンスを再現しづらい

・受託案件の場合、客先に出しにくい

もちろん慣れの問題だったり、コピー機を駆使したりと方法は様々あると思いますが、
パソコンでの画像作成や企画書作成に慣れている方には、もしかしたら、今回紹介するやり方のほうが、
早く効率よく、かつキレイに作ることができるかもしれません。

1.まずはカンタンなモックアップイメージを作る

とはいえ、カンタンなUIの設計については、
紙で書くなりして、作業にとりかかる前のイメージは作るべきだと考えます。

紙で清書すると、それなりに時間がかかるので、
今回の場合はあくまでイメージを固める程度のメモで良いかと思います。

2.イラストレーターでモックアップ作成!

ここでのポイントは、Illustratorのアートボード機能(CS4以上)。
複数のアートボードを同じファイルで持つことができます。

01.まずIllustratorを立ち上げます


001

02.iphoneサイズのアートボードを複数枚作成


001

・iphone5以上の場合は、640×1136。
・iphone4S以下の場合は、640×960
ここでは、iphone5サイズで作成します。
アートボードの数はお好みで。

作成完了すると下記のようなカタチになります。

001

03.ガイドを作成

iPhoneのよく使うパーツに合わせてガイドを作成します。
まずは矩形ツールでエリアを分割します。

001

iPhoneアプリでよく使うパターンは、
上部のナビゲーションバーエリアと下部のタブバーエリア。
サイズの目安は下記の通り。

001

これら画像作成後、全部選択した後に、
表示>ガイド>ガイドを作成。

001

すると、作成した矩形がまるごとガイドになります。

001

さらにガイドのロックを解除することで、
ガイドを動かすことができるようになります。

001


001

ガイドを動かせるようにしたら、
下記のように、各アートボードにコピー&ペースト。

001

アートボードへのコピペができたら、ガイドをロックすることをお忘れなく。

001

これでどのアートボードでも、
同じサイズ感で作成することができます。

04.いよいよモックアップを作成!

ガイドが整ったら、ガイドにしたがって、
ワイヤーを作成していきます。

001

矩形がガイドにスッポリおさまるので、
紙のように厳密にサイズを計測しなくても、
非常に簡単にパーツを作ることができます。

001

こんな感じ。

ココでミソなのは、これら作成したパーツは、使い回しができること!
紙だとコピー機にかけるなどして、パーツを量産しますが、
イラレなら…

001


001

と同じような感じにどんどんコピーできます。

例えばタブバーやナビゲーションバー固定でUIを作成する場合、
基本パーツはそのままに、ちょこっとだけ改造すれば…

001

どんどん量産することができます。

※今回色をつけて作成してしまいましたが、
以下の様なワイヤーでもモチロンOKだと思います。
モックアップには十分です。

001

05.一気に書きだそう!

作成したものは、イラストレータで一気に書き出すことができます。

001

ファイルの種類をpngにして…

001

各アートボードの設定にチェックをいれて、枚数を指定するのみ。

001

解像度は72dpiを指定。

001

すぐに書きだされます。

001

すると作ったものがカンタンに、iphoneサイズで
カンプとして書きだされます。

これらデータはメールなりで、iPhoneに送信し、ダウンロードしてください。

次は作成した画像を使った、POPでのモックアップ作成方法を紹介します。
今日はここまで、続きは後編で。近日中に、紹介します。

この記事に対してコメントを書く