https://shogakusei.com/series/pen/Pen（ペン）は、AIのペンと自分の手が、同じ1枚の上で画面を描く「魔法の画用紙」。AIに画面の下書きを描かせ、気になったボタンはマウスでつまんで少し下へずらし、仕上がったらウェブページの形（HTML）で書き出します。AIに作らせた画面を、ことばで何度も頼み直す往復を短くする道具です。画用紙（アプリ）はいまは無料、インク（AIの頭脳）はChatGPTやClaudeなど手持ちの契約をつなぐのが基本。1枚のページを、AIの下書きから手の仕上げ、コードでの公開まで作り切るところまでを1話ずつやっていきます。ja https://shogakusei.com/series/pen/ep09/https://shogakusei.com/series/pen/ep09/Sun, 27 Sep 2026 15:57:05 GMT描くところまでは、画用紙の中で済みます。困るのは、描いたものを外へ出すとき。会議で見せるには、どうするのか。相手が Pen を入れていなかったら？ 来週「やっぱり前のほうがよかった」と言われたら、どこへ戻ればいいのか。 画用紙のいちばん外側のフレームを Slides で並べて発表し、PDF に書き出し、.pen を Git で記録して、直した1行を差分で見た回です。PDF は1枚のフレームが1ページで、紙の大きさにはそろいません。日本語は見た目は正しいのに、取り出すと化けました。発表は Esc で抜けられず、Ctrl＋Enter で戻れました。色を1か所直すと、git diff で変わったのは Fill の1行でした。 https://shogakusei.com/series/pen/ep08/https://shogakusei.com/series/pen/ep08/Sun, 27 Sep 2026 14:10:27 GMTClaude Code に画面のコードを書いてもらっている途中で、デザインのボタンの色を1つだけ変えたくなった。Pen のアプリに切り替えて、入力欄に同じ説明を書き直す。直った画面を画像にして、また Claude Code の窓へ戻る。AIが2つに、窓も2つ。行ったり来たりするたびに、話の流れが切れてしまいます。 Claude Code から MCP の差しこみ口で Pen の画面を1か所直させ、pen コマンドで PNG に書き出した回です。Settings → MCP のスイッチをオンにすると、.claude.json のどのフォルダでも効く欄に pencil が書き足され、オフにすると消えました。色は72秒で変わりましたが、元の .pen は Ctrl＋S を押すまで変わりません。pen コマンドは、書き出すだけでもログインが要りました。 https://shogakusei.com/series/pen/ep07/https://shogakusei.com/series/pen/ep07/Sun, 27 Sep 2026 07:51:49 GMT自分で描いた画面を、ウェブページやアプリへ持っていきたい。ところが「HTML で書き出せる」と聞いてボタンを押すと、英語と記号がぎっしり並んだ長い文字がコピーされて、どこを読めばいいのかも、いまのボタンがAIを使ったのかどうかもわからない。 第3話を組む途中の画面を選んで Copy HTML を押し、3,648字の中身を読んだ回です。このパソコンでは押した瞬間に「Copied HTML + Tailwind」と出て、AIのペンは現れませんでした。中身は w-[390px] h-[844px] の決め打ちで、Tailwind は「開発用」の読みこみ方。色の名札も #7c3aed の値のまま出ました。React の部品にするのはAIの仕事で、画用紙とコードは自動ではそろいません。 https://shogakusei.com/series/pen/ep06/https://shogakusei.com/series/pen/ep06/Sun, 27 Sep 2026 00:44:45 GMT画面の中の同じボタンを、1つずつクリックして塗り直している。AIのペンに描かせた案が2枚、3枚と増えるほど、塗り忘れも増えていきます。1枚目のカードのボタンの色を書きかえ、2枚目も選んで同じ番号をもう一度。画面が10枚になれば、10回です。 ボタンを右の欄の Create Component で部品にし、写しを置いて、元の塗りを #335C48 から #7C3AED に変えると写しも紫に変わるのを確かめた回です。Ctrl＋Alt＋K は、このパソコンでは効きませんでした。色の名札（変数）を1つ作り、列を足して Default と Variant の2つの値を持たせます。写しで上書きした所は元を直しても変わらず、ライブラリにすると元に戻せません。 https://shogakusei.com/series/pen/ep05/https://shogakusei.com/series/pen/ep05/Sat, 26 Sep 2026 23:04:14 GMT自分のサイトの見出しを、デザインの道具の上で少し変えてみたい。ところが道具を開くと画用紙は白紙で、ブラウザに出ているのと同じ画面を、四角と文字で組み直すところから始まってしまう。見出しを1つ変えたいだけなのに、です。今日は、その組み直しを飛ばします。 アプリの中の内蔵ブラウザで example.com を開き、Import で画用紙に取りこんで、見出しを1か所打ちかえて .pen で保存した回です。約6秒で「div」という名前の枠が入り、見出しは文字のまま選べて、Context 欄に「h1」と出ました。取りこみのあいだ、AIのペンは動いていません。ただしページの動き（JavaScript）は残らず、取りこめることと使ってよいことは別です。 https://shogakusei.com/series/pen/ep04/https://shogakusei.com/series/pen/ep04/Sat, 26 Sep 2026 21:43:29 GMT1つの案を「もう少しやわらかく」「やっぱり元の並びで」と頼み直しているうちに、最初にどんな画面がほしかったのか、自分でもわからなくなる。1本のペンに1案だけ描かせると、見くらべる相手がいないので、いいのか悪いのかも決めにくい。そこで今日は、ペンを2本飛ばします。 並列エージェント（Parallel agents）を 2x・Side by Side にして、ChatGPT のペン2本に同じお題で2案を描かせ、1つを選んでボタンの文字を手で「参加する」に直した回です。送ってから完了まで53秒（1回の計測）。ペンを増やすとモデルへのリクエストも増えますが、何倍かは書かれておらず、Est. cost も出ませんでした。許可の確認は3回とも出ず、Codex の設定ファイルには「信頼したプロジェクト」の行が2組増えていました。 https://shogakusei.com/series/pen/ep03/https://shogakusei.com/series/pen/ep03/Sat, 26 Sep 2026 16:14:58 GMT「アプリのログイン画面は、こんな感じで」と、1枚の絵にして人に見せたい。けれど、見出しを少し大きくするだけのことで、AIに頼み直して利用枠を使うのは気が引ける。「見出しを、ひと回り大きく」「入力欄を、もう1つ」。このくらいの直しなら、ことばで頼むより、自分で描いたほうが早いこともあります。 AIのペンを1度も呼ばずに、横390・縦844の枠を縦の Flex にし、アイコンと Noto Sans JP の見出し、入力欄2つとボタンを組んで、PNG と .pen で残す回です。手で描く道具と書き出しは、AIのエージェントが1度も動かないまま終わりました。ただしアカウントとログインは要ります。完成形を通しで組んだわけではなく、入力欄とボタンは別の試し用の画面で確かめています。 https://shogakusei.com/series/pen/ep02/https://shogakusei.com/series/pen/ep02/Sat, 26 Sep 2026 14:58:32 GMTAIに画面を描かせて、気になるところは自分の手で直せる道具を、そろそろ入れてみたい。けれど、どのAIの契約をつなげばいいのか、入れたらパソコンの中で何が変わるのか、どこでお金がかかるのかがわからず、ダウンロードのボタンの前で止まっている。入れる前に気になることは、たぶん3つです。 Windows 11 に Pen 1.2.14 を入れ、ChatGPT の契約をインクにして最初の1枚を描かせ、横幅を手で 200 に直して first-design.pen で保存した回です。入れる前に知る3つは、管理者の確認（UAC）、起動しただけで7つのAIの道具の設定ファイルに「pencil」が書き足されること、ユーザー名がプロフィールの住所になること。「Upgrade」も使った量の目安も、画面に出ませんでした。 https://shogakusei.com/series/pen/ep01/https://shogakusei.com/series/pen/ep01/Tue, 15 Sep 2026 05:17:56 GMTAIに「ログイン画面を作って」と頼むと、それらしい画面がすぐに返ってくる。困るのはそのあと。ボタンをもう少し下へ、見出しをひと回り小さく。その2つを伝えるために、また文章を書く。目の前に画面があるのに、指で動かせない。「AIに描かせる」と「自分の手で直す」を、同じ1枚の上でやるのがPenです。 Penは、AIに頼むだけの道具ではなく、AIのペンと自分の手が同じ画用紙の上で描く「魔法の画用紙」。第1話は、6つのステージ（画用紙と筆箱・空飛ぶペン・取りこむ・部品にする・コードと発表へ・外からのペン）の地図と、「無料」の線を5つの層で読む回です。アプリは2026年9月15日の料金ページで「いまは無料」。ただしAIの頭脳は自分でつなぐのが基本で、料金のしくみはつなぐ先しだいです。