Claude と Codex は、それぞれ何を担当しますか？

今回の構成では、Claude Code と Claude in Chrome が管理画面の操作を、Codex が SVG の制作を担当しています。Codex が制作したのは、診断アイコンとリッチメニューの画像です。人もログインや SMS 認証、規約同意などの承認、管理主体の選択、デザインの判断をしています。認証後のフォーム入力や画像の差し替えは、Claude が再開する流れです。

リッチメニューを作るには Messaging API が必要ですか？

デフォルトのリッチメニューは LINE Official Account Manager から設定できます。今回も管理画面でテンプレート、画像、アクション、表示期間を設定しました。Messaging API を有効にしたのはアプリ連携の準備も含めて進めていたためで、リッチメニュー画像を登録するためだけに API の送信処理を実装したわけではありません。メニューの設定方法と、その先で提供するアプリの機能を分けて考えると整理できます。

LINE 公式アカウントと Messaging API チャネルは同じものですか？

別のものです。LINE 公式アカウントはユーザーとの接点になるアカウントで、Messaging API チャネルはアプリから LINE の機能を利用するための設定単位です。公式の手順では、公式アカウントを作成し、LINE Official Account Manager で Messaging API の利用を有効にするとチャネルが作成されます。LINE Developers コンソールから Messaging API チャネルを直接作成する以前の手順は廃止されています。

LIFF アプリを登録すれば、診断結果と LINE アカウントを連携できますか？

登録だけでは完了しません。今回も LIFF アプリの登録とリッチメニューへのリンク設定は済みましたが、アプリ側の LIFF 初期化やログイン情報を受け取る処理は未実装でした。登録先の設定、開いた先のアプリ実装、ユーザーが操作したときの動作確認を別々に管理する必要があります。取材時点では、リッチメニューから診断結果を取得するまでの動作確認も残っています。

AI にロゴ入りの画像を作ってもらうとき、何を確認しますか？

まず正式なロゴ素材を渡し、描き直してよい範囲と変更してはいけない範囲を指定します。今回の初版では、ロゴに似た図柄を描く指示によって別の線画ができてしまいました。修正版では原本 SVG を埋め込み、パスデータが原本と一致することを確認しています。パスの一致だけで見た目全体を保証できるわけではないため、配置、比率、色、周囲の余白も描画した画像で確認します。

LINE 公式アカウントの開設からリッチメニューまで、AI に Chrome 操作を任せてみた

LINE の管理画面操作と画像制作を AI に任せる

LINE と連携するアプリを準備するときは、コードを書く以外に管理画面の操作も必要です。今回の作業には、公式アカウントの開設、アプリ連携の設定、リッチメニューの画像とリンク先の登録が含まれます。

今回はパーソナルカラー診断アプリの準備で、公式アカウントの開設からリッチメニューの登録までを AI と進めました。Chrome の操作は Claude Code と Claude in Chrome、アイコンとリッチメニューの SVG 制作は Codex が担当しています。人はログインや認証、管理主体の選択、デザインの判断を受け持ちます。

この記事では、2026 年 9 月 7 日から 8 日未明の作業を担当したセッションへの取材と、保存された制作物をもとに手順を整理します。フォームの入力だけでなく、ロゴの修正やスマートフォンでの見え方を受けた作り直しも紹介します。役割分担の考え方は、AI エージェントの設計パターンでも扱っています。

補足

取材時点で済んでいるのは LINE 側の登録・設定までで、アプリ側の LIFF 初期化とログイン情報を受け取る処理、プッシュ配信は未実装です。

診断結果と公式サイトへの導線を決める

リッチメニューの役割は、診断を受けた人が結果ページと店舗の公式サイトを開けるようにすることです。今回は左右 2 分割とし、左に「診断結果を見る」、右に「公式サイト」を配置しています。

左には LIFF URL、右には店舗サイトの URL を設定しています。LIFF は LINE Front-end Framework の略で、LINE と連携する Web アプリを扱うための仕組みです。登録する対象と、それぞれの役割を先に整理しておくと、管理画面を行き来する際にも作業範囲を把握しやすくなります。

対象	今回の役割	取材時点の状態
LINE 公式アカウント	ユーザーとの接点と、リッチメニューの表示先	開設・プロフィール設定済み
プロバイダー	店舗のチャネルを管理する単位	店舗名義で作成済み
LINE ログインチャネル	LINE ログインと LIFF の設定先	作成・公式アカウントとのリンク済み
Messaging API チャネル	アプリからの LINE 連携に向けた設定先	作成済み
LIFF アプリ	診断結果ページを開くための入口	登録済み、アプリ側の実装は未完了
リッチメニュー	診断結果と公式サイトへの導線	画像・アクション・表示設定を保存済み

公式アカウント、チャネル、LIFF アプリは、それぞれ登録する対象が異なります。管理画面での登録を済ませた後には、アプリにログイン処理を組み込む作業も必要です。

LINE 公式の LIFF 登録手順では、LINE ログインチャネルに LIFF アプリを追加し、エンドポイント URL やスコープを設定します。公式は新規作成時に LINE ミニアプリとしての作成を推奨しているため、新しく導入する場合は推奨構成も確認してください。この記事では、実際に採用した LIFF の構成を紹介します。

アカウント開設と開発者向け設定

プロバイダーの管理主体を確認する

プロバイダーを作る前に、どの組織がアカウントを管理するかを決めます。今回も、既存の会社プロバイダー配下に作る方針に対し、人から「別の店舗名義で新しいプロバイダーを作る」という訂正が入りました。

画面上で選べるプロバイダーが、その案件の管理先として適切とは限りません。AI に入力を頼む段階で、管理主体まで指定しておく必要があります。

LINE の公式手順では、Messaging API の設定時に選んだプロバイダーを後から変更できないと案内しています。別の LINE ログインチャネルと連携する場合も、同じプロバイダーを選びます。

今回、店舗のプロバイダーを作成したのは Claude です。続く LINE ログインチャネルの作成では、Claude がフォームを入力し、人が規約への同意と作成ボタンの操作を担当しています。

ログインと SMS 認証を人が進める

LINE アカウントへのログインと、公式アカウント作成途中の SMS 認証は人が担当し、認証後に Claude がフォームの入力を再開しました。

LINE Developers コンソールへのログインには、ビジネス ID と開発者アカウントが必要です。ログイン方法には LINE アカウントやビジネスアカウントなどがあり、選ぶ方法によってスマートフォンでの認証が入ります。AI に管理画面の操作を任せる場合も、人が認証に対応できる状態で進めます。

フォームの入力では、Claude が別の欄に値を入れ、気づいて訂正した箇所もあります。保存前には、項目名と入力値が合っているかを確認してください。

Messaging API と LIFF を設定する

公式アカウントを開設しただけでは、Messaging API チャネルは作成されません。今回も Claude が LINE Developers にチャネルが表示されていないことに気づき、Official Account Manager の設定から Messaging API を有効にしました。規約同意を兼ねる操作の前に人へ確認し、承認を受けて有効化しています。

LINE ログインチャネルと公式アカウントのリンク、LIFF アプリの登録も実施しています。LIFF の表示サイズはフルサイズ、スコープは openid と profile です。リッチメニューの左側には、この登録で得た LIFF URL を設定しています。

規約への同意と申請内容を確認する

アカウントの開設とは別に、認証済アカウントの申請も行っています。取材時点の状態は申請済み・審査待ちで、認証の取得は確認していません。

規約同意や申請送信は、人が内容を確認して承認する工程です。今回の記録にも人の承認を含むやり取りがあります。ただし、申請の最終ボタンを Claude と人のどちらが押したかは、要約記録から特定できません。

FIXIT

じゃあ、人は何を確認すればいいの？

Kaname

管理する組織と申請内容を確認します。認証への対応に加えて、入力後の設定も見直します。

リッチメニューの画像とアクションを設定する

リッチメニューは、画像の見た目と、タップしたときの動作を別々に設定します。今回は LINE Official Account Manager で左右 2 分割のテンプレートを選び、画像をアップロードして、それぞれの領域にリンクを指定しています。

画像のサイズは 2500×843 ピクセルです。Codex が SVG を制作し、Claude が PNG に描画して管理画面へアップロードしました。Codex が担当したのは、SVG のコードを書く作業です。

LINE 公式のリッチメニュー解説でも、デフォルトのリッチメニューは LINE Official Account Manager で設定できると案内しています。今回の登録も管理画面で行っており、リッチメニューを作成する API は呼び出していません。

登録中には、テンプレートの選択や表示期間の入力などで修正が入りました。

操作	起きたこと	対応
テンプレートの選択	最初に意図と異なるレイアウトを選んだ	左右 2 分割のテンプレートを選び直した
表示期間の入力	開始日が意図した日付からずれた	開始日を打ち直した
画像のアップロード	ファイル選択の操作に手間取った	拡張機能のファイルアップロード操作を使用した
タブの操作	それまで使っていたタブを操作できなくなった	利用できるタブを確認して再開した

操作後は、Claude が画面でテンプレート、日付、画像の反映を確認しています。画像を差し替える際も、左右のアクションと表示期間を確認対象に含め、設定を維持しました。

正式なロゴは描き直さずに埋め込む

ロゴ入りの画像を AI に依頼するときは、正式素材を渡し、変更してよい範囲を指定します。今回の初版では、Claude から Codex にロゴのモチーフをもとに図柄を描く指示を出していました。Codex が作ったのはアーチ窓と扉を模した線画で、正式なロゴとは異なる形です。

人からの指摘を受け、Claude は正式な SVG をそのまま埋め込み、位置と大きさだけを調整する指示に変更しました。プロフィール画像には原本を使えていましたが、リッチメニューでも同じ素材を使う指定が必要でした。

再発を防ぐには、「ブランドに合う感じで」だけでなく、素材の扱いまで伝えます。次は今回の経験を踏まえた依頼例です。実際の指示文をそのまま転載したものではありません。

添付したロゴは正式素材です。図形や文字を描き直さず、そのまま配置してください。
ロゴのパス、色、縦横比を保ち、位置と大きさだけを調整してください。
背景、枠、ボタンの影は新しく作って構いません。
完成後は、ロゴの元データとの一致と、描画したときの見た目を確認してください。

生成後は、Claude が SVG 内のパスデータを原本と比較し、一致を確認しています。ただし、同じパスでも変形や色、配置の指定によって見た目は変わります。データの比較に加えて、描画した画像も確認する手順にします。

スマートフォンでボタンの見え方を確認する

正式なロゴを埋め込んだ平坦版が、次の画像です。管理画面のスクリーンショットではなく、実際に制作したメニュー画像を掲載しています。

正式なロゴを埋め込んだ平坦版のリッチメニュー。緑の背景を左右に分け、左に診断結果、右に公式サイトへの案内を配置している

人がスマートフォンの LINE トーク画面で確認すると、「のっぺりしている」「ボタンに見えない」という指摘が出ました。左右に領域を分けるだけでは、押せる場所だと伝わりにくい見た目です。

修正では、人が金の装飾枠で縁取った 2 つのボタンにする方向を指定し、Codex が画像を作り直しました。金枠版は背景の上に 2 枚のカードを置き、金の二重枠、角の装飾、影とハイライトを加えた構成です。

金枠版のリッチメニュー。左右のボタンを金色の二重枠と角の装飾で囲み、影とハイライトを加えている

正式なロゴは引き続き埋め込み、Claude が再びパスデータの一致を確認しています。管理画面で画像を差し替えて保存し、「現在の表示」に金枠版が出ていることも確認しました。

制作したのは、初版、正式ロゴを使った平坦版、金枠版の 3 つです。人が実際の見え方を確認して修正の方向を伝え、Codex が作り直し、Claude が管理画面へ反映する流れになっています。

金枠版のスマートフォン実機での確認は、取材時点では未完了です。文字の読みやすさやボタンの押しやすさは、管理画面の画像だけでは判断できません。クリック率や利用率も計測していないため、ここではデザインを変更した経緯までを紹介します。

FIXIT

画像を作って保存できたら、それで完成じゃないの？

Kaname

保存後はスマホの表示とリンク先の動作を確かめます。今回は金枠版の実機確認とアプリ連携の実装が残っています。

LINE 側の設定とアプリ側の実装を分けて確認する

リッチメニューのリンク先を設定しても、診断結果を LINE の利用者に結び付ける処理は別途必要です。今回も、LIFF の初期化と、取得したログイン情報を診断結果の取得処理へ渡す部分は未実装です。プッシュ配信も含めて、アプリ側の作業として残っています。

取材時点の確認結果は次のとおりです。

確認対象	結果
管理画面のリッチメニュー一覧	金枠版が「現在の表示」に反映されていることを確認
メニュー編集画面	画像と 2 つの領域、アクションと表示期間を確認
ロゴの元データ	埋め込んだパスが原本と一致することを確認
平坦版のスマートフォン表示	人が実機で確認し、作り直しの指摘を出した
金枠版のスマートフォン表示	未確認
メニューから診断結果を取得する一連の動作	アプリ側の実装と検証が残っている
認証済アカウントの申請	申請済み、審査結果は未確認

AI から作業の完了報告を受ける際は、管理画面への登録、アプリの実装、実機での確認を分けて報告してもらいます。「LINE 連携が終わりました」だけでは、利用者が最後まで操作できるかを判断できないためです。

FIXIT の運用｜依頼前にそろえたい情報

次に同じ作業を依頼するなら、アカウントの管理主体、使う正式素材、確認する項目を先にそろえておきたいところです。今回は、人が管理先を訂正し、ロゴの違いとスマートフォンでの見え方を指摘したことで、AI への修正指示が具体的になりました。

次は今回の経験を踏まえた依頼例です。

LINE 公式アカウントに、2 つの入口を持つリッチメニューを設定してください。
左は診断結果、右は公式サイトです。リンク先は別途指定します。
登録する管理主体と、使う正式ロゴ素材を先に確認してください。
認証や規約同意が必要になったら、人が対応できるように知らせてください。
設定後は画像、左右のアクション、表示期間を確認してください。
管理画面で確認できたことと、スマホやアプリ側で未確認のことを分けて報告してください。

人が画面ごとの操作方法を 1 項目ずつ教える必要はありませんでした。ただし、案件をどの組織で管理するか、ブランド素材をどう扱うか、利用者に何を見せたいかは、人が言葉にして渡す必要があります。

成果物の確認には、変更前後の画像も使います。今回の平坦版と金枠版のように見比べられる状態にしておくと、修正が指示に沿っているかを判断しやすくなります。開発時のレビューでも、PR に画像を添付する運用として同じ方法を使えます。

株式会社フィットは、AI 駆動開発のクリエイティブスタジオとして、コードの実装に加え、外部サービスの設定や確認を含む仕事の進め方を検証しています。支援内容はAI 駆動開発のサービスでも紹介しています。

まとめ

LINE 公式アカウントの開設からリッチメニューの登録までは、管理画面を操作する Claude と、SVG を制作する Codex の分担で進められました。人が担当するのは認証や管理主体の判断だけでなく、正式ロゴの確認や、スマートフォンでの見え方を踏まえた修正指示も含みます。

次の工程は、金枠版の実機確認と LIFF 連携の実装です。そのうえで、メニューを押して診断結果を受け取れるかを確かめます。AI に作業を依頼するときも、登録する項目と、最後に確認する動作をセットで伝えてください。

既存の管理画面操作を含む業務の自動化は、お問い合わせからご相談いただけます。