Claude Code × SWELL｜アイキャッチを情報密度6階層で設計する判断ポイント

WordPress＋SWELLでメディア型サイトを運営している人にとって、アイキャッチは記事の「玄関」であり、SNSに流したときのクリック率を左右する重要な意思決定の一つです。にもかかわらず、「タイトルをそのまま画像に載せる」「キャッチコピー1行＋アイコン」だけで処理しているサイトが多いのも事実。X・Google Discover・SmartNewsで他社カードと並んだとき、その単発デザインのままでは読了率もクリック率も伸びにくくなります。

FinLaboでは2026年4月から、アイキャッチを「情報密度6階層」という思考フレームで設計してきました。本記事は、その6階層の中身と、Claude CodeでSWELLサイトのアイキャッチを一括スタイル管理する仕組み、さらに2026年5月のリブランドで「brandスタイル」へ収れんさせるまでの判断記録を、SWELLを使っている運営者が自分のサイトに持ち込めるかたちで整理します。

SWELL × Claude Codeでアイキャッチを「設計対象」に格上げする

単発デザインで埋もれる構造的な理由

SWELLはブロックエディタとの相性がよく、アイキャッチはサムネイル枠・記事冒頭・関連記事カード・トップページのスライダー・SNSカードと、最低でも5箇所に同じ画像が再利用されます。1枚で5役を担うため、サイズの違う場所に置かれても情報が破綻しないことが求められます。

多くの個人運営サイトは、ここを「タイトル＋背景」だけで処理しています。タイムラインに並んだとき、競合カードと差がつくのはせいぜいフォントの選び方だけで、結果として「どの記事も似ている」状態になります。タイトル文字数が長いとさらに苦しく、SmartNewsのように画像が縮む環境ではタイトルが潰れて読めなくなります。

情報密度を6階層に分解するという発想

FinLaboで採用してきた「6階層フレーム」は、1枚のアイキャッチに乗る情報を6つの層に分けて意思決定する考え方です。1枚を「平面のデザイン」ではなく「6つの役割を持つ情報レイヤーの重ね合わせ」として捉えると、SWELLでサイト全体の見え方を整える判断が楽になります。

6階層フレームワーク：各層が運ぶ情報の役割

上3層：読者を立ち止まらせる入口

上半分は「ここで何が読めるのか」を一瞬で伝える層です。FinLaboでは次の3つを上層に置いてきました。

• 第1層 カテゴリラベル：右上ピル形。税務・FP・投資・AIなど。読者の所属カテゴリと一致するかを瞬時に判定させる
• 第2層 タイトル本文：中央。意味のかたまりで折り返す。22文字を超えたら言い換えで圧縮する
• 第3層 サブテキスト：タイトル下1行。読者が得る価値を補強する1文

この3層がそろえば、サムネイルが半分に縮んでも記事の所在がほぼ伝わります。SWELLの「記事一覧カード」は端末によって画像比率が16:9から1:1へ変化するため、上3層を画像中央上寄りに集めるのが安全です。

下3層：CTRと再訪につなげる出口

下半分は「いま読む理由」を補う層です。ここで密度を盛りすぎると逆効果になりますが、目立たない補助情報として持っておくと、SNSで流したときに効きます。

• 第4層 強調語：本文中の数字や固有名詞を1語だけ抜き出す
• 第5層 日付タグ：「2026年6月版」など、鮮度の証明
• 第6層 媒体クレジット：左下の媒体ロゴと識別タグライン

FinLaboは2026年4月時点でこの6層をすべて1枚に詰める運用をしていました。情報密度が高いぶん、Googleの画像検索や、X上で画像のみで流れてきた場合に「概要が一発で伝わる」効果はあります。ただし、後述のとおりブランド全体としては引き算する方向に舵を切りました。

Claude Codeで6階層テンプレートを一括スタイル管理する

階層ごとのパラメータをCLI引数に分解する

FinLaboのアイキャッチ生成スクリプトは、各層を独立した引数として受け取れるよう設計してあります。Claude Codeから1コマンドで投稿と同時に画像を生成するため、引数のキーが層と1対1で対応している状態が運用上は楽になります。

python3 agents/wp_post.py \
  --file articles/example.html \
  --title "記事タイトル" \
  --slug "english-slug" \
  --categories 5 \
  --eyecatch "アイキャッチ上に出すタイトル" \
  --eyecatch-category "AI・テクノロジー" \
  --eyecatch-sub "1行のシンプル要約" \
  --eyecatch-accent-color pink \
  --seo-title "SEO最適化タイトル" \
  --seo-description "メタディスクリプション" \
  --date 2026-06-02T10:00:00

SWELLを使っている読者がこの仕組みを自サイトに持ち込む場合、ポイントはアイキャッチの生成パイプラインを「テキスト引数の組み合わせで決まる関数」として固定することです。デザインの試行錯誤を毎回手作業のCanvaに戻すと、運用負荷が記事数に比例して跳ね上がります。

カテゴリ別カラーマップをプロンプト1本で差し替える

Claude Codeを使う本当の利点は、「色のトーンを変えたい」と思った瞬間に、テンプレートの該当箇所をAIに一括で書き換えさせられる点にあります。たとえばコーラル基調から落ち着いた紺基調に振り直したい場合、生成スクリプト内のカラー定義を1つ書き換えるよう指示すれば、過去記事のアイキャッチも含めて再生成のリストアップまでをエージェントが面倒を見ます。

SWELLには「画像の一括差し替え」機能がないため、何百枚のアイキャッチを後から整えるには、外側のスクリプトで再生成→WP REST APIでアップロードし直す導線が現実的な選択肢になります。

SEO + SNS両対応のサイズ・色・フォント判断ガイド

サイズ：1280×670pxを基準にする理由

SWELLのアイキャッチは管理画面上では1200×630pxが推奨されますが、X・Discover・LINEで再圧縮されたあとでも文字が潰れないようにするには、1280×670pxで作っておくと余裕が生まれます。長辺がやや大きめでも、SWELLが自動で複数サイズのサムネイルを生成してくれるため、表示ファイルサイズが過剰になる心配はあまりありません。

色とフォント：判断軸の比較表

カラーとフォントは、サイトの読者層と扱うジャンルで意思決定が大きく変わります。FinLaboで運用している判断軸を比較表に整理しました。

判断軸	コーラル基調＋丸ゴシック	ネイビー基調＋角ゴシック
主な読者層	30〜50代の女性中心・生活密着	ビジネス層・専門特化
受ける印象	親しみやすい・柔らかい	権威ある・硬い
向くテーマ	FP・ライフプラン・暮らしの税務	投資判断・AI活用・制度解説
SNS適合度	Instagram・LINEで強い	X・LinkedInで強い
注意点	パワーワードを乗せると安っぽくなる	文字が多いと冷たい印象になる

SWELLは管理画面でフォントを簡単に切り替えられますが、アイキャッチに使う日本語フォントは別軸で決める必要があります。本文に角ゴシック、アイキャッチに丸ゴシックという組み合わせは違和感が出にくく、信頼性と親しみやすさのバランスをとりやすい構成です。

6階層から「brandスタイル」へ：FinLaboが整理した評価記録

情報密度を上げすぎてブランドが薄まった話

2026年4月から5月初旬まで、FinLaboは6階層をフルに使う「高密度アイキャッチ」を採用していました。SNSで他社カードと並んだときの目立ちやすさという観点では成果が出ましたが、運用していく中で次の課題が見えてきました。

• パワーワード＋「!?」演出を多用するため、扱うテーマが税務・FP・投資といった信頼性重視の領域とトーンが合わない
• 強調語・日付タグ・媒体クレジットが密に並ぶことで、視覚情報が雑誌中吊り広告のような印象に寄っていく
• カテゴリ別カラーの切り替え数が増え、サイト全体としての統一感が見えにくくなる

「税理士・FPが運営する税務メディア」というブランドポジションから見たとき、煽り表現を一切使わないトーンに整えるほうが長期的に正解だという結論になりました。

引き算で残す：brandスタイルが選んだもの・捨てたもの

2026年5月に切り替えたbrandスタイルは、6階層のうち上3層と媒体クレジット（左下）だけを残し、強調語・日付タグ・パワーワード演出を捨てる引き算の設計です。フレーム自体は外周のコーラル＋紺のダブルラインで雑誌の表紙のような完成感を作り、見た目の情報量を落とすことで「読み物の入口」としての落ち着きを優先しています。

6階層フレームワークは思考の道具として今も有効で、上3層をしっかり詰めて下3層を捨てるという判断にも、この分解は使えます。「引き算した結果」がbrandスタイル、というのが現状のFinLaboの整理です。

まとめ：フレームは残し、見た目は引き算する

SWELLでアイキャッチを設計するときの肝は、「1枚に情報を盛る／引く」の判断を毎回ゼロから考えないことです。情報密度を6階層に分解してから、サイトのブランドが求めるトーンに合わせて層を残す／捨てる、という順序で意思決定すると、迷いが激減します。Claude Codeでテンプレート化しておけば、トーンを変えたい瞬間に過去記事まで巻き戻して整えることができます。

FinLaboは6階層フル盛りから始めて、信頼型のbrandスタイルへ引き算しました。読者のサイトが扱うテーマ次第で、最適な層の組み合わせは変わります。フレーム自体は持っておき、見た目は読者層に合わせて引く、という運用を試してみてください。