FirefoxでGUIを使ったプロトタイプを作成できるアドオン「Pencil Project」

Webサイト製作時や、製作依頼時、イメージを伝えるのは基本的なことです。

このような表現は、手書きでもいいのですが、より実物に近いイメージで表現するためには雛形となるサンプルHTMLを書いたり、その他のローカルツールなどを使うほうがいいですね。


いわゆるモックアップや、プロトタイプというようなものですが、この作業をFirefoxで行うことができるおもしろいアドオンがあります。

「Pencil Project」は、通常、ローカルの各種ドローツールなどで製作することが多いモックアップ作成作業を、Firefoxから起動して製作・イメージ保存をすることができるアドオンです。

インストール後、ツール→[Pencil Sketching]を選択すると、別ウィンドウにてツールが起動します。





画面は、左側にパーツ群、右側にキャンバスが表示され、左の各GUIパーツをキャンバスにドラッグすることで配置し、それぞれのパーツはダブルクリックでテキストやラベルを編集することができます。





■[New Page]で新規作成





■カラーやフォントの個別設定画面





また、パーツ上で右クリックすればプロパティの編集が可能で、カラーやフォントなどもかなり自由に設定することができます。





パーツはプレーンテキストからイメージ、各種ボタン、スクロールバー、プログレスバーまで用意されており、基本的なWebサイトで表示されるようなGUIはほぼ揃っています。

こうして作成したプロトタイプはPNGイメージとして保存することができます。



■各パーツ配置例





■PNG保存








口頭や手書きで伝えながらサイトを作るのはロスが多く、イメージ通りに事が運ばないことも多いですが、こうしたイメージを受け渡しすることによって多少はスムーズに進むかもしれませんね。

英語版ですが、ドラッグ＆ドロップなど直感的に使えるツールですので、少し触ればすぐに使いこなすことができると思います。

サイト管理者や、発注者の方はインストールしておくと便利なツールです。


ダウンロード：Pencil


＜関連記事＞


■Firefoxに"Dreamweaver"ライクなHTMLエディタをビルトインするアドオン「Codetch」

■Mozillaが源流のHTMLエディタ「KompoZer-0.7.10」が公開されました。


＜Ads＞

インターネットFX取引手数料無料ならマネーパートナーズ

１万円からのＦＸ取引は、伊藤忠グループ・ＦＸプライム

トレイダーズ証券の外国為替取引

有機野菜の宅配　Ｏｉｓｉｘおためしセット