デザインツールに向かう前に使う――Firefox用プラグイン「Pencil」

Web制作に超便利！無料のプロトタイプ作成ツール

2008年10月23日 04時00分更新

文● 小橋川誠己／企画報道編集部

　本格的なWebデザインに取り掛かる前に作るプロトタイプ。特に受託サイトの制作やチームで制作する場合にはある程度きっちり作っておきたいものだが、「なかなかちょうどいい作成ツールがない」という人も少なくないのではないだろうか。

　FireworksやillustratorからVisio、PowerPointまで、プロトタイプの制作に使えるツールはいろいろあるが、今回は無償で使える便利な専用ツールを紹介しよう。それが、オープンソースの「Pencil」だ。Firefox 3のプラグインとして動作するものだが、実際の使い勝手としては独立したアプリケーションのように動く。


Pencilのメイン画面。左のギャラリーから、右のキャンバスにドラッグ＆ドロップで部品を配置していく

　使い方は簡単だ。インストールが済むと、Firefoxの[ツール]に[Pencil Sketching]という項目が追加される。Pencilの起動はここをクリックしよう。

　プロトタイプを作るための基本操作は、左側に並んでいるGUI部品を右側のキャンバスにドラッグ＆ドロップで配置するだけだ。Pencilにはあらかじめテキストやレクタングル、ボタンといったGUI部品が用意されている。最初はとりあえず必要な部品をどんどん適当に配置していけばいい。


左のギャラリーから配置したい部品を選んでそのままドラッグ＆ドロップ。キャンバスに部品が配置された

　配置した要素はマウス操作で拡大・縮小や移動ができ、テキストボックスやボタンなどの場合は、ダブルクリックで文字の入力・編集が可能。部品を選択して右クリック→[Properties]すると詳細な見た目の変更もできるので、ワイヤーフレームだけでなく、簡単なモックのデザインであればPencilだけでも作業が済む。


プロパティ画面。色やフォントなどの見た目を変更できる


画像を配置したり見た目を変更すればちょっとしたデザインもできる。ラジオボタンやチェックボックスのオン/オフ状態も変更可能