コラム - Google Siteへのhtml埋め込みについて

Google SitesへのHTML埋め込みとは（HTML Embed in Google Sites）

更新日：2026-04-20

Google Sites（グーグルサイト）では、標準機能だけで簡単にホームページを作成できますが、
より表現力を高めたい場合に活用されるのが**HTML埋め込み（HTML Embed）**です。

HTML（HyperText Markup Language）を直接埋め込むことで、
通常のGoogle Sitesでは実現できないアニメーション・装飾・UI設計を追加できます。

HTML埋め込みでできること

Google SitesにHTMLを埋め込むことで、以下のような表現が可能になります。

文字のアニメーション（スライドイン・フェードイン）
ボタンやリンクのカスタマイズ
セクションごとのデザイン強化
視線誘導を意識したUI設計

特にコーポレートサイトでは、
「シンプルだけど印象に残る」演出として有効です。

実装方法（手順）

Google SitesでHTMLを埋め込む方法は非常にシンプルです。

① 「埋め込む」を選択

右メニューの「埋め込む」をクリック

② 「コード」を選択

HTMLコードを直接入力

③ コードを貼り付け

作成したHTMLをそのまま貼り付け

④ 挿入して配置

ページ上に配置してサイズ調整

実際のサンプル（クリック導線付きUI）

<div class="title">Service</div>

<div class="sub">サービス一覧</div>

</a>

このようにHTMLを使うことで、

見出し（タイトル）
補足説明
クリック導線

を一体化したUIを構築できます。

Google Sitesでの制限事項

HTML埋め込みにはいくつかの制限があります。

① JavaScriptが制限される

動的な処理や複雑な制御は基本的に不可

② iframe埋め込み制限

外部サイトによっては表示できない

③ CSSの適用範囲が限定的

ページ全体ではなく、埋め込み領域内のみ有効

④ 自動アニメーションが不安定

環境によっては動作しない場合あり

実務での使い方

Google SitesにおけるHTML埋め込みは、
「演出」ではなく導線設計として使うのがポイントです。

見せる

↓

興味を持たせる

↓

クリックさせる

↓

目的ページへ誘導

この流れを意識することで、
単なるデザインではなく成果につながるUIになります。

よくある失敗

動きをつけすぎて見づらくなる
統一感がなくなる
リンクが分かりにくい
スマホで崩れる

Google Sitesは「引き算の設計」が重要です。

Time合同会社の考え方

Time合同会社では、Google Sitesを単なる制作ツールとしてではなく、
業務理解 × 導線設計 × コンテンツ設計の一部として活用します。

HTML埋め込みもその一環であり、

視線誘導
クリック率向上
サービス理解の促進

を目的として設計します。

まとめ

Google SitesへのHTML埋め込みは、

デザインを強化する手段であり
UIを改善する技術であり
導線を設計するためのツールです

重要なのは、
**「何を見せるか」ではなく「どう動かすか」**です。

シンプルなサイトでも、設計次第で成果は大きく変わります。