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

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

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

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

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

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

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

日本語の手書きフォントと言えば、「あくあフォント」。まずは下の2ファイルをダウンロードします。
あくあフォント
あくあ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!

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください