【小学生でもわかる】Penにいまあるウェブページを取りこむ！白紙から描き直さずに、見出しを直すまで

どんな話？

アプリの中の内蔵ブラウザで example.com を開き、Import で画用紙に取りこんで、見出しを1か所打ちかえて .pen で保存した回です。約6秒で「div」という名前の枠が入り、見出しは文字のまま選べて、Context 欄に「h1」と出ました。取りこみのあいだ、AIのペンは動いていません。ただしページの動き（JavaScript）は残らず、取りこめることと使ってよいことは別です。

この記事でわかること

• 取りこみの入口は5つ。この回の主役は、デスクトップアプリだけの機能の内蔵ブラウザ
• 取りこんだ枠の名前は「div」、見出しの Context 欄は「h1」。元のページの作りの名残をつけたまま入る
• Pen の規約に取りこみを名指しで禁じた条文は無いが、他人の権利を侵す使い方は禁止。取りこんでも、そのページの権利は持ち主に残る
• Figma からコピーして貼ると、画像の要素は入らない。ファイルを丸ごと取りこむか、画像を自分で入れる（ドキュメント）
• Chrome の拡張機能「pen.dev web import」は、ドキュメントに使い方が無く、すべてのサイトのデータにさわれる権限を求める

こんな人に

• 自分のサイトやブログの直し案を、コードを開かずに画用紙の上で試したい人（元のサイトは変わりません）
• デザインの道具を開くたびに、白紙から画面を組み直している人
• 「ウェブページを丸ごと取りこめる」と聞いて、他人のサイトでもいいのか気になった人

この話のTIPS

• 注意Pen でログインしたままのページ（マイページや管理画面）を取りこむと、名前や注文などがそのまま画用紙に入ります。練習は、ログインの要らない example.com か自分のページで。
• コツPen に入れた画像は .pen の中に入らず、外の別のファイルとして指されます。.pen だけを移したり人に送ったりすると画像が欠けるので、画像のファイルと同じ並びのまま動かしましょう。