iPhoneアプリのモックを簡単に描く方法 at ミネルヴァの梟は黄昏とともに飛び始める

iPhoneアプリのモックを簡単に描く方法

without comments

iPhoneアプリのモックデザインって何で描くの？とよく聞かれるので、ブログにまとめる事にしました。

私がよく使うのは、Balsamiq Mockupsというアプリです。Adobe Airでラクラクインストールできるのでオススメです。

なぜこれが良いと言うかというと、線が手書き風だということ。我らが、Joel Spolskyはこう言っている。

プログラマでない人間に90%まずいユーザインタフェースを持った画面を見せたなら、彼らはプログラムが90%まずいと思う。
100%素晴らしいユーザインタフェースの画面をプログラマでない人間に見せると、彼らはプログラムがほとんど完成していると思う。

見た目がクールでないUIの価値が分かったら今すぐBalsamiq Mockupsをインストールだ！

このアプリに１つ問題があるとしたら、それは日本語入力を受け付けないという事です。これは単にフォントの問題なので、手書き風フォントを突っ込んでやればokです。

日本語の手書きフォントと言えば、「あくあフォント」。まずは下の２ファイルをダウンロードします。
・あくあフォント
・あくあPフォント

ダウンロードしたファイルは.exeなので、一見Windowsでしか利用できないように見えますが、中身はLHA形式のアーカイブなのでLHA対応のアーカイバがあれば圧縮データを取り出す事ができます。

MacやLinuxでの解答手順は以下の通り。

まず、SourceForgeからLHa for UNIXをダウンロードします。

$ tar zxvf lha-1.14i-ac20050924p1.tar.gz
$ cd lha-1.14i-ac20050924p1
$ ./configure --prefix=$HOME/bin/lha
$ make
$ make install

適当に$HOME/bin/lhaへパスを通します。（.bash_profile辺りに以下の行を追加するか、直接実行する）
> export PATH=${HOME}/bin/lha/bin:${PATH}

次に、ファイルの解凍。

$ lha x aqua2_7.exe
aqua2_7/aquafont.ttf	- Melted   :  ooooooooooooooooooooooooooooo
aqua2_7/readme.txt	- Melted   :  o
$ lha x aquap2_5.exe
aquap2_5/aqua_pfont.ttf	- Melted   :  ooooooooooooooooooooooooooooo
aquap2_5/readme.txt	- Melted   :  o

◆ココからWindows/Mac共通作業。

ttfファイルが取り出せたら、ダブルクリックして[インストール]を押します。

OSに応じて、以下の内容のBalsamiqMockups.cfgというファイルを以下のいずれかの場所に新規作成します。

<config>
    <fontFace>あくあフォント</fontFace>
</config>

- XP
C:¥Documents and Settings¥Application Data¥BalsamiqMockupsForDesktop.#numbers#¥Local Store

- Vista
C:¥Users¥AppData¥Roaming¥BalsamiqMockupsForDesktop.#numbers#¥Local Store

- Linux
~/.appdata/BalsamiqMockupsForDesktop.#numbers#/Local Store

- Mac OSX
/Library/Preferences/BalsamiqMockupsForDesktop.#numbers#/Local Store

これで、Balsamiq Mockupsを再起動すると日本語が使えるようになります。

Happy Coding!

Be Sociable, Share!