menu
書いてる野郎
orebike@gmail.com
Balsamiq Mockupsは手書き風のモックアップ画像をつくることができます。
手書き風+プリセットの部品が決まっているVisioと言えば分かりやすいでしょうか。
いろいろなプラットフォームがあるみたいですけど自分はDeskTopバージョンを使ってみている。AIRで実装されているのでメジャーなOSならほぼどこでも動く
適当に10分ぐらいで↓みたいな画像が作れるようになる。フリーハンドのツールがほしい
手書き風のUIを作れるのだから手書き風日本語フォントを使いたくなるのが普通ってことでやってみた。環境はWindows7
公式サイトを見るとMockups Documentation | Balsamiqこのように若干の設定変更を許容しているようなのでここで内部で使われるフォントをまるごと変更してみる
まず
C:\Documents and Settings\<yourusername>\AppData\Roaming\BalsamiqMockupsForDesktop.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1\Local Store
というディレクトリを見つける。普通では見つからないので、コントロールパネルのフォルダーオプションの表示タブから、
隠しファイル、隠しフォルダー、および隠しドライブを表示する
にちぇっくをして↑のフォルダを表示できるようにしておく必要がある
次に手書き風フォントを手に入れる。これは最近ではフリーでもいくつか出回っているのでとってくる。参考までにリンクを張っておく
フォントをインストール。
そしてそのフォント名を下記のようにテキストファイルにして先程のディレクトリの中にファイル名BalsamiqMockups.cfgとして保存する
あくあフォントならば↓のように
<config> <fontFace>あくあPフォント</fontFace> </config>
みかちゃんフォントなら↓のように
<config> <fontFace>みかちゃん</fontFace> </config>
する。自分の環境では文字コードはUTF-8で改行コードはLFで保存したらうまくいった。 これでBalsamiq Mockupsを起動すれば指定した手書き風フォントが使えるようになる。
Viewオプションの中の
use system fonts
はオフにする。
ここらへん参考 Balsamiq Mockups Font FAQ | Balsamiq
まず↑と同様に手書き風の日本語フォントを取ってきてインストールする。
使ってみて気になった部分
現行バージョン(2011-01現在)では複数ページの管理ができず、1ページ1ファイルとして保存される。つまり複数ページをまとめて管理するプロジェクト管理ができない。 しかしこの制限に対する回答が公式のチュートリアルに書かれていた。
Working with Projects in Mockups for Desktop | Balsamiq
カンタンに言うとプロジェクトごとにフォルダを作って管理するといいよという話・・・たぶん後々のバージョンアップでこのディレクトリ構造をパースするような機能が追加されるのだろうと睨む
プリセットだけでないオリジナルのシンボルとかはMockups To Go - A user-contributed collection of ready-to-use UI components and design patterns built using Balsamiq Mockups.ここからダウンロードできるようになっている。
こいつをUI Libraryへ追加して常に使い回したい部品は使っていきたいのだがそのやり方がよく分からなかった。結論から言うと現行バージョン(2011-01現在)ではできないっぽい。
その代わり編集中のファイルが存在するディレクトリに
assets
という名前のディレクトリがあるとその中にあるbmmlファイルをライブラリとして読み込んでくれて、Project assetsというフィルタから選ぶことができるようになる。