Balsamiq Mockups

Balsamiq Mockups

手書き風UIモックアップ画像作成ツール

Balsamiq Mockupsは手書き風のモックアップ画像をつくることができます。

手書き風+プリセットの部品が決まっているVisioと言えば分かりやすいでしょうか。

いろいろなプラットフォームがあるみたいですけど自分はDeskTopバージョンを使ってみている。AIRで実装されているのでメジャーなOSならほぼどこでも動く

適当に10分ぐらいで↓みたいな画像が作れるようになる。フリーハンドのツールがほしい

Good

  • 手書き風のUI!これがなかなかいい味を出している。
  • 必要なプリセットがほぼ揃っている
  • マルチプラットフォームで動く

手書き風日本語フォントを使うWindows7編

手書き風の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

はオフにする。

手書き風日本語フォントを使うMac OSX Lion編

ここらへん参考 Balsamiq Mockups Font FAQ | Balsamiq

まず↑と同様に手書き風の日本語フォントを取ってきてインストールする。

メモ

使ってみて気になった部分

複数ページの管理

現行バージョン(2011-01現在)では複数ページの管理ができず、1ページ1ファイルとして保存される。つまり複数ページをまとめて管理するプロジェクト管理ができない。 しかしこの制限に対する回答が公式のチュートリアルに書かれていた。

Working with Projects in Mockups for Desktop | Balsamiq

カンタンに言うとプロジェクトごとにフォルダを作って管理するといいよという話・・・たぶん後々のバージョンアップでこのディレクトリ構造をパースするような機能が追加されるのだろうと睨む

UI Libraryへのオリジナルシンボルの追加

プリセットだけでないオリジナルのシンボルとかは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というフィルタから選ぶことができるようになる。

balsamiq_mockups.txt · 最終更新: 2012-09-04 11:04 by ore