目次
Balsamiq Mocksupsとは？
Balsamiq Mockups とは、ITソリューションやWebサイトの画面デザインのモックアップを素早く簡単に作成することを目的に開発された専用のデスクトップアプリケーションです。私はMacユーザなのでそれ以外のバージョンは使ったことが無いのですが、WindowsとLinuxのバージョンもあるようです。今回の投稿、Balsamiq Mockups の設定変更ネタなのですが、全てMac版ということをご了承ください・・・
Balsamiq Mockups ダウンロードサイトはこちら：
モックアップの作成であれば、ExcelやPowerPoint、もしくは簡易的なHTMLオーサリングツール等でも作成は可能なのですが、このBalsamic Mockupsで作成できるモックアップは、そういったツールで作成するものとは一線を画するもので、特に手描きに近いモックアップを作成できることが大きな特徴です。
※AppStoreのサンプル。Mockups To Go (後述) より拝借しました。
手書き風のモックアップが重要な理由
ITソリューションのモックアップを作成する上で「手書き」もしくは「手書き風」ということは想像以上に重要なことです。モックアップの段階でビビットなフォントやライン・シェイプを使うのではなく、柔らかな（抽象的な）なそれらを使う理由は、モックアップの段階で細部のデザインにまで意識が行ってしまうことを防ぐためです。
モックアップを作成する最大の目的は、これから作成するソリューションやWebサイトの「ざっくりとした」イメージを掴むことであり、より本質的にはソリューションやWebサイトデの「幹」を見極めることです。この段階で細かいフォントの種類や大きさといった「枝葉」に意識が行ってしまうと、モックアップを作成する本来の目的を見失ってしまいます。まさに木を見て森を見ずの状態になってしまうわけです。
そういった細かいことに気が行ってしまわないよう、あえて「抽象的な表現」にしておくことで、モックアップでのレビューにおける本質にフォーカスできる状態を作り出すことができます。
そういった意味でも、モックアップで手書き風のデザインができるというのは非常に意味のあることなのです。
手書き風のフォントをインストール・設定する
Balsqmiq Mockups はデフォルトでも日本語を使うことは可能なのですが、使用されるフォントは明朝体のシステムフォント。これだとやはり「手書き感」が失われてしまいます。何より画面に配置されているパーツとアルファベットは手書き風なのに、日本語フォントだけが、ビビットな明朝体のシステムフォントだとかなりバランスが悪くなってしまいます。
※デフォルトだと明朝体のシステムフォントが適用される。
なのでBalsamiq Mockups を使うときは日本語の手書き風フォントをインストールし、それをBalsamiq Mockups で使用できるように設定しましょう。
私は手書き風としてこちらの「瀬戸フォント」を使っています。40過ぎたヒゲのおじさんが使うにはちょっと勇気のいるフォントなのですが、システムフォントをそのまま使うよりもよっぽどいいでしょう(笑)
手順は以下のとおりです。
①こちらのサイトから、瀬戸フォントをダウンロード・インストールする。
②こちらのサイトから、BalsamiqMockups.cfgのサンプルファイルをダウンロードする。
③テキストエディタでBalsamiqMockups.cfgを開き、フォントタグの部分をsetoに修正する。
④Balsamiq Mockups を起動して、About Balsamic Mockups ウインドウを開く。
⑤Open Local Store Folder のリンク文字をクリックし、Configファイルを保存するディレクトリを開く。
⑥上記の③で編集したBalsamiqMockups.cfgを⑤で開いたディレクトリに保存する。
⑦Balsamiq Mockups を再起動する。
フォント設定が正しく反映されると、以下のスクリーンキャプチャのようにフォントが手書き風のものに変更されます。
優れたモックアップテンプレートをインストールする
Mockups to Go には、優れたモックアップテンプレートが無料で公開されており、このテンプレートをダウンロードして自分の資産として使用することで、高品質なモックアップをより高速につくることができます。Balsamiq to Go からテンプレートをダウンロードし、自分の資産として登録する手順は以下のとおりです。
①プロジェクトフォルダを任意の場所に作成する。
②作成したプロジェクトフォルダの配下にAssetsフォルダを作成する。
②Mockups to Go のギャラリーから、必要なテンプレートを探す。
→ Mockups To Go : ghttps://mockupstogo.mybalsamiq.com/projects
②テンプレートのBMMLファイルを②で作成したAssetsフォルダにダウンロードする。
⑤プロジェクトフォルダ配下に新しいモックアップファイルを作成する。
スクリーンキャプチャの例では、Dropboxフォルダ直下にBalsamiq Mockupsというフォルダを作成し、その配下に Assets そして Projects という２つのフォルダがあります。Projects フォルダ配下の直下には更にプロジェクト毎のフォルダがあり、その配下に各モックアップファイルが保存されています。また、同一の階層に Assets が作成されており、その配下にEcommerce Product Description Page.bmmlとiPhone Facebook Connect.bmmlという２つのテンプレートファイルが保存されています。
テンプレートファイルも通常のモックアップファイルも同じ拡張子なのでわかりづらいのですが、ファイルが配置される場所によってモックアップファイルとして扱われるか、テンプレートファイルとして扱われるかが変わります。
プロジェクト毎に作成するフォルダ配下のAssetsフォルダにbmmlというファイルが保存されると、Balsamiq Mockups のパネルコントロールにProject Assetsというタブが表示され、そのタブをクリックすると Projects/ProjectName/Assets 配下に登録したテンプレートが表示されます。
プロジェクト横断的なテンプレートの共有
またテンプレートは、プロジェクト別に登録する方法と、アカウントレベル・・・つまりプロジェクト横断的に登録する方法の２通りがあります。アカウントレベルでAssetsフォルダを制御するには先の BalsamiqMockups.cfg を編集する必要があります。 
独自のモックアップテンプレートを使う
特定のプロジェクトのみで使用するモックアップパーツ、例えば全ての画面がページで共通のロゴやヘッダ、コントロール等は、それらを部品化して特定のプロジェクト内で使いまわすことができます。
①部品化したいオブジェクトを選択して、⌘Gでグループ化する。
②インスペクタにNameプロパティが表示されるので、適切な名前を付ける。
③Nameプロパティの横にあるConvertToSymbolボタンをクリックする。
④Project Assets タブの配下にテンプレート登録される。
参考図書
ウォーターフォールアプローチと異なり、プロトタイピングモデルを体系的に学ぶ機会は少ないと思います。私もFileMakerの開発を本格的に始めて改めてプロトタイピングモデルを体系的に勉強したくなり、手にとったのが以下の書籍たちです。洋書の翻訳書ということもあり文量はかなりのものなのですが、「何となくこんな感じ？」で進めていたプロトタイピングモデルをより体系的に学ぶことができます。
また昨今のトレンドであるアジャイルの源流ともなっている手法なので、アジャイルと同時に勉強されるのもお勧めです。
