デザイン · 実測
Claude Opus 5.5 と Ciyo で Instagram のカルーセルを作る
カルーセルには、画像モデルが両立させにくい二つのものが必要です。魅力的な絵と、どのスライドにも数行ずつ入る正確な文字です。仕事を分ければ、それぞれの道具が得意なことを担当できます。
2026年9月27日、架空のボードゲームカフェ Rook & Rabbit のために 4 枚のスライドのカルーセルを作りました。イラストは Ciyo で作り、スライドのレイアウトと文字組みは claude.ai の Claude Opus 5.5 が行いました。Ciyo は Claude Opus 5.5 を提供していません。
絵と文字を分ける理由
画像モデルの文字はずいぶん上手になりましたが、カルーセルには 4 枚のスライドにわたって何十もの単語があり、1 文字でも間違えれば生成し直しです。コードで組んだ文字は作り方そのものによって正確で、日付も数秒で変えられます。
そこで Ciyo には、文字がまったくなく、見出し用の空いたエリアがある絵を頼み、それ以外はすべて Opus 5.5 に頼みました。
2026-09-26に投稿。アプリの創業者が、Opus 5.5 への一つのプロンプトで自分のアプリのカルーセル素材がひとそろい作れたと書きました。自分の製品についての短い投稿で、方法は共有されていません。以下のテストでは、一つのやり方と、確認すべき点を紹介します。
ステップ 1: Ciyo で文字のないイラストを作る
Ciyo の Image Generator（画像生成）で GPT Image 2.5 Flare を選び、Instagram の縦長の投稿に使われる 4:5 の比率、2K、2 枚を指定しました。費用は 6 クレジットです。プロンプトでは、下半分に上から見たカフェのテーブル、見出し用に上部 40% の無地の緑のエリア、ブランドの色、そして文字なしを頼みました。
2 枚とも 1,792 × 2,240 で届き、頼んだ場所に空いた緑のエリアがあり、余計な文字はありませんでした。それを Instagram の縦長のサイズである 1,080 × 1,350 に縮小しました。
ボードゲームカフェの Instagram カルーセル用の、フラットなエディトリアルイラストを描いてください。真上から見た丸い木のカフェテーブルに、チェス盤、サイコロ 2 個、小さく積んだカード、コーヒー 2 杯を載せ、画像の下半分に配置してください。画像の上部 40% は、あとで見出しを入れるための、何もない無地の深緑（#1F4D3A）のエリアにしてください。色は深緑、クリーム色（#F3E9D2）、少しの温かい琥珀色です。すっきりしたフラットなベクターのスタイルで、影はやわらかくしてください。文字、アルファベット、数字、ロゴは入れないでください。ステップ 2: Opus 5.5 へのレイアウトの依頼文
2 枚のイラストとロゴを添付し、各スライドの正確な文言、90 ピクセルのセーフマージン、ブランドの 3 色を Opus 5.5 に伝えました。依頼文の一部は “Make a 4-slide Instagram carousel for Rook & Rabbit … Each slide is 1080 x 1350. Build it as one self-contained HTML file … Keep all text inside a 90 px safe margin, and use only #1F4D3A, #F3E9D2 and #B06A10 for text and shapes.”（Rook & Rabbit の 4 枚の Instagram カルーセルを作ってください……各スライドは 1080 x 1350 です。それだけで完結する HTML ファイル一つとして作ってください……すべての文字を 90 px のセーフマージンの内側に収め、文字と図形には #1F4D3A、#F3E9D2、#B06A10 だけを使ってください）です。各スライドの文言を含む依頼文の全文は、スクリーンショットにあります。
Opus 5.5 が作ったもの
数分で、絵を埋め込んだ 545,178 バイトの HTML ファイル一つと、4 枚すべてのスライドのプレビューが返ってきました。スライド 1 は、空いた緑のエリアに “Saturday Game Night”（土曜のゲームナイト）を置き、開始日を枠線つきの丸いラベルに入れています。スライド 2 は、三つの手順に目が一つ、二つ、三つのサイコロで番号をつけているので、文字が増えません。スライド 3 はルークと耳のシンボルを大きくし、その下に料金と時間を置いています。スライド 4 は “Book a table”（テーブルを予約）の横に、クリーム色のタイルに載せたロゴを置いています。
自分の仕事の確認もしました。各スライドを描画し、ルークのマークを小さくし、余白を確認し直し、ファイル内の色を検索しています。役に立つことも教えてくれました。テストの描画では代わりのフォントが使われていて、Georgia のほうが幅が広いので、端末によっては “Pick a game from our shelf”（棚からゲームを選ぶ）が折り返すかもしれない、というのです。
測ってわかったこと
各スライドを Chromium で Georgia を使って描画し、文字の行をすべて測りました。すべての文字が 90 ピクセルの余白の内側にあります。いちばん端に近い行は “Saturdays 6 pm” で、幅 1,080 ピクセルのスライドの 106 から 974 ピクセルまでを占めています。ファイルのコードに使われている色は、ブランドの 3 色だけです。警告は正しく、Georgia では “Pick a game from our shelf” が 2 行に折り返し、“shelf” だけが次の行に取り残されます。
勝手に変えたところが一つあります。スライド 3 で、Opus は “Free entry · Saturdays 6 pm”（入場無料 · 毎週土曜午後 6 時）を 2 行に分け、中黒を二つの行の間の独立した行に置きました。単語は正確ですが、行は正確ではありません。1 行のまま保つ必要があるなら、依頼文にそう書いてください。
| スライド | 文字 | 90 px の余白の内側 | メモ |
|---|---|---|---|
| 1 | “Saturday Game Night · Starts 3 October” | はい | 空いた緑のエリアに見出し |
| 2 | “How it works” と三つの手順 | はい | “shelf” だけが 2 行目に折り返す |
| 3 | “Free entry · Saturdays 6 pm” | はい | 中黒の前後で 2 行に分かれる |
| 4 | “Book a table · rookandrabbit.example” | はい | クリーム色のタイルにロゴ |
投稿して、使い回す
投稿するには、各スライドを 1,080 × 1,350 でスクリーンショットするか PNG に書き出し、順番にアップロードします。スライド 2 で 1 語だけが次の行に残る問題は、手順の文を短くするか、テキストボックスを少し広げて直してください。
翌週は、日付と絵を変えて、ファイルはそのまま使います。Ciyo で同じ色の文字のない絵を新しく生成して差し替えれば、レイアウト、フォント、余白は変わりません。
Claude Opus 5.5 と Ciyo で作るカルーセル
スライド全体を一枚の画像として生成しないのはなぜですか
生成した画像の文字は、綴りが間違って返ってくることがあり、変更のたびに新しい画像が必要になります。コードで組んだ文字は正確で、すぐに編集できます。
Instagram のカルーセルのスライドはどのサイズにすればよいですか
私たちは 4:5 の縦長サイズである 1,080 × 1,350 ピクセルを使いました。Ciyo の 4:5 の比率と 2K では 1,792 × 2,240 になったので、縮小しました。
Ciyo の工程の費用はいくらでしたか
2026年9月27日に、GPT Image 2.5 Flare で 2K の 4:5 の画像を 2 枚作り、6 クレジットでした。
Ciyo の中で Claude Opus 5.5 を使えますか
いいえ。Ciyo は Claude Opus 5.5 を提供していません。絵は Ciyo で、レイアウトは claude.ai で作ってください。
カルーセルの絵を Ciyo で作る
4:5 を選び、場面を説明し、見出しの余白を残して、文字なしを頼みましょう。