スキルをオープンソース化：小紅書 (Xiaohongshu) と WeChat のイラスト問題を完全に解決

少し前に、私は guizang-ppt-skill をオープンソース化しました。その後、実際にそれを使ってコンテンツを作成しているうちに、あることに気づきました。

それで生成した Web ページをスクリーンショットして画像テキストプラットフォームに投稿すると、私が手動でレイアウトしたものよりも、はるかに良いフィードバックとデータが得られたのです。

皆さんも、これまでにこのような 3:4 のカード画像を生成するプロンプトやスキルを見つけたことがあるでしょう。

それらはほぼすべて同じような雰囲気を持っています。Tailwind、大きなカラーブロック、絵文字の積み重ね、平凡なフォント階層。

それらを見て、なぜ AI が生成した画像テキストカードが一目でそれとわかるのか、おおよそ理解できました。それは、Web ページを作っているのであって、雑誌を作っているわけではないからです。

画像テキストカードは、PPT とはまったく異なるものです。縦長の画面、情報フローの中で止まるかスクロールするかの 1 秒の判断、そして言葉ではなく画像に依存するもの。

レイアウトが違い、リズムが違い、読者が違います。

そこで、私はこれを PPT スキルから切り離し、スタンドアロンの guizang-social-card-skill（https://github.com/op7418/guizang-social-card-skill）として作成しました。

以下では、なぜそれが優れているのか、そしてなぜ私がこれにこれほど多くの時間を費やす覚悟があるのかについてお話しします。

2. 具体的に何が良いのか？

3:4 の縦長画像は、画像テキストカードの主戦場です。このスキルのデザインエネルギーの大部分は、3:4（フォント階層、レイアウト比率、改行ルール）に費やされました。

すべてが、モバイルの情報フローでスワイプされる実際のシナリオに合わせて調整されています。21:9 と 1:1 の WeChat 公式アカウントのヘッダー画像もサポートされています。

まず、画像テキストクリエイターが最も気にする点から始めましょう。

2.1 書いている内容を区別し、適切なスタイルをマッチングする

画像テキストプラットフォームのコンテンツはカテゴリ分けされています。映画レビューと製品レビューでは、まったく異なるビジュアル言語が必要です。

旅行記と職場の tips では、異なるレイアウトを使用する必要があります。

しかし、ほとんどの AI ツールはこれを気にしません。何を書いても同じテンプレートを使用します。

その結果、誰のカードも WeChat 公式アカウントのカバー画像の組み立てラインから出てきたように見えてしまいます。

このスキルには、11 の一般的な画像テキストカテゴリ向けの適応ルールが組み込まれています。

旅行 / ライフスタイル：雑誌スタイル、暖色系パレット、フルスクリーン画像、大きなセリフ書体のタイトル。
職場 / Tips / ビジネスインサイト：グリッドスタイル、暗い背景、データ重視のポスターレイアウト。
映画 / カルチャー：クールトーンの雑誌スタイル、映画ポスターレイアウト、キャラクターのクローズアップ優先。
製品レビュー / デジタル：グリッドスタイル、比較表、デバイスフレーム内のスクリーンショット。
読書 / ノート：雑誌スタイル、セリフ書体、中央揃えの引用レイアウト、最大限の余白。
グルメ / 店舗訪問：高彩度の雑誌スタイル、俯瞰ショット優先、テキストは隅に移動。

さらに、旅行ブロガーのために特別に地図コンポーネントも作りました。そこに店舗の場所や旅行ルートをマークすると、AI が自動的に注釈を生成してくれます。

同じテキストを入力します。映画レビューだと伝えれば、映画ポスター風のカードを生成します。製品レビューだと伝えれば、デバイスフレーム付きの比較表を生成します。

さらに重要なのは、明確な「禁止区域」があることです。

ファン向けコンテンツ：必要なビジュアル言語がまったく異なります。
純粋なプロモーション広告：コンテンツを重視するデザイン哲学に反します。
12 画面を超える長いチュートリアル：画像テキスト形式は長いチュートリアルに最適な媒体ではありません。

これらのシナリオでは、スキルは最初に「別のツールを使ったほうがいいかもしれません」と伝えます。

これは意図的に残しました。境界線は、機能そのものよりも製品を定義します。すべてをやろうとするスキルは、結局何もうまくできません。

2.2 画像にテキストをオーバーレイする方法

画像へのテキストオーバーレイは、画像テキストカードの最も難しい部分であり、「AI っぽさ」が最も露呈しやすい場所です。

うまくいかないと、次の 3 つのタイプの失敗が発生します。

テキストが顔や製品の中心を覆ってしまう。
明るい背景に白いテキスト、または暗い背景に黒いテキストで読みにくくなる。
テキストが画像全体に広がり、せっかくの美しい構図を台無しにする。

スキルはこれを 3 つのステップで処理します。

画像内の被写体（顔、製品、テキストの密集領域）を識別し、レイアウト時に自動的に回避します。
テキストを配置するエリアの色と明るさを計算し、テキストの色、マスクを追加するかどうか、影の濃さを決定します。
適応型フォントサイズと改行：テキスト配置エリアのサイズに基づいて、フォントサイズと改行位置を動的に調整します。あふれるハードコードされたフォントサイズは使いません。

これらのルールにより、カードの「高級感」が確立されます。読者は、「後から押し付けられたテキスト」と「元からあったテキスト」の違いを見分けられません。

2.3 画像はどこから来るのか：他の AI カードツールとの最大の違い

画像テキストカードを生成するほとんどの AI ツールは、自分で画像をアップロードさせるか、絵文字で代用させるか、一目で AI とわかるイラストを生成します。

その結果、手動で画像を探すのは面倒だし、絵文字を積み重ねると偽物っぽく見えます。

このスキルは、デフォルトで 3 つの無料商用利用可能な画像ライブラリに接続されています。

Pexels：中国語検索に対応しており、一般的なシナリオに適しています。
Unsplash：最も優れた写真の質感を持ち、人物、ライフスタイル、空間関連のコンテンツに最適です。
Wallhaven：ゲーム、写真、壁紙などが揃っていますが、著作権はやや複雑です。

テキスト段落のセマンティクスに基づいて検索語を自動的に判断し、画像を取得し、レイアウトに合わせてクロップし、顔や被写体が切れないようにします。

色ブロックのカードではなく、実際の写真を使ったカードが得られます。

また、著作権が完全にクリアな画像を見つけることに固執しているわけではありません。見つけた画像を教えてくれるので、著作権が不明確な画像を使うかどうかはあなたが判断します。

さらに、現在プラットフォームは AI ウォーターマークに非常に厳しくなっています。今使っている AI 生成画像のほとんどにはウォーターマークが付いており、プラットフォームにフラグが立てられ、シャドウバンにつながる可能性があります。これは大きな悩みの種です。

2.4 スクリーンショットも画像：4 つの美化機能

私たちのコンテンツの多くは写真を使用できず、ソフトウェアのスクリーンショット、チャット記録、製品インターフェースなどが必要になります。

このスキルには、スクリーンショット美化機能が組み込まれています。

macOS / iOS スタイルのデバイスフレーム（ブラウザのクロムや電話の枠線）を追加し、異なる背景テクスチャ（方眼紙、ドットマトリックス、温かみのある白、またはダーク）でスクリーンショットを保持するため、スクリーンショットが白い背景の上に浮いて見えることがなくなります。

同時に、ビジュアルスタイルに基づいて影のレイヤーと角の半径パラメータを自動的にマッチングします。2 つのスタイルにはそれぞれスクリーンショットのレシピがあり、手動調整なしで一貫性が保証されます。

簡単に言うと、あなたが撮った適当なスクリーンショットでも、これを通せば公式の製品プロモーション画像のように見えます。

2.5 AI 画像生成：控えめに使用する

このスキルは、以前のすべての画像ソースが適切な素材を見つけられなかった場合にのみ、AI 画像生成を呼び出します。

画像を生成する際には、スタイル制約語を強制し、「明らかな AI イラスト」のような平凡なビジュアルを避けます。

AI の使用によってすべての画像テキストカードが姉妹のように見えるくらいなら、AI の使用を控えたいと思います。これは、AI 画像を使用することでコンテンツの露出が影響を受けるのも避けます。

2.6 ビジュアルシステム：2 つのスタイル + 28 のレイアウトスケルトン

以前の PPT スキルをご存知の方にはおなじみでしょう。これらの 2 つのビジュアルシステムとレイアウトスケルトンは、PPT スキルから適応および再調整されたものです。

詳細は繰り返しませんが、画像テキストカードのコンテキストでは次のようになります。

2 つのビジュアルシステム：

雑誌スタイル：The New Yorker や上海翻訳出版社の表紙で見られるようなタイポグラフィ。大きな余白、大きなセリフ書体のタイトル、非対称のレイアウト、そして呼吸する余地のあるテキスト。
グリッドスタイル：Massimo Vignelli や Helmut Schmid のスイスデザインの流れをくむもの。強力なグリッド、サンセリフ書体、幾何学的な感覚、抑制されているが正確な色使い。

28 のレイアウトスケルトンは、過去 10 年間に見てきた雑誌、ポスター、アルバムカバー、映画ポスターの中から、批評に耐えうるものを厳選しました。

AI は「自由なレイアウトデザイン」がまだ苦手です。実績のあるスケルトンを与えることで、そのタスクは「デザイン」から「穴埋め」に格下げされ、完成品の安定性が即座に向上します。

10 セットのテーマカラーパレット、固定されたフォントの組み合わせ、限定されたアイコンライブラリ。これらの詳細は一つ一つ挙げません。

論理は同じです。制約は障害ではなく、ベースラインなのです。

コンテンツクリエイターに無限の色の選択肢を与えれば、彼らは醜いものを作る可能性が高くなります。実績のある 10 セットのパレットを与えれば、彼らが decent なものを作る確率は 100% に近づきます。

3. なぜこんなことをするのか？

3.1 デザインの観点：雑誌のような雰囲気は非常に効果的

なぜ、より「モダン」なカードデザインではなく、雑誌やグリッドスタイルを採用するのでしょうか？

画像テキストカードの本質は、印刷されたポスター、図版、アルバムカバーと同じです。静止画像を使って、1 秒で見知らぬ人を立ち止まらせることです。雑誌やポスターは、過去 100 年にわたってこれを徹底的に研究してきました。

Web デザイン言語は、スクロール可能でインタラクティブなシナリオのために作られています。それを静止画像に移すと、不自然に見え、情報が平坦になります。

したがって、このスキルのビジュアル上の決定におけるすべての「なぜ」は次のようになります。

なぜ大きな余白なのか？余白は、雑誌が「焦点はここです」と伝える方法だからです。
なぜセリフ書体を優先するのか？セリフ書体は、大きなサイズで印刷物のような重みを持ちます。
なぜ非対称のレイアウトなのか？非対称は視覚的なリズムを生み出し、目が最初にどこを見るべきかを知らせます。
なぜ色を抑制するのか？ソーシャルメディアのフィードでは、抑制されたパレットの方が実際には高彩度よりも目立ちます。周りの「大声で叫んでいる」カードから際立ちます。

これらの決定は「抽象的」に聞こえるかもしれませんが、すべてコード内の具体的な定数です。フォントサイズの比率、余白の比率、グリッドの列数、コントラストのしきい値、改行ルール。これらの定数こそが、このスキルの真の堀（モート）です。

3.2 プロダクトの観点：これは単なるプロンプトではなく、プロダクトである

これまで多くのスキルを作ってきて、「スキルとは実際には何か」についての判断基準が形成されました。

スキルとは、本質的には小さなプロダクトです。