要約
無料で使えるAIデザインツール「Pencil」は、Figmaライクな操作感でLP・ECサイト・ダッシュボードなどをAIっぽさゼロで高速生成できるツールである。Claude CodeとMCP連携することで、デザインからReact/Tailwind/Next.jsのコードまで一気通貫で生成可能だ。本記事では、Pencilの導入方法から実際の制作フロー、AIっぽくないデザインが作れる仕組みまでを解説する。
対象読者: LP・ECサイトを高速に制作したいフロントエンドエンジニア、AIデザインツールに興味がある開発者
この記事を読むことで得られるメリット
この記事を読むことで以下のことが分かる:
- Pencilの導入方法と基本的な使い方
- AIっぽくないデザインが生成できる仕組み
- ShadcnUIを活用したデザインシステムの使い方
- Claude CodeとのMCP連携によるコード生成フロー
- 追加プロンプトが必要になるケースとその対処法
実際に作成したデザイン
この記事を読むのにかかる時間
約10分
環境
- MacOS Apple M4 Max Sequoia 15.1
- Pencil（MacOS版）
- Claude Code（最新版）
Pencilとは
Pencilは無料のAIデザインツールである。Figmaのような直感的なUIを持ちながら、AIチャットによるデザイン生成機能を内蔵している点が最大の特徴だ。
Pencil
Pencil – Design on canvas. Land in code.
対応プラットフォーム
プラットフォーム | 対応状況 |
|---|---|
MacOS | デスクトップアプリとして利用可能 |
Linux | デスクトップアプリとして利用可能 |
Windows | Cursor / VS Code / Antigravityの拡張機能として利用可能 |
MacOS・Linuxではデスクトップアプリをダウンロードするだけで、すぐに利用を開始できる。
Pencilで作れるもの
Pencilで制作可能なデザインは多岐にわたる。
- ECサイト - 商品一覧、商品詳細、カート、購入手続きまでの一連のフロー
- ランディングページ（LP） - 使い捨てのプロモーション用途から本格的なものまで
- コーポレートサイト - 企業の信頼感を伝える透明感のあるデザイン
- ダッシュボード - ShadcnUIベースのスタイリッシュなUI
- ポートフォリオサイト - 個人の実績紹介ページ
- 学習プラットフォーム - レッスン形式のWebアプリケーション
- タスク管理アプリのLP - アプリケーション紹介ページ
特にLPの量産に強く、シンプルなプロンプトだけでクオリティの高いデザインを高速に作成できる。
Pencilの基本操作
Pencilのインターフェースは、Figmaを使ったことがある人なら直感的に扱えるように設計されている。
UI構成
- 左側ツールバー - レイヤー一覧やツールの選択
- 中央キャンバス - デザインのプレビューと編集
- 右側プロパティパネル - ボタンの色やテキストなどの調整
- AIチャット欄 - Claudeを使ったデザインの生成・修正
基本的なワークフローは、AIチャット欄に作りたいもの（例：「化粧品のECサイトを作ってください」）を入力するだけである。シンプルなプロンプトでも、かなり完成度の高いデザインが出力される。
.penファイルによるバージョン管理
Pencilで作成したデザインは.penファイルとして出力される。これはGitで管理できるため、以下のメリットがある。
- リポジトリに含めてバージョン管理が可能
- 任意のバージョンに戻すことができる
- チームでのデザイン共有・レビューが容易
なぜAIっぽくないデザインが作れるのか
Pencilで生成されるデザインには、いわゆる「AIっぽさ」がほとんどない。これはユーザーの指示力ではなく、Pencilアプリケーション自体に仕組みが備わっているためである。
業界別プラクティスの内蔵
Pencilには、業界・業態ごとのデザインプラクティス（ベストプラクティス）が組み込まれている。具体的には以下のような情報がアプリケーション内部に保持されている。
- タイポグラフィ（フォント選定）
- 配色パターン（背景色、テキスト色）
- レイアウトパターン
- 業界ごとのUI/UX慣習
AIチャットでデザインを生成する際の思考過程でこれらのプラクティスが参照されるため、グラデーションが強めの無難なAIデザインではなく、その業界やプロダクトに適したデザインが自動的に反映される。
一般的なAIデザインとの違い
項目 | 一般的なAIデザイン | Pencilのデザイン |
|---|---|---|
配色 | グラデーション多用、無難 | 業界に適した配色 |
レイアウト | テンプレート的 | プロダクトの特性に合わせた構成 |
印象 | 「AIで作った感」が残る | 人間のデザイナーが作ったような仕上がり |
カスタマイズ | 生成後の調整が大変 | Figmaライクに細部の調整が可能 |
ShadcnUIを使ったデザインシステムの活用
Pencilではデザインキットを選択してからデザインを開始できる。中でもShadcnUIを選択すると、統一感のあるコンポーネントベースのデザインが作成可能だ。
ShadcnUIを選ぶメリット
- ボタン、カード、テーブルなどのパーツが統一されたデザインで出力される
- フロントエンド実装時にShadcnUIのライブラリをインストールするだけでデザインとコードの一貫性が保たれる
- ダッシュボードやWebアプリケーションのUI制作に特に適している
カスタムデザインキット
ShadcnUI以外にも、完全にゼロからデザインキットを作成することも可能だ。自社のブランドカラーやデザインシステムに合わせたデザインを生成したい場合に活用できる。
Claude Codeとの連携によるコード生成
PencilとClaude Codeの連携は、デザインからフロントエンドコードへの変換を実現する重要な機能である。
MCPの自動設定
Pencilをダウンロードした時点で、Claude CodeとのMCP接続が自動的に設定される。通常、MCPの設定は手動で行う必要があり煩雑だが、Pencilではこの手順が完全にカットされている。これは地味ではあるが非常に大きなメリットだ。
コード生成のワークフロー
デザインからコードを生成するフローは以下のとおりである。
- Pencilでデザイン作成 - AIチャットを使ってデザインを完成させる
- フレームの選択 - コード化したいフレーム（ページ）を選択する
- Export Code - 「Export Code」ボタンをクリック
- MCP経由でClaude Codeに送信 - 「Generate React Tailwind Next.js Code from the Selected Frame」という指示が生成される
- Claude Codeでコード生成 - ターミナルでClaude Codeを起動し、コピーした内容を貼り付ける
- ビルド・確認 -
npm install→npm run devで動作確認
このフローにより、デザインに忠実なReact/Tailwind CSS/Next.jsのコードが自動生成される。
追加プロンプトが必要なケース
現時点では、Export Codeによるコード生成だけでは完結しないケースが2つ確認されている。
1. 画像の適用
デザイン上に含まれる画像は、自動的にはコードに反映されない。明示的に「画像を適用して」と追加でプロンプトを入力する必要がある。Claude Codeが画像をダウンロードし、適切に配置してくれる。
2. ページ遷移・クリックイベント
JavaScriptによるページ遷移やクリックイベントも、Export Codeの初期生成では含まれない。「リンクメニューの遷移を追加して」のように明示的に指示する必要がある。
これらの追加プロンプトは軽微なものであり、数回のやり取りで解決できるレベルである。最終的にはデザインとほぼ同じ形のフロントエンドコードが完成する。
まとめ
Pencilは、無料で利用できるAIデザインツールとして、以下の点で優れている。
- クオリティとスピードの両立 - 業界別プラクティスの内蔵により、AIっぽさのないデザインを高速に生成できる
- Figmaライクな操作感 - デザイナーにも馴染みやすいUI
- Claude Codeとのシームレス連携 - MCPが自動設定済みで、デザインからReactコードまで一気通貫
- .penファイルによるGit管理 - デザインのバージョン管理が可能
- ShadcnUIベースのデザインシステム - 統一感のあるUIを容易に構築
画像適用やページ遷移には追加プロンプトが必要という制約はあるが、それを差し引いてもLP・ECサイト・ダッシュボードの量産において強力な選択肢である。Claude Codeを日常的に活用しているエンジニアにとっては、デザインワークフローを大幅に効率化できるツールだ。
