Posts tagged Web

Balsamiq Mockups For Desktop

WEBページのデザイン・構成を考えたり、誰かに見せたい時にラフスケッチされる方も多いと思う。
これまで私はあまり絵が得意でないので、ざっとHTMLコーディングしていた。
しかしもう少し楽にならないものかと考えてモックアップツールを探して見つけたのが79ドルのこれ。

WEBページに必要な手書きパーツが多く用意されていて、ドラッグしていくだけ。
サイズを広げたりするのも自由自在。
基本的なパーツはダブルクリックで入力エリアが出てくるのでタイトルを設定したりもできる。
テーブルパーツでは下記のようにカンマ、改行を入れることでデータを入れることができる。

ボタンやリンクパーツには遷移先ページを設定することができ、全画面プレビュー時に動かすことができる。
これはちょっとしてプレゼンなんかで使えるかもしれない。
他にも作成したモックアップからFlexアプリケーションを生成する仕組みもある。（ここのところはもう少し詳しくアップしたい）

また、他のユーザが作成したパーツ群をサイトからダウンロードして追加することもできる。
残念なのはコンポーネントとして恒久的に取り込めるわけではなく、
ダウンロードしたモックアップからパーツをコピペする必要があること。
ここは改善していただけるとありがたい。

ソフトウェアの説明はここまでとして、デフォルトの状態だと手書きフォントが英字しか対応していない。
日本語でも手書き風にしたいのであれば、手書きフォントをインストールして設定する必要がある。
手書きフォントは「あくあフォント」が有名だが、私は「ふい字」を使わせていただいている。（フリーで商用利用も可とのこと、ありがとうございます。）
フォントのインストールの説明は省略して、Balsamiq Mockupsへの設定方法は下記の通り。

#Local Store以下が存在しない場合は作成する
~/Library/Preferences/BalsamiqMockupsForDesktop.ランダム文字列/Local\ Store/BalsamiqMockups.cfg

<config>
    <!--フォント名-->
    <fontFace>HuiFontP</fontFace>
</config>