Orshot-HQ/orshot-openclaw

Orshot ソーシャルメディアコンテンツ：テンプレートを一度デザインし、そこから永遠に投稿する

Orshotのソーシャルメディアコンテンツは、毎回新しいAI画像を生成するのではなく、デザイン済みテンプレートに毎回新しいコピーを適用する方式です。このスキルは、Instagram投稿、LinkedIn投稿、TikTok・リール、ストーリー、広告、バナー、サムネイル、カルーセル向けに、プロフェッショナルなデザイン（一般的な中央揃えテキストの「AI」感がない）のOrshotスタジオテンプレートを作成します。これは、Orshot MCPサーバーのデザインツール（orshot_create_template_design、orshot_update_template_design、orshot_patch_template_elements、orshot_get_brand_kit）上に構築されたナレッジレイヤーです。

まずは接続

openclaw mcp add orshot --url https://mcp.orshot.com/mcp --transport streamable-http --auth oauth
openclaw mcp login orshot

デザインツールはインラインサムネイルとデザインチェックを返すため、MCP専用です。無料プラン（月100クレジット、クレジットカード不要）でテンプレート作成とプレビューが利用できます。詳細とレンダリング用のREST代替手段は orshot スキルにあります。

プラットフォーム用テンプレートを生成する

1. フォーマットを選択する。 作成時とレンダリング時にプリセットを size として渡すか、幅と高さを指定します。

プラットフォーム	プリセット	ピクセル
Instagram 投稿（縦長、2026年のデフォルト）	instagram-post-portrait	1080x1350
Instagram スクエア	instagram-post	1080x1080
Instagram ストーリー、Reelsカバー、TikTok、YouTube Short	instagram-story, tiktok-video, youtube-short	1080x1920
LinkedIn 投稿	linkedin-post	1200x627
LinkedIn カルーセル（PDFまたは画像ページ）	linkedin-carousel	スクエアまたは4:5ページ
X 投稿、X ヘッダー	twitter-post, twitter-header	1200x675, 1500x500
Facebook 投稿、ストーリー、カバー	facebook-post, facebook-story, facebook-cover	1200x630, 1080x1920, 851x315
Pinterest ピン	pinterest-pin	1000x1500
YouTube サムネイル	youtube-thumbnail	1280x720

完全なリスト：orshot://formats MCPリソースを参照。

2. 仕様とブランドを読む。 orshot://template-design-spec（要素スキーマ、アニメーションの注意点）、次にデザインをブランドに合わせる場合は orshot_get_brand_kit を実行します。
3. パックを読む。 references/social-media.md からセーフエリア、アーキタイプ、レシピを確認します。このタイプの前回のテンプレートとは異なるアーキタイプを選択します。
4. 作成する。 orshot_create_template_design を使用し、pages_data を完全に設定し、すべてのテキスト要素で textMode: "fit" と minFontSize を設定し、動的フィールドは parameterizable: true とスネークケースの parameterId（headline、subtitle、product_image）でマークし、includeThumbnails: true を指定します。
5. 批評する。 サムネイルとデザインチェックを確認し、orshot_update_template_design または orshot_patch_template_elements で修正します。最初のパスを未確認のまま出荷しないでください。
6. レンダリングする。 実際のコピーでレンダリングし（orshot_render_template）、ユーザーに出力を表示します。1つのデザインで全サイズに対応：extraSizes: ["instagram-story", "linkedin-post", "1080x1080"]。
7. 引き継ぐ。 投稿、スケジュール、分析は orshot-social-media-scheduler スキルにあります。6スライドのカルーセルは orshot-carousel スキルにあります。テンプレートは保持します。今後の投稿はすべてレンダリングであり、再デザインではありません。

使用するタイミング

ビジュアルテンプレート（ソーシャル投稿/ストーリー/カルーセル、広告クリエイティブ、バナー、サムネイル、ローンチグラフィック）をデザインまたは改良するときはいつでも使用します。スタジオ要素スキーマとレンダリングの注意点については、MCPリソース orshot://template-design-spec も参照してください。

境界

• これはデザインガイダンスであり、スキーマ仕様を置き換えるものではありません。スタイル値は常に単位付きの文字列です。position/dimensions はネストされたオブジェクトです。下記の互換性を参照してください。
• orshot スキル（API/生成メカニズム）と組み合わせて使用します：レンダリングにはそちらを使用します。

動作原理

デザインはタスクに奉仕する。 視聴者が受け取るべき唯一のメッセージを決定し、すべてがそれをサポートするようにします。一般的な見栄えよりも、ブランドとプラットフォームを尊重します。主観的な反復よりも、以下の決定論的なルールを優先します。

必須ワークフロー（順番に）

1. シェイプ： 何かを配置する前に、目標、オーディエンス、単一のキーメッセージを再確認します。
2. ブランドを継承する（ブランドに沿う場合）： デザインがユーザーのブランド/プロダクトに合致するべき場合（プロンプトがそれを示唆している、または「私たちの」スタイルを求めている場合）、orshot_get_brand_kit を呼び出し（目的にタグフィルター）、ブランドカラー/フォント/ロゴを「システム」の役割にマッピングします。プロンプトが汎用的/スタンドアロンの外観を求めている場合は、パックのデフォルトを使用し、ブランドを強制しません。
3. 縦型パックを選択する： references/ 内の該当ファイル（例：references/social-media.md）を読み、フォーマット、セーフエリア、アーキタイプ、具体的なレシピを確認します。このタイプの最近のテンプレートとは異なるアーキタイプを選択します。
4. 構築する： 1つのフォーカル要素を確立し、それをサポートします。最初の作成ではデザインをシンプルに保ち、後続の更新で洗練させます。
5. 批評する： includeThumbnails:true を指定して作成/更新し、サムネイルを読み、orshot_update_template_design / orshot_patch_template_elements で問題を修正します。最初のパスを未確認のまま出荷しないでください。（作成ツールは「🎨 デザインチェック」も返すので、その ⚠ を解決します。）

システム

• 階層構造： サイズ、ウェイト、位置による1つの明確なフォーカルポイント。すべてを中央に配置しない。
• タイポグラフィ： 厳密に 2つのフォントファミリー（表示用 + 本文用）。階層はスケール/ウェイトで付ける。大きな表示タイプではタイトな lineHeight（1.0～1.15）とややネガティブな letterSpacing。最も太いブランドフォント → 表示用、軽い方 → 本文用。
• カラー、60-30-10： 60% 支配色、30% 二次色、10% アクセント色。まとまりのあるパレットは多色より優れている。明確な WCAG AA コントラスト。ブランドカラーは「プライマリ」ラベルではなく使用法に基づいて役割にマッピングする。
• 構成と余白： 十分なマージン（各辺につきキャンバスの約6%以上）、暗黙のグリッドに揃え、中央揃えの重ね置きよりもオフセンターを優先。
• 画像： フルブリードまたは意図的にフレーミング。写真には objectFit:"cover"。賑やかな写真の上のテキストにはグラデーションスクリムを追加。

ブランド（文脈に応じて、必須ではない）

ブランドキットは、デザインをブランドに合わせるべき場合に使用します（プロンプトがユーザーのブランド、製品、アイデンティティに言及している場合）：色 → 60-30-10の役割、フォント → 表示用/本文用、ロゴ → 小さなコーナー/フッターマーク、画像 → ヒーロー/製品。汎用的/探索的/スタンドアロンの外観の場合は、パックのパレットで十分です。ブランドアセットを強制しないでください。

バリエーション

同じコンテンツタイプでレイアウトを決して繰り返さない。 同じ種類のデザイン間で、アーキタイプ、フォーカル配置、カラー強調を変化させます。

互換性（これを正しく設定しないと、レンダリングが警告なしに壊れます）

• すべてのスタイル値は単位付きの文字列です。例："48px", "700", "12px"。数値単独は禁止。
• position と dimensions はネストされたオブジェクトです（{x,y}, {width,height}）。
• すべてのテキスト要素に textMode:"fit" + minFontSize を設定する（最小値：見出し 48、小見出し 28、本文 24、キッカー 18、キャプション 14）。デフォルトの "overflow" では縮小もリフローも行われず、長い/パラメータ化されたテキストがボックスからはみ出します。
• 改行： \n を使用し、決して <br> を使用しない。複数の <p> ブロックは避ける（重なります）。アクセントカラーの単語を含む複数行の見出しの場合は、行ごとに1つのテキスト要素を使用します。
• 背景ハイライト <span>（色付きピル）は、要素全体を1行に強制します（white-space: nowrap）→ 長いテキストではオーバーフローします。ハイライトは1～3単語のみ。長い見出しには color 強調（背景なし）を使用するか、行ごとに分割します。
• パラメータ化可能なフィールドには、parameterizable:true、一意のスネークケース parameterId、要素に一致する parameterType（テキスト→"text"、画像→"imageUrl"、シェイプ→"fill"、キャンバス/コンテナ→"backgroundColor"）が必要です。
• 透明な塗りつぶしと境界線を持つシェイプは何もレンダリングしません。 SVG content はデータURIである必要があります。

モーションとオーディオ（ビデオテンプレート）

ビデオを生成されたものではなくデザインされたものに見せるには：

• セクションを約4～5秒かけてリビールする。 1つのユニットを形成する要素（アイコン+ラベル、仕様行、フッター）は、同じ enter タイプと showAt を共有する。セクション間はリーディング順に約0.3～0.5秒ずらす。showAt/hideAt は enter/exit の兄弟要素であり、それらの中にネストしてはならない。
• すべてのフルブリード写真に kenBurns アンビエントを設定する（ズーム 1.08～1.15）。静止画を3秒保持するとデッドフレームと読まれる。ゆっくりとしたプッシュはフッテージと読まれる。ページ間で panX 方向を交互にする。
• アンビエントは控えめかつスローに保つ： 0.5秒のエンターに対して6～10秒のサイクル。視聴者がモーションを名指しできるなら、それは強すぎる（意図的なアクセント（バッジの揺れなど）でない限り）。shake/slowRotate には easing: "linear" が必要。そうしないとループの継ぎ目が見える。
• ビデオ全体で1つの pageTransition を使用し、0.3～0.5秒。 カットごとに異なるトランジションは、自動生成された編集の最も明確な兆候である。
• サウンドのデフォルト： 音量1のナレーショントラック + 控えめな生成アンビエントBGM（sfx、音量0.08～0.18、ループ） + page.subtitle { source: "auto-audio" }、キャプションプリセット（karaoke/bold）、賑やかなフッテージの上にはストローク幅2～3。ナレーションは約2単語/秒、1秒のヘッドルームを見積もる。生成オーディオを作成する前に orshot_get_audio_authoring_options を呼び出す。tts.parameterId を指定して、読み上げられるコピーがレンダリングパラメータとして残るようにする。

アンチパターン（AIスロップの兆候、避けるべきもの）

• すべてが中央揃えで積み重なっており、フォーカルポイントがない。
• 3つ以上のフォント、または階層のないランダムなサイズ。
• 賑やかな写真の上の低コントラストテキストにスクリムがない。
• プロンプトがブランドに沿ったデザインを求めていないのにブランドアセットを強制する（または明らかに必要なのにキットを無視する）。
• 本文の段落の上にある小さな見出し（テンプレートは文書ではない）。
• 同じコンテンツタイプに対して前回のレイアウトを再出力する。

縦型パック（プログレッシブディスクロージャー）

タスクに一致するものを読む。各パックはフォーマット/セーフエリア、アーキタイプ、レシピを追加する：

• references/social-media.md：投稿、ストーリー、カルーセル。
• （今後、広告、不動産、Eコマースなど、さらに縦型が追加されます。）

例

例1、「新機能を告知するInstagram投稿を作成して」

1. orshot_get_brand_kit（タグ："social-media"）→ ブランドカラー/フォント/ロゴ。
2. references/social-media.md を読む → デフォルトは4:5縦長 1080×1350。type-hero アーキタイプを選択（前回の投稿とは異なる）。
3. orshot_create_template_design を使用。ブランド表示フォントで特大の見出し、ブランド支配色を背景、アクセントカラーを1単語、ロゴ + @ハンドルのフッター、includeThumbnails:true。
4. サムネイルと「🎨 デザインチェック」を読む。必要に応じてコントラスト/スペーシングをパッチする。

例2、「このテンプレートを改良して、今のままでは一般的すぎる」

1. orshot_get_studio_template で現在のデザインを検査する。
2. アンチパターン（中央揃え？3つ以上のフォント？フォーカルポイントなし？ブランド無視？）に照らして診断する。
3. orshot_patch_template_elements で、1つのフォーカル見出しを設定し、フォントを2つに絞り、ブランドの60-30-10を適用し、左/下揃えにする。includeThumbnails:true で再レンダリングし、確認する。

トラブルシューティング

見出しが1行で表示される / <br> が無視される。 <br> ではなく \n を使用する。複数行の見出しで色付きの単語が必要な場合は、行ごとに1つのテキスト要素に分割する。

色/フォントがブランドから外れて見える。 ステップ2をスキップした。orshot_get_brand_kit を呼び出し、返された value（色）と name（フォント）をデザインにマッピングする。

「🎨 デザインチェック」が繰り返しについて警告する。 このレイアウトが最近の同じタイプのテンプレートと一致している。アーキタイプを切り替え、フォーカルポイントを移動する。