第1話 NEW
Pen始め方ガイド！AIと描いて手で直す「魔法の画用紙」の歩き方
AIに「ログイン画面を作って」と頼むと、それらしい画面がすぐに返ってくる。困るのはそのあと。ボタンをもう少し下へ、見出しをひと回り小さく。その2つを伝えるために、また文章を書く。目の前に画面があるのに、指で動かせない。「AIに描かせる」と「自分の手で直す」を、同じ1枚の上でやるのがPenです。
- ホーム
- アプリ・ページをつくる
- 小学生でもわかるPen
連載中アプリ・ページをつくる目で確かめる公式サイト
小学生でもわかる Pen AIと描いて、手で直す。
Pen（ペン）は、AIのペンと自分の手が、同じ1枚の上で画面を描く「魔法の画用紙」。AIに画面の下書きを描かせ、気になったボタンはマウスでつまんで少し下へずらし、仕上がったらウェブページの形（HTML）で書き出します。AIに作らせた画面を、ことばで何度も頼み直す往復を短くする道具です。画用紙（アプリ）はいまは無料、インク（AIの頭脳）はChatGPTやClaudeなど手持ちの契約をつなぐのが基本。1枚のページを、AIの下書きから手の仕上げ、コードでの公開まで作り切るところまでを1話ずつやっていきます。
1 / 10話 公開
あなたのスタンプ：0 / 1話
Map
Penでできること
このシリーズの「見取り図」。1話で1つの部屋を開けていきます。
- 01キャンバスで画面を手で組む
- 02AIのペンに描かせる・直させる
- 03Figma・ウェブページ・画像を取りこむ
- 04部品と色の名前で使い回す
- 05HTML・画像・PDFで書き出し
- 06MCP・拡張機能・CLIで外のAIから動かす
Episodes
エピソード一覧
第1話から順に読むのがおすすめ。途中の話から読んでも、1話で完結します。
-
01
これから開く部屋
- 02画用紙を広げる（入れる・ログイン・AIのペンをつなぐ）
- 03手で描く（キャンバス・フレーム・Flexレイアウト）
- 04AIのペンに描かせる（エージェント・スキル・並列）
- 05取りこむ（Figma・ウェブページ・画像）
- 06部品にする（コンポーネント・変数・スロット・ライブラリ）
- 07コードへ写す（HTML 書き出し・AIでReact・コードからデザイン）
- 08外からのペン（MCP・Claude Code・Codex・CLI）
- 09見せる・しまう（スライド・PDF・Git・Code on Canvas）
- 10卒業制作（1枚のページを、最後まで）
Follow
新しい話は、Xでお知らせします
公開したら告知ポストを出します。記事の感想は引用リポストで全部読みます。