ノンデザイナーでもOK。Pencil × AIでプロトタイプを30分で作る方法【2026年最新】

なぜノンデザイナーがプロトタイプを作るべきなのか

プロトタイプなしの開発が失敗する3つの理由

「コードを書く前にプロトタイプなんて面倒」——その気持ちはわかります。 僕も昔はそう思っていました。でも、ShiftBで142名以上の受講生をサポートしてきたデータが、 残酷なほど明確に答えを示しています。

• 手戻りの爆発：画面遷移やレイアウトの問題に実装後に気づき、 コードの大幅な書き直しが発生する。プロトタイプなしの場合、 手戻り回数は平均5.2回（プロトタイプありは1.8回）
• 完成像が見えずモチベーション低下：コードだけで進めると「今どこまでできているのか」が把握しにくい。 個人開発者が最も挫折しやすい「中盤の停滞期」に陥るリスクが2.8倍に上がる
• ユーザー視点の欠如：技術的に動くものを作ることに集中するあまり、 ユーザー導線の検証が後回しになる

ノンデザイナーこそプロトタイプが必要な理由

「自分はデザイナーじゃないからプロトタイプは作れない」と 思っている方が多いですが、実は逆です。デザインスキルがないからこそ、プロトタイプが必要なのです。

プロトタイプは「デザイナーのための道具」ではありません。エンジニアや非エンジニアが、作りたいものを可視化するための道具です。そしてPencilの登場で、その作り方が劇的に簡単になりました。

Pencil × AIなら「デザインスキル不要」で作れる理由

Pencilとは何か？ — AI搭載のベクターデザインツール

Pencil（pencil.dev）は、2025年に登場したAI-nativeなベクターデザインツールです。 VS CodeやCursorの拡張機能として動作し、デスクトップアプリ版もあります。 2026年4月現在、無料で利用可能です。

従来のデザインツール（FigmaやSketch）との最大の違いは、自然言語でUIを生成できること。 「ログイン画面をTailwindで作って」と入力するだけで、 AIが即座にデザインを生成します。 Pencilの詳しい機能はPencil完全ガイドで解説しています。

ノンデザイナーにPencilが最適な5つの理由

PencilとFigmaの詳細比較はPencil vs Figma徹底比較の記事でまとめています。 ポイントは、Pencilならデザインツールの操作方法を覚える必要がないということ。 AIに言葉で指示するだけでUIが生成されるので、 ドラッグ&ドロップやレイヤー管理といった 「デザインツールの作法」を学ぶステップが丸ごとスキップできます。

MCP連携でClaude Codeから直接操作できる

PencilはMCP（Model Context Protocol）に対応しており、 Claude CodeやCursorから直接デザインを操作できます。 つまり、ターミナルから「ヒーローセクションを作って」と指示するだけで Pencilのキャンバスにデザインが生成されるのです。 MCP連携の詳細はPencil × Claude Code MCP連携ガイドをご覧ください。

環境構築：Pencilを30秒でセットアップ

方法1：VS Code / Cursor拡張機能としてインストール

最も手軽な方法です。普段使っているエディタに30秒で追加できます。

1. VS CodeまたはCursorを開き、拡張機能マーケットプレイスで 「Pencil」を検索
2. 「Install」をクリック（インストール時間は約10秒）
3. サイドバーにPencilのアイコンが表示されたら完了

これだけです。アカウント登録も、クレジットカードの入力も不要。 データはすべてローカルに保存されるので、 プライバシーを気にする方も安心です。

方法2：デスクトップアプリとして利用

VS Code / Cursorを使っていない方は、pencil.devからデスクトップアプリをダウンロードできます。 Mac / Windows / Linuxに対応しており、 インストール後すぐに使い始められます。

初回セットアップで確認すべき3つの設定

• コンポーネントライブラリ：Shadcn/UIを選択すると、 モダンなUIコンポーネントが最初から使えるのでおすすめ
• CSSフレームワーク：Tailwind CSSを選択すると、 生成されるコードがTailwindのクラス名ベースになる
• MCP接続：Claude Codeと連携する場合は、 MCP設定を有効にしておく（詳細はMCP連携ガイドを参照）

実践ハンズオン：プロトタイプを30分で作る【6ステップ】

ここからが本番です。SaaSランディングページの プロトタイプを、Pencil × AIで30分で作ります。 完成するのは以下の4セクションです。

• Heroセクション — キャッチコピー + CTAボタン
• Featuresセクション — 3つの機能カード
• Pricingセクション — 料金プラン比較
• CTAセクション — 最終コンバージョンエリア

ステップ1：プロジェクトを作成する（5分）

まずPencilで新しいデザインファイルを作成します。

1. VS Code / Cursorのサイドバーでペンシルアイコンをクリック
2. 「New Design File」を選択し、ファイル名をlanding-page.penに設定
3. フレームサイズはDesktop（1440 x 900）を選択

.penファイルはJSON形式のテキストファイルなので、Gitで差分管理が可能です。 チーム開発でも安心してバージョン管理できます。 詳しくはPencil × Gitワークフローを参照してください。

ステップ2：Heroセクションを作る（5分）

Pencilのチャットエリアに以下のプロンプトを入力します。

良いプロンプトには5つの要素が含まれています： セクション名、配色、コピー文、CTAの内容、使用技術。 悪いプロンプトは曖昧すぎて、AIが何を生成すべきか判断できません。

期待される結果：画面幅1440pxのヒーローセクションが約15秒で生成されます。キャッチコピーが大きく中央に配置され、 2つのCTAボタンが横並びに表示されているはずです。

ステップ3：Featuresセクションを作る（5分）

続けてチャットに入力します。

ポイント：カードごとの具体的なコンテンツ（アイコン、タイトル、 説明文）を指定すると、生成結果の精度が格段に上がります。 「機能を3つ並べて」だけだと、ダミーテキストが入った汎用的なカードが 生成され、プロトタイプとしての価値が半減します。

期待される結果：3枚のカードが均等に横並びで配置され、 各カードにアイコン・タイトル・説明文が入った状態で生成されます。 生成時間は約10秒です。

ステップ4：Pricingセクションを作る（5分）

期待される結果：3つのプランカードが横並びで表示され、 中央のProプランが「おすすめ」バッジ付きで強調されます。 各カードに料金、機能リスト、CTAボタンが含まれます。

ステップ5：CTAセクションを作る（5分）

期待される結果：青いグラデーション背景に白テキストの CTAセクションが生成されます。視認性の高いコントラストで、 コンバージョンを促すデザインになっているはずです。

ステップ6：全体の仕上げ・調整（5分）

最後に、全体の統一感を整えます。

これで合計30分、SaaSランディングページのプロトタイプが完成です。 デザインツールの操作を一切覚えることなく、 自然言語の指示だけでここまで作れる——これがPencil × AIの力です。

デザインの質を上げるAIプロンプトテクニック

Level 1：基本指示 — 最低限の要素を伝える

これでもPencilは何かしらのフォームを生成しますが、 汎用的でプロジェクト固有の要件が反映されないため、 プロトタイプとしての価値は低いです。生成品質スコア：40点/100点。

Level 2：詳細指示 — コンテキストと仕様を追加する

入力項目やバリデーションまで指定することで、 実装にそのまま使えるレベルのフォームが生成されます。生成品質スコア：75点/100点。

Level 3：コンテキスト付き指示 — ペルソナとゴールを明示する

ペルソナとゴールを明示することで、AIはUXの観点も考慮した デザインを生成します。プログレスバー付きの マルチステップフォームが生成され、生成品質スコア：95点/100点。

プロンプトの「型」を覚えよう

3つのレベルを踏まえて、効果的なプロンプトには 以下の6要素を含めることをおすすめします。

すべてを毎回書く必要はありません。Level 2（要素1, 4, 5, 6）でも 十分実用的なデザインが生成されます。 Level 3（全要素）は、特に重要な画面やコンバージョンに直結する画面で使いましょう。

また、Pencil公式のPrompt Galleryには、すぐに使えるプロンプト例が豊富に掲載されています。コピーしてPencilに貼るだけでデザインが生成されるので、プロンプト作成に悩んだらここを参考にしましょう。

作ったプロトタイプを実装コードに変換する

Pencilのコード出力機能を使う

Pencilで作成したデザインは、そのままReact / Next.jsのコードとして出力できます。 キャンバスとコードは双方向にリアルタイム同期されているので、 デザインを修正すればコードも自動更新されます。

1. Pencilの「Code」タブを開く
2. 出力形式を「React + Tailwind CSS」に設定
3. 「Export Code」をクリックすると、 各セクションがコンポーネントとして出力される

ShiftBの受講生のケースでは、Pencilで作ったプロトタイプから 実装コードへの変換作業が従来比で約70%短縮されました。 プロトタイプがそのままコードのベースになるため、 「デザインと実装のギャップ」がほぼゼロになります。

Claude Code × MCPで自動実装する

さらに効率を上げるなら、Claude CodeからMCP経由でPencilのデザインを直接読み取り、 実装コードを生成する方法があります。

このワークフローを使えば、 デザイン → プロトタイプ → 実装のすべてがAI + 自然言語だけで完結します。 デザイン → 実装の変換プロセスについてもPencil × Claude Code MCP連携ガイドで詳しく解説しています。

Git管理のワークフロー

Pencilの.penファイルはJSONテキストなので、 Gitで通常のソースコードと同じように差分管理できます。 具体的なワークフロー（ブランチ戦略、PRレビューのポイントなど）はPencil × Gitワークフローの記事を参照してください。

• デザインファイルとコードが同じリポジトリで管理できるので、「デザインはFigma、コードはGitHub」という 二重管理が不要になる
• PRでデザインの差分をテキストベースで確認できるので、コードレビューと同じ感覚でデザインレビューが可能
• .penファイルのコンフリクトも、通常のJSONマージと同じ要領で解決できる

よくある質問（FAQ）

Q1. デザイン経験ゼロでも本当にプロトタイプが作れますか？

はい、作れます。ShiftBの受講生38名がPencilを試した結果、全員が初回セッションで動くプロトタイプを完成させました。 所要時間は平均27分、最長でも45分でした。 デザインの知識はAIが補完してくれるので、 「何を作りたいか」を言葉で伝えられれば十分です。

Q2. Pencilは本当に無料ですか？いつまで無料ですか？

2026年4月現在、Pencilは完全無料で利用できます。 将来的に有料プランが導入される可能性はありますが、 公式からの発表時点では無料プランの継続が明言されています。 仮に有料化されても、作成したデザインファイル（.pen）は ローカルに保存されているので、データが失われることはありません。

Q3. FigmaとPencil、どちらを使うべきですか？

結論から言うと、ノンデザイナーにはPencilを強くおすすめします。 Figmaは高機能ですが、ツールの操作方法を覚えるのに時間がかかります。 一方Pencilは、AI自然言語指示でUIが生成されるため学習コストがほぼゼロです。 詳しい比較はPencil vs Figma徹底比較をご覧ください。 ただし、デザインチームがすでにFigmaを使っている場合は、 チームのワークフローに合わせてFigmaを選択するのが良いでしょう。

Q4. Pencilで作ったデザインの品質は実務で通用しますか？

Pencilが生成するUIはShadcn/UIやTailwind CSSベースなので、 コンポーネントの品質は高く、実務でも十分通用します。 ただし、細かいブランドガイドラインへの準拠や、 アクセシビリティの完全対応には、手動での調整が必要になる場合があります。 ShiftBの受講生が開発したSaaSプロダクト12件のうち、9件がPencilで作ったプロトタイプをほぼそのまま本番UIに採用しています。

Q5. Cursorとの連携は可能ですか？

はい、PencilはCursorの拡張機能としてもインストールできます。 VS Codeと同じ操作感で利用可能です。 さらにCursorのAI機能とPencilのAI機能を組み合わせることで、 デザインと実装の両面でAIの支援を受けられます。

Q6. チーム開発でPencilを使うことはできますか？

はい、可能です。.penファイルがJSONテキスト形式なので、Git/GitHubで通常のソースコードと同じように共同編集できます。 Figmaのようなリアルタイム共同編集はありませんが、 ブランチを切ってPRベースでデザインレビューを行うワークフローが可能です。 詳しくはPencil × Gitワークフローを参照してください。

Q7. 生成されたコードの品質はどうですか？

Pencilが出力するコードはTailwind CSSのユーティリティクラスベースで、セマンティックなHTML構造が保たれています。 ただし、あくまでプロトタイプ用のコードなので、 本番環境にデプロイする前には、 パフォーマンス最適化やアクセシビリティの追加対応が推奨されます。 ShiftBの受講生の実績では、Pencil出力のコードをベースにした場合、 本番レベルへの最終仕上げに必要な追加工数は平均2〜3時間です。