第1話
Pen始め方ガイド！AIと描いて手で直す「魔法の画用紙」の歩き方
AIに「ログイン画面を作って」と頼むと、それらしい画面がすぐに返ってくる。困るのはそのあと。ボタンをもう少し下へ、見出しをひと回り小さく。その2つを伝えるために、また文章を書く。目の前に画面があるのに、指で動かせない。「AIに描かせる」と「自分の手で直す」を、同じ1枚の上でやるのがPenです。
- ホーム
- アプリ・ページをつくる
- 小学生でもわかるPen
連載中アプリ・ページをつくる目で確かめる公式サイト ほかと比べる
小学生でもわかる Pen AIと描いて、手で直す。
Pen（ペン）は、AIのペンと自分の手が、同じ1枚の上で画面を描く「魔法の画用紙」。AIに画面の下書きを描かせ、気になったボタンはマウスでつまんで少し下へずらし、仕上がったらウェブページの形（HTML）で書き出します。AIに作らせた画面を、ことばで何度も頼み直す往復を短くする道具です。画用紙（アプリ）はいまは無料、インク（AIの頭脳）はChatGPTやClaudeなど手持ちの契約をつなぐのが基本。1枚のページを、AIの下書きから手の仕上げ、コードでの公開まで作り切るところまでを1話ずつやっていきます。
9 / 10話 公開
あなたのスタンプ：0 / 9話
Map
Penでできること
このシリーズの「見取り図」。1話で1つの部屋を開けていきます。
- 01キャンバスで画面を手で組む
- 02AIのペンに描かせる・直させる
- 03Figma・ウェブページ・画像を取りこむ
- 04部品と色の名前で使い回す
- 05HTML・画像・PDFで書き出し
- 06MCP・拡張機能・CLIで外のAIから動かす
Episodes
エピソード一覧
第1話から順に読むのがおすすめ。途中の話から読んでも、1話で完結します。
-
01
-
02
第2話
Penの入れ方とAIのつなぎ方！入れる前に知る3つと、最初の1枚を描いて手で直すまで
AIに画面を描かせて、気になるところは自分の手で直せる道具を、そろそろ入れてみたい。けれど、どのAIの契約をつなげばいいのか、入れたらパソコンの中で何が変わるのか、どこでお金がかかるのかがわからず、ダウンロードのボタンの前で止まっている。入れる前に気になることは、たぶん3つです。
-
03
第3話
PenでAIに頼まずに画面を描く！スマホのログイン画面を手で組んで画像にするまで
「アプリのログイン画面は、こんな感じで」と、1枚の絵にして人に見せたい。けれど、見出しを少し大きくするだけのことで、AIに頼み直して利用枠を使うのは気が引ける。「見出しを、ひと回り大きく」「入力欄を、もう1つ」。このくらいの直しなら、ことばで頼むより、自分で描いたほうが早いこともあります。
-
04
第4話
PenのAIに同じ画面を2案描かせる！見くらべて選んで、最後は自分の手で直す
1つの案を「もう少しやわらかく」「やっぱり元の並びで」と頼み直しているうちに、最初にどんな画面がほしかったのか、自分でもわからなくなる。1本のペンに1案だけ描かせると、見くらべる相手がいないので、いいのか悪いのかも決めにくい。そこで今日は、ペンを2本飛ばします。
-
05
第5話
Penにいまあるウェブページを取りこむ！白紙から描き直さずに、見出しを直すまで
自分のサイトの見出しを、デザインの道具の上で少し変えてみたい。ところが道具を開くと画用紙は白紙で、ブラウザに出ているのと同じ画面を、四角と文字で組み直すところから始まってしまう。見出しを1つ変えたいだけなのに、です。今日は、その組み直しを飛ばします。
-
06
第6話
Penでボタンを部品にする！元を1か所直せば写しも変わる、部品と色の名前の使い方
画面の中の同じボタンを、1つずつクリックして塗り直している。AIのペンに描かせた案が2枚、3枚と増えるほど、塗り忘れも増えていきます。1枚目のカードのボタンの色を書きかえ、2枚目も選んで同じ番号をもう一度。画面が10枚になれば、10回です。
-
07
第7話
Penで描いた画面がHTMLになる！コピーのボタンと、AIに頼むReactの違い
自分で描いた画面を、ウェブページやアプリへ持っていきたい。ところが「HTML で書き出せる」と聞いてボタンを押すと、英語と記号がぎっしり並んだ長い文字がコピーされて、どこを読めばいいのかも、いまのボタンがAIを使ったのかどうかもわからない。
-
08
第8話
PenをClaude Codeから動かす！つなぐと書き足される設定と、画像への書き出し方
Claude Code に画面のコードを書いてもらっている途中で、デザインのボタンの色を1つだけ変えたくなった。Pen のアプリに切り替えて、入力欄に同じ説明を書き直す。直った画面を画像にして、また Claude Code の窓へ戻る。AIが2つに、窓も2つ。行ったり来たりするたびに、話の流れが切れてしまいます。
-
09
第9話 NEW
Penの画面をスライドとPDFにして、Gitで記録する！直した1行が見える保存のしかた
描くところまでは、画用紙の中で済みます。困るのは、描いたものを外へ出すとき。会議で見せるには、どうするのか。相手が Pen を入れていなかったら？ 来週「やっぱり前のほうがよかった」と言われたら、どこへ戻ればいいのか。
これから開く部屋
- 10卒業制作（1枚のページを、最後まで）
Follow
Penの続きを受け取る
第10話が出たら知らせが届くように。公開したらXで告知し、記事の感想は引用リポストで全部読みます。
RSSは、Feedly などのRSSリーダーにこのボタンのURLを入れると使えます。この連載の新しい話だけが届きます。