#9　Googleツールの埋め込み

September 25, 2024October 7, 2024

オープニング

今回の動画はこれ一本で丸わかり。

WordPressでGoogleツールの埋め込みを
徹底解説する完全攻略動画です。

これができると一気にwebサイトの機能性爆上げ。

しかも、一度覚えてしまったら他の制作でも
使い回しができる超便利なスキル。

webデザイナーとしての競争力を上げるためにも
絶対に押さえておきたいテーマです。

注意点もちゃんと解説していますので、
ぜひ最後までご覧ください。（24秒）

埋め込みができるようになるメリット

まず初めに、埋め込みができるようになると
どんな良いことがあるのか。
メリットは次の5つ。

１　サイトの機能性が上がり、ユーザーが便利になる
２　ユーザーがサイト内でアクションを起こすきっかけを作れる
３　クライアントのビジネスニーズに柔軟に対応できる
４　提案の幅が広がり、クライアントに信頼感を与える
５　小規模事業主から企業サイトまで、様々な業種に対応できる

とっても良いことばかりですね。

実は、今回の題材であるGoogleツールは
WordPressととても相性が良いんです。

本日覚えていってほしいツールは次の4つ。

１Googleフォーム
2 Googleマップ
3 Googleレビュー
4 Googleカレンダー

ちなみに、
ほぼコピペでできるので
何も恐れることはありません。

問題は
「やり方を知っているかどうか」
ただそれだけ。

これを知っているだけで
お客さんへの提案の幅が広がります。

実際に私は、これらの埋め込みできるようになって

制作したサイトの全体的なクオリティが上がり
受注単価も2倍UPしました。

また、ご紹介で来ていただいたお客様からも
「うちもGoogleレビュー繋げて欲しい」
「あのGoogleカレンダーを載せるアイデア良いね」
とご好評をいただき、
webデザイナーとしての信頼UPになっています。

機能性の高いサイトを作れると
お客様の売り上げも上がり、
効果実績になります。

それは結果的に、案件獲得率UPにつながるので
今日は絶対身につけて行ってください。

本題

Googleフォーム

ではまず、Googleフォームの埋め込みについて。

とってもシンプルです。

ステップはこちら
①埋め込みコードをコピーする　

②カスタムHTMLにペーストする

それでは、実際にやっていきましょう。

まずはGoogleフォームに入って、
右上の「送信」。
そしてこちらのマークをクリックすると
Googleフォームの埋め込みコードが表示されるので
コピーをクリック。

そして次に

WordPressのエディターで
「カスタムhtml」を呼び出し、ここにペーストします。

これだけです！

実際にプレビューで見てみましょう。

はい、ご覧のように埋め込むことができました。

ただ、ブラウザのセキュリティによっては
埋め込みが表示されず
このような認証画面が出てしまうことがあります。
フォームに辿り着けなかったら意味がないので、
念の為、Googleフォームを埋め込む場合は
フォームに遷移させるボタンを設置しておくと無難です。

Googleマップ

次に、Googleマップ。

STEPはこちら。
①マップで対象の場所を探す
②埋め込みコードをコピー
③カスタムHTMLにペースト

この流れでやっていきます。

今回は試しに、
私が札幌で大好きな場所の一つである
羊ヶ丘展望台を載せてみようと思います。

ではまずGoogleマップを開き、
対象の場所を探します。

普段Googleマップを使っているのと
同じように検索すればOKです。

見つけたら、次はステップ２。
マップの埋め込みコードをコピーします。　

マップ情報の右に出てくる「共有」というところをクリック。

そして、「地図を埋め込む」、「HTMLをコピー」。

ここまで進んだら、WordPressに戻ります。
「カスタムHTML」を呼び出し、ペースト。

これで保存し、プレビューで見てみます。
このようにGoogleマップを
サイトに表示できるようになります。

とても簡単ですし、店舗やサロン、
企業サイトなど幅広いシーンで使えます。

ぜひお店へのアクセスや、会社概要のページで
Googleマップの埋め込みを活用しましょう。

Googleレビュー

３つ目、Googleレビュー。

Googleレビューを埋め込むと、
とても信頼感が上がります。

実際に私が制作させていただいた
イメージコンサルティングサロンの
札幌ハッピーカラーさんを例に
ご紹介させていただきます。
Googleレビューがあると
一気に外部からの客観的な評価として
信頼感が爆上がり。

あなたも、今後クライアントさんから
レビューの埋め込みニーズがきっとあるので
この方法は絶対に覚えていってください。

ステップはこちら
①プラグインを入れる
②GoogleマップのURLをコピペ
③レイアウトとデザイン設定
④ショートコードをコピペ

では実際に、一緒にやっていきましょう。

Googleレビューは、
「Widgets for Google Reviews」
というプラグインを入れて設定します。

WordPressのダッシュボードで
「プラグイン」「新規プラグインを追加」。
検索窓で「Widgets for Google Reviews」を検索し、
「今すぐインストール」。
そして有効化。
プラグイン一覧の方から
「自動更新も有効」にしておきます。

さて、プラグインが入ったら、
ダッシュボードの左のバーに
チェックマークがついた
「trustindex.io」という管理バーが出てくるので
こちらで、レビューの詳細設定をしていきます。

では、ここからがステップ２です。

まずは緑のボタンの「接続する」をクリック。
すると、別のウインドウが登場してリンクを貼り付ける画面が出てきます。
この後の流れとしては
レビューを埋め込みたいお店や会社を検索してURLをここにコピぺします。
では、一旦このウィンドウは残したままの状態で
別タブでGoogleマップを開きます。

今回レビューを埋め込みたいのは「札幌ハッピーカラー」なので
Googleマップ上でいつものように検索します。

対象のお店を開いたら、ここのURLをコピーします。

ここで先ほどのウィンドウに戻って、ペースト。
そしたらこのように、埋め込みたいお店が表示されるので、
右下の「connect」をクリック。

この時、ウィンドウが自動的に閉じられるので、
WordPressの管理ページを開きます。

するとこのように、レビューが接続されました。

次は、ステップ３のレイアウトとデザインの選択です。

デフォルトでレイアウトのパターンが用意されているので
「すべて」「スライダー」「サイドバー」などの中から好きなものを選んでください。

ちなみに私は「スライダー」をよく使っています。
今回はこちらのパターンを使おうと思うので、「選択する」をクリック。

お好きなレイアウトを選択したら、次は「スタイルを選択」。

スタイルでは、細かいデザインを選ぶというイメージです。
レビューの背景がグレーになっているものや、枠があるもの、ドロップシャドウなど
色々あるので、こちらも好きなものを選んでください。

私はドロップシャドウが好きなので
今回はこちらを選択します。

最後は、「ウィジェットを選択する」という段階です。
言語や日付の形式、矢印を表示するかどうかなど。
ここもお好みで調整してください。

デフォルトのままでも特に問題ないです。

さぁ、これで設定はおしまいです。
最後に「コードを保存して取得する」をクリック。

するとこのようにショートコードが登場します。

さぁ、最後のステップです。

「クリップボードにコピー」をクリック。

埋め込みたいページを開き、

プラスを押して
「ショートコード」ブロックを呼び出します。

ここにペースト。

では保存して、プレビューを見てみます。

するとこのように、設定したGoogleレビューを埋め込むことができました。

GoogleフォームやGoogleマップよりも
工程がちょっとだけ多いので
最初は複雑に感じるかもしれません。
でも実際にやってみると

この４つのステップだけなので
意外とシンプルです。
決して難しくないので
ぜひあなたもトライしてみてください。

ただし、注意点が２つあります。

まず１つ目。
レイアウトはスマホでどう見えるかも
必ず確認しておく。
レイアウトの種類によっては、
パソコンでは見やすくても
スマホでは見え方が違う場合もあります。
最近ではwebサイトはほとんどスマホで見られるので、
基本的にはスマホでの表示を意識した方がいいです。

２つ目。
Googleレビューが更新されても、
埋め込んだレビューは自動更新されない。

「え？どういうこと？」と言うと、

例えば、今Googleのレビュー数が10個あるとして
新しくお客様が口コミを書いて、11個のレビューになったとします。
Google上ではもちろん11個に増えるんですが、
webサイトの方では、接続をした時点での情報です。
なので自動的にレビュー数が11には増えません。

連動してくれるととてもありがたいんですが、
残念ながら手動で更新する必要があります。

更新するときは、接続を一度解除してから
また同じ手順で設定をしていきます。

解除の仕方は
Googleレビューのプラグインの管理画面にいき、
「①接続するGoogle」の欄を開きます。

そして、右側にある「切断する」をクリック。

これによって、
また0から接続設定ができるようになります。

口コミ数が増えたら、このように
プラグインの再設定を
忘れないようにしましょう。

Googleカレンダー

次は、本日4つ目のツール
「Googleカレンダー」。

使用例としては、
お店の営業時間、イベントや講座情報、
空きスケジュールのシェアなど。

ちなみに私は自分のサービスサイトに
スケジュールのページを作っています。
クライアントさんとの打ち合わせや
チームメンバーとのミーティングの際に
このページリンクを送るだけ。
自分の空きスケジュールを
一瞬でシェアできるのでかなり便利です。

ちなみに、カレンダー機能については
Googleカレンダー以外でも
プラグインでカレンダーを作ることが可能です。

例えば、「MTS Simple Booking-C」
「Salon Booking System」
といったプラグインがあります。

色々試してみた結果
私がGoogleカレンダーに落ち着いたのは
管理がとても簡単だからです。

スマホアプリでGoogleカレンダーを入れておけば
予定変更をアプリで操作するだけで即時反映。

もちろん用途によっては
先ほどあげたプラグインもとても活用できるので
目的によって使い分けてくださいね。

ではここからはGoogleカレンダーの
埋め込み方法をお伝えします。

まずはGoogleカレンダーを開きます。

私はすでに仕事用のカレンダーを一つ作っていますが、
今回は新しくカレンダーを作るところから解説していきます。

「他のカレンダー」横にある「➕」をクリックし、「新しいカレンダーを作成」。

進んだ画面では、カレンダーの名前にわかりやすいものをつけておきます。

入力したら「カレンダーを作成」をクリック。

すると、作成したカレンダーが左のバーに表示されます。
これでひとまずカレンダーは作れたので、
左上の矢印からホームに戻ります。

左のこちらのバーで、埋め込みたいカレンダーにチェック。
今回は新しく作ったカレンダーにチェックを入れて進めます。
ここで、試しにスケジュールを入れてみましょう。
ひとまず今回は適当に入れてみました。

予定を入れたら、
カレンダー名の右にある「・・・」をクリックし、「設定と共有」をクリック。

設定画面に進んだら、「予定のアクセス権限」で
「一般公開して誰でも利用できるようにする」にチェックし
「OK」をクリック。
「予定の表示」はお好みで選択してください。
私の場合は「すべての予定の詳細」にしています。

そして次は、ちょっとスクロールで下に進んで、

「カレンダーの統合」の欄で「カスタマイズ」をクリック。

すると、埋め込みたいカレンダーのデザインや表示を変えることができるので、
お好みでカスタマイズしてください。

幅や高さも調整できます。

「デフォルトのビュー」では月間予定や週間予定、スクジュール一覧など、表示の仕方を変えることができます。
また、「表示するカレンダー」で他のカレンダーにもチェックを入れると
カレンダーの内容を同時に表示するも可能です。

例えば私の場合、
普段使っているカレンダーと今回作ったテストカレンダーの両方にチェックを入れてみます。
するとこのように、2つのカレンダーの予定が同時に表示されるようになりました。

カスタマイズが終了したら、
カレンダーの上にある「埋め込みコード」をコピー。

そして、WordPressに戻り
カレンダーを埋め込みたいところに「カスタムHTML」を呼び出し、ペースト。

これで、カレンダーを埋め込むことができました。

今お見せしたように、
カレンダーは個人用と仕事用で
使い分けることができます。
個人的な予定として
Googleカレンダーを使っているという方でも
新しく仕事用のカレンダーを作れば、
掲載したいカレンダーだけを埋め込むことができます。

これとってもありがたいですよね。

先ほどお伝えしたように、
スマホからも予定変更は簡単にできるので
Googleカレンダーアプリを入れておきましょう。

Googleレビューの時と違って
自動反映されるのでとても便利ではあるんですが
１点注意点があります。
Googleフォームの時と同じように
ブラウザのセキュリティによっては
このような認証画面が出てしまうことがあります。
なので念の為、Googleカレンダーを埋め込む場合も
カレンダーに遷移させるボタンや
被リンクを設置しておくと安全です。