これはデザイナーのみならず導入必須のソフトウェアと言えそうだ。

Webサイトを作る際には、モックアップが必要になる。それをベースにして「ここをこうしよう」「次はどこに遷移させよう」といった議論が可能になる。頭の中だけではイメージがはっきりせず、意見も出しづらい。

Picture 50.png

ドラッグアンドドロップでモックアップを作成できる

 

そんなモックアップを作成しようと思ったら、紙やHTMLオーソライズソフトウェア、画像編集ソフトウェアを使うことが多かった。だが画像編集ソフトウェアではチェックボックスやテキストボックスが作りづらい、HTMLオーソライズソフトウェアではデザインの微調整が面倒、紙では重ね書きしづらい…とそれぞれに欠点があった。そこでこれを導入してみよう。

今回紹介するオープンソース・ソフトウェアはPencil、Firefoxアドオンとして動作するモックアップ作成ソフトウェアだ。

個人的にはモックアップの作成にBalsamiq Mockupsを使っている。これは手書き風のポップな画面を作るのにはぴったりだ。そしてPencilはちょっと正確な画面を作るのに適している。何よりオープンソースであり、無償だ(Balsamiq Mockupsは有償)。

Picture 52.png

画像としてエクスポート可能

 

PencilはFirefoxアドオンとして動作し、専用のモックアップ作成ウィンドウを立ち上げて利用する。テキストや画像、各種フォームオブジェクトが予め登録されているので、ドラッグアンドドロップで配置して文字を編集するだけで簡単にモックアップが作成できてしまう。

特にWeb画面に特化しているわけではなく、Windows GUI向けのオブジェクトや、Gtkオブジェクトなどが登録されている。作成した画面は独自形式で保存したり、PNGで書き出すことができる。

ちょっと嬉しいのはタブで切り替えて画面を同時に作成できる点だろう(Balsamiq Mockupsでは一つしか作成できないので)。日本語も問題なく利用できるPencilはWebデザイナ、開発者とも必須のソフトウェアだ。

 

via Mozilla Announces Best New Firefox 3 Extensions [ReadWriteWeb]

Pencil :: Firefox Add-ons

 https://addons.mozilla.org/en-US/firefox/addon/8487