【簡単】Googleカレンダーのサイト埋め込みとカスタマイズ方法を解説

「お客さんとイベント情報や営業日を共有したい」

「営業スケジュールをカレンダーで管理したい」

Googleカレンダーは、Googleが無料で提供しているスケジュール管理ツールです。世界での利用者数は5億人を超えるとも言われ、その手軽さから国内の中小企業や店舗にも広く浸透しています。

クラウド上に保存されており、Googleアカウントを持っている方とならどこでもスケジュールを共有できます。

またGoogleカレンダーはWEBサイトへ埋め込むこともでき、お店の営業日やスケジュール管理について非常におすすめです。海外の検証データによれば、サードパーティ製のウィジェットツールを使うよりも、Google公式の埋め込み（iframe）を利用する方が余計なスクリプトを伴わず表示速度が速いうえ、レイアウト崩れ（CLS）も起きにくく安全であると評価されています。

こちらの記事では、Googleカレンダーのサイトへの埋め込み方法からカスタマイズ、スマホ表示の最適化、さらには最新の予約スケジュール機能の活用方法などについて画像を用いながら解説します。

是非最後まで読んでGoogleカレンダーを活用してみてください。

GoogleカレンダーをWEBサイトへ埋め込む方法

まずはGoogleカレンダーをWEBサイトへ埋め込む方法を説明します。

Googleカレンダーを開く

最初にGoogleカレンダーを開き、画面左側【他のカレンダー】の右側にある【＋】マークをクリックし【新しいカレンダーを作成】を選択してください。

画像01

画像02

新しいカレンダーを作成に必要な情報を入力

【新しいカレンダーを作成】をクリックすると、入力箇所が表示されます。

それぞれ【名前】と【説明】の箇所に自身の目的に合った内容を入力し【カレンダーを作成】をクリックしてください。

今回は、店舗やイベント情報を管理するためのカレンダーとして【カレンダー１】という名前にしました。

【カレンダーを作成】をクリックしたら、【マイカレンダーの設定】の中に先ほど作成したカレンダーが追加されます。

埋め込みコードをWEBページに貼り付け

作成したカレンダーを選択し【設定と共有】をクリックします。

プルダウンの中の【予定のアクセス権限】をクリックし【一般公開して誰でも利用できるようにする】にチェックを入れます。

また右側の項目について【予定の表示(すべての予定の詳細)】を選択します。公開範囲が限定されたままだと、埋め込み先のサイトで閲覧者に予定が表示されないため注意が必要です。

次にプルダウンの中の【カレンダーの統合】を選択し【埋め込みコード】に移動してください。複数のカレンダーを一つの画面に統合して表示したい場合は、この画面で対象カレンダーを「表示するカレンダー」にチェックすることでまとめて埋め込むことができます。

埋め込みコードにあるHTMLコードをコピーし、自身が表示させたいWEBサイトに貼り付けて完了です。

WordpressにGoogleカレンダーを埋め込む方法

先ほどGoogleカレンダーからコピーしたHTMLコードについて、Wordpressへの埋め込み方法を紹介します。

貼り付けたい記事でカスタムHTMLを選択

貼り付けたい記事で、ブロックエディタの【＋】ボタンを押すと様々な効果が表示されるため、その中から【カスタムHTML】を選択してください。

GoogleカレンダーでコピーしたHTMLコードを貼り付け

【カスタムHTML】の中にGoogleカレンダーでコピーしたHTMLコードを貼り付けて完了です。

Googleカレンダーをスマホ対応(レスポンシブ対応)にする方法

Googleカレンダーの埋め込み機能は、2024年9月のデザイン刷新（Material Design 3の適用）により、標準でレスポンシブ対応（スマホやPCの画面サイズに合わせた自動幅調整）が行われるようになり、アクセシビリティも向上しました。

そのため、新たに取得した埋め込みコードを使用する場合は、旧来のような複雑なCSS設定を行わなくても自動的にスマホできれいに表示されます。「モバイルでも予定が見切れない」と評判のアップデートです。もし現在埋め込んでいる古いカレンダーがスマホで見切れてしまう場合は、Googleカレンダーの設定画面から最新の埋め込みコードを再取得して貼り替えることをおすすめします。

※以下は、意図的にサイズを固定したい場合や、旧デザインのままでレスポンシブ対応させたい場合の手動CSS設定方法です。

Wordpressに貼り付けたHTMLコードの前後に、以下のコードを入力して更新します。

【iframe・・】の前に、下記のコードを入力してください。

<div class="googleCalender">

＜/iframe＞の後ろには、こちらのコードを入力します。

</div>

Wordpressのホーム画面にて【外観】から【カスタマイズ】をクリックします。

カスタマイズ画面から【追加CSS】をクリックし、CSSコードを入力する場所を開きます。

以下のCSSコードを貼り付けて公開を押してください。

/*　Googleカレンダー（スマホ表示） */ .googleCalender iframe { width:100%; max-width:800px; height:400px; } /*　Googleカレンダー（PC表示） */ @media (min-width: 960px) { .googleCalender iframe { height:600px; } }

スマホ画面での表示を確認し、画面全体が表示されていたら完了です。

Googleカレンダーのカスタマイズ方法

次にGoogleカレンダーのカスタマイズについて説明します。

Googleカレンダーのカスタマイズにより表示内容や、サイズを変更することが可能です。（※アップデートによりモダンなデザインへとUIが改善されています）

まず、作成したカレンダーを選択し【設定と共有】を選択してください。

プルダウンのなかの【カレンダーの統合】を選択し【カスタマイズ】というボタンをクリックします。

カスタマイズを開くと、左側の項目で設定の変更が可能です。

変更できる設定は以下になります。

タイトルの表示or非表示
ナビゲーション表示or非表示
日付の表示or非表示
印刷アイコンボタン表示or非表示
メニューの表示or表示
タイムゾーン表示or非表示
枠線表示or非表示
幅・高さ
デフォルトのビュー
週の開始日
日本語
表示するカレンダー

表示

項目のチェックを外すことで、表示か非表示かを選ぶことが可能です。

例えば【印刷】のチェックを外すと、【印刷】ボタンが非表示になります。

幅・高さの調整

【幅】と【高さ】に数字を入力することで、カレンダーのサイズを調整できます。

プレビューで大きさを確認しながら、自分の理想のサイズに調整しましょう。

デフォルトのビュー

【週】【月】【スケジュール】という３つから表示形式を選ぶことができます。

週の開始日

週の開始日について【土曜日】【日曜日】【月曜日】から選択が可能です。

言語

複数の言語に対応していますが、特に必要なければ【日本語】のままで問題ありません。

タイムゾーン

言語と同じく複数の国に対応していますが、特に必要なければ【日本】のままで問題ありません。なお、2026年4月までに全ユーザーへ展開された最新のアップデートにより、長大なリストから選択するのではなく、都市名や国名を直接入力してタイムゾーンを素早く検索・設定できるようになりました。海外との時差を伴うスケジュール調整の際には、この新機能を活用すると飛躍的に便利になります。

Googleカレンダーがスマホで表示されない場合

iPhoneのサファリ(Safari)でGoogleカレンダーを表示すると、以下のような画面（「私はロボットではありません」などのループ）が表示される方がいます。

原因はiOS 15.2以降のサファリ(Safari)がデフォルトで【サイト越えトラッキングを防ぐ】という仕組みをオンに設定しており、外部ドメインからのコンテンツ読み込みがブロックされてしまうためです。

以前は、サイト訪問者にこのセキュリティ設定をオフにしてもらう案内が一般的でしたが、現在では推奨されていません（iPadOS 17や18などでは設定をオフにしてもブロックされるケースが報告されています）。解決策としては以下の３つになります。

【推奨】カレンダーへの直接リンク（ボタン）を設置する

埋め込みカレンダーの下に「カレンダーが表示されない方はこちら」というテキストリンクやボタンを設置し、Googleカレンダーの公開URLへ直接誘導するのが最も確実で親切な回避策です。ユーザー自身のブラウザで直接Googleカレンダーを開いてもらうことで確実に予定を閲覧できるため、近年ではこの直接リンク方式に切り替えるサイトが増えています。

別のブラウザを利用する

Google Chromeなど別のブラウザで表示できる旨をサイト上に記載しておくことも有効です。ただし、iPhone（iOS版）のChromeやFirefoxは内部的にSafariと同じエンジンを使用しているため、この問題を回避できません。あくまでPC版やAndroid版、または完全に別の端末から閲覧してもらうための案内となります。

Googleカレンダーのアクセス権限を一般公開にする

作成したカレンダーを選択し【設定と共有】を選択します。

プルダウンのなかの【予定のアクセス権限】を選択し【カスタマイズ】というボタンをクリックします。

【予定のアクセス権限】の項目から【一般公開して誰でも利用できるようにする】にチェックを入れたら完了です。

【最新機能】「予約スケジュール」でWebから予約を受け付ける

単にカレンダーで予定や営業日を表示するだけでなく、Webサイト上でそのまま予約を受け付けたい場合は、Googleカレンダーの「予約スケジュール（Appointment Schedules）」機能が非常に便利です。

2024年8月に従来の「予約枠」機能が終了して新しい「予約スケジュール」へ一本化され、2025年までには無料の個人アカウントを含む全ユーザーに追加料金なしで完全開放されました。Googleアカウントを持たない外部ユーザーからの予約受付も可能です。

Webサイトへ「予約ボタン（クリックでポップアップ表示）」や「インライン予約フォーム」として直接埋め込むことができるほか、前述したSafariでの表示エラーを回避するために、カレンダー埋め込みの代わりに予約フォームへの直接リンクを設置する企業も増えています。

「Calendly（キャンドリー）」などの外部ツールに頼らずとも、日時の候補提示から確定、確認メールの自動送信、Google MeetやZoomとの連携までを一元管理でき、人的ミスや煩雑な問い合わせ対応を大きく減らすことができます。なお、Google検索やGoogleマップ上に表示される「予約」ボタン（Googleで予約）機能とは仕組みが異なるため、検索結果上に直接ボタンを出したい場合は認定パートナーの外部予約システムを利用する必要があります。

組織で利用する際の注意点：カレンダーの所有権

企業や店舗で「イベント用」や「営業日用」などの共有カレンダー（セカンダリカレンダー）を運用し、それをWebサイトに埋め込んでいる場合は注意が必要です。

Googleのデータライフサイクル仕様の変更により、カレンダーの作成者（オーナー）のアカウントが退職等で削除されると、そのユーザーが作成した共有カレンダーも自動的に削除され、Webサイト上から消滅してしまうリスクがあります。

このオーナー不在カレンダーの自動削除ポリシーは2026年10月5日より適用予定です。猶予期間中の2026年6月にはカレンダーの所有権を移譲する新しいAPIや管理コンソール機能も順次公開されます。担当者が離職などで変わる場合は、アカウントを削除する前に、重要な埋め込みカレンダーの所有権を必ず同僚など別のアカウントへ譲渡（Transfer ownership）するようにしてください。

どんどんGoogleカレンダーを使用しよう

Googleカレンダーをウェブサイトに表示することで、簡単にスケジュールを確認したり、お客様と情報共有したりと様々な活用方法があります。

2024年のMaterial Design 3に準拠したデザイン刷新によってモバイルでの表示やアクセシビリティが向上し、完全無料開放された「予約スケジュール」機能を活用すれば、日程調整から予約獲得までがこれまで以上にスムーズになります。また、Slackや他プラットフォームとの統合強化のほか、Google Workspace向けには生成AI「Gemini」が参加者全員の最適な会議時間を自動提案するスケジューリング支援機能（2026年1月発表）なども登場しています。

一見シンプルなツールですが、最新のアップデートや運用Tipsを押さえることで、業務効率やユーザーへの利便性は飛躍的に向上します。今回の記事を参考にして、是非ウェブサイトや日々の業務にGoogleカレンダーを使いこなしてみてください。