Pencil Project 入門 — 無料オープンソースのワイヤーフレームツールを使いこなす

約 8 分で読めます

Pencil Project は無料で使えるオープンソースのワイヤーフレーム・GUI プロトタイピングツールです。オフラインで動作し、Web・モバイル・デスクトップ向けの UI モックアップやフローチャートをすばやく作成できます。

Pencil Project とは

Pencil Project は evolus が開発したクロスプラットフォームのダイアグラム・プロトタイピングツールです。

項目内容
ライセンスGPL（完全無料）
最新安定版v3.1.1
対応 OSWindows / macOS / Linux
動作形態インストール型（オフライン）

Figma や Adobe XD のようなクラウドベースのツールとは異なり、インターネット接続不要でローカルに動作するのが最大の特徴です。

インストール方法

Windows

# winget でインストール（winget が使える場合）
winget install Evolus.Pencil

# または公式サイトから .exe インストーラーをダウンロード

macOS

# Homebrew Cask（非公式）
brew install --cask pencil

Linux

# .deb パッケージ（Debian / Ubuntu 系）
sudo dpkg -i Pencil-3.1.1-linux-x86_64.deb

# または AppImage を使う場合
chmod +x Pencil-3.1.1-linux-x86_64.AppImage
./Pencil-3.1.1-linux-x86_64.AppImage

基本的な使い方

画面構成

  • 左パネル: シェイプコレクション（図形・UI パーツの一覧）
  • 中央キャンバス: ワイヤーフレームの描画エリア
  • 右パネル: 選択オブジェクトのプロパティ編集
  • 上部ツールバー: ページ管理・エクスポートなど

内蔵シェイプコレクション

すぐに使えるシェイプが豊富に揃っています。

コレクション内容
General Shapes矩形・円・矢印など汎用図形
Flowchart開始・終了・分岐・処理などフローチャート用
Desktop/Web UIボタン・フォーム・メニューなど Web UI
Android UIMaterial Design 準拠の Android パーツ
iOS UIiPhone/iPad 向け UI パーツ

ページ間リンクで画面遷移を再現する

複数ページを作成し、ボタンや要素にリンクを設定することで画面遷移を再現したプロトタイプが作れます。

  1. リンク元の要素を右クリック →「Link to」を選択
  2. 遷移先のページを指定
  3. HTML エクスポートでブラウザ上でのクリック遷移を確認

エクスポート方法

形式用途
PNG画像として共有・ドキュメントへ貼り付け
PDF印刷・配布用（フォント崩れなし）
SVGベクター形式での再利用
HTML（単一ページ）ブラウザで動くインタラクティブプロトタイプ
ODTLibreOffice Writer ドキュメント

HTML エクスポートを使うと、ページ間リンクも機能するクリッカブルなモックアップとして共有できます。

業務での使いどころ

要件定義フェーズの画面イメージ作成

Figma ほど精緻ではありませんが、要件定義段階での簡易モックアップに最適です。デザイナーがいないプロジェクトや、エンジニアが顧客に画面イメージを素早く見せたい場面で活躍します。

オフライン・セキュアな環境での作業

クラウドへデータを送信しないため、社内規定でクラウドツール利用が制限されている環境でも使えます。機密性の高い業務システムの画面設計に向いています。

フローチャート・業務フロー図の作成

内蔵のフローチャートシェイプを使えば、業務フロー図やシステム構成図を素早く描けます。Microsoft Visio の代替としても機能します。

関連ツールとの比較

ツール価格オフラインコラボ向いている用途
Pencil Project無料✅❌個人・小規模・オフライン環境
Figma無料〜有料限定的✅チーム設計・デザインシステム
draw.io (diagrams.net)無料✅✅フローチャート・構成図
Balsamiq有料✅限定的ローファイワイヤーフレーム専門

Pencil Project は「無料・オフライン・手軽に始められる」という点で唯一のポジションを持ちます。

ハマりやすいポイント

macOS で「開発元を確認できない」エラーが出る

Gatekeeper によってブロックされることがあります。

# quarantine 属性を解除
xattr -d com.apple.quarantine /Applications/Pencil.app

または「システム設定 → プライバシーとセキュリティ」から「このまま開く」を選択します。

フォントが環境によって崩れる

HTML エクスポートしたプロトタイプを別 PC で開くとフォントが変わることがあります。共有する場合は PDF エクスポートのほうが見た目が安定します。

更新が止まっている

v3.1.1 以降のリリースが長期間ありません。コミュニティの修正パッチを GitHub Issues で確認するか、活発にメンテナンスされている draw.io への移行も選択肢に入れてください。

まとめ

Pencil Project は「無料・オフライン・クロスプラットフォーム」という条件がそろった数少ないワイヤーフレームツールです。

  • 要件定義段階のモックアップ作成：デザイナー不要で顧客への画面イメージ共有が可能
  • オフライン・セキュアな環境：クラウドツールが使えない環境での設計作業に最適
  • フロー図・業務フロー：Visio の代替として業務フロー図を無料で作成

チームで本格的に使うなら draw.io や Figma を検討しつつ、個人・小規模プロジェクトの素早いプロトタイピングには Pencil Project を活用してみてください。

関連記事