MaemaemaeMaemaemae

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

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

Pencil Project とは

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

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

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

インストール方法

公式サイトまたは GitHub Releases からインストーラーをダウンロードします。

Windows

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

# または公式サイトから .exe インストーラーをダウンロード
# https://pencil.evolus.vn/

macOS

# 公式サイトから .dmg をダウンロード後マウントしてインストール
# または 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 ほど精緻ではありませんが、要件定義段階での簡易モックアップに最適です。デザイナーがいないプロジェクトや、エンジニアが顧客に画面イメージを素早く見せたい場面で活躍します。

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

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

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

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

関連ツールとの比較

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

Pencil Project は**「無料・オフライン・手軽に始められる」**という点で唯一のポジションを持ちます。フローチャートも描ける汎用性は draw.io に近いですが、UI パーツが豊富でモックアップ向きです。

ハマりやすいポイント

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

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

# ダウンロードした .dmg に適用されている quarantine 属性を解除
xattr -d com.apple.quarantine /Applications/Pencil.app

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

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

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

更新が止まっている

v3.1.1 以降のリリースが長期間ありません。致命的なバグがある場合は GitHub Issues を確認し、コミュニティの修正パッチを探すか、draw.io への移行を検討してください。

まとめ

Pencil Project は「無料・オフライン・クロスプラットフォーム」という条件がそろった数少ないワイヤーフレームツールです。リアルタイムコラボや高精度デザインは苦手ですが、要件定義段階のモックアップ・フロー図・セキュアな環境での設計作業には今でも十分に実用的です。

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

タグ

フロントエンド開発環境UX