mcpField
D
design-and-templates

design-and-templates

github.com/social-media-skillsデザイン・UI210733 回インストール2 週間前に更新
リポジトリ

design-and-templates について

ブランドキットの仕様と少数のテンプレートを軸に、再利用可能なソーシャルグラフィックの仕組みを設計するスキルです。チームや非デザイナー向けで、画像はデザインツールで作成し、完成品をWoopSocialで公開します。

主な機能

  1. 01ブランドキットの色・フォント・ロゴ・余白を定義
  2. 02定番形式向けの再利用可能なテンプレートを設計
  3. 03階層・コントラスト・モバイルでの読みやすさを規定
  4. 04繰り返し使える制作ワークフローを提示
  5. 05システム設計・画像制作・公開を区別

活用シーン

  1. 01定番のソーシャル投稿に一貫した見た目を設定
  2. 02非デザイナー向けのテンプレート制作手順を整備
  3. 03カルーセル・カバー・引用カードの型を設計
  4. 04完成した画像をWoopSocialの流れに組み込む

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/social-media-skills/skills --skill design-and-templates

インストール後、Claude Code で/design-and-templatesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

evals/
evals.json
references/
building-the-system.md
design-tools-2026-reality.md
scope-and-connections.md
the-brand-framework.md

詳細

design-and-templates

再利用可能でブランドイメージに沿ったテンプレートシステムのスキルです。ブランドキット、少数の再利用可能なテンプレート、そしてデザイナーでなくてもブランドイメージに沿ったグラフィックをすばやく作成できるルールとワークフローを組み合わせています。エージェントがシステムを設計し、デザインツールまたは画像ツールがグラフィックを作成します。完成したアセットはWoopSocialのフローに入ります。

基本方針:オーダーメイドより一貫性とスピード

ソーシャルメディアで成功するのは、1つの美しいデザインではありません。デザイナーでない人がすばやく作成した、同じキャンペーンの一部に見える6種類のバージョンです。その鍵となるのは、ブランドキットを基盤とする小規模な再利用可能なテンプレートシステムです。これにより、ブランドイメージのずれと、ありきたりな**「テンプレート感」の両方を防ぎます。ブランドキットを先に整えると、最初のドラフトはブランドイメージに約80%沿ったものになり、何もない状態からでは約20%にとどまります。率直に言えば、ツールで実現できるのはブランドイメージに約70~80%沿うところまでで、ヒーローコンテンツの仕上げには人間の目が必要です。エージェントがシステムを設計し、デザインツール(Canva/Adobe Express/Figma)または画像ツールがグラフィックを作成**し、WoopSocialが完成したアセットを公開します。

まずはこちらをお読みください

  1. brand-profile — この運用の基盤となるアイデンティティ情報です。
  2. 定期的に必要となるコンテンツ — 実際に投稿する内容です。

フレームワーク:BRAND

(詳しくは references/the-brand-framework.md を参照してください。)

  • **B — ブランドキットを構築する:**トークン(色、フォント、ロゴ、余白)を確定し、一貫性の基盤を整えます(ブランドキットを先に整えると、ドラフトはブランドイメージに約80%沿います)。
  • **R — 少数の再利用可能なテンプレートを用意する:**定期的に使うフォーマットのみ、約5~7種類に絞ります(引用カード、カルーセルのフレーム、お知らせ、リールのカバー、ピンなど)。作り込みすぎないでください。
  • **A — 階層構造と読みやすさを軸にする:**焦点を1つに絞り、文字サイズにメリハリをつけ、コントラストとセーフゾーンに配慮し、モバイルを優先します。
  • **N — 命名して体系化し、すばやく使えるようにする:**デザイナーでなくても数分で差し替えられるようにします(フレームはそのままに、テキストや画像を差し替える)。名前を付けて整理し、Brand KitとMagic Switch/Resizeを使います。
  • **D — ブランドイメージに沿ったコンテンツを大規模に展開する:**生成画像は画像ツール(image-prompt)に指示します。完成したグラフィックはWoopSocialのフローに入れます。グリッド全体で一貫性を保ち、ヒーローコンテンツは人が仕上げます。

実情(四半期ごとに確認)

デザインの基本(階層構造/コントラスト/読みやすさ)は時代を超えて通用しますが、ツールは変化します。Canva(Magic Studio)はソーシャルメディア向けの標準的な選択肢です(Brand Kit、Magic Design、Magic Switch/Resize、Dream Lab、Bulk Create、Proは月額約15ドル、「Canva風」の品質は約70%が上限、AIクレジットの制限あり。AIが生成した未加工のコンテンツは一般に著作権の対象にならず、Canva Shieldによる補償はEnterprise限定)。Adobe Express+Fireflyは、ライセンスに基づくブランドセーフなAIと知的財産権に関する補償を備えたプレミアムな選択肢です。Figmaはデザインシステムの構築とガバナンスに適しており、日々のソーシャルメディア運用向けではありません。それぞれの強みを組み合わせてください。生成画像には画像ツール(image-prompt)、またはDream Lab/Fireflyに指示します。詳しくは references/design-tools-2026-reality.md を参照してください。ブランドキットの仕様、スターターテンプレート一式と仕様、階層構造と読みやすさのルール、制作ワークフローと実例については、references/building-the-system.md を参照してください。

対応範囲(必ず守ること)

  • エージェントがシステム(ブランドキットのトークン、テンプレート一式、階層構造のルール、ワークフロー)を設計します。仕様を定めて助言しますが、レンダリングは行いません。
  • デザインツール(Canva/Adobe Express/Figma)または画像ツールがグラフィックを作成します。完成したアセットはWoopSocialのフローに入り、WoopSocialは他のメディアと同様に公開します。デザイン、テンプレート作成、生成は行いません。
  • ツールで実現できるのはブランドイメージに約70~80%沿うところまでです。ヒーローコンテンツは人が仕上げてください。 AIが生成した未加工のコンテンツは著作権の対象にならない可能性があるため、人の手で編集を加えてください。決して捏造しないでください。(対応範囲、区別、連携については references/scope-and-connections.md を参照してください。)

関連ツールとの違い(適切に振り分ける)

design-and-templates(本ツール)=再利用可能なテンプレートのシステム+ブランドキット · brand-profile=本ツールが運用するアイデンティティの情報源 · thumbnail-design/pinterest-pin-design=単一のアセットタイプ(システム内のテンプレート) · carousel-writer=コピー/ナラティブ(本ツールはビジュアルのフレーム) · image-prompt+画像ツール=生成(本ツールはレイアウト/テンプレート) · profile-optimization=プロフィールアセット。

関連ツールとの連携

最初に参照するもの:brand-profile+繰り返し発生するコンテンツニーズ。フォーマット関連ツールに連携します:thumbnail-design、pinterest-pin-design、instagram-reels-publishing(カバー)、carousel-writer(コピーを流し込むフレーム)、story-writer — いずれもシステム内のテンプレートです。画像のブリーフ作成:image-prompt → ideogram/flux/nano-banana(または Dream Lab/Firefly)。公開:完成したアセット → scheduling-and-queue → WoopSocial(投稿/Pin/カバー/カルーセルメディア)。デザインと生成はデザインツール/画像ツールで行い、WoopSocial は公開のみを行います。

完了の定義

再利用可能なシステムであること:ブランドキット(色/フォント/ロゴ/余白を確定)に加えて、実際に繰り返し使うフォーマットに対応した、名前付きテンプレートの小規模なセット(約5~7個)があり、それぞれに焦点が1つ、明確な文字の階層、コントラスト、安全領域、モバイルファーストの可読性が備わっていること。チームに適したツールを使った、デザイナー以外でも制作できるワークフロー(テキスト/画像を差し替え → サイズを変更 → 書き出し → WoopSocial のフローへ)であること(標準は Canva/プレミアムで補償付きの画像には Adobe Express+Firefly/マスターシステムには Figma)。生成画像は image-prompt を介して画像ツールにブリーフを渡すこと。達成可能な範囲を正直に示すこと(ツールでブランドに沿った仕上がりにできるのは約70~80%で、ヒーロー画像の仕上げは人が行い、生のAI生成物は著作権で保護できない場合がある)。完成したアセットは WoopSocial 経由で公開すること。内容を捏造しないこと。brand-profile、thumbnail-design/pinterest-pin-design、carousel-writer、image-prompt との違いを正しく示すこと。

コメント