このページの本文へ

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

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

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

小橋川誠己/企画報道編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

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

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

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

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

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

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

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

Pencil
プロパティ画面。色やフォントなどの見た目を変更できる
Pencil
画像を配置したり見た目を変更すればちょっとしたデザインもできる。ラジオボタンやチェックボックスのオン/オフ状態も変更可能

 もう1つ、Pencilのよい点は、1つのプロジェクトで複数のページを作れること。たとえば、「問い合わせフォーム」のプロトタイプを作る場合、「ロード中」「送信前」「送信後」といったページ遷移を一度に作れる。ページを追加する際は既存のページをコピーしてそれを元に作業すればいいので楽だ。

Pencil
複数ページを作成できる。切り替えもタブでスムーズだ

 作成したファイルは独自形式で保存できるほか、PNGに出力する機能もある。プロトタイプをメールで送って確認をとったり、他のグラフィックツールに読み込んで素材を作りこむといった用途に使える。

 Pencilは「プロトタイプを作る」というシンプルな目的に特化しながらも、多機能で便利なツールだ。Firefox 3をすでにお使いであればインストールも手軽。ぜひ一度使ってみよう。

■関連サイト

カテゴリートップへ

ソーシャルランキング
  1. 「脱電話」でコミュニケーション基盤へ進化したTwilio、LINEとも接続 3
  2. メルカリの急成長を支える分析チームにアナリストとしてジョインする方法 2
  3. A/Bテストが無料で捗る!「Google オプティマイズ」の設定と使い方 2
  4. 新機能「コンテンツタイプ」でCMSをもっと身近にするMovable Type 7 2
  5. Google Assistant、スクリーンを組み合わせたビジュアル体験を強化 #io18jp 1
  6. 全部知ってる?今後のサイト制作で押さえたいCSSの最新プロパティ9選 161
  7. フロントエンドエンジニアが絶対読んでおきたいJavaScript最新記事ベスト10 120
  8. フロントエンド開発の現場で役立つJavaScriptの知恵10選 79
  9. これなら作れる!WordPressプラグイン開発に役立つ記事まとめ 62
  10. Web制作者が絶対読みたいHTML & CSSの最新記事ベスト10 58
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く