コラム76本のサムネイルを、1日で作り直す。アイキャッチ量産と入稿の自動化

アーム自身のコラムのアイキャッチを、1枚ずつ手で作るのをやめ、Figmaのコンポーネントから量産して入稿するまでを自動化した取り組みです。デザインを決めるところは人が握ったまま、複製・文言の差し替え・書き出し・圧縮・入稿という反復だけを機械に渡しました。設計・実装ともアーム内で行っています。

• 記事を公開するたびにアイキャッチが必要で、1枚ずつ作っていると執筆の流れが毎回そこで止まっていた
• 用意が追いつかず、デフォルトのサムネイルのまま公開された記事が積み上がり、一覧の見た目がばらついていた
• デザインを刷新するたびに、既存の全記事ぶんを作り直す必要があった

• サムネイルのデザインをFigmaのコンポーネントに集約し、差し替える箇所を見出しとサブコピーの2つだけに絞った
• Claude Codeから複製と文言差し替えを実行し、書き出し→AVIF圧縮（1枚200KB以内）→microCMSへのアップロード→記事への紐付けまでを一続きの手順にした
• 代替テキストの設定のようにAPIが用意されていない工程は、管理画面の操作ごと自動化して手作業を残さないようにした
• 公開済みの記事と、予約公開を待っている記事とで書き込み方を変え、公開日や公開状態を壊さない手順にした

デザイン刷新にともなう76本の差し替えを1日で完了しました。以降は記事を書いた流れのままサムネイルが用意されるため、アイキャッチが理由で公開が遅れることが無くなっています。

サムネイルのデザイン、テンプレートのコンポーネント化、量産・書き出し・圧縮・入稿・紐付けの自動化、既存記事の一括差し替え

• デザインと実装：伊藤 悠希（aaam）