bookslope blog

「Web情報アーキテクチャ（IA）とツール」の連載第二回を公開されました。

• 第2回　ワイヤーフレームと設計ツール

これを書き終えたとき、「IxDA Discussion」を見ていたら面白いツールが紹介されていました。

• Pencil Project

これは、「open-source wireframing Firefox add-on」として紹介されていて、下記のリンクから見ることができます。

• IxDA Discussion: Pencil: open-source wireframing Firefox add-on

インストールしてみるとわかりますが、Firefoxのadd-onツールです。

つまり、Firefox上で簡単なGUIを作成することができるツールです。しかも無料です (って別に営業してるわけではないけど)。

メニューはもちろん英語なんですが、中のドキュメントとしては日本語も使えます (キャプチャを撮ってみたのですが、見難いですね……)。

使い方は「User Guides」に詳しく掲載されているので参照されたし。

• User Guides and Screencasts – Pencil Project

オリジナルファイルでしか保存できませんが、PNG形式に書き出すことができます。これまでにも同じようなもので、Microsoft Officeのオンライン版などもありましたが、これほど手軽で簡単に作成できるツールはなかなかなかったんじゃないでしょうか。

Visioなどでいう「ステンシル」が「Shape Collection」だと思うのですが、これがオンライン上で常時アップデートされればかなり協力なツールになり得るなあと思ってしまいます。

スクリーンショットで解説があったので、引用しておきます。

• Screenshots – Pencil Project

1. Creating complex prototypes
   Creating complex GUI prototype for a Windows desktop application
2. Property dialog
   Property Dialog provides access to all properties of a shape
3. Changing page properties
   Page Properties dialog with ability to choose another page as the background
4. Creating Pencil website mockup
   Pencil is using the create mockups for the Pencil project website!
5. On-screen text editing
   Onscreen text editing supports both plain texts and rich texts
6. Exporting to PNGs
   Pencil supports rasterizing the whole document into a set of PNG images

MacでもFirefox上で動くので、興味ある方は試してみては?