Chapter22 Webサービスの活用

Googleビジネスプロフィール 2021年11月4日に「Googleマイビジネス」が「Googleビジネスプロフィール」へ名称が変わりました。この名称変更によって、これから新たなサービスが増えるような予感がしてたまらない、今最も注目されているサービスです。 Googleマップとの相性も抜群なこのサービスは、これからWebサイトの協力なサポートツールとして活用できると思います。 Googleビジネスプロフィールは、Google検索やGoogleマップ検索で検索された時に、ビジネス情報を表示・管理することができる、Googleの無料サービスツールの一つです。 Googleマップの市場規模 「ニールセン デジタル株式会社」のレポートによると、1ヶ月あたりのGoogleマップ利用者数は4,700万人を超え、地図アプリ・サービスでも有名なNAVITIMEと比較すると、4倍近くの差があります。 また「口コミコム」を運営する「株式会社mov」の利用調査によると、地図アプリの利用率でもGoogleマップは99.4%とマップアプリの中でも群を抜いて圧倒的で、知らない人はいないと言っても過言ではないでしょう。 Googleビジネスプロフィールのサービスは、こうしたGoogleマップの利用ニーズともマッチしているため、Webサイトと一緒に活用することで、新たなビジネスチャンスに繋がりやすいサービスだと言えます。 画像加工ツール FotorやAdobe XDを使った画像の編集・加工をChap05でも紹介しましたが、Fotorではできなかった有料プランの機能が無料でできるツールがありますので、ここで紹介しておきます。 写真の背景などを削除・透過する 「Pic Wish」や「remove bg」は、写真の背景部分などを削除し透過させることができるツールです。異なる写真やページの背景色と合成するときに便利です。 Masterjpeg形式では、透過した画像を表示できないので、必ずpngかwebp形式を利用しなければいけません 写真の一部を削除する 「Magic Eraser」や「Cleanup Pictures」は、写真の一部分を削除することができるツールです。写真に写り込んだ余計なモノを消したりするのに役立つツールです。 猫カフェにGoogleマップを表示する マップ630px 235px iframe直 index-22-4.html使ってサンプルに置き換えする 猫カフェのページ用に調整 「#accsess-container」の子要素&lt;div&gt;が、&lt;iframe&gt;を埋め込んだことで増えたので、CSSの方も少し変更が必要になります。 &lt;section id=&quot;access-container&quot;&gt; &lt;div&gt; &lt;h3&gt;交通アクセス&lt;/h3&gt; &lt;dl&gt; &lt;dt&gt;所在地&lt;/dt&gt; &lt;dd&gt;東京都新宿区西新宿1-7-3&lt;/dd&gt; &lt;dt&gt;電話番号&lt;/dt&gt; &lt;dd&gt;&lt;a href=&quot;tel:03-3344-2222&quot;&gt;03-3344-2222&lt;/a&gt;&lt;/dd&gt; &lt;/dl&gt; &lt;ul&gt; &lt;li&gt;新宿西口駅前、徒歩3分&lt;/li&gt; &lt;li&gt;東京駅からJR中央線で14分&lt;/li&gt; &lt;li&gt;上野駅からJR山手線で24分&lt;/li&gt; &lt;li&gt;JR・小田急線・京王線・地下鉄から地下街、駅前から歩道橋が直結&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;お車でお越しの方は、お近くのコインパーキングをご利用ください。&lt;/p&gt; &lt;/div&gt; &lt;div id=&quot;map&quot;&gt; &lt;iframe src=&quot;https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d558.2357641231084!2d139.69668802559602!3d35.6915011000415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd6981dce11%3A0x4c93aeebef13825d!2z5p2x5Lqs44Oi44O844OJ5a2m5ZyS!5e0!3m2!1sja!2sjp!4v1648313883247!5m2!1sja!2sjp&quot; width=&quot;400&quot; height=&quot;200&quot; style=&quot;border:0;&quot; allowfullscreen=&quot;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;no-referrer-when-downgrade&quot;&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;/section&gt; 「index.css」のスマートフォン側のセレクタ「#access-container div」は、「#access-container div:first-of-type」または「#access-container div:first-child」の擬似クラスを使って、デザインする場所を最初の&lt;div&gt;に指定しておきます。 #access-container div:first-of-type{ width: 100%; padding: 0 5% 40px 5%; } Master文章と地図がくっつきすぎるため、下パディングの値を変更していますが、後で調整しても構いません。 先ほどのTipsを追加しておきます。 #map { position: relative; width: 100%; padding-top: 75%; } #map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } PC側のセレクタ「#access-container div」の方も変更しておきます。 #access-container div:first-of-type{ width: 400px; /* flex: 0 1 400px; */ padding: 0; } Masterdisplay:flexで横に並んだ、左側の&lt;div&gt;の幅を400pxに変更しています。flexプロパティで幅を設定しても構いません（flexの方が推奨） PC画面での地図の大きさと余白を調整します。 #map{ padding-top: 40%; margin-left: 20px; } Masterpadding-topで設定する地図の高さは、お好みで変更してください。 スクロールするとヘッダーの前面に表示される問題を、z-indexプロパティで解決します。#mapでpositionプロパティを使ったため、ヘッダーの前面に表示されるようになっています。ロゴに設定したz-indexをヘッダーへ移しておきましょう。 /* ヘッダー */ header{ background-color: rgb(210,180,175); box-shadow: 0px 1px 5px rgba(0,0,0,0.45); position: absolute; z-index: 1000; } header&gt;p{ width: 40vw; margin: auto; position: relative; top: 7.6vw; /* z-index:1000; */ } 猫カフェトップページの表示デモはこちらです

Chapter22 Webサービスの活用

Chap22-1 SNSプラグインと素材作成ツール

Chap22-2 SNSプラグインと素材作成ツール II

Chap22-3 SNSプラグインと素材作成ツール III

Chap22-4 SNSプラグインと素材作成ツール IV