・
HTMLやCSSコードから動的に画像を生成する際に、HTML/CSS to Image APIの活用を検討したことはありませんか？
通常、API連携にはプログラミング知識が必須となるため、「エンジニアに依頼しないと難しいのか…」と導入をためらってしまうケースも少なくありません。
特に、社内に専門知識を持つ担当者がいない場合や、開発リソースが他のプロジェクトで手一杯の場合、どのように自動化を進めれば良いか悩んでしまいますよね。
そこで本記事では、HTML/CSS to Image APIの基礎知識から、<span class="mark-yellow">エンジニアでなくても簡単に様々なアプリとHTML/CSS to Image APIを連携する方法</span>までを具体的に解説します。この記事を読めば、フォームの回答を基にパーソナライズされた画像を自動生成したり、レポート作成を効率化したりと、これまで手作業で行っていた業務を自動化できるので、ぜひ最後までご覧ください。
Yoomには<span class="mark-yellow">HTML/CSS to Image APIを使った様々なアクションや、業務フローを自動化するためのテンプレート</span>が用意されています。今すぐ試したい方はこちらから詳細をチェックしてみてください！
HTML/CSS to Image APIはHTML/CSS to Imageと外部アプリ（Google、Microsoft、Salesforce、Notionなど）を繋げてデータの受け渡しを行い、HTML/CSS to Imageを使った業務フローを自動化できるインターフェースです。APIはアプリケーション・プログラミング・インタフェース (Application Programming Interface）の略語です。
インターフェースとは簡単に言うと「何か」と「何か」を「繋ぐもの」で、HTML/CSS to Image APIの場合は「HTML/CSS to Image」と「外部のアプリ」を繋ぐインターフェースを指します。
また、APIでは大きく分けて以下のような指示を出すことができます。
HTML/CSS to Image APIでできることをいくつかピックアップしたので、ご覧ください！
気になる自動化例の「試してみる」をクリックしてアカウント登録するだけで、すぐにHTML/CSS to Image APIを使った自動化を体験できます。登録はたったの30秒で完了するので、ぜひ気軽にお試しください！
HTML/CSS to Image APIの画像作成アクションをフローの中に組み込むことで、フォームの回答内容など、他のアプリで取得した情報をもとにパーソナライズされた画像を自動で生成し、手作業での画像作成の手間を大幅に削減できます。
HTML/CSS to Image APIの画像削除アクションを活用すれば、スプレッドシートの情報が更新されたタイミングなどで、不要になった画像を自動で削除するフローを構築でき、手動でのデータ整理や管理の手間をなくせます。
HTML/CSS to Image APIの画像取得アクションを用いることで、Slack上での特定のメッセージをトリガーにして動的に画像を生成・取得し、そのままSlackに返信するなど、インタラクティブなコミュニケーションを自動化することが可能です。
その他にも下記のようなアクションをAPI経由で実行が可能です。
■フローの中で設定できるアクション（フローボットオペレーション）
HTML/CSS to Image APIは、無料プランと有料プランの両方が提供されており、用途に応じて柔軟に選択できます。無料プランでも月に最大50万リクエストまで利用可能なので、多くのケースで十分に活用できるでしょう。
ただし、APIを利用する際にはいくつかの注意点があります。
※詳細はHTML/CSS to Imageのサービスサイトをご確認ください。
※2025年07月25日時点の情報です。
ここではノーコードツールYoomが用意するテンプレートで、実際の設定方法を通してHTML/CSS to Image APIを使った具体的な連携方法を紹介していきます！
もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
はじめにHTML/CSS to Image APIとYoomを連携する方法を紹介します。
まずはYoomのワークスペース画面にログインして、左側にある「マイアプリ」をクリックし、右側に表示される「+新規接続」を選択してください。
「アプリ一覧」画面が出たら、右上の検索ボックスに「HTML/CSS to Image」と入力して、出てきたアイコンをクリックしてください。
以下のように、ログインのための3つの情報を求められます。
「アカウント名」には、HTML/CSS to Imageに登録した際のメールアドレスを入力してください。
「User ID」と「API Key」は、あらかじめHTML/CSS to Imageにログインした状態で、ポップアップに表示されている「こちらのページ」をクリックして取得し、コピーしておきましょう。
クリップボードにコピーしたら、なくさないようにメモ帳などに貼り付けておくと安心です。
これらを先ほどのYoomアプリ連携画面に入力して「追加」ボタンを押しましょう。
上記の表示を確認できたら、これでHTML/CSS to Image APIとの連携は完了です。
今回は「フォームの回答を元にHTML/CSS to Imageでイメージを作成し、Gmailで送信する」という実際のフローボットも作成していきます！
作成の流れは大きく分けて以下です。
これから作成するフローボットでは、HTML/CSS to ImageとGmailの2つのアプリを使います。HTML/CSS to Imageはすでに連携済みですので、次はGmailとアプリ連携を行いましょう。
先ほどの手順と同じように、マイアプリから「+新規接続」を押してください。アプリ一覧画面からGmailのアイコンを探してクリックします。
以下のような画面が表示されたら、連携したいアカウントでGmailにログインしてください。
YoomがGmailのアカウントに権限を求める画面が表示されます。内容を確認して、「続行」を選びましょう。
無事にGmailがマイアプリが登録されると、以下のようなポップアップが表示されます。
マイアプリの連携が終わったら、いよいよフローボットを作成していきましょう。
Yoomでは、様々なアプリと連携して自動化するためのテンプレートが多く用意されています。
あらかじめYoomにログインした状態で、以下のバナーから「試してみる」をクリックしてみてください。
無事にテンプレートがコピーされると、以下のようなポップアップが表示されます。「OK」を押して次のステップに進みましょう。
テンプレートをコピーすると、自動でYoomのワークスペース画面に遷移します。以下のようなフローボットが表示されたら、フローボットを動かす最初の引き金となる「アクショントリガー」を設定していきましょう。
トリガーとなる一番上の「画像生成フォーム」をクリックしてください。
Yoomの機能の1つである、画像生成フォームを設定していきましょう。以下のように、画像生成フォームを作成できる画面に遷移します。
デフォルト設定では下にスクロールすると以下の項目が用意されていますが、必要に応じて項目を増やしたり、項目名を変更したりといった設定を加えてください。
必要な設定ができたら、試しに右上の「プレビューページ」をクリックしてみてください。
別のタブで以下のように、フォームが実際にどのように見えるかをプレビューできます。
問題がなければタブを閉じて、最下部の「次へ」で進みましょう。
次に、フォームの詳細設定や、次のフローに使う値を設定していきます。
以下のように「取得した値」として、実際にフォームが運用されている場合に送られた回答が表示される箇所があります。
今回はテスト用に作られた画像生成フォームのため、まだ誰にも回答されていません。自分でテスト用の内容を入力しておきましょう。
ここでは例として、以下のようにテスト用の回答を入力してみました。
ちなみに上の「取得した値」は、Yoom上で「アウトプット」と定義されており、以降のアクションで引用されるものです。
設定できたら、下の「保存する」ボタンを押してください。
フォームから送られてきたHTMLやCSSを、HTML/CSS to Imageと連携させて自動で画像生成を行います。
2番目のアクションをクリックして設定画面に入りましょう。
タイトルは任意で設定してください。連携するアプリやアカウントの内容に間違いがないか確認し、「次へ」で進みます。
実際にHTML/CSS to Imageで画像を生成するために、先ほどフォームから受け取ったHTMLやCSSを入力していきましょう。
以下のように、入力ボックスをクリックすると「取得した値」として候補が表示されます。
まずはHTMLを、以下のように選択してください。
次にCSSも「取得した値」から選択しておきましょう。
下にスクロールすると以下のような項目の設定が可能です。必要に応じて入力してみてください。
必要な設定を終えたら、下にある「テスト」ボタンで動作を確認してみましょう。
テストが成功すると「取得した値」として、実際にHTML/CSS to Imageで生成された画像の情報が表示されます。
ちなみにHTML/CSS to Imageで実際に作られた画像は取得した値のURLから確認可能です。
今回は前ステップでフォームから送ったHTMLとCSSによる、以下の画像が生成されました。
ここまで確認できたら、「保存する」ボタンを押してください。
フォームから送信された内容がHTML/CSS to Imageで画像化できたら、それをGmailに送るアクションを設定していきましょう。
まずはタイトルを任意で設定し、Gmailと連携しているアカウントに間違いがないか確認してください。
次にメールの内容を設定していきます。必須で設定する項目は以下の3つです。
他の項目は必要に応じて設定してみてください。ちなみに「From」欄が未設定の場合は、Gmailと連携しているアドレスが自動的に送り主となります。
まずは「To」を、画像生成フォームで取得した値の中から選びましょう。
件名や本文は、候補の中から情報をクリックすることでメールの内容に反映させられます。
取得した値を反映させることで、情報が固定化されずに最新の情報で本文を送信することができます。
今回は件名を「生成結果」と入力し、本文には取得した値から以下の2つを選択してみました。
メール本文が作成できたら、「次へ」ボタンで進みましょう。
以下のように、実際に送信されるメールの内容を確認できます。問題がなければ下の「テスト」ボタンでメールの送信チェックをしてみてください。
ちなみにこの例ではテスト用の回答になっているため、メールの送信先が実際に存在しない架空のアドレス（test@test.com）になっています。
実際にメールの送信テストをしたい場合は、前ステップの回答フォームや、メールの送信設定画面で本当に使えるアドレスを入力してみてください。
テストボタンを押すと、Toに設定されたアドレスにメールが届きます。
テストメールは実際に送信されるので、テストとわかるような表記や事前の周知をお願いします。
また、テストエラーになった場合は、いくつか原因が考えられますので、詳しくこちらを参考にしてください。
エラー：送信先メールアドレスの形式が不正です。の原因・対応方法 | Yoomヘルプセンター
設定した通りのメールがアドレスに届いているのを確認したら、「保存する」ボタンを押してください。
ここまでお疲れ様でした！必要な設定を全て終えると、以下のポップアップが表示されます。
「トリガーをON」をクリックして、フローボットを動かしましょう。
これで、フォームから届いたHTMLやCSSが実際にどのように反映されるかを画像化して、メールに送る自動化が完了しました！
HTML/CSS to Image API連携を行うことで、<span class="mark-yellow">これまで手作業で行っていたパーソナライズ画像の生成やレポート用の画像作成といった業務が自動化され、作業工数の大幅な削減やヒューマンエラーの防止に繋がります！</span>
また、担当者がこれまでの手作業から解放されることで、本来注力すべきコア業務に集中できる環境も整います。
今回ご紹介したような業務自動化を実現できるノーコードツール「Yoom」を使えば、プログラミングの知識がない方でも、直感的な操作で簡単に業務フローを構築できるので、もし自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomによる業務効率化を体験してみてください！
.webp)
.webp)
