---
title: 「初めてのアプリ」を作る設計図 Why / What / How プロンプト設計 　×　 Skill化の考え方 　×　 公式ドキュメント
tags:  #skill  
author: [Yukiko](https://image.docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/4JMYN46KJW.jpg?width=480
description: 「初めてのアプリ」を作る設計図 Why / What / How プロンプト設計 　×　 Skill化の考え方 　×　 公式ドキュメント by Yukiko
published: September 12, 26
canonical: https://image.docswell.com/s/yukiko_it/53JNMV-2026-09-12-222849
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/4JMYN46KJW.jpg)

REACT × AI
「初めてのアプリ」を作る設計図
Why / What / How プロンプト設計
うさうさ研修工房
×
Skill化の考え方
×
公式ドキュメント


# Page. 2

![Page Image](https://bcdn.docswell.com/page/PJR9DWP679.jpg)

目次
01
Why/What/Howで固定するプロンプト設計
思考の順序を固定し、AI出力のブレを抑える
02
再利用可能な「型」へ — Skill化の考え方
コピペ運用から、案件横断で使える資産へ
03
参照すべき公式ドキュメント
Agent Skills / React 公式リンク集
うさうさ研修工房｜React × AI 設計図
02


# Page. 3

![Page Image](https://bcdn.docswell.com/page/PEXQ1P3DJX.jpg)

思考の順序を固定する：Why → What → How
Why
→
What
→
How
なぜこの構成にするか
作る画面・機能
実装コード
背景・目的を1〜2文で言語化させる
実装対象を箇条書きで洗い出す
要件を満たすコードを1ファイル分
出力
うさうさ研修工房｜React × AI 設計図
03


# Page. 4

![Page Image](https://bcdn.docswell.com/page/3EK92DYDED.jpg)

プロンプト例：単語辞典アプリ
React × AI で“初めての一本”を作る、シンプルな指示
あなたは、初心者にも伝わる説明を大切にするReactエンジニアです。
専門用語を使うときは、必ず一言で言い換えを添えてください。
# お題
「入力した単語をAIに説明してもらう、シンプルな単語辞典アプリ」をReactで作る。
# 手順（Why→What→Howで進める）
1. Why：なぜこの構成にするのか、1〜2文で説明する
2. What：作る画面・機能を箇条書きで示す
3. How：useState管理／AI（Claude API）への問い合わせ／
カード表示／エラー時メッセージ、を満たす実装コードを出す
# 出力形式
Why（3行以内）→ What（箇条書き）→ How（Reactコード1ファイル分）
うさうさ研修工房｜React × AI 設計図
04


# Page. 5

![Page Image](https://bcdn.docswell.com/page/L73W4R9P75.jpg)

設計のポイント
ペルソナは「わかりやすさの一貫性」のためだけに使う
正確性の担保には使わない — 査読済み研究が示すトレードオフを踏まえた設計
Why/What/Howで出力のブレを抑える
思考の順序を固定することで、毎回似た粒度の回答を引き出す
出力形式を明示し、レビューしやすい粒度に揃える
「Why→What→How」の順で区切って出力させる
うさうさ研修工房｜React × AI 設計図
05


# Page. 6

![Page Image](https://bcdn.docswell.com/page/87DKQYG3JG.jpg)

プロンプトから「型」へ：Skill化
プロンプトのまま運用
Skillという「型」に育てる
― 案件ごとに文面をコピペし続ける
― 必要な時だけ完全な指示が自動で読み込まれる
― 指示の粒度・出力形式がブレやすい
― テンプレート・サンプル・チェックリストを同梱
→
― 改善しても他の案件に反映されにくい
うさうさ研修工房｜React × AI 設計図
― 個人にも組織にも、案件横断で再利用できる
06


# Page. 7

![Page Image](https://bcdn.docswell.com/page/VJPKL63PE8.jpg)

SKILL.mdに持たせる要素
description
「文系新人向けにReact×AIの初めてのアプリを、Why/What/Howで
説明しながら作るSkill」。Claudeが自動判断する最重要項目
サンプル集
単語辞典アプリ、簡易チャットボットなど“初めての一本”になり
やすいお題集
うさうさ研修工房｜React × AI 設計図
テンプレート
Why/What/Howの出力フォーマットをあらかじめ固定しておく
レビュー観点
わかりやすさチェックリスト（専門用語の言い換え有無など）
07


# Page. 8

![Page Image](https://bcdn.docswell.com/page/2EVVQ34VEQ.jpg)

参照リンク
Agent Skills（Claude Platform Docs）
platform.claude.com/docs/en/agents-and-tools/agent-skills/overview
Using Agent Skills with the API
platform.claude.com/docs/en/build-with-claude/skills-guide
Claude Code Skills
code.claude.com/docs/en/skills
React 公式ドキュメント
ja.react.dev
うさうさ研修工房｜React × AI 設計図
08


# Page. 9

![Page Image](https://bcdn.docswell.com/page/57GLW311EL.jpg)

感性ではなく、設計で。
ペルソナはトーンと構成の一貫性のための道具。正確性の保証には使わない
Why/What/Howで思考順序を固定すれば、初めてのアプリでも迷わず進める
プロンプトを「型」に育てれば、再現性と資産性が上がる
うさうさ研修工房