Pen 第3話2026.09.27

【小学生でもわかる】PenでAIに頼まずに画面を描く！スマホのログイン画面を手で組んで画像にするまで

「アプリのログイン画面は、こんな感じで」と、1枚の絵にして人に見せたい。けれど、見出しを少し大きくするだけのことで、AIに頼み直して利用枠を使うのは気が引ける。「見出しを、ひと回り大きく」「入力欄を、もう1つ」。このくらいの直しなら、ことばで頼むより、自分で描いたほうが早いこともあります。

0円（①アプリ本体と⑤書き出しの層だけ。料金ページは「いまは無料」）。ただしアカウントとログインは要る

Xで記事を読むシェア

どんな話？

AIのペンを1度も呼ばずに、横390・縦844の枠を縦の Flex にし、アイコンと Noto Sans JP の見出し、入力欄2つとボタンを組んで、PNG と .pen で残す回です。手で描く道具と書き出しは、AIのエージェントが1度も動かないまま終わりました。ただしアカウントとログインは要ります。完成形を通しで組んだわけではなく、入力欄とボタンは別の試し用の画面で確かめています。

この記事でわかること

新しい画用紙の枠は「Frame」横800・縦600。スマホの大きさのひな形は見当たらず、W と H に数字を手で入れる
Flex の枠の中では、矢印キーが「動かす」ではなく「並び順を入れかえる」になる
親が Hug で子が全部 Fill だと、おたがいを待って大きさが決まらない。子を Fill にした向きは、親を Hug にしない
書体の一覧に日本語の書体が並んでいて、見出しを Noto Sans JP にできた
描くための文書の窓は「Sign in to pen.dev」と出てログインを求めた。AIのペンに頼まなくても、アカウントは要る

やることチェックリスト

0/6

記事を読みながら、できたものにチェックを付けていけます。チェックはこの端末に残ります。

「New File」を押して、新しい画用紙を開く
「Frame」の W に 390、H に 844 と入れて、縦長にする
Layout の下向きの矢印を押して、縦の Flex にする
T のボタンで文字を置き、Ctrl＋Alt＋G で枠に包んで入力欄にする
「Export layer」で PNG を出し、.pen で保存する
5つの部品が上から並び、PNG と .pen が残っているか確かめる

くわしい手順と画面の図は、Xの記事にあります。

こんな人に

AIに頼む前に、まず自分の手で Pen の画用紙を触ってみたい人
小さな直しのたびにAIに頼んで、利用枠が減っていくのが気になる人
デザインの道具は初めてで、「フレーム」「Flex」「Hug」という言葉で手が止まった人

この話のTIPS

注意Pen のモデルの一覧に Claude のモデルが並び、最初から選ばれていても、つながっているとは限りません。第3話のパソコンでは、Claude の行は「Not connected」のままでした。
コツPen の Flex の枠では、子を Fill にした向きは、親を Hug にしない。親の大きさを数字で決めておけば、親子でおたがいを待って枠がつぶれる形を避けられます。

すべてのTIPS