Webデザインに活用できるツール｢Pencil｣

皆さんの中にWebデザイナーやプランナー・ディレクター等
いわゆるディレクションや企画の立案にかかわっている方がいらっしゃいますか？

企画を練る中で時間のかかる作業の一つとして構成の検討があります。
ここでいう構成とは、画面デザインや色調、そして動きなど総合的な構成です。

私はもっぱらVisioやExcel、場合によってはPowerPoint等も利用します。

さて、こういった構成を検討する上で便利なツールを発見したのでご紹介します。

これは｢Pencil｣というFireFoxPluginです。
WindowsアプリケーションのUI設計やWebアプリケーションのUIを設計する際に
実際の画面オブジェクト（シェープ）を配置しながら検討することができます。

なお、作成中のデータも保存できますし、
完成したデータは画像ファイルとして出力することも可能で非常に高機能です。

では、紹介がてらインストール方法と簡単な利用方法についてご説明します。

まず、Mozillaプロジェクトの配布ページに行きます。
※もちろんブラウザはFireFoxで。

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

ページ上に｢Add to FireFox｣と書かれたボタンがありますのでクリックします。

次の画面に進むと、｢Accept and Install｣と書かれたボタンがありますので、また、クリックします。

すると、警告画面が表示されます。
内容をよく読み、問題がないと判断したら｢今すぐインストール｣をクリックします。

※表示された直後は｢インストール｣ボタンが有効化されず押せませんのでしばらく待ちましょう。

すると、画面が開きなおし対象プラグインのダウンロードとインストールが開始されます。
インストールが完了すると下記のような画面が表示されます。

ここでは指示に従い、FireFoxを再起動します。

再起動後、正常にインストールが完了していれば上記のような画面が表示されます。

ここまでの作業でPencilの導入は完了しました。

ここからは使い方を説明します。
まずは起動の仕方と基本的な操作を説明します。

起動方法はいたって単純で、FireFoxの｢ツール｣メニューをクリックし、
リストから｢Pencil sketching｣を選択します。

すると、｢Untitled Document* - Pencil｣という画面が開きます。
この画面が基本的な操作画面になります。
簡単に画面の説明を行うと、上部がメニュー表示部、画面左側がシェープ表示部（各種オブジェクト）、
そして、画面左側がドキュメント表示部（キャンパス）となります。

基本的な作業は、シェープ表示部から
画面を構成するのに必要なパーツをドキュメント表示部にドラッグし画面を構成します。

次に、いくつか設定や操作について細かい点の説明をしたいと思います。

まず、デフォルトで開いているキャンパス（Untitled Page）はサイズが小さいと思います。
このキャンパスのサイズを変更したい場合は、
キャンパスのタブ（ドキュメント表示部内の｢Untitled Page｣と書かれた部分）を右クリックします。

すると上図のようにリストメニューが表示されますので、
その中から｢properties｣があると思いますのでそれを選択します。

簡単に表示された画面の説明をします。

PageTitle
→　キャンパス（ページ）の名前を設定します
PageSize
→　キャンパス（ページ）大きさを設定します。
なお、｢Custom Size｣を選んだ場合は、任意のサイズを設定可能です。
Background
→　｢Background｣はキャンパス（ページ）が一枚の場合は設定できません。
この設定は、作成したキャンパスを新たに作成するページの背景に設定する場合に利用します。
ちなみに｢Dim Background｣にチェックを入れると、作成されたページの背景ではなく、
作成したページの前に挿入され、そのページとは別に新規ページが作成されます。
いろいろと情報を集めているのですが、利用用途は不明です。。。
※なお、｢Dim Background｣の設定はページ作成後に変更可能

なお、上記と同様にキャンバス（ページ）に配置した各シェープ（オブジェクト）も
各種プロパティや各種設定を変更できます。

例えば、｢BitmapImages｣を配置し、任意の画像を表示したい場合は、
対象のオブジェクトを右クリックしリストメニューから｢Actions｣を選択、
その中の｢Change Image Source｣を選択します。

すると、画像を選択する画面が表示されますので、そこで任意の画像を選択しましょう。
※なお、画像を選択すると自動的にシェープのサイズが選択した画像のサイズに変更されます。

どうでしょうか？

もちろん世の中にはもっと便利なツールはたくさんありますが、
｢Pencil｣も選択肢の一つとしては十分に視野に入るのではないかと思います。

ちなみに、作者のサイトに行くとスタンドアロン起動用のファイルも配布されています。

世の中には便利なツールがあるものですね。

Technorati Tags: Pencil