「頭の中にはイメージがあるのに、それを言葉でうまく説明できない」——AIに開発を頼もうとして、ここで手が止まる未経験の人はとても多いです。
でも、AI（Claude Code など）に渡せるのは「文章」だけではありません。URL・画像・箇条書きといった"言葉以外"の材料を渡すと、頑張って文章で描写するより早く正確に伝わることがよくあります。
この記事では、文章化で詰まったときに効く「言葉以外の渡し方」を3つ、①なぜ効くか ②具体的な渡し方・プロンプト例 ③before（文章だけ）→after（言葉以外を足す）の違い ④注意点、の順で並べます。「説明できない＝始められない」ではなく「伝え方は言葉だけじゃない」を、実例で示していきます。
前提：この記事の想定環境
- Claude Code（またはチャット欄に画像を貼れる AI コーディング環境）
- Next.js（App Router）+ TypeScript + Tailwind CSS を触り始めた未経験〜駆け出しの方
- 「作りたいもののイメージはあるが、要件を文章にするのが苦手」な段階
コードは骨子（イメージ）レベルで載せます。細部より「渡し方でAIの返しがどう変わるか」に注目してください。
渡し方1：参考にしたいサイト・アプリの「URLや名前」を渡す
なぜ効くのか
見た目やレイアウトを言葉で描写するのは、実はとても難しい作業です。「余白広めで、カードが並んでて、上に検索があって……」と書いても、人によって想像する画面はバラバラになります。
そこで「あなたが頭に浮かべている見た目に近い、既存のサイト名やURL」を渡します。参考先を1つ示すだけで、レイアウト・余白感・情報の並び方といった"言葉にしづらい部分"がまとめて伝わります。
具体的な渡し方・プロンプト例
参考にしたい見た目があります。
「Zenn の記事一覧ページ」みたいな見た目にしてください。
・カードが縦に並ぶ
・各カードにタイトルと日付
・全体は白背景でシンプル
このイメージで、記事一覧のコンポーネントの骨組みを作ってください。
（Next.js App Router + Tailwind）
ポイントは「サイト全体をまるごとコピーして」ではなく、「このサイトの、この部分の雰囲気」と範囲を絞ることです。
before → after
before（文章だけで見た目を説明）
記事の一覧を、見やすい感じで、カードっぽく並べてほしいです。
おしゃれにしてください。
→ 「見やすい」「おしゃれ」の解釈がAIに委ねられ、想像と違う画面が返ってきがち。
after（参考の名前を足す）
「Zenn の記事一覧」みたいなカードの並びにしてください。
白背景・角丸カード・タイトルと日付だけのシンプルな構成で。
→ 返ってくる骨子のイメージ：
// articles をカードで並べる骨組み（イメージ）
<ul className="space-y-3">
{articles.map((a) => (
<li key={a.id} className="rounded-lg border p-4">
<p className="font-bold">{a.title}</p>
<p className="text-sm text-gray-500">{a.date}</p>
</li>
))}
</ul>
「白背景・角丸・タイトルと日付だけ」という方向性が一発で揃います。
注意点
- 参考先は「見た目の方向性」を借りるだけ。デザインの丸コピー指示はしない（権利・オリジナリティの問題）。
- 「このサイトのここ」と部分を特定する。ページ全体を指すと、AIが何を真似ればいいか散らかります。
渡し方2：画面のスクショや手書きのスケッチを「画像」で見せる
なぜ効くのか
位置関係（「検索欄の右にボタン」「一覧の下にページ送り」）は、言葉で書くと長くなるうえに曖昧になりがちです。画像なら位置関係がそのまま伝わります。
Claude Code をはじめ、チャット欄に画像を貼れる AI 環境では、スクリーンショットや手書きスケッチの写真を読み取って、そこから実装イメージを起こせます。未経験のうちは、この「画像を渡す」を知っているだけで説明の負担が大きく減ります。
使える画像は主に2種類です。
- 既存画面のスクショ + 指示：今動いている自分の画面を撮って「ここをこう変えて」
- 手書きスケッチの写真：紙に作りたいレイアウトを描いて撮る
具体的な渡し方・プロンプト例
既存画面のスクショを貼って：
（スクショを添付）
これは今のフォーム画面です。
・「送信」ボタンを右下に移動
・入力欄の下に、エラー時の赤いメッセージ表示エリアを追加
この2点だけ直してください。他は変えないで。
手書きスケッチを撮って：
（紙に描いたレイアウトの写真を添付）
この手書きのレイアウトで画面を作ってください。
・上：タイトル
・中央：入力フォーム
・下：一覧
Next.js + Tailwind の骨組みだけで大丈夫です。
before → after
before（位置関係を全部言葉で説明）
ヘッダーの下に検索欄を置いて、その右側にボタンを付けて、
検索欄の下に一覧を出して、一覧の各行の右端に削除ボタンを……
→ 一文が長く、AIも人間も途中で位置を見失う。
after（スケッチ画像 + 短い補足）
（レイアウトを描いた写真を添付）
この配置で作ってください。各行の右端は削除ボタンです。
→ 位置関係は画像が語るので、文章は補足だけで済みます。返る骨子のイメージ：
// スケッチの配置をそのまま骨組みに（イメージ）
<div>
<input placeholder="検索" /> {/* 上：検索 */}
<ul> {/* 下：一覧 */}
{items.map((item) => (
<li key={item.id} className="flex justify-between">
<span>{item.name}</span>
<button>削除</button> {/* 右端：削除 */}
</li>
))}
</ul>
</div>
注意点
- スクショに個人情報・APIキー・トークンが写り込んでいないかを必ず確認してから貼る。
- 手書きは丁寧である必要はありません。枠と文字だけの雑な図で十分伝わります。
- 「この画像の"どこ"を変えたいか」を1行添えると精度が上がります（画像＋指示のセットが強い）。
渡し方3：完成イメージを"箇条書き"で並べる（きれいな文章にしない）
なぜ効くのか
未経験の人が詰まる最大の原因は「きれいな説明文を書こうとすること」だったりします。文章化のハードルが高くて、書き始められない。
でも、AIに要件を渡すのに整った文章はいりません。「・上に検索欄 ・その下に一覧 ・各行に削除ボタン」と、頭にある要素を箇条書きで並べるだけで、AIは十分に受け取れます。むしろ箇条書きのほうが、要素の抜け漏れが見えやすいという利点まであります。
具体的な渡し方・プロンプト例
作りたい画面の要素を箇条書きで書きます。この通りに骨組みを作ってください。
・上：検索欄（入力すると一覧が絞り込まれる）
・その下：アイテムの一覧
・各行：アイテム名 ＋ 右端に「削除」ボタン
・削除を押したらその行が消える
Next.js App Router + TypeScript + Tailwind。
まずは動く骨組みだけで、デザインは後で整えます。
「まずは骨組みだけ」「デザインは後で」と段階を区切る一言を足すと、いきなり作り込まれて読めなくなるのを防げます。
before → after
before（無理にまとめた一文）
検索できて絞り込めて削除もできる一覧画面が欲しいです。
→ 情報が圧縮されすぎて、検索の対象・削除の挙動などがAIの推測任せに。
after（箇条書きで要素を分解）
・検索欄（入力で一覧を絞り込む）
・アイテム一覧
・各行に削除ボタン、押すと消える
→ 返る骨子のイメージ：
"use client";
import { useState } from "react";
export default function List() {
const [q, setQ] = useState("");
const [items, setItems] = useState(initialItems);
const shown = items.filter((i) => i.name.includes(q));
return (
<div>
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="検索" />
<ul>
{shown.map((i) => (
<li key={i.id} className="flex justify-between">
<span>{i.name}</span>
<button onClick={() => setItems(items.filter((x) => x.id !== i.id))}>
削除
</button>
</li>
))}
</ul>
</div>
);
}
箇条書きの1項目が、そのまま実装の1機能に対応しているのが分かると思います。「検索欄」→ useState + filter、「削除ボタン」→ filter で除外、というふうに、要素と実装がきれいに紐づきます。
注意点
- 箇条書きは**「見た目の要素」と「動き（押したら何が起きる）」を分けて**書くと、さらに伝わりやすい。
- 全部を一度に並べようとしない。最初は3〜5項目に絞り、動いたら足していくほうが早く進みます。
3つを組み合わせるのが一番強い
実は、この3つは併用できます。むしろ組み合わせると精度が上がります。
（手書きスケッチの写真を添付）
この配置で作りたいです。
見た目の雰囲気は「Zenn の記事一覧」みたいなシンプルさで。
要素は：
・上：検索欄
・下：カードの一覧
・各カード：タイトルと日付
Next.js + Tailwind、まず骨組みだけお願いします。
「配置＝画像」「雰囲気＝参考URL/名前」「要素＝箇条書き」と、それぞれ得意な渡し方に役割分担させると、文章をほとんど書かずに、頭の中のイメージがかなり正確にAIへ届きます。
まとめ
「作りたいものを言葉で説明しきれない」——それは、あなたの説明力が足りないのではなく、言葉という手段だけで伝えようとしているからかもしれません。
- URL・サイト名を渡す → 言葉にしづらい"見た目の雰囲気"が一発で伝わる
- スクショ・手書きスケッチを渡す → "位置関係"が言葉より正確に伝わる
- 箇条書きで並べる → きれいな文章を書くハードルが消え、要素の抜けも見える
そして、こうした「AIに伝わる形で材料を渡す力」は、コードを書く力とは別の、これからずっと使えるAIとの協働スキルそのものです。未経験のうちからこの渡し方に慣れておくと、プログラミングの習得とAIを使いこなす力が同時に伸びていきます。
うまく説明できなくて大丈夫。言葉以外の渡し方から始めてみてください。
※ この記事は未経験〜駆け出しの方向けの内容です。中上級者の方には易しすぎると思いますので、初心者の知り合いへの紹介や、社内研修・後輩育成の入り口としてご活用いただければ幸いです。
未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を、全20セッションで体系化した教材を運営しています。Claude Code を学習パートナーにする CLAUDE.md / Skills 設計までセットで扱います。
- 無料体験版（git clone してすぐ動く・最初の数セッション分・⭐ Star もぜひ）→ https://github.com/ayies128/next-ai-camp-trial
- 教材完全版＋月5,500円のメンタリング（全20セッション＋チャットで質問し放題）→ https://menta.work/plan/20251?ref=qiita
- YouTube『AIエンジニア情報局』（AI×開発ニュースを1本5分でキャッチアップできる別運営チャンネル・無料）→ https://www.youtube.com/channel/UC1rXVD9WYsQPQEWZyd-A1KA/?ref=qiita