ホームページにQRコード・動画・SNSを埋め込む方法|拡張機能の追加ガイド

「ホームページに動画を載せたいけれど、どうやって貼り付ければいいか分からない」「QRコードを作って名刺やチラシからホームページに誘導したい」――そんな悩みを抱えていませんか。

ホームページの基本ができあがると、次に欲しくなるのが動画・QRコード・SNS連携といった機能の追加です。これらは訪問者の利便性を高め、回遊率や滞在時間を伸ばす上で大きな効果があります。

本記事では、コードに詳しくない方でも実装できる、ホームページの主要な拡張機能の追加方法を、コピペで使えるサンプルとあわせて解説します。

ホームページに動画やQRコード、SNSなどの拡張機能を組み込むと、テキストと画像だけのページよりも情報量と訴求力が一気に高まります。具体的な効果は次の3つです。

情報伝達の効率化:商品の使い方やサービスの雰囲気は、文章で説明するより1本の動画で伝えたほうが正確かつ短時間で理解してもらえます。

接点の増加:ホームページからInstagramやYouTubeへ自然に誘導でき、SNSフォロワーの獲得や日常的な接点づくりに役立ちます。

オフラインからの集客:名刺・ポスター・店頭POPにQRコードを掲載すれば、ホームページへの流入経路が紙媒体まで広がります。

拡張機能はそれぞれ目的が明確に違うため、自社のホームページに何が必要かを最初に整理しておくと、無駄な作業を減らせます。

QRコード作成しホームページへ誘導するニーズは、名刺・チラシ・店頭POPなどオフライン媒体からの誘導でよく出てきます。ここでは無料ツールでホームページ qrコードを作る基本の流れを紹介します。

※ QRコードは(株)デンソーウェーブの登録商標となります。

ホームページ qrコード 作り方の出発点は、信頼できる無料ツールを選ぶことです。日本国内で広く使われているのは「クルクル Manager」「QRのススメ」「Adobe Express」などです。いずれもURLを入力するだけで画像ファイルが生成されます。

代表的なQRコード作成ツールは次のとおりです。

・クルクル Manager(PNG/JPEG/EPS):国産・QRコードの開発元であるデンソーウェーブが提供する無料ツール
・QRのススメ(PNG/SVG/EPS):ユーザー登録不要・商用利用無料で20年以上の運用実績あり
・Adobe Express(PNG/JPG/SVG):デザインカスタマイズが豊富、無料アカウントで利用可能

• お名前.com　QRコード
• 希望のURLから無料でQRコードを作成できます。

ツールを開き、ホームページのURLを入力欄に貼り付けて「生成」ボタンを押します。数秒で画像が表示されるので、ダウンロードして保存します。

ホームページにQRコードを埋め込みたい場合は、画像をアップロードしてimgタグで配置するだけです。WordPressやノーコードツールを使っている場合は、画像挿入機能で同じ操作ができます。QRコードは320×320ピクセル以上で印刷した時、スマートフォンで安定して読み取れます。小さすぎると認識率が下がるので注意しましょう。

・印刷物用:SVG・EPS形式で書き出すと拡大・縮小しても画質が落ちない
・Web表示用:PNG形式で軽量化(50KB以下が目安)
・動的なリンク先変更が必要な場合:有料のダイナミックQRコードサービスを検討

ホームページに動画を載せる方法は大きく2種類あります。YouTube・Vimeoなどの動画プラットフォームから埋め込む方法と、自社サーバーに動画ファイルを置いて再生する方法です。

ホームページ 動画 埋め込みで最もよく使われるのがYouTubeです。サーバー負荷がなく、再生速度の最適化もYouTube側に任せられます。

ホームページ youtube 埋め込みの手順は次のとおりです。

・YouTubeで対象動画を開く
・「共有」→「埋め込む」をクリック
・表示されたiframeタグをコピーし、ホームページのHTMLに貼り付ける

埋め込みコードはデフォルトで幅560px・高さ315pxとなっており、widthとheightを「100%」や「auto」に変更すると、スマートフォンでもきれいに表示できます。なお、YouTube公式は幅480px・高さ270px(16:9の比率)以上の埋め込みサイズを推奨しており、最小サイズは200×200pxとされています。

YouTubeに公開したくない動画(社内向け・限定公開コンテンツなど)は、videoタグでホームページに直接埋め込めます。ただし動画ファイルはサイズが大きく、サーバーの転送量を圧迫します。30秒以下の短尺動画でなければ、YouTube埋め込みを優先するのが現実的です。

・YouTube埋め込み:サーバー負荷なし・動画SEOに有利。一般公開コンテンツに最適
・Vimeo埋め込み:広告非表示で印象が良くブランド訴求動画向き
・自社サーバー(videoタグ):サイト内完結だがサーバー負荷大。限定公開・短尺向き

ホームページ インスタ 埋め込みは、店舗・飲食・美容業など、写真の世界観を直接見せたい業種で特に効果的です。最新投稿が自動で反映されるため、ホームページの鮮度を保ちやすいのも利点です。

・パソコンでInstagramのウェブ版を開き、対象投稿を表示する(スマホアプリ・スマホブラウザからは取得できません)
・投稿右上の「…」メニューから「埋め込み」を選択
・「キャプションを含める」のチェックを確認して「埋め込みコードをコピー」をクリック
・ホームページのHTMLに貼り付ける

なお、ストーリーズには埋め込みコードが付与されないため、通常投稿・リール・動画のみ埋め込み可能です。貼り付けたコードはそのまま動作しますが、見た目を整えたい場合は親要素に幅を指定すると安定します。

特定の1投稿ではなく、最新投稿を自動で並べたい場合は「SnapWidget」などのウィジェットサービスを使うのが手軽です。より高度に表示制御したい場合は「Instafeed.js」というJavaScriptライブラリもありますが、Instagram公式の「グラフAPI」連携が必要で、現在のInstagram API仕様では一般用途での承認取得が難しく、開発知識も求められます。コードを書かずに導入したい場合は、SnapWidgetなどのウィジェットサービスから試すのが現実的です。

各SNSとも「投稿の埋め込み」機能を公式に提供しており、生成されたコードをホームページに貼るだけです。SNSアカウントを運用しているなら、ホームページ側にも投稿の窓を作っておくと、サイト訪問者がフォロワーになる動線が生まれます。

ホームページ 多言語化は、訪日外国人の集客や越境ECを視野に入れる事業者にとって重要なテーマです。実装方法は予算とコンテンツ量によって最適解が変わります。

最も簡単なのが、ページにJavaScriptを埋め込んでブラウザ上で翻訳を提供する方法です。導入コストはゼロですが、機械翻訳の精度や独自用語の扱いに限界があります。

WordPressを使っている場合、「WPML」「Polylang」などのプラグインで本格的な多言語サイトを構築できます。WPMLは150万以上のサイトで利用される有料の老舗プラグイン、Polylangは無料版もあり中小規模サイトに人気です。いずれもSEOに対応した正統派の方式です。

「/en/」「/zh/」などのディレクトリを分け、英語版・中国語版のページを自社で用意する方法です。翻訳の品質を完全にコントロールでき、SEO上も最も評価されやすい構造です。コストはかかりますが、ブランドサイトには最適です。

・翻訳対象を「全ページ」か「主要ページのみ」かを決める
・言語切替ボタンをグローバルナビに配置する
・各言語ページにhreflangタグを設定し、検索エンジンに言語を正しく伝える

ホームページに機能を追加する際、闇雲にコードを貼り付けると表示崩れやページ速度の低下を招きます。次の3点を事前にチェックしましょう。

YouTube・Instagram・各種ウィジェットはJavaScriptを大量に読み込みます。1ページに複数の埋め込みを置くと、表示速度が体感できるレベルで遅くなることがあります。Google PageSpeed Insightsで、追加前後のスコアを必ず比較してください。

埋め込みコードはPCで表示確認するだけでなく、必ずスマートフォン実機で見ます。固定値で書かれていると、画面からはみ出すケースがあります。「max-width: 100%」を親要素に追加すると安全です。

外部サービスの埋め込みは、Cookieやアクセス情報がそのサービスに渡る場合があります。プライバシーポリシーの該当箇所に「YouTube埋め込みによりGoogleにアクセス情報が送信される旨」などを明記しておくと安心です。

ここまで紹介した拡張機能は、HTMLの知識がなくても扱えるサービスを選べば、コードを書かずに追加できます。代表的な選択肢を整理しておきます。

世界シェアNo.1のCMSで、ほぼすべての拡張機能がプラグインで実現できます。動画埋め込み・SNS連携・多言語化、すべて専用プラグインが揃っています。

近年は、テンプレートを選んで文字や画像を入れるだけでホームページを作れるツールが増えており、動画・QRコード・SNS連携の機能も標準搭載されているケースが多くあります。

最新のサービスでは、AIが質問に答えるだけでホームページの構成からデザインまで提案してくれます。拡張機能の追加もボタン操作で完結し、コーディングの知識は不要です。お名前.comのAIホームページパックは、こうしたAI×WordPressをワンストップで利用できるサービスとして2025年9月30日に提供開始されました。

自社サイトのURLを変換したQRコードは、自由に商用利用できます。一方、他社サイトや有料コンテンツへのリンクを許可なくQRコード化することは、トラブルの原因になります。掲載先のサイトポリシーを確認しましょう。なお、「QRコード」は株式会社デンソーウェーブの登録商標です。

最も多いのは、動画投稿者が公開設定を「限定公開」「非公開」に変更したケースです。次に多いのが、動画自体が削除された場合です。埋め込み元の動画URLが現在も有効か、ブラウザで直接アクセスして確認してください。

hreflangタグを正しく設定すれば、各言語ページがそれぞれの言語圏の検索結果に表示されるようになり、検索流入の対象が大きく広がります。逆にタグを設定しないと、検索エンジンがどの言語の読者に見せるべきか判断できず、機会損失につながります。

ホームページに動画・QRコード・SNS・多言語化などの機能を追加すると、訪問者の利便性と回遊性が大きく向上します。ただし、すべてを一度に導入するとページ速度の低下や運用負荷の増加を招くため、効果の大きい機能から順に追加していくのが鉄則です。

まずは「自社の集客課題に直結する機能はどれか」を見極め、QRコードや動画埋め込みのように導入コストが低いものから試してみるとよいでしょう。

ホームページの自作なら「お名前.com AIホームページパック」がおすすめ

お名前.com「AIホームページパック」とは?