Google Sites のアニメーションをGeminiに聞いてみた！ - Minerva Consulting AI & データエンジニア

はじめに、

Google Sites を作っていて、「Saitesを開くときに、少しアニメーションをいれるとどうか。早速 Geminiに質問

#nmine質問

GoogleSiteを開いた時に、１～２秒程度で、心を和ませるようなアニメーションは何かアイデアありますか？　

例　

・フワーッと開く、

・ややモザイクから１秒程度でハッキリ表示する

など

簡単にできる方法があれば。

#サイトの編集画面

https://sites.google.com/***************/edit

#Gemini回答

Google サイトで、読者が訪れた瞬間に「おっ、いいな」と思わせるような、控えめで上品なアニメーションですね！

Google サイト自体には標準でアニメーション機能がありませんが、「埋め込み」機能を使ってHTML/CSSを少し書き込むだけで、ご希望のような効果を簡単に実装できます。

みーみからのアイデアを3つ提案しますね。

アイデア1：ふわーっと浮かび上がる（フェードイン＆アップ）

最も王道で、心が和む動きです。画面が真っ白からではなく、少し下から上に浮き上がりながら現れるので、丁寧な印象を与えます。

【設定方法】

編集画面で「埋め込み」をクリック。
「埋め込みコード」に以下を貼り付けます。

HTML<div class="fade-in">
 <h1 style="text-align: center; color: #555; font-family: sans-serif;">ようこそ、素敵なひとときを。</h1>

</div>

<style>
.fade-in {
  animation: fadeIn 2s ease-out forwards;
  opacity: 0;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
</style>

アイデア2：モザイク（ぼかし）からハッキリ現れる

視界がクリアになるような、スッキリとした心地よさを与えます。

【設定方法】 「埋め込みコード」に以下を貼り付けます。

　　　（以下　省略）


#nmine （使える、文字位置と色を変更しよう　♪）
#nmine質問

アイデア1：ふわーっと浮かび上がる　をやってます。

#修正したい

①文字を左寄せにする

②文字色をオレンジ色

変更コードをお願いします。

#Gemini回答

「ふわーっと浮かび上がる」アニメーション、いい感じになりそうですね！オレンジ色は心を温かく、ポジティブにする色なので、和ませるにはぴったりです。

ご要望に合わせて、**「左寄せ」と「オレンジ色」**に書き換えたコードをご用意しました。

HTML<div class="fade-in">

  <div class="message">ようこそ、素敵なひとときを。</div>
</div>

<style>
.fade-in {
  /* 2秒かけて、ふわっと（ease-out）表示 */
  animation: fadeIn 2s ease-out forwards;
  opacity: 0;
}

.message {
  text-align: left;        /* 左寄せ */
  color: #FF8C00;         /* 鮮やかなオレンジ（DarkOrange） */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 24px;         /* 文字の大きさ（お好みで調整してください） */
  font-weight: bold;       /* 少し太めにして見やすく */
}

@keyframes fadeIn {
  0% { 
    opacity: 0; 
    transform: translateY(20px); /* 20px下から開始 */
  }
  100% { 
    opacity: 1; 
    transform: translateY(0);    /* 元の位置へ */
  }
}
</style>

調整のアドバイス

オレンジの濃さ： もし「もう少し優しい（薄い）オレンジがいいな」と思ったら、コード内の #FF8C00 を #FFA500 (Orange) や #FFB74D (柔らかなオレンジ) に変えてみてください。
文字の大きさ： font-size: 24px; の数字を大きくするとさらにインパクトが出ます。

このコードをそのまま「埋め込み」に貼り付ければ完了です！


#nmine (わぉ、あとは文字だけ変更すれば）
#nmineお礼の返答

できました、ありがとう♪

これを知っていたら、いろんなところで使えますね。感謝♫

#Gemini 返事

わーい！うまくいって良かったです！こちらこそ、そう言ってもらえてとっても嬉しいです。

そうなんです、この**「HTML/CSSの埋め込み」**という技を一つ覚えると、Google サイトの自由度がグンと上がりますよね。

今回の「ふわーっと」以外にも、同じ仕組みを使えば：

画像だけを優しく浮かび上がらせる
ボタンの影をじわ〜っと出す
背景色をゆっくり変化させる

なんてこともできるようになります。サイトがどんどん「生き生き」としてくるので、いじっている時間も楽しくなりますね。

また何か「こんな動きをさせてみたい！」というアイデアが浮かんだら、いつでも気軽に声をかけてください。素敵なサイト作り、応援しています！

ここまで、HTML/CSS　少ししていれば完成させられます。

#感想：

・従来のGoogle検索でコード調べるより、はるかに短時間でできた。

・AIへの質問は、人と話するように会話調でできますね。

完成したページはこちら＞＞