card-news-generator

カードニュースジェネレーター - 自動モード（V2）

背景画像に対応した、SNS向けの美しい600x600カードニュースシリーズを作成します。ユーザーはトピック、色、任意の背景画像を指定でき、Claudeがコンテンツの生成と複数カードの作成を自動で行います。

使用する場面

ユーザーから次のようなリクエストがあった場合に、このスキルを使用します。

• 「카드 뉴스 만들어줘」
• 「주제로 카드 시리즈 만들어줘」
• 「인스타용 카드 생성해줘」
• ビジュアルカードコンテンツを求めるその他のリクエスト

基本ワークフロー - 自動モード

ユーザーがカードニュースを依頼した場合に使用する、主要なワークフローです。

ステップ 1：トピック、色、任意の背景画像をユーザーに尋ねる

ユーザーに次の情報を尋ねます。

• トピック（주제）：カードシリーズのテーマ
• 背景色 RGB（배경색）：例：245,243,238（任意。デフォルト：ベージュ）
• 背景画像（배경 이미지, 선택사항）：画像が入ったフォルダーのパス

会話例（単色）：

Claude: 어떤 주제로 카드 뉴스를 만들까요?
User: Z세대의 특징에 대해서

Claude: 배경색을 선택해주세요 (RGB 형식, 예: 245,243,238)
추천 색상:
• 베이지: 245,243,238
• 핑크: 255,229,229
• 민트: 224,244,241
User: 245,243,238

会話例（背景画像あり）：

Claude: 어떤 주제로 카드 뉴스를 만들까요?
User: 여행 팁 5가지

Claude: 배경 이미지를 사용하시겠어요? (사용하려면 이미지 폴더 경로 입력)
User: /path/to/travel-images

Claude: 오버레이 불투명도를 선택하세요 (0.0-1.0, 기본값 0.5)
높을수록 어둡게 처리되어 텍스트가 더 잘 보입니다.
User: 0.6

ステップ 2：カードコンテンツを生成する

トピックについて5～7枚のカードを作成します。次の形式で出力します。

1. [제목]
[설명 2-3줄]

2. [제목]
[설명 2-3줄]

3. [제목]
[설명 2-3줄]

コンテンツに関する重要なガイドライン：

• タイトル：最大20文字（スペースを含む）
• コンテンツ：最大60文字（スペースを含む）
• 600x600のキャンバスに収まるよう簡潔にまとめます
• シンプルで印象的な言葉を使います
• 各カードで伝える要点は1つにします

ステップ 3：カードを自動生成する

オプション A：単色の背景

すべてのカードを単色の背景で作成するには、次のコマンドを使用します。

python auto_generator.py \
  --topic "Z세대의 특징" \
  --bg-color "#f5f3ee" \
  --text-color "#1a1a1a" \
  --output-dir /mnt/user-data/outputs \
  --base-filename "zgen" << 'EOF'
1. 디지털 네이티브
태어날 때부터
디지털 환경에 익숙

2. 개인화 중시
나만의 개성과
취향을 중요시

3. 소통 방식
텍스트보다 영상
이모티콘으로 감정 표현
EOF

オプション B：背景画像（V2の機能）

背景画像を使ってカードを作成するには、次のコマンドを使用します。

python auto_generator.py \
  --topic "여행 팁" \
  --output-dir /mnt/user-data/outputs \
  --base-filename "travel" \
  --image-folder /path/to/travel-images \
  --overlay-opacity 0.6 << 'EOF'
1. 짐 싸기 팁
최소한의 짐으로
가볍게 여행하기

2. 현지 음식
맛집 찾는
나만의 방법

3. 교통 수단
대중교통 활용
팁과 노하우
EOF

重要な注意事項：

• フォルダー内の画像は、アルファベット順または数字順に並べてください（例：01.jpg、02.jpg、03.jpg）
• 画像の枚数はカードの枚数に合わせてください
• 画像がカードより少ない場合、残りのカードには単色の背景が使われます
• 対応形式：.jpg、.jpeg、.png、.webp、.bmp
• 背景画像を使うと、テキストは自動的に白に変わります

スクリプトは次の処理を自動で行います。

• 番号付きコンテンツを解析する
• フォルダーから背景画像を読み込む（並び順）
• テキストを読みやすくするために暗いオーバーレイを適用する
• テキストを適切に折り返した個別のカードを作成する
• travel_01.png、travel_02.pngなどの名前で保存する

ステップ 4：ダウンロードリンクを提示する

生成後、ユーザーに次の内容を表示します。

✅ 카드 뉴스 5장이 생성되었습니다!

[View card 1](computer:///mnt/user-data/outputs/zgen_01.png)
[View card 2](computer:///mnt/user-data/outputs/zgen_02.png)
...

RGBから16進数への変換

スクリプト用に、必ずRGBを16進数に変換します。

# RGB 245,243,238 → Hex #f5f3ee
hex_color = '#{:02x}{:02x}{:02x}'.format(245, 243, 238)

おすすめの色（RGB形式）

次の候補をユーザーに提示します。

• ウォームベージュ：245,243,238 → #f5f3ee
• ソフトピンク：255,229,229 → #ffe5e5
• ミントグリーン：224,244,241 → #e0f4f1
• ラベンダー：232,224,245 → #e8e0f5
• ピーチ：255,232,214 → #ffe8d6
• スカイブルー：227,242,253 → #e3f2fd

コンテンツ生成のベストプラクティス

良いカードコンテンツの例

1. 디지털 네이티브
태어날 때부터
디지털 환경에 익숙

✓ タイトル：8文字 ✓ コンテンツ：18文字 ✓ 明確で簡潔

悪いカードコンテンツの例

1. Z세대는 디지털 네이티브 세대입니다
그들은 태어날 때부터 스마트폰과 인터넷을 사용하며 자랐기 때문에 디지털 기술에 매우 능숙합니다

✗ タイトルが長すぎます（21文字） ✗ コンテンツが長すぎます（60文字以上） ✗ 600x600のキャンバスからはみ出します

単一カードモード（手動）

単色の背景

単色の背景でカードを1枚だけ作成する場合：

python generate_card.py \
  --title "제목" \
  --content "내용" \
  --bg-color "#f5f3ee" \
  --text-color "#1a1a1a" \
  --number 1 \
  --output /mnt/user-data/outputs/single.png

背景画像あり（V2の機能）

背景画像を使ってカードを作成する場合：

python generate_card.py \
  --title "여행 팁" \
  --content "최소한의 짐으로\n가볍게 여행하기" \
  --bg-image /path/to/image.jpg \
  --overlay-opacity 0.6 \
  --number 1 \
  --output /mnt/user-data/outputs/travel_01.png

パラメーター：

• --bg-image：背景画像ファイルのパス
• --overlay-opacity：暗いオーバーレイの不透明度（0.0～1.0、デフォルト：0.5）
  • 0.0 = オーバーレイなし（元の画像）
  • 0.5 = 暗いオーバーレイを50%適用（デフォルト。バランスのよい設定）
  • 1.0 = 完全な黒（非常に明るい画像にのみ使用）

技術詳細

キャンバスの仕様

• サイズ：600x600ピクセル（Instagram向けに最適化）
• 余白：上下左右40px
• テキストの最大幅：520px（600 - 80）
• フォントサイズ：
  • 番号バッジ：60px
  • タイトル：48px（太字）
  • コンテンツ：28px（標準）

背景画像の処理（V2）

• サイズ変更とトリミング：画像は自動的に600x600pxにサイズ変更されます
  • アスペクト比を維持します
  • アスペクト比が異なる場合は中央でトリミングします
  • 高品質なLANCZOSリサンプリングを使用します
• 暗いオーバーレイ：テキストの視認性を高めるために適用されます
  • デフォルトの不透明度：0.5（50％の暗さ）
  • --overlay-opacity（0.0-1.0）で調整できます
  • 値が大きいほどオーバーレイが暗くなり、テキストのコントラストが高まります
• テキストの色：背景画像を使用すると、自動的に白（#FFFFFF）に切り替わります
• 対応形式：JPG、JPEG、PNG、WebP、BMP
• 画像の並べ替え：ファイルはアルファベット順または数字順に読み込まれます

テキストの折り返し

• 最大幅で単語を自動的に折り返します
• 手動での改行を保持します
• すべてのテキストを水平方向の中央に配置します
• 読みやすさを考慮して垂直方向の間隔を最適化します

ファイル名の規則

• 自動モード：{base_filename}_{number:02d}.png
• 例：card_01.png、card_02.png、card_03.png

エラー処理

テキストがはみ出す場合：

• タイトルを短くします
• 内容を簡潔にします
• 改行を効果的に使います
• 内容を修正して再生成します

ワークフローの例

例1：単色の背景

ユーザーの依頼：「Z세대에 대한 카드 뉴스 5장 만들어줘, 핑크색으로」

Claude の応答：

1. 確認：「Z世代の特徴について、ピンク色の背景（255,229,229）でカードを5枚作成します。」
2. 5枚分のカードの内容を生成します（テキストは簡潔にします）
3. heredocを使ってauto_generator.pyを実行します
4. 5枚すべてのカードのダウンロードリンクを提示します

所要時間：5枚のシリーズで約30秒

例2：背景画像（V2）

ユーザーの依頼：「旅行のヒントを紹介するカードニュースを作って。背景には/Users/me/travel-photosフォルダ内の画像を使って」

Claude の応答：

1. 確認：「旅行のヒントを紹介するカードニュースを作成します。/Users/me/travel-photosフォルダ内の画像を背景に使用します。」
2. 質問：「オーバーレイの不透明度を選択してください（0.0-1.0、デフォルト値は0.5）。値が大きいほどテキストが見やすくなります。」
3. ユーザー：「0.6」
4. 5枚分のカードの内容を生成します（テキストは簡潔にします）
5. --image-folderと--overlay-opacityを指定してauto_generator.pyを実行します
6. 背景画像付きカードのダウンロードリンクを提示します

準備のヒント：

• 画像の名前を順番に変更します：01.jpg、02.jpg、03.jpg、04.jpg、05.jpg
• 画像の枚数がカードの枚数と一致していることを確認します
• 高品質な画像を使用します（600x600px以上を推奨）
• 最適な結果を得るため、オーバーレイの不透明度を変えて試します

所要時間：画像付き5枚のシリーズで約45秒