PA45 第20回 ・ 補助資料

アダプティブ カード デザイナーの使い方

カードの見た目をマウスで組み立てて、JSONを自動で作ってくれる公式ツール。今回の「検品」で使います。

🔗 https://adaptivecards.io/designer/　（ログイン不要・無料）
STEP 0

まず画面の全体像（4つのエリア）

開くと少し情報量が多く見えますが、役割は4つだけです。※画面の表示は英語です。

New card Select host app：Microsoft Teams Theme：Light Target version：1.5 Copy card payload Preview mode
① CARD ELEMENTS
Containers
  • Container
  • FactSet
  • ColumnSet
  • Table
Elements
  • TextBlock
  • Image
  • ActionSet
Inputs
  • Input.Text
  • Input.ChoiceSet
✈ 出張申請が届きました
山田 太郎
行き先名古屋
概算費用¥42,800
申請内容を開く
③ CARD STRUCTURE
▾ AdaptiveCard
 ▾ Container
  TextBlock
 FactSet
 ActionSet
ELEMENT PROPERTIES
要素を選ぶと
ここで設定を編集
④ CARD PAYLOAD EDITOR
// 組み立てた内容がJSONで自動生成される（ここに貼り付けてもOK）
{ "type": "AdaptiveCard", "version": "1.5", "body": [ … ] }
エリア役割
① CARD ELEMENTSカードの部品置き場。ここから中央にドラッグして追加します。
② 中央（プレビュー）実際の見た目。選んだホストアプリの見え方で表示されます。
③ CARD STRUCTURE ＋
ELEMENT PROPERTIES		上＝部品の入れ子構造（ツリー）。下＝選んだ部品の設定パネル（色・サイズ・太さなど）。
④ CARD PAYLOAD EDITORJSON。マウス操作すると自動で書き換わり、JSONを貼れば見た目に反映されます。
使い方

今回やる流れは、この5ステップ

Copilotが作ったJSONを貼って、Teamsでの見え方を確認し、直して、持ち帰る ── が基本の型です。

  1. Select host app を「Microsoft Teams」にする

    ここがいちばん大事。既定は Bot Framework WebChat なので、Teams に切り替えると「実際にTeamsで見たときの色・余白」で表示されます。検品はこの状態でやります。

    選べるホストアプリ例：Bot Framework WebChat ／ Outlook Actionable Messages ／ Microsoft Teams ／ Viva Connections ／ Widgets Board など。届け先に合わせて選ぶのがコツ。

  2. Target version を 1.5 にする

    カードの「文法バージョン」。新しすぎるとTeamsで表示できないことがあるので、1.5にしておくと安全です。

  3. CARD PAYLOAD EDITOR にJSONを貼る

    Copilotに作ってもらったJSON、または配布JSONを丸ごと貼り付け。貼った瞬間に中央のプレビューが変わります。ゼロから部品を並べる必要はありません。

  4. 気になる所を直す（＝検品）

    中央のプレビューで部品をクリックすると、右下の ELEMENT PROPERTIES で色や太さを変更できます。JSONを直接書き換えてもOK。

  5. Copy card payload でJSONを持ち帰る

    上部のこのボタンでJSON全体をコピー。あとは Power Automate の「アダプティブ カードを投稿…」のメッセージ欄に貼るだけです。

    迷ったら：Preview mode を押すと、ボタンを押せる状態で最終確認できます（元に戻すともう一度編集できます）。
今回の検品ポイント

Copilotの出力を、ここだけ直す

Copilotは見出しを emphasis（グレー地）で作ってくることがあります。デザイナーで確認して accent に変えると、狙いどおりの色帯になります。

Copilotの出力
"style": "emphasis"

動くけれど、見出しがグレー地であっさりした印象。

配布版（検品後）
"style": "accent",
"bleed": true

色帯が付いて、ひと目で内容が伝わるカードに。

色は受け手のテーマで変わります。明るいTeamsでは水色の帯、暗いTeamsでは濃紺の帯で表示されます。どちらでも読めるようになっています。
早見表

よく使う部品（CARD ELEMENTS）

部品何をするもの
TextBlock文字を置く。サイズ・太さ・色を変えられる（見出しにも本文にも）。
FactSet「項目：値」を整然と並べる表。今回の行き先・期間・費用はこれ。
Container部品をまとめる箱。style を付けると背景色が付く（＝色帯の正体）。
ColumnSet横に並べる。左に名前・右にバッジ、のような配置ができる。
Image画像・アイコンを置く。
ActionSetボタンを置く。今回は「申請内容を開く」（Action.OpenUrl）。
Input.Text ほか入力欄。回答を受け取りたいときに使う（第21回で登場）。
全部覚えなくて大丈夫。今回のカードで使うのは Container・TextBlock・FactSet・ColumnSet・ActionSet の5つだけです。
発展

新しいデザイナーもあります

Microsoft公式の新版。サンプルが豊富で、Copilot／Teams／Outlook向けの作例がそろっています。慣れてきたらこちらも。

🔗 https://adaptivecards.microsoft.com/designer
講座で使うのは従来版（上の adaptivecards.io）です。ホストアプリをTeamsに切り替えて見え方を確認する流れが分かりやすいためです。
PA45 第20回 補助資料 ／ 出典：Microsoft Learn（Adaptive Cards）・Adaptive Cards Designer
画面のラベルは英語表記です。人名・数値はすべて架空のサンプルです。
本内容は公開日時点のものです。Microsoftの仕様・画面は今後変わる可能性があります。