公開日：
こんにちは！アールスリーインスティテュートでデザイナーをしている、まきんちょです。
普段は、各種クリエイティブ制作やサイト構築などを担当しています。
さて、いよいよ今年もCybozu Days Japanが始まりましたね！🎉
11月12日（木）【今日！】〜13日（金）に幕張メッセで開催中のCybozu Days Japan 2026に、アールスリーインスティテュートも出展しています。
ブースは【S-13】、サイボウズタワーの近くなので、ぜひお立ち寄りください✨️
10年の節目である今年から、「Cybozu Days」が 「Cybozu Days Japan」になってとてもワクワクしています✨️
今回は、毎年この時期に発生する「Zoom背景づくり」を自動化した話をご紹介します。
使ったのは、キントーンの「社員名簿」アプリとClaude Codeです。
そして、この2つをつないだのがgusuku Fluxon（以下、フラクソン）です。
アールスリーのZoom背景は毎年変わる
アールスリーでは毎年、Cybozu Daysに合わせてキービジュアルを一新しています。
ブースや配布物だけでなく、社員が使うZoom背景もそのキービジュアルにそろえます。
Zoom背景とは、Zoomのバーチャル背景に設定する画像のことです。切り替えるのは、Cybozu Daysが終わってからです。
なお、システム開発グループは「キミノマホロ」デザインの背景を使っています。そのため、今回の対象はそれ以外の部署です。
背景には、会社のロゴのほかに
- 氏名（漢字・ローマ字）
- 所属部署・肩書
- 取得しているkintone認定資格のバッジ、その他資格のバッジ
が入っています。
アールスリーでは、全員がkintone認定アソシエイトを取得します。
そのため、全員の背景にkintone認定資格のバッジが入ります。その他の資格は任意です。
オンラインの商談やセミナーで、「誰で、何ができる人か」をひと目で伝えるためです。
これまでは「必要な人の分だけ」を手作業で
私がZoom背景の作業を引き継いだ当初は、「お客さまとミーティングをする機会がある人の分だけ用意する」方針でした。
それでもかなりの人数がいるため、キービジュアルが変わるたびに、
- 昨年分のレイヤーを、新デザインのPSDファイルに複製する
- SDキャラ版と等身大キャラ版の2枚ずつ書き出す
という作業を人数分くり返していました。
しかも、作ったら終わりではありません。
- 「kintone認定資格に合格したので、背景にバッジを追加してほしい」
- 「部署が変わったので、背景の部署名も変更したい」
といった依頼が、年間を通して都度届きます。
合格の報告は、もちろん嬉しいです。
ただ、そのたびにデザインデータを開いて直すのは、地味に手間のかかる作業でした。
今年はフラクソンがある！
まず、Claude Codeに「Zoom背景づくりを、うまく省力化できる方法はないかな？」と相談してみました。
すると、「社員の一覧表（CSVなど）から、全員分を一括で生成する」という案を出してくれました。
社員の一覧なら、キントーンの『社員名簿』アプリにあるのでは…？
Claude Codeからキントーンのアプリを参照するなら弊社のフラクソンが使えるな…？
アールスリーでは社員の情報をキントーンの「社員名簿」アプリで管理していて、そこには
- 氏名
- ローマ字表記
- 部署名・肩書
- kintone認定資格（資格ごとのフィールド）
- その他の資格（名刺に載せたい資格ロゴのフィールド）
と、Zoom背景づくりに必要な情報がすべてそろっています。
資格を取ったときは、社員本人がアプリを更新します。
部署が変わったときは、権限のある担当者が更新します。
つまり、情報はいつも最新の状態です。
そして今年は、生成AIからキントーンのデータを扱えるフラクソンがあります。
Claude Codeからフラクソン経由で「社員名簿」アプリを読めれば、Zoom背景づくりまで自動化できるのではないか？と考え、試してみることにしました。
Claude Codeにお願いしたこと
Claude Codeには、普段デザイナーとして気をつけていることを伝えました。
また、これまで手作業で対応していた「例外」も、そのまま言葉で伝えていきました。
実際にお願いした内容を、ざっくりまとめるとこんな感じです。
基本のルール
- 「社員名簿」アプリの「在職中」の全員分を作る
- 文字の位置・大きさ・字間は、2025年のデザインデータ（PSD）と同じにする
- 資格バッジは公式のバッジデータから作る（小さくしてもくっきり見えるように）
- 部署ごとにフォルダを分けて保存する
- 肩書が長くて入りきらない人は、行間→文字サイズの順に自動で縮める
表記のルール
- ローマ字は、「社員名簿」アプリではなく2025年の背景の表記を正とする
- 2025年の背景がない人は、「社員名簿」アプリのローマ字表記を使う
- ニックネームは、2025年に載せていた人だけ載せる
- 「社員名簿」アプリの氏名と2025年の背景の表記が違う人は、2025年の表記を優先する（例外として個別に設定）
- 「社員名簿」アプリのローマ字や部署が空欄の人は、2025年の内容で補う
細かいけど大事なこと
- フォントに入っていない漢字（いわゆる外字）がある人は、2025年に手作りした文字の画像を使う
- 資格によっては、ロゴと一緒に登録番号の表記が必須のものがある（ロゴの利用規約に合わせる）
- システム開発グループの背景はデザインが変わらないので、2025年から変更があった人だけ作り直す
- 背景・ロゴ・バッジの元データは改変しない（生成AIで画像を加工することもしない）
安全のためのルール
- キントーンの「社員名簿」アプリは読むだけ（レコードの追加・編集・削除、アプリの設定変更はしない）
- 過去年度のフォルダは読むだけで、書き込まない
- Slackでは本人にDMせず、#designチャンネルでメンションして知らせる
こうした例外は、これまで私の頭の中にしかなかったものです。
Claude Codeに伝える過程で、それがきちんと整理されたのはよかった点です。
「アプリの内容をそのまま使う部分」と「個別に上書きする部分」に分かれました。
しかも、その内容は設定ファイルとして残ります。
できあがったもの
最終的に、
- 「社員名簿」アプリをもとに、46人分の背景（2パターン）を一括生成
- できた背景は、「社員名簿」アプリの部署をもとに、部署ごとのフォルダへ自動で振り分け
- 社員は「配布ページ」で、部署から選ぶか名前で検索して自分の背景をダウンロード
- 資格を取った・部署が変わったときは、配布ページの「更新を依頼する」ボタンを押すだけで、自動で作り直してSlackでお知らせ
という形になりました。
Zoom背景書き出し、配布サイト作成、自動化の仕組み構築までの作業時間は、トータルで約11時間でした。
これまでは「お客さまとミーティングをする人の分だけ」だったZoom背景が、今回の自動化で全員分そろいました。
初めて自分の背景ができたバックオフィスグループのメンバーなどからも喜びの声をもらえて、嬉しかったです。
ただし、すべてを自動にしたわけではありません。
- 自動で更新するもの：kintone認定資格の追加、部署・肩書の変更（＝「社員名簿」アプリに入っている情報）
- デザイナーに相談してもらうもの：ローマ字やニックネームの表記変更、まだ登録していない資格のロゴ、そのほかの相談
配布ページにも「更新を依頼する」ボタンと「デザイナーに依頼する」フォームを分けて置いています。
仕組みについて
ここからは少しだけ技術的な話です。全体の流れは以下のとおりです。
キントーン（「社員名簿」アプリ）
すべての元データです。氏名・ローマ字・部署・肩書・資格が入っています。
ポイントは、背景のために別のリストを作らないことです。
普段から更新されている「社員名簿」アプリを、そのまま「正」として使っています。
gusuku Fluxon（フラクソン）
Claude Codeからキントーンのデータにアクセスするための橋渡し役です。
依頼が来たら、依頼した人のレコードだけを「社員名簿」アプリから読み出します。
具体的には、依頼者のメールアドレスからキントーンのログイン名を割り出します。
そして、そのログイン名で検索する仕組みです。
生成AIとキントーンの間に、
管理された制御層を。
生成AIとキントーンの間でアクセスや操作を適切に制御し、安全な生成AI活用を実現します。
Claude Code
今回の主役です。実際には、いくつもの役割をこなしてもらっています。
- 背景を描くプログラムを書く
Python（Pillowという画像ライブラリ）で、名前・部署・バッジを背景に配置するスクリプトを作りました。レイアウトや部署ごとの色は設定ファイルにまとめているので、来年デザインが変わっても差し替えやすくなっています。 - 定期タスクとして動く
平日の10時と15時に、新しい依頼がないかをチェック。依頼があれば、フラクソンで「社員名簿」アプリを読み、背景を作り直して、Slackに投稿するところまで行います。依頼がなければ何もしません。 - 配布ページを作る
ページのデザインや検索機能も、Claude Codeに作ってもらいました。
なお、背景の文字には、私のMacに入れている有償フォントを使っています。
フォントのデータそのものを社内に配ったり、Webページで使ったりすることのないように、文字を描くのは私のMacの中だけにしています。配るのは書き出した画像だけです。
Google Apps Script（GAS）とGoogleドライブ
配布ページは、Google Apps Scriptで作った社内向けのWebページです。
生成した背景画像は、Googleドライブの部署ごとのフォルダに保存します。配布ページからは、そこへリンクしています。
作り直すときは、同じファイルに上書きするため、ダウンロード用のリンクは変わりません。
「更新を依頼する」ボタンが押されると、GASがGoogleドライブ上の依頼リストに1行追加します。それをClaude Codeの定期タスクが拾って処理する、という連携です。
「デザイナーに依頼する」フォームの内容は、GASからSlackのデザイナー向けチャンネルに届きます。
Slack
作り直しが終わったら、#designチャンネルで本人にメンションを付けて、完了のお知らせを投稿します。
本人へのDMにしなかったのは、見えないところで仕事をしないためです。誰からどんな依頼があって、いつ対応が終わったのかを、チームの誰もが確認できるようにしています。
「社員名簿」アプリに見つからない人がいた、エラーが出た、など人の確認が必要なときは、私宛てに連絡が来るようにしています。
セキュリティについて
この配布ページは、社員のフルネーム、ローマ字、部署、肩書がずらっと並んだページです。いわば個人情報のかたまりなので、置き場所や公開範囲にはかなり気をつけました。
- 見られるのは、会社のGoogleアカウントでログインしている人だけ
配布ページは、GASの「組織内の全員」だけがアクセスできる設定で公開しています。URLを知っていても、社外の人や会社のアカウントでログインしていない人は開けません。 - 画像そのものも社内限定
背景画像は会社の共有ドライブに置いているので、ダウンロードするときも会社のアカウントが必要です。 - ボタンやフォームも、社内アカウントかどうかをチェック
「更新を依頼する」ボタンやフォームは、押した人が会社のアカウントかどうかを確認してから受け付けます。誰が依頼したかも記録されます。
（そもそも背景の内容は「社員名簿」アプリから作るので、依頼でできるのは「最新の『社員名簿』アプリに合わせて作り直す」ことだけです） - キントーンは読むだけ
フラクソンからは「社員名簿」アプリを読み取るだけで、データやアプリの設定には一切書き込まないルールにしています。Claude Codeへの指示にも明記しています。 - Slackの通知用URLはページに埋め込まない
Slackに投稿するための鍵（Webhook URL）は、GASの「スクリプトプロパティ」という、ページを見る人からは見えない場所に保存しています。
やってみてわかったこと
配布ページの「コピペ地獄」をなくせた
最初は、
- Claude Codeが配布ページのHTMLを作る
- 私がそれをGASのエディタにコピペする
- 再デプロイする
という流れでした。
ところがこのHTML、検索機能やデザインが入っている分、けっこう長い😅
少し直すたびに全文をコピペして、デプロイし直して……というのが、とにかく大変でした。
そこでClaude Codeに相談して、仕組みを変えてもらいました。
- 配布ページのHTMLは、Googleドライブ上のファイルとして置いておく（Claude Codeが更新するたびに上書きされる）
- GASは、ページが開かれるたびにGoogleドライブにある最新のHTMLを読み込んで表示するだけ
- 社員のデータ（名前・部署・画像のリンク）も、同じようにGoogleドライブ上のファイルから毎回読み込む
GAS自体は「Googleドライブから最新版を取ってきて見せる係」になったので、ページを直してもGASへのコピペや再デプロイが不要になりました。
新しく入った人が「社員名簿」アプリに追加されても、ページを貼り替えることなく検索に出てきます。
GASを触る必要があるのは、ボタンの動きなど、GASのプログラムそのものを変えるときだけです。
そのほか
- データがキントーンにそろっていたのが一番大きかった
「社員名簿」アプリがきちんと運用されていたからこそ、それを元データにするだけで済みました。キントーンに業務データを集めておくと、こういう使い方もできるんだと実感しました。 - Claude Codeには、やりたいことを言葉で伝えるだけ
コードはほぼClaude Codeが書いています。私は「名前はこの位置」「バッジはこのくらいの大きさ」「部署ごとに色を変えたい」と、デザイナーとして指示を出す役でした。 - ルールは最初に決めて伝えておく
「社員名簿」アプリは読むだけ、過去年度のフォルダは触らない、Slackへの投稿は最初のうちは確認してから……と、先にルールを決めて伝えておくと、安心して任せられました。 - つまずいたところ
フラクソンにつなごうとしたらまだアカウントがなかった、というサザエさんも真っ青なうっかりを発動しましたが、ボスがすぐにインビテーションを送ってくれました。
基本的にはスムーズに短期間で構築できました！
おわりに
毎年「必要な人の分だけ、手作業で」作っていたZoom背景が、今年は約11時間の作業で「全員分を一括で作り、変わった人だけ自動で作り直す」仕組みになりました。
来年キービジュアルが変わっても、デザインとレイアウトの設定を差し替えれば、全員分をまとめて作り直せるはずです。
（来年の自分がちゃんと使えるように、手順書もClaude Codeに書いてもらいました）
「データはキントーンにあるのに、それを使う作業はまだ手作業のまま」というものは、意外と身近にあるのではないでしょうか。
フラクソンとClaude Codeの組み合わせ、ぜひ試してみてください！
Cybozu Days Japanのブースでお待ちしています！
11月12日（木）〜13日（金）に幕張メッセで開催中のCybozu Days Japan 2026に、アールスリーインスティテュートも出展しています。
ブースは【S-13】、サイボウズタワーの近くです。
ブースでは、この記事で使ったフラクソンのデモをご覧いただけます。生成AIに関するブースセミナーも行っています。
今年のZoom背景と同じキービジュアルのブースで、お待ちしています！
ブースセミナーのタイムスケジュールは、こちらのポストでお知らせしています。
投稿者プロフィール
-
デザイナーです。
Webデザイン、コーディング、グラフィックデザイン、CMS構築までなんでもござれ！
