---
title: "ノンデザイナーでもOK。Pencil × AIでプロトタイプを30分で作る方法【2026年最新】"
description: "デザインスキルゼロでもOK。AI搭載デザインツールPencilを使って、SaaSランディングページのプロトタイプを30分で作る全手順を、実際のAIプロンプト付きで解説します。"
url: "https://shiftb.dev/articles/pencil-prototype-nondesigner"
publishedAt: "2026-04-05"
updatedAt: "2026-04-05"
author: "立川修平（ぶべ）"
category: "ai-development"
tags: ["Pencil", "プロトタイプ", "ノンデザイナー", "AI UIデザイン", "個人開発"]
---

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

「デザインなんて自分には無理」「Figmaを触ってみたけど挫折した」—— ShiftBの受講生から**最も多く聞く悩み**がこれです。

でも、2026年の今、その悩みは過去のものになりました。AI搭載デザインツール**Pencil**を使えば、デザインスキルゼロでも**30分でプロ品質のプロトタイプ**が作れます。実際にShiftBの受講生38名がPencilを試したところ、**全員が初回で動くプロトタイプを完成**させました。平均所要時間はわずか**27分**です。

僕自身、デザイナーではありません。エンジニア出身で、色彩理論もタイポグラフィも専門的に学んだことはない。でもPencilとAIの組み合わせで、ShiftBのサービス画面を**1人で設計・実装**できています。

この記事では、デザイン経験ゼロの方が**Pencil × AIでSaaSランディングページのプロトタイプを30分で作る**全手順を、実際のAIプロンプト付きで解説します。12,000字超のボリュームですが、手を動かしながら読めば今日中にプロトタイプが完成するはずです。

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

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

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

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

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

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

| 指標 | プロトタイプあり | プロトタイプなし | 差分 |
| --- | --- | --- | --- |
| 開発期間（平均） | 4.2週間 | 7.0週間 | -40% |
| リリース到達率 | 78% | 34% | +44pt |
| 手戻り発生回数 | 平均1.8回 | 平均5.2回 | -65% |
| UI満足度スコア（5点満点） | 3.9 | 2.4 | +1.5pt |

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

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

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

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

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

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

| 特徴 | Pencil | Figma | Canva |
| --- | --- | --- | --- |
| AI自然言語UI生成 | ネイティブ対応 | Figma Make（限定的） | テンプレートベース |
| コードエディタ統合 | VS Code / Cursor | なし（別アプリ） | なし |
| Git管理 | .penファイル（JSONテキスト） | 不可（クラウド専用） | 不可 |
| コンポーネントライブラリ | Shadcn/UI, Tailwind CSS | コミュニティ依存 | 独自テンプレート |
| キャンバス⇔コード同期 | 双方向リアルタイム | Dev Mode（閲覧のみ） | なし |
| 料金（2026年4月） | 無料 | 無料〜月$15 | 無料〜月$13 |
| データ保存場所 | ローカル | クラウド | クラウド |

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

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

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

![ノンデザイナーのビフォーアフター：手書きワイヤーフレームからPencil × AIで作成した洗練されたUIデザインへ](https://shiftb.dev/images/articles/pencil-prototype-nondesigner-before-after.png)

## 環境構築：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連携ガイド](https://shiftb.dev/articles/pencil-mcp-claude-code)を参照）

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

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

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

![30分プロトタイプ作成の6ステップフロー](https://shiftb.dev/images/articles/pencil-prototype-nondesigner-steps.png)

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

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

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

.penファイルはJSON形式のテキストファイルなので、**Gitで差分管理が可能**です。チーム開発でも安心してバージョン管理できます。詳しくは[Pencil × Gitワークフロー](https://shiftb.dev/articles/pencil-git-workflow)を参照してください。

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

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

Good - 良いプロンプト例

"SaaSランディングページのHeroセクションを作成してください。背景は白、アクセントカラーは#2788f5。キャッチコピーは「業務を自動化する、次世代AIプラットフォーム」、サブコピーは「導入企業500社突破。無料トライアル実施中」。CTAボタンは「無料で始める」と「デモを見る」の2つ。Tailwind CSSとShadcn/UIコンポーネントを使用。レスポンシブ対応。"

Bad - 悪いプロンプト例

"かっこいいヒーロー作って"

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

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

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

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

Good - 良いプロンプト例

"Heroセクションの下にFeaturesセクションを追加してください。3つの機能カードを横並びで配置。カード1：アイコン🤖、タイトル「AIタスク自動化」、説明文「繰り返し業務をAIが学習し、自動実行します」。カード2：アイコン📊、タイトル「リアルタイム分析」、説明文「ダッシュボードで業務データをリアルタイムに可視化」。カード3：アイコン🔒、タイトル「エンタープライズセキュリティ」、説明文「SOC2 Type II準拠。データは国内サーバーに保存」。背景は#f8fafc。カードは白背景、角丸12px、影あり。"

Bad - 悪いプロンプト例

"機能を3つ並べて"

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

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

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

Good - 良いプロンプト例

"Featuresセクションの下にPricingセクションを追加してください。3つの料金プランを横並びで配置。プラン1：Free（月額¥0）— 5プロジェクト、基本AI機能、メールサポート。プラン2：Pro（月額¥2,980）— 無制限プロジェクト、高度AI機能、優先サポート、API連携。こちらを「おすすめ」バッジ付きで目立たせる。プラン3：Enterprise（要問い合わせ）— 全機能、専任サポート、SLA保証、カスタム連携。各プランにCTAボタン付き。アクセントカラー#2788f5。"

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

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

Good - 良いプロンプト例

"ページ最下部にCTAセクションを追加してください。背景はグラデーション（#2788f5→#1a56db）。テキストは白。見出し「今すぐ無料で始めましょう」、サブテキスト「クレジットカード不要。3分でセットアップ完了」。大きめの白いCTAボタン「無料トライアルを開始」を中央配置。上下padding 80px。"

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

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

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

Good - 仕上げプロンプト例

"ページ全体を確認して、以下を調整してください：(1) セクション間の余白を統一（80px）、(2) フォントファミリーをInter/Noto Sans JPに統一、(3) 見出しサイズの階層を整理（H1: 48px, H2: 32px, H3: 24px）、(4) ページ上部にナビゲーションバーを追加（ロゴ、Features、Pricing、お問い合わせ、ログインボタン）"

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

| ステップ | 内容 | 所要時間 | 累計時間 |
| --- | --- | --- | --- |
| 1 | プロジェクト作成・初期設定 | 5分 | 5分 |
| 2 | Heroセクション | 5分 | 10分 |
| 3 | Featuresセクション | 5分 | 15分 |
| 4 | Pricingセクション | 5分 | 20分 |
| 5 | CTAセクション | 5分 | 25分 |
| 6 | 全体の仕上げ・調整 | 5分 | 30分 |

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

![AIプロンプトテクニック：3つのレベルで生成品質が変わる](https://shiftb.dev/images/articles/pencil-prototype-nondesigner-prompts.png)

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

"お問い合わせフォームを作って"

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

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

"BtoB SaaSのお問い合わせフォームを作成してください。入力項目：会社名（必須）、担当者名（必須）、メールアドレス（必須）、電話番号（任意）、お問い合わせ種別（ドロップダウン：導入相談/料金について/技術的な質問/その他）、お問い合わせ内容（テキストエリア、必須）。送信ボタンは#2788f5。バリデーションエラーの表示も含める。"

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

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

"BtoB SaaSのお問い合わせフォームを作成してください。ターゲット：従業員50〜300名の中小企業の情報システム部門担当者。ゴール：問い合わせ完了率を最大化すること。デザイン方針：信頼感を重視し、入力ステップを3段階のプログレスバーで可視化。ステップ1：基本情報（会社名、担当者名、メール）。ステップ2：お問い合わせ内容（種別ドロップダウン、詳細テキストエリア）。ステップ3：確認画面。各ステップにバリデーション付き。完了後は「3営業日以内にご連絡します」のサンキューメッセージを表示。UIライブラリはShadcn/UI、Tailwind CSS。"

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

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

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

| 要素 | 説明 | 例 |
| --- | --- | --- |
| 1. セクション/画面名 | 何を作るか | Heroセクション、ログインフォーム |
| 2. ターゲット | 誰が使うか | 中小企業の情シス担当者 |
| 3. ゴール | 何を達成したいか | CVR最大化、離脱率低減 |
| 4. コンテンツ | 表示する具体的な内容 | 見出し文、入力項目、ボタンラベル |
| 5. デザイン仕様 | 見た目の指定 | 配色、フォント、余白、角丸 |
| 6. 技術仕様 | 使用する技術 | Tailwind CSS、Shadcn/UI |

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

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

![Pencil公式のPrompt Gallery。プロンプト例をコピーして貼るだけでUIが生成される](https://shiftb.dev/images/articles/pencil-prototype-nondesigner-ss-gallery.png)

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

### 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のデザインを直接読み取り、実装コードを生成する**方法があります。

Claude Codeでのプロンプト例

"Pencilのlanding-page.penを読み取って、Next.js App RouterのページコンポーネントとしてTypeScriptで実装してください。Tailwind CSSを使用し、レスポンシブ対応にしてください。"

このワークフローを使えば、デザイン → プロトタイプ → 実装のすべてが**AI + 自然言語だけで完結**します。デザイン → 実装の変換プロセスについても[Pencil × Claude Code MCP連携ガイド](https://shiftb.dev/articles/pencil-mcp-claude-code)で詳しく解説しています。

### Git管理のワークフロー

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

- **デザインファイルとコードが同じリポジトリ**で管理できるので、「デザインは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徹底比較](https://shiftb.dev/articles/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ワークフロー](https://shiftb.dev/articles/pencil-git-workflow)を参照してください。

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

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