このページの本文へ

デザインツールに向かう前に使う――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. IoTを手軽に体験!Web開発者におすすめのチュートリアルまとめ 47
  2. モダンでスマートなフロントエンド開発のための便利ツール使い方まとめ 17
  3. 『MITテクノロジーレビュー』先行読者登録を開始 10
  4. ポケモンGOにユーザーを奪われないためのUX改善9つのヒント 6
  5. 【週末まとめ読み】デザインのクオリティが驚くほど上がる「余白恐怖症」の治し方 5
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1587
  9. Apple Musicが流行らない理由をユーザー視点で考えてみた 1015
  10. 3限目:「看板」から学ぶ「見出し」の基本設計とは!? 640
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

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

ランキング