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

「お客さんに営業日やイベント情報をわかりやすく共有したい」

「Webサイト上で店舗のスケジュールを簡単に更新したい」

このような場合に便利なのが、Googleカレンダーの埋め込み機能です。GoogleカレンダーはGoogleが提供するスケジュール管理ツールで、個人から企業、学校、自治体、イベント主催者まで幅広く利用されています。

Googleカレンダーはクラウド上で予定を管理できるため、カレンダー側を更新するだけで、Webサイトに掲載している営業日・休業日・イベント予定などにも反映できます。国内でも、中小企業や店舗が予約システムやイベント告知カレンダーの代わりとして活用するケースが増えています。

専用の予約システムを開発せずに導入できる点も大きなメリットです。公式の埋め込みコードはiframe形式で、WordPressなどのWebサイトにも貼り付けやすく、サードパーティ製プラグインを多用する場合に比べて運用がシンプルです。ただし、サイトに埋め込むカレンダーは基本的に一般公開されるため、公開してよい予定だけを登録する運用が欠かせません。

この記事では、GoogleカレンダーをWebサイトへ埋め込む方法、WordPressでの貼り付け方、スマホ表示への対応、カスタマイズ、Safariで表示されない場合の対処法、さらに予約受付に使える「予約スケジュール」機能まで解説します。

ぜひ最後まで読んで、GoogleカレンダーをWebサイト運用に活用してみてください。

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

まずは、GoogleカレンダーをWebサイトへ埋め込む基本的な手順を説明します。

Googleカレンダーを開く

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

画像01

画像02

新しいカレンダーの情報を入力する

【新しいカレンダーを作成】をクリックすると、カレンダー名や説明を入力する画面が表示されます。

【名前】と【説明】に目的に合った内容を入力し、【カレンダーを作成】をクリックしてください。たとえば店舗の営業日を公開する場合は「店舗営業日」、イベント情報を掲載する場合は「イベントカレンダー」など、管理者が見てもわかりやすい名前にしておくと便利です。

今回は例として【カレンダー１】という名前で作成します。

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

公開設定を確認する

作成したカレンダーをサイトに埋め込む前に、公開設定を確認します。対象のカレンダーを選択し、【設定と共有】をクリックします。

左側メニューの【予定のアクセス権限】を開き、【一般公開して誰でも利用できるようにする】にチェックを入れます。Webサイトに埋め込んだカレンダーを誰でも閲覧できるようにするには、この公開設定が必要です。

右側の公開範囲は、用途に合わせて選択します。イベント名や詳細まで見せたい場合は【予定の表示（すべての予定の詳細）】を選びます。一方、詳細を出したくない場合は公開する内容を慎重に調整しましょう。

ここで重要なのは、サイトに埋め込むカレンダーは基本的に外部公開されるという点です。公開URLを知っている人が閲覧できるだけでなく、内容によっては検索エンジンに認識される可能性もあります。社内会議、顧客名、担当者の個人情報、非公開イベントなどを含むカレンダーをそのまま公開しないようにしましょう。

実務では、社内用カレンダーと公開用カレンダーを分け、公開用にはWebサイトに掲載して問題のない予定だけを登録する方法がおすすめです。

埋め込みコードを取得してWEBページに貼り付ける

次に、左側メニューの【カレンダーの統合】を選択します。

【埋め込みコード】に表示されているHTMLコードをコピーし、表示させたいWebページに貼り付ければ埋め込みは完了です。

複数のカレンダーをまとめて表示したい場合は、カスタマイズ画面で表示対象のカレンダーを選択できます。たとえば「営業日」「イベント」「セミナー」などを別々のカレンダーで管理し、Webサイト上では1つのカレンダーとして見せる運用も可能です。

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

ここでは、GoogleカレンダーでコピーしたHTMLコードをWordPressに貼り付ける方法を紹介します。

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

WordPressのブロックエディタで、カレンダーを表示したい記事や固定ページを開きます。ブロック追加の【＋】ボタンを押し、ブロック一覧から【カスタムHTML】を選択してください。

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

【カスタムHTML】ブロックの中に、Googleカレンダーでコピーした埋め込みコードを貼り付けます。

プレビューで表示を確認し、問題がなければ公開または更新します。

なお、WordPressにはGoogleカレンダーを見やすく表示するためのプラグインもありますが、プラグインを使う場合は更新状況や脆弱性情報に注意してください。過去には、イベント内容の出力処理に関するXSS脆弱性の修正が行われたGoogleカレンダー関連プラグインもあります。特別なデザインや一覧表示が不要であれば、まずはGoogle公式のiframe埋め込みコードを直接利用する方法がシンプルで安全です。

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

Googleカレンダーの埋め込み表示は、2024年9月のデザイン刷新により大きく改善されました。Material Design 3に沿った新しい見た目になり、読みやすさやキーボード操作などのアクセシビリティが向上したほか、画面サイズに応じて表示が調整されるレスポンシブレイアウトにも対応しています。

そのため、これから新しく埋め込みコードを取得して貼り付ける場合は、以前のように複雑なCSSを追加しなくても、スマートフォンやタブレットで見やすく表示されるケースが増えています。

もし古い埋め込みコードを使っていてスマホ表示が崩れている場合は、まずGoogleカレンダーの設定画面から最新の埋め込みHTMLコードを再取得し、貼り替えてみましょう。手動CSSで調整するのは、最新コードでも意図した表示にならない場合や、あえて高さ・幅を固定したい場合に検討するのがおすすめです。

以下は、旧デザインの埋め込みコードを使っている場合や、独自に表示サイズを調整したい場合の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カレンダーの埋め込みでは、タイトルやナビゲーション、表示形式、サイズ、言語、タイムゾーンなどを調整できます。店舗サイトなら月表示、イベント一覧を見せたい場合はスケジュール表示など、用途に合わせて変更しましょう。

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

左側メニューの【カレンダーの統合】を選択し、【カスタマイズ】ボタンをクリックします。

カスタマイズ画面を開くと、左側の項目で表示設定を変更できます。

主に変更できる項目は以下の通りです。

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

表示

各項目のチェックを外すことで、表示・非表示を選べます。

例えば【印刷】のチェックを外すと、カレンダー上の【印刷】ボタンが非表示になります。店舗の営業日をシンプルに見せたい場合は、不要なボタンやメニューを非表示にすると見やすくなります。

幅・高さの調整

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

最新の埋め込みコードではレスポンシブ対応が進んでいるため、まずは標準の表示で確認し、必要に応じてサイズを調整しましょう。PCでは大きく、スマホでは横幅いっぱいに表示したい場合は、前述のCSS設定と組み合わせる方法もあります。

デフォルトのビュー

デフォルトのビューでは、【週】【月】【スケジュール】などの表示形式を選べます。

営業日や休業日をまとめて見せたい場合は【月】表示、イベントやセミナーの一覧を時系列で見せたい場合は【スケジュール】表示が向いています。

週の開始日

週の開始日は【土曜日】【日曜日】【月曜日】から選択できます。

日本国内向けの店舗サイトでは日曜日始まりが見慣れている場合もありますが、ビジネス用途や海外向けの場合は月曜日始まりの方が自然なこともあります。閲覧者に合わせて設定しましょう。

言語

言語は複数の言語に対応しています。日本国内向けのサイトであれば【日本語】のままで問題ありません。海外ユーザー向けのイベントページを作る場合は、英語など対象ユーザーに合った言語を選択しましょう。

タイムゾーン

タイムゾーンは、国内向けの営業日やイベントであれば【日本】のままで問題ありません。

一方、海外の参加者がいるオンラインイベントや、海外拠点とのミーティングを掲載する場合は、タイムゾーンの設定に注意が必要です。Googleカレンダーでは、タイムゾーン選択時に都市名や国名で検索できるUIが導入され、長いリストをスクロールしなくても目的のタイムゾーンを見つけやすくなっています。海外向けに予定を公開する場合は、イベントの説明欄にも「JST」などの表記を入れておくと親切です。

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

iPhoneのSafariでGoogleカレンダーを埋め込んだページを開いた際に、「私はロボットではありません」などの認証画面が繰り返し表示され、カレンダーが見られないことがあります。

この現象は、iOS版Safariのプライバシー保護機能である【サイト越えトラッキングを防ぐ】の影響で、Googleカレンダーの埋め込み表示に必要な処理がうまく進まないことが主な原因とされています。特にiOS 15.2以降ではサードパーティCookieの制限が強まり、埋め込みカレンダーの認証がループするケースがあります。

ユーザー自身がSafariの設定で【サイト越えトラッキングを防ぐ】をオフにすれば表示される場合もありますが、これはプライバシー保護を弱める操作でもあります。そのため、サイト運営者が閲覧者に一律で設定変更を求めるのはおすすめできません。

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

最も現実的な対策は、埋め込みカレンダーの近くに「Googleカレンダーで開く」「カレンダーが表示されない方はこちら」といったリンクやボタンを設置する方法です。

公開用GoogleカレンダーのURLへ直接誘導すれば、Safari上の埋め込み表示で問題が起きた場合でも、ユーザーはGoogleカレンダーのページやアプリで予定を確認できます。店舗サイトやイベントサイトでは、埋め込み表示と直接リンクの両方を用意しておくと親切です。

別のブラウザを利用してもらう

Google ChromeやFirefoxなど、別のブラウザで表示できる場合もあります。ただし、iPhoneではサードパーティ製ブラウザも内部的にSafariと同じWebKitエンジンを使用しているため、必ず解決するとは限りません。

そのため、ブラウザ変更の案内は補助的な方法と考え、基本的には直接リンクを設置しておくことを優先しましょう。

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

「私はロボットではありません」ではなく、「権限がありません」「予定を表示できません」と表示される場合は、カレンダーの公開設定が原因の可能性があります。

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

左側メニューの【予定のアクセス権限】を開きます。

【一般公開して誰でも利用できるようにする】にチェックを入れ、公開範囲を用途に合わせて選択してください。

ただし、公開設定にする前には、必ず予定の内容を確認しましょう。顧客名、社内情報、非公開の会議内容などが含まれている場合は、公開用カレンダーを別に作成してから埋め込むのが安全です。

「予約スケジュール」でWebから予約を受け付ける

単に営業日やイベント予定を見せるだけでなく、Webサイトから予約を受け付けたい場合は、Googleカレンダーの予約スケジュール（Appointment Schedule）機能も便利です。

予約スケジュールを使うと、予約可能な曜日・時間帯・所要時間などを設定し、専用の予約ページを作成できます。ユーザーは空いている枠を選んで予約でき、予約が入るとGoogleカレンダーに予定として反映されます。

店舗の来店予約、オンライン相談、個別面談、レッスン、セミナー受付など、幅広い用途で活用できます。Webサイトには埋め込みカレンダーだけでなく、予約ページへ誘導する「予約する」ボタンを設置しておくと、閲覧者がそのまま行動しやすくなります。

近年は予約スケジュール機能も拡張されており、Google Workspaceの対象プランでは、予約ページのカスタマイズ、リマインドメール、スパム防止のメール認証、Stripe連携による有料予約の受付なども利用できます。事前決済を設定すれば、講座やイベントの無断キャンセル対策にも役立ちます。

また、共同主催者としてスタッフやチームメンバーを追加する運用も強化されています。Googleグループを共同主催者として追加できるようになったことで、複数担当者で予約枠を共有管理しやすくなりました。個人での簡易予約だけでなく、店舗やチームでの予約受付にも使いやすくなっています。

ただし、利用できる機能はGoogleアカウントの種類やGoogle Workspaceのプランによって異なります。まずは自分のアカウントで使える範囲を確認し、小さく始めてから必要に応じて上位プランや専用予約システムを検討するとよいでしょう。

チーム運用や海外との予定調整で役立つ使い方

Googleカレンダーは、Webサイトへの埋め込みだけでなく、チーム内外のスケジュール調整にも役立つ機能が増えています。

海外との予定調整ではタイムゾーン設定を活用する

海外の取引先や参加者と予定を共有する場合、タイムゾーンの設定ミスは大きなトラブルにつながります。Googleカレンダーでは、都市名や国名からタイムゾーンを検索できるようになっているため、従来のように長いリストから探す手間が減りました。

たとえば海外向けウェビナーや国際会議の予定を公開する場合は、カレンダー側のタイムゾーン設定に加えて、予定タイトルや説明文にも「日本時間」「JST」「UTC」などを明記しておくと、閲覧者が誤解しにくくなります。

AIによる日程調整支援も進んでいる

Googleでは、Geminiを活用したスケジューリング支援も進んでいます。Gmail上でメールの文脈から日程調整の意図を読み取り、Googleカレンダーの空き時間をもとに候補日時を提案する機能が拡張されています。複数人の会議日程にも対応が進んでおり、日程調整の往復連絡を減らすことが期待されています。

また、Googleカレンダー上でも会議の再調整時に参加者の空き状況を踏まえた候補を表示するなど、チームでの予定調整を効率化する方向に進化しています。こうした機能はGoogle Workspaceのプランや提供状況によって利用可否が異なるため、管理者向けの更新情報も確認しておくとよいでしょう。

Googleカレンダーをサイトに埋め込むときの注意点

Googleカレンダーの埋め込みは手軽ですが、ビジネス利用ではいくつか注意点があります。

まず、公開範囲の管理です。Webサイトに表示するカレンダーには、公開して問題のない予定だけを登録しましょう。社内用と公開用を分ける、予定の説明欄に個人情報を書かない、担当者名や場所の記載ルールを決めるなど、運用ルールを整えておくことが重要です。

次に、WordPressでの表示方法です。公式のiframe埋め込みはシンプルで扱いやすい一方、見た目を大きく変えるためにプラグインを使う場合は、更新頻度やセキュリティ修正の有無を確認してください。古いプラグインを放置すると、XSSなどの脆弱性につながる可能性があります。

最後に、スマホ表示と代替導線です。最新の埋め込みコードはレスポンシブ対応が進んでいますが、iPhoneのSafariではプライバシー機能の影響で正常に表示されないことがあります。埋め込みカレンダーだけに頼らず、公開カレンダーへの直接リンクを用意しておくと、閲覧者が予定を確認しやすくなります。

GoogleカレンダーをWebサイト運用に活用しよう

GoogleカレンダーをWebサイトに埋め込むことで、営業日、休業日、イベント情報、セミナー日程などを簡単に共有できます。カレンダー側を更新するだけでWebサイト上の予定も更新できるため、日々の運用負担を減らせる点も大きなメリットです。

2024年のデザイン刷新により、埋め込みカレンダーはスマホ表示やアクセシビリティが改善されました。さらに、予約スケジュール機能を活用すれば、予定の公開だけでなくWebからの予約受付にもつなげられます。

一方で、公開設定や個人情報の扱い、Safariでの表示不具合、WordPressプラグインのセキュリティには注意が必要です。公開用カレンダーを分ける、公式の埋め込みコードを優先する、直接リンクを設置するなど、基本的な対策を押さえておきましょう。

今回の記事を参考に、GoogleカレンダーをWebサイトや日々の業務に活用してみてください。