レスポンシブ埋め込みコード作成ツール
埋め込みコード作成ツール
レスポンシブ埋め込みコード作成ツール（YouTube、Vimeo、マップ、Calendly）| We.Inc
YouTube、Vimeo、Googleマップ、Calendly、Spotify、Loom、Googleフォームのリンクを貼り付け、アクセシブルなタイトル付きのレスポンシブiframeコード、ライブプレビュー、各サービスのプライバシー情報を取得できます。
対応サービスのリンクを貼り付け、アスペクト比を選び、埋め込み内容が分かるタイトルを設定します。画面幅に合わせて拡大縮小し、訪問者が近くまでスクロールしたときに読み込まれるiframeコードを作成します。スクリーンリーダー向けのタイトルも設定されます。ライブプレビューで結果を確認でき、各サービスの追跡情報やプライバシー保護オプションについても確認できます。すべてブラウザー内で動作し、入力またはアップロードした内容はWe.Incや他の誰にも送信されません。
- YouTubeまたはVimeoの動画、Googleマップの埋め込みリンク、Calendlyの予約ページ、Spotifyの曲やプレイリスト、Loom動画、Googleフォームのリンクを貼り付けます。
- サービスを自動判別し、公式の埋め込みURLに変換します。判別できないリンクは推測で処理せず、拒否します。
- アスペクト比（16:9 for video, 4:3, 1:1、予約ページやフォームなら固定高さ）を選び、埋め込み内容を表すタイトルを入力します。
- 読み込み方法を選びます。ページを開いた直後に遅くならないよう、初期設定では遅延読み込みが有効です。
- ライブプレビューを確認してHTMLをコピーします。サービスごとの注意書きには、プライバシー通知やCookie通知に記載すべき内容が示されます。
- すべてのiframeに「キング通りの店舗への地図」のような内容を表すタイトルを付けましょう。スクリーンリーダーが読み上げます。
- YouTube動画にはyoutube-nocookie.comを使いましょう。訪問者が再生を押すまでYouTube Cookieを設定しません。
- サイズの大きい埋め込みは最初の画面より下に置くか、遅延読み込みしましょう。埋め込みごとに別サイトのページ全体を読み込みます。
- 予約、チャット、フォームのウィジェットは外部サービスの製品です。適用される利用規約とデータ処理方針を確認してください。
- Googleマップでは［共有］、［地図を埋め込む］を選び、src内のURLをコピーします。通常のマップリンクは埋め込めません。
よくある質問
iframeをレスポンシブにするには？
aspect-ratio（例：16 / 9）とwidth: 100%を指定したコンテナーで囲み、iframeをコンテナーいっぱいに広げます。古いサイトではpadding-topを使う方法がありましたが、現在の全ブラウザーがaspect-ratioに対応しています。このツールは新しい方法のコードを出力します。
対応しているサービスは？
YouTube（Shortsとyoutu.beリンクを含む）、Vimeo、Googleマップの埋め込みリンク、Calendly、Spotify、Loom、Googleフォームに対応します。それぞれ公式の埋め込みURLがあるサービスです。動作しないコードを出力しないよう、その他のリンクは拒否します。
遅延読み込みで埋め込みに問題が起きますか？
いいえ。loading="lazy"は、iframeが画面に表示される位置に近づいたときにブラウザーが取得するよう指定します。訪問者がそこまでスクロールすると、通常どおり読み込まれます。
We.Incは予約やチャット機能を提供していますか？
いいえ。Calendlyなどは各サービスに登録して使う別製品です。このツールは、そのウィジェットをページに表示するコードを作成します。
Googleマップのリンクが動かないのはなぜですか？
通常のmaps.google.comやgoo.glのリンクは埋め込みを許可しません。Googleマップで場所を開き、［共有］、［地図を埋め込む］の順に選び、表示されたコードのsrc部分からURLをコピーしてください。
埋め込みが訪問者に与える負荷
- 埋め込みは他社ページを表示する小さな窓です。外部スクリプトやCookieを読み込み、ページを重くすることがあります。便利な場合も多いですが、意図して使いましょう。最初の画面より下にある埋め込みは遅延読み込みし、プライバシー保護モードがあれば使い、プライバシー通知に外部埋め込みについて記載してください。
アクセシブルな埋め込み
- スクリーンリーダーはiframeのタイトルを読み上げます。タイトルがないと、訪問者には「フレーム」としか伝わりません。分かりやすいタイトル、埋め込みと同じ内容へのテキストリンク、動画の字幕を用意すると、誰もが利用しやすくなります。
無料で始める · クレジットカード不要
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る