--- title: Pencil.devは現代のイラレ UIから製本、バナー制作まで tags: author: [kuu(Fumiya Kume)](https://docswell.com/user/fumiya-kume) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/LE1Y8QQL7G.jpg?width=480 description: Pencil.devは現代のイラレ UIから製本、バナー制作まで by kuu(Fumiya Kume) published: April 16, 26 canonical: https://docswell.com/s/fumiya-kume/59NVXP-2026-04-16-201524 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/LE1Y8QQL7G.jpg) Pencil.devは現代のイラレ UIから製本、バナー制作まで Cursor Meetup Kanagawa # Page. 2 ![Page Image](https://bcdn.docswell.com/page/GEWGZMMQJ2.jpg) # Page. 3 ![Page Image](https://bcdn.docswell.com/page/47ZL1QQ3J3.jpg) 雑に画像作るのに使える 自作ウェブサイトの画像とか、コラ画像とか ... # Page. 4 ![Page Image](https://bcdn.docswell.com/page/YJ6WL66ZJV.jpg) Pencil.dev とは # Page. 5 ![Page Image](https://bcdn.docswell.com/page/GJ5M1669J4.jpg) 実は可能性を秘めた ツールなんです... # Page. 6 ![Page Image](https://bcdn.docswell.com/page/LE3W1QQ2E5.jpg) 自己紹介 - Kuu ● ● Software Engineer at Mercari AIAU Codex ambassador Cognition ambassador(Windsurf, Devin) ○ ○ ● 趣味 ○ (海外)旅行 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/8EDKX9967G.jpg) 実例その1、本の表紙を描く # Page. 8 ![Page Image](https://bcdn.docswell.com/page/V7PKPZ9ZJ8.jpg) 実例その1、本の表紙を描く # Page. 9 ![Page Image](https://bcdn.docswell.com/page/2JVV2WMMJQ.jpg) 実例その1、本の表紙を描く デザインセンス0な人が、それっぽいの作れたのすごくない？ 表紙が無いよりはマシ # Page. 10 ![Page Image](https://bcdn.docswell.com/page/5EGLRDGXJL.jpg) 実例その1、本の表紙を描く # Page. 11 ![Page Image](https://bcdn.docswell.com/page/4JQYV1X57P.jpg) なぜ、Cursor からPencil.dev を使うのか ● ● Cursor はデザインが綺麗だからテンション上がる💅 Composer-2が強い ○ ○ ○ ● 早いのでデザイン改善のスプリントが早い (相対的に) 安く使えるので、気兼ねなく指示できる 性能的にもぼちぼち良い、 Claude 高い💰 リポジトリや本の内容を参照させながら画像作成させれる ○ 必要十分なコンテキストを準備するの大事 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/K74WMR6VE1.jpg) Pencil.dev でスマホアプリのUI作る知見 ● ● Webとかの場合はピクセルパーフェクトなUI作れる(らしい) スマホはそうは行かない ○ ○ ○ iOS, Android 両方サポート SwiftUI, Material Design に準拠したデザインにしたい ウェブっぽいデザインになりがち # Page. 13 ![Page Image](https://bcdn.docswell.com/page/LJ1Y8QV4EG.jpg) Pencil.dev でスマホアプリのUI実装するフロー ● ● Pencil.dev でいつも通りUI作る デザインを参照させたまま実装させる ○ ● ● モバイルエンジニア的にひどい実装、改善点しかない 既存実装をプラットフォームのUIに名指しで置き換えさせる 何とかなる # Page. 14 ![Page Image](https://bcdn.docswell.com/page/GJWGZMLZ72.jpg) Pencil.dev 使って(AIが)リリースしたアプリ # Page. 15 ![Page Image](https://bcdn.docswell.com/page/4EZL1QML73.jpg) Pencil.dev で作ったデザインの画像化秘蔵プロンプト # Page. 16 ![Page Image](https://bcdn.docswell.com/page/Y76WL6NM7V.jpg) Pencil.dev で作ったデザインの画像化秘蔵プロンプト @design.pencil を画像化して # Page. 17 ![Page Image](https://bcdn.docswell.com/page/G75M165Q74.jpg) Pencil.dev で作った画像のサイズ変更方法 # Page. 18 ![Page Image](https://bcdn.docswell.com/page/9J291MNWER.jpg) Pencil.dev で作ったデザインの画像化秘蔵プロンプト @design.pencil を画像化して、縦が2500, 横が1500でヨロ！ # Page. 19 ![Page Image](https://bcdn.docswell.com/page/DEY4ZXP9JM.jpg) まとめ ● ● ● Pencil.dev は便利 現代のイラレ ご清聴ありがとうございました！ # Page. 20 ![Page Image](https://bcdn.docswell.com/page/VJNY315D78.jpg) Pencil.devの不満点 Intellij ideaがサポートされてない # Page. 21 ![Page Image](https://bcdn.docswell.com/page/YE9P95Y8J3.jpg) まとめ ● ● ● Pencil.dev は便利 現代のイラレ ご清聴ありがとうございました！ このスライドはGoogle slideを利用して 作りました