このページの本文へ

デザインツールに向かう前に使う――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. クラウドは地方を救うか?KDDIウェブら「Cloud ON OKINAWA」を立ち上げ 4
  2. GoogleやLINEみたいなSMS二要素認証をTwilioでサクッと実装してみよう 2
  3. 「使いやすい」と言われたい!WordPressの編集画面にメタボックスを追加する方法 2
  4. PHPはマルチスレッド化で爆速化できるか? pthreadsの使い方(基礎編) 2
  5. 面倒なソーシャルログインをLaravelでサクッと実装!Socialiteが便利だ 1
  6. 商業写真で首切りと串刺しがダメな理由 2324
  7. Apple Musicが流行らない理由をユーザー視点で考えてみた 1015
  8. Sketch 3を使う3つの理由と10の魅力 633
  9. ボーナス支給日確定で新聞社を辞めた人に贈る本 551
  10. 5限目:「情報」を「コンテンツ」に変える 告知コピー制作メソッド 396
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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

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

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

ランキング