## はじめに
エンジニアにとって、デザインツールは「見るもの」であって「操るもの」ではありませんでした。しかし、**Claude Code**の登場でその境界が壊れようとしています。  
  
今回は、AIネイティブなデザインツール **<a href="https://www.pencil.dev/" target="_blank" rel="noopener noreferrer">Pencil</a>** と、定番の **<a href="https://figma.com" target="_blank" rel="noopener noreferrer">Figma</a>** をClaude Code経由で連携させ、実際のUIコンポーネントを移植・比較検証した記録をシェアします。  

---

## 1. なぜ「Pencil」なのか？
Figmaは登場から安定な人気を誇っており、エンジニアやデザイナーに広く利用されています。  
しかし、エンジニアがAI（LLM）を使ってデザインを自動生成・修正しようとしたり、デザインをHTMLなどのプログラムコードに変換しようとすると、Figmaの複雑なデータ構造が壁になることがあります。  

そこで注目したのが**Pencil**です。  
* **JSONベース:** デザインがコード（.penファイル）として管理できる。
* **Git親和性:** デザインの差分が**git diff**で見える。
* **Claude Code連携:** CLIから「このボタンを赤くして」でデザインファイルが直接書き換わる。

今回は、Figmaで作成したUIをPencilに移植する検証と、FigmaとPencilそれぞれからHTML/CSSへの変換精度を比較してみました。  

---

## 2. 【検証】FigmaからPencilへの「移植」実験
実際に、Figmaで作成した「かえるさん」の投稿リストUIを、Claude Codeを使ってPencilへ移植してみました。  
今回は、デスクトップ版のFigmaを使用し、MCPサーバ経由でデータを取り込む方法を選択しました。  
PencilはVisual Studio Codeの拡張機能版を利用しました。  
詳しいインストール方法やセットアップは<a href="https://www.pencil.dev/downloads" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>を参照してください。  

### Figmaでの事前準備

FigmaのMCPサーバでClaude Codeに情報を取り込む際は、Figmaデスクトップアプリを利用します。  
このとき、Claude Codeに渡すリンクは**DEV Mode用のリンク**を使用してください。デザイン共有用のリンクよりも正確なCSSプロパティを取得できます。  
また、移行したい画像は、Figma上でエクスポートの設定をしておくと、Pencilへの画像の移植がスムーズになります。  
  
| ⭕️ | ❌ |
| :---: | :---: |
| DEV Mode 用のリンク | デザイン共有用のリンク | 
| ![DEV Mode 用のリンク](https://cont.sterfield.co.jp/uploads/figma_dev_mode_link_de1a34f2f1.png) | ![デザイン共有用のリンク](https://cont.sterfield.co.jp/uploads/figma_design_link_5cbfb1ad90.png) | 
  
### 比較結果
| 項目 | 元のFigma | 移植後のPencil |
| :--- | :--- | :--- |
| **レイアウト** | オートレイアウトで緻密に構築 | ほぼ完璧に構造を再現 |
| **画像** | 縦長のカスタムクロップ | アスペクト比が微妙に変化 |
| **パーツ** | 星評価、ハート、トグル | 意図を汲み取って配置済み |
| **余白感** | デザイナーによる微調整 | 少し詰まった「AI翻訳」感 |
| **インタラクション** | ⭕️ | ❌ |
| **スクリーンショット** | ![crop-on-figma.png](https://cont.sterfield.co.jp/uploads/crop_on_figma_0881c65190.png) | ![pencil-on-vs-code.png](https://cont.sterfield.co.jp/uploads/pencil_on_vs_code_6979519cdd.png) |

### 判明したClaude Codeの挙動
検証の結果、Claude Codeは単にAPIでデータをコピーしているのではないことが分かりました。  
  
![VS Code 上の Pencil](https://cont.sterfield.co.jp/uploads/pencil_on_vs_code_6979519cdd.png)
1. **MCPで構造（Metadata）を取得:** レイヤー名から「これはリスト」「これはボタン」と意味を理解。  
2. **Visionで詳細を補完:** スクリーンショットを画像解析し、色や形状のディテールを「見たまま」再現。  
3. **ハイブリッド生成:** 構造と見た目を統合して.penファイルを書き出す。  

---

## 3. FigmaとPencilのHTML/CSS変換精度比較
次に、FigmaとPencilそれぞれからHTML/CSSへの変換精度を比較してみました。  

| 元のFigmaデザイン | FigmaからHTML | PencilからHTML | Pencil + FigmaからHTML
| :---: | :---: | :---: | :---: |
| <a href="https://cont.sterfield.co.jp/uploads/figma_bcbbdf37b7.png" target="_blank"><img src="https://cont.sterfield.co.jp/uploads/figma_bcbbdf37b7.png" alt="元のFigmaデザイン" width="240"></a>  | <a href="https://cont.sterfield.co.jp/uploads/figma_to_html_5749440802.png" target="_blank"><img src="https://cont.sterfield.co.jp/uploads/figma_to_html_5749440802.png" alt="Figmaからの変換結果の拡大" width="240"></a>   | <a href="https://cont.sterfield.co.jp/uploads/pencil_to_html_eb04d40093.png" target="_blank"><img src="https://cont.sterfield.co.jp/uploads/pencil_to_html_eb04d40093.png" alt="Pencilからの変換結果の拡大" width="240"></a>   | <a href="https://cont.sterfield.co.jp/uploads/pencil_to_html_with_figma_a9fe9e5dd9.png" target="_blank"><img src="https://cont.sterfield.co.jp/uploads/pencil_to_html_with_figma_a9fe9e5dd9.png" alt="PencilとFigmaのデータを参照して仕上げた結果の拡大" width="240"></a>   |

- **FigmaからHTML**  
   インタラクションなどの動きは再現できた反面、細かいレイアウトやスタイルの崩れが目立ちました。  
- **PencilからHTML**  
  Figmaからの変換に比べてレイアウトの崩れが少なく、忠実度が高い結果となりました。ただし、細かいスタイルの再現にはまだ課題が残ります。  
- **Pencilからの変換後、Figmaのデータも参照して仕上げた結果**  
  Figmaからの変換に比べてレイアウトの崩れが少なく、忠実度が高い結果となりました。ただし、細かいスタイルの再現にはまだ課題が残ります。  

---

## 4. Figmaに慣れている筆者が感じたリアルな所感
実際に使ってみて感じた、正直な感想です。  

### 気になったところ：エディタとしての使いづらさ
Figmaに慣れすぎた体には、Pencilのエディタはまだ「手が縛られている」感覚があります。  
* **画像のクロップ制限:** 自由なトリミングが難しい。
* **絶対配置（Absolute）の不在:** Flexbox的な制約が強く、自由な重ね合わせに苦労する。
* **操作感:** Figmaほどの滑らかなキャンバス操作には及ばない。

### いいと思ったところ：AIエージェントとの「共鳴」
驚いたのは、別スレッドで「階層を整理したFigmaデータ」を渡した際、Claude Codeが**ローカルにある既存のPencilファイルに自律的に気づき、それをベースに改修を始めた**ことです。

これは、AIが単なる「変換ツール」ではなく、コンテキストを共有する「開発パートナー」として機能していることを示唆しています。Figmaが「デザインの完成図」なら、Pencilは「AIが理解・編集しやすい中間設計図」として機能し、Claude Codeがその間を繋ぐハブになる。この体験は、これまでのデザインワークフローにはなかった新感覚のものです。

---

## 5. 考察: 「Figma → Pencil → HTML」がうまくいった理由

今回の検証で最も興味深かったのは、**直接Figmaからコードを生成するよりも、一度Pencilを介した方が最終的なHTML/CSSの精度が高まった**という点です。

その理由を考察します。

1. **AIにとっての「解像度」の最適化**:
   Figmaの生データはノードの詳細情報が多すぎて、AIがコード化する際に「どこを重視すべきか」の判断が難しくなります。一度Pencilに変換することで、デザインがAIにとって理解しやすいセマンティックな構造に整理（正規化）されます。
2. **Dev Modeがもたらす「設計図」の精度**:
   FigmaをDev Modeに設定することで、Claude Codeは単なる「見た目」だけでなく、CSSプロパティとしての数値を正確に把握します。これにより、Pencilへの移植精度が劇的に向上し、結果としてそこから出力されるコードも堅牢になります。
3. **インタラクションのハイブリッド補完**:
   Pencilが苦手とする「動的な挙動」については、Claude CodeがFigmaのコンテキストを再度参照することで補完できます。これは、Git管理可能なPencilの「堅実さ」と、Figmaの「表現力」のいいとこ取りです。

---

## 6. まとめ

今回の検証を経て出した結論は、 **「エンジニアが主導するプロジェクトにおいて、PencilはFigmaをIDE（開発環境）へ繋ぐ橋渡し役」** として活躍しそうということです。 
  
確かに、エディタとしての使い勝手はまだFigmaに及びません。しかし、以下のようなワークフローが組めるようになった価値はとても大きいと感じます。  
  
1. **デザイナー**がFigmaで「正解」を作る。
2. **エンジニア**がClaude Codeを使って、Figma（Dev Mode）からPencil（.pen）へ高精度に翻訳する。
3. **AIエージェント**がその .pen ファイルをGitで管理しつつ、HTML/CSSへと落とし込む。
  
AIの進化は著しく、この記事を書いた1ヶ月後にはFigmaデータからHTML/CSSへの直接変換で何の問題もなくなっている可能性もありますが、  
色々な可能性を探して、試していき、新しい発見があったら共有していきたいと思います。  

## 参考
- <a href="https://code.claude.com/docs/ja/overview" target="_blank" rel="noopener noreferrer">Claude Code Docs</a>
- <a href="https://www.pencil.dev/" target="_blank" rel="noopener noreferrer">Pencil</a>
- <a href="https://figma.com" target="_blank" rel="noopener noreferrer">Figma</a>

large_eyecatch.jpg

medium_eyecatch.jpg

small_eyecatch.jpg

thumbnail_eyecatch.jpg

eyecatch.jpg

定番デザインツールのFigmaと注目のAIネイティブなデザインツールPencilのClaude Code連携を検証してみました

デザインワークに使うツールといえば、Adobe社のPhotoshopやIllustratorが最も有名です。デザイナーの求人情報を見ると、募集要項に「PhotoshopやIllustratorの使用スキル」が必須の条件として記載されており、クリエイティブワークを行う上で必要不可欠なツールと言えます。

しかし近年、Webデザイナーの求人欄には「Figmaの開発経験者歓迎」など、Figmaを推奨する記述を見かけるようになり、業界の必須ツールも変わりつつあることが感じられます。Figmaと同様の機能や役割を持つツールとしてAdobeのXDもありましたが、2023年に単体での販売が終了したため、Figmaの存在感がますます強まっています。
  
## Figmaとは
  
FigmaはUIやUXデザインに適したプロトタイプデザインツールです。WebサイトやWebアプリを作成する際、ボタンを押したときの画面遷移やメニューの開閉など、複雑な動きが求められます。また、切り替え時のフェードインやアニメーションなども演出としてよく使用されます。

通常、こういったアクションを表現するにはプログラムを組む必要がありますが、Figmaではグラフィック作成の段階からこれらの動きを再現できます。さらに、データを共有する機能があるため、関係者と完成イメージを共有しやすいのも利点です。

Figmaはブラウザ上で動作するため、アプリのインストールが不要で、インターネットに接続されたパソコンさえあれば使用できます。このため、環境に依存せずデザイン作業を進められるというメリットもあります。

## 実際にFigmaを使ってみた感想


私は長年Webデザイナーとして、主にIllustratorでデザインし、写真や画像の加工はPhotoshopで行ってきました。Figmaには業務で触れたことがある程度だったため、今回はその違いを確認するために実際にFigmaを使用してみました。

全体的な使用感としては、ツールの配置が異なるため少し戸惑う部分もありましたが、Illustratorに近い印象でした。Illustratorが使える人であれば、比較的簡単に慣れるでしょう。しかし、いくつかIllustratorと明確に異なる点がありましたので、挙げていきます。

### デフォルトで紙媒体を作成する機能が無い

FigmaはWebサイトやアプリなどのデジタルメディアのコンテンツをデザインするためのツールであるため、印刷物を作る機能がありません。そのため、紙媒体のデザインをする場合、フレーム（アートボード）のサイズを紙の規格のサイズで指定する、余白設定やトンボ（裁断時の目印）の設定をデザイナーが意図的に追加する手間が生じます。

ただし、プラグインを利用することで、紙媒体の設定も可能なようです。しかし、色指定に関しては、CMYKモードをIllustratorほど詳細には設定できません。そのため高品質が求められる場合はIllustratorのほうが適しています。Figmaはインターネット接続が可能であればどのパソコンでも編集が可能なため、頻繁にテキストを編集し、そこまで高品質が要求されない場合の物はFigmaの方が便利です。

### パスファインダー機能について

パスファインダーとは、複数の図形を組み合わせたり、重なり部分を切り抜いたりする機能で、デザイン作成によく使用されます。
結論から言うと、収納されている場所が違うだけでIllustratorと、ほぼ同じことができます。

 ![](https://cont.sterfield.co.jp/uploads/img_A_1_1378b85707.png) 

しかし、Illustratoreのパスファインダーにある「分割」に相当する機能がありません。

 ![](https://cont.sterfield.co.jp/uploads/img_A_2_45184b55ef.png) 

そのため、図形を複数のオブジェクトとして使いたい場合は、コピーを用意してそれぞれ切り抜きの設定を変えて作成する必要があり、少し手間がかかります。


### ペンツールでのパス描画

IllustratorやFigmaは基本的にベジェ曲線を制御して図形を描きます。そこでペンツールを使って図形を描くことを試してみました。 今回はフリー素材のサクランボのイラストを下絵にしてペンツールで描いてみました。

先ずはillutratorで描きます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_1_0c343f8462.png) 

ペンツールで先ずは始点となる頂点を選択しクリックし、ドラックをすると線が曲線になります。そして次の頂点を選択して下絵の輪郭をなぞります。
このようにして3つの図形を描きます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_2_873e4b36c9.png) 

茎の部分は緑色を指定して、実の部分にグラデーションを指定して色付けすます。最後に白い光沢描いて仕上げます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_3_bf1463921d.png) 

同様の作業をFigmaでも試してみました。

ペンツールが収納されている位置は違いますが、Illustratorで行う作業と同じで特に違和感なく作業ができます。しかし、2つ目のオブジェクトを描いた時点でIllustratorとの違いに気が付きました。

 ![](https://cont.sterfield.co.jp/uploads/img_B_4_3ad2f76b6c.png) 

普通に描いていたのですが、この時点で2つのパスで1つのオブジェクトになる扱いでIllsutratorで言うところの複合パスになっていました。そのためこの状態でグラデーションを設定すると、オブジェクト全体にグラデーションが描画されてしまいます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_5_c1a0890346.png) 


どうやら、ペンツールを使用する場合、 ペンツールアイコンの上に表示される×のアイコンをクリックしない限り、描いた物は1つのオブジェクトとして扱われるようです。

 ![](https://cont.sterfield.co.jp/uploads/img_B_6_bf0edd4ef9.png) 


また、一度描いた図形を編集したい場合、Illsutratorなら頂点を選択すれば編集できましたが、Figmaの場合、描いたオブジェクトを選択してエンターキーを押して 編集モードにしてから編集するようです。
 ![](https://cont.sterfield.co.jp/uploads/img_B_7_ce745450f3.png) 


これらのことを知らないと、意図しない複合パスができてしまったり、編集したくてもできないという事態になりかねません。  
  
また、Illustratorと違い、1つの頂点を起点にして複数の線を描いて枝分かれすることもできます。これを利用して矢印の形も描くことができます。
 ![](https://cont.sterfield.co.jp/uploads/img_B_8_3e8d5b59cc.png) 




### テキストの変形について

 ![](https://cont.sterfield.co.jp/uploads/img_C_1_8219f2283f.png) 

デザインをしていく上で、時にはテキストを変形してグラフィカルに見せることもあります。
このようなときはIllustratorの場合、先ずは普通にテキストを入力しは標準に備わっているワープツールを使うケースが多いです。

今回はワープツールの円弧を使って下方向に湾曲するテキストのサンプルを作ってみました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_2_08a797d87f.png) 

これと同じことがFigmaでできるか試してみました。

先ずはIllustratorと同じようにテキストを入力します。このときに気が付いたのですが、Figmaはパソコンにインストールされているフォントではなく、
googleフォントなど、オンライン環境で使用できるフォントデータを読み込んでいるようです。このような点もIllustratorとの違いを実感しました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_3_e396dbcb00.png) 

ただ、ワープツールに相当する物はFigmaの標準の機能ではないようです。調べてみるとプラグインで提供されており、プラグインで変形できるみたいなので実際に使ってみました。

今回は「Warp IT」というプラグインを使用してみました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_4_cf64d3c0cd.png) 


テキストを選択してプラグインを起動すると図のように編集画面が出ますこの画面で頂点を編集して、「APPLY RESULTS」ボタンを押すと編集した通りに形ができます。

 ![](https://cont.sterfield.co.jp/uploads/img_C_5_1a01f2c368.png) 

編集の仕方はIllustratorと違いますが、それでも問題なく加工ができそうです。しかし、作成してから気が付きましたが、作成した物はテキストデータ
ではなく、パスデータに変わっていました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_6_d708119777.png) 

この点、Illustratorはテキストデータの形を保持しているので別の文字に変える編集も可能です。なので、更新の可能性が高い物はIllustratorで作成した方がよいと思います。

 ![](https://cont.sterfield.co.jp/uploads/img_C_7_ec1e911ba1.png) 


## まとめ

Figmaを使用してみて、Illustratorでできることは概ねFigmaでも可能だと感じました。また、Figmaはインターネット環境があればどのパソコンでも使える手軽さがあり、導入コストが低いのも魅力です。  
  
ただし、IllustratorにはIllustratorの利点もあり、どちらか一方に代替されるのではなく、用途によって棲み分けられていく印象でした。  
  
今後のWeb業界でのツールの主な使い分けとしては、  
  
画面デザインはFigma  
写真加工はPhotoshop  
ロゴなど精密なデザインはIllustrator  
  
といった形になるのではないでしょうか。時代の変化に応じて、新しいツールも柔軟に取り入れていきます。


medium_25307319_m.jpg

small_25307319_m.jpg

thumbnail_25307319_m.jpg

25307319_m.jpg

Figmaが注目される理由とは？WEBデザイナーが使ってみた感想

Blogブログ

Articles

Contact Us