LINE公式アカウントのビジュアルをClaude Designで一気に揃えた話

「なんかバラバラだね」から始まった

クライアントのLINE公式アカウントを立ち上げたとき、アイコンはFigmaで作り、カバー画像はCanvaで作り、リッチメニューはデザイナーにお願い——という状況になった。3人が別々のツールで作ったからか、フォントも色もテイストもバラバラ。「なんかチグハグだね」と言われて、全部やり直しになった。

そのやり直しをClaude Designで一気にやってみたのが今回の話。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。※Figma: デザイナーが多く使うUIデザインツール。Claude Designの主要な比較対象。※Canva: ノンデザイナー向けのグラフィックデザインツール。Claude Designのエクスポート先の一つ。

LINEのサイズ規定には罠がある

まず知っておくべきこと。LINEビジュアルのサイズは独特で、直感と違う：

• プロフィールアイコン: 640×640px（表示時は円にクリップされる）
• カバー画像: 1080×878px（横長だが16:9より縦に近いアスペクト比）
• リッチメニュー（大）: 2500×1686px（6分割なら各エリア約833×563px）

カバー画像が特に罠で、「横長バナー」とだけ書くと16:9で出てきてしまう。1080×878は約1.23:1という中途半端な比率なので、Claude Designへの指示はこうした：

カバー画像を作成してください。
サイズ：1080×878px（アスペクト比約1.23:1）
横長ですが16:9より縦に近い比率です。
メインビジュアルは中央に配置し、上下に余白を取ってください。

数値とともに「16:9より縦に近い」と補足したら、一発で意図した形が出た。

アイコンは「円クリップ前提」で余白を指示する

LINEのアイコンは表示時に円形になる。これを知らずにロゴやテキストを四隅まで配置すると、表示時に角が切れる。

解決した一文はこれだった：

「円形にトリミングされて表示されます。デザイン要素は中央に集め、外周から20%は余白にしてください」

これだけで、角の切れを心配せずにアイコンが完成した。以前Canvaで作ったときは何度もトリムして確認する作業を繰り返していたので、プロンプト一行で解決するのは地味にうれしかった。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

リッチメニューは「6分割前提」で一括依頼する

リッチメニューで最初にやらかした失敗が、各エリアを別々のプロンプトで作ったこと。当然、色のトーンも文字の太さも微妙にズレて、継ぎ目が目立つ醜いメニューが出来上がった。

成功したのは「6分割される前提で全体を一枚として依頼する」やり方：

LINEリッチメニュー（大サイズ・6分割）を作成してください。
全体を一枚の画像として設計し、左右3列×上下2行に分割します。
各エリアのラベルと内容：
- 左上：商品一覧（カートアイコン）
- 中上：キャンペーン（ギフトボックスアイコン）
- 右上：店舗情報（ピンアイコン）
- 左下：お問い合わせ（吹き出しアイコン）
- 中下：会員証（カードアイコン）
- 右下：よくある質問（？アイコン）
ブランドカラー：#2E7D5C（ダークグリーン）、白テキスト

このやり方で、アイコン・カバー・リッチメニューを同じセッションで頼むと、色とフォントが自然に統一されていった。別ツールで作った前回とは段違いのまとまりが出た。

実際にかかった時間

比較すると：

• 以前（3ツール分散）：アイコン30分 + カバー45分 + リッチメニュー90分 + 統一感の調整60分 = 約4時間
• Claude Design一本化：プロンプト設計20分 + 生成・調整40分 = 約1時間

時間より大きかったのは「統一感のために誰かと調整しなくていい」というストレスのなさ。

注意点：LINEの仕様は変わる

一つだけ気をつけてほしいのは、LINE公式アカウントの仕様は定期的に更新されること。リッチメニューのサイズや分割パターンが変更されたこともあった。Claude Designに指示を出す前に、LINE for Businessの公式ガイドラインでサイズを確認するクセをつけておくこと。