制作物数百件の棚卸しをAIでやった話
散らばったデザイン制作物をClaude CodeとFigma MCPで一覧化。スクリーンショット取得からWordPressへの投入まで、棚卸しの全工程を記録しました。
デザイン制作物、どこにある？
デザイナーとして何年も働いていると、制作物はどんどん増えていきます。Figmaのファイル、ローカルのフォルダ、クラウドストレージ。あちこちに散らばった成果物を「ポートフォリオとしてまとめたい」と思っても、まず全体像の把握が大変です。
全ての制作物を棚卸しして一覧化する。言葉にすると単純ですが、1件ずつFigmaを開いてスクリーンショットを撮り、概要を書き、カテゴリを整理する作業は、手でやると膨大な時間がかかります。
Claude + Figma MCP で自動化
Claude Code には Figma MCP（Model Context Protocol）という仕組みがあり、Figmaファイルの情報取得やスクリーンショットの撮影をコマンドで実行できます。
やり方はシンプルでした。
- FigmaファイルのURLを Claude Code に共有する
- Claude Code が Figma API でファイル構造を取得
- 指定したフレームのスクリーンショットをダウンロード
- Markdownの棚卸しリストに追記
スクリーンショットの取得は並列で実行できるので、10数件を同時に処理しても問題ありませんでした。
棚卸しの結果
最終的にすべての制作物を一覧化できました。
カテゴリ | 件数 |
|---|---|
グラフィック（ポスター・チラシ・リーフレット） | 10件 |
UI/UX（Web・アプリ） | 5件 |
プレゼン資料・テンプレート | 2件 |
ブランド・プロダクト | 1件 |
展示・企画 | 1件 |
イラスト・ビジョン | 1件 |
リファレンス | 1件 |
ポスターやチラシといったグラフィック系が最も多く、次いでUI/UX。自分の仕事の全体像が数字で見えたのは、新鮮な体験でした。
Markdown → WordPress への投入
棚卸しリストを元に、各制作物の詳細ページを WordPress に投入しました。ここでも Claude Code が活躍します。
Gutenbergブロック形式のHTMLを自動生成し、wp_insert_post() で一括投入。画像のアップロードからページ生成まで、スクリプト1本で完了します。
ただし、ローカルのWordPress環境では CLI の PHP から MySQL に接続できない問題がありました。Apache 経由でブラウザからスクリプトを実行することで回避しています。
ハマりどころ
- Figma MCP ではチーム一覧をブラウジングできない。個別ファイルのURLが必須なので、事前にFigmaで確認してURLを控える必要があった
- スクリーンショットのURLは一時的。取得したらすぐダウンロードしないと期限切れになる
- NDA案件の取り扱い。クライアント名や社内資料が含まれる画像は、公開可否を慎重に判断する必要がある
棚卸しをやってよかったこと
制作物が一覧になったことで、自分のポートフォリオの作品選定がスムーズに進みました。「全体の中からどれを選ぶか」を考えるには、まず全体を見渡す必要があります。
また、自分へのナレッジにもつながりました。「過去にこういうデザインをやった」という情報が検索可能になることで、新しい案件の参考資料としても活用できます。
棚卸しは地味な作業ですが、AIの力を借りれば半日で終わります。制作物が増えてきたデザイナーにはおすすめです。