【コピペで簡単】Studioで実装できるサイトに命を吹き込む、リアルタイム時計の作り方🕑

せっかく作った自分のウェブサイト。でも、なんだか全体的に「静か」で、物足りなく感じること、ありませんか？

「お店のサイトだから、今の時間がわかると『営業中』って伝わりやすいのにな…」「ポートフォリオサイトに、ちょっとした遊び心がほしい…」

そんなときに試してほしいのが、サイトにリアルタイムで動く「時計」を置くこと。ただ時間が表示されるだけなのに、不思議とサイト全体が「生きている」感じがして、ぐっと魅力的に見えるんです。

「でも、時計なんて表示させるのって、どうせ難しいコードを書くんでしょ？」「無料プランじゃ、そんな凝ったことはできないはず…」

そう思ったあなた、良い意味で裏切られますよ。実は、ノーコードツール『Studio』なら、無料プランのままで、しかもほとんどコピペだけで、この「リアルタイム時計」が作れてしまうんです。

この記事では、コードなんて見たこともない、という方でも絶対に挫折しないよう、手順を一つひとつ、丁寧に解説していきます。さあ、あなたのサイトに「時を刻む」楽しさを味わってみましょう！

なぜ無料プランで出来る？ Studioの「Embed機能」とは

「カスタムコード」と聞くと、どうしても有料プラン限定の響きがありますよね。たしかに、サイト全体の設定に関わるような専門的なコードの埋め込みは、有料プランの機能です。

でも、『Studio』が本当に気が利いているのは、ページの一部分にだけコードを埋め込める「Embed（エンベッド）」という機能が、無料プランでもちゃんと使えること。

これ、例えるなら「サイト全体の間取りを変えるのは大変だけど、部屋に新しい家具を置くのは気軽にできる」という感覚に近いです。

今回はこの「Embed」機能を使って、JavaScriptという言語で書かれた「時計のプログラム」という家具を、ポンとサイトに置いてあげるイメージです。

【💡ちょっとだけ用語解説】JavaScript（ジャバスクリプト）って何者？ ウェブサイトにアニメーションをつけたり、クリックしたら何かを表示させたり、いわゆる「動き」を担当してくれるプログラミング言語のことです。今回は、1秒ごとに時間を更新するという「動き」を彼に担当してもらいます。

実践！たった3ステップで時計を動かそう

お待たせしました！ここからが本番です。本当に簡単なので、コーヒーでも片手にリラックスして進めてくださいね。

ステップ1｜コードを埋め込む「箱」を用意する 📦

まずは『Studio』のエディタを開き、時計を置きたいページへ。

1. 画面左の「追加」パネルを開きます。
2. 基本の中にある「埋め込み」という項目の中の、「Blank」を選んでください。
3. これを、時計を置きたい場所へドラッグ＆ドロップします。

これで、カスタムコードを置くためのスペースが確保できました。

ステップ2｜主役のコードを貼り付ける 🪄

次は、先ほど置いた「Blank」要素に、時計を動かすためのカスタムコードを書き込みます。

設置した「Blank」要素を選択した状態で右側の設定パネルに出てくる「埋め込みコード」の欄に記載のあるコードを全て削除します。続けて、下のボックスにあるコードを隅から隅まで、ぜんぶ選択してコピーし、その欄にペタッと貼り付け（コピペ）てください。

<div id="realtime-clock"></div>

<style>
  /* ここで時計の見た目を整えています */
  #realtime-clock {
    font-size: 24px; /* 文字の大きさ */
    font-weight: bold; /* 文字の太さ */
    color: #333333; /* 文字の色 */
    text-align: center; /* 表示位置（center=中央） */
    padding: 10px;
  }
</style>

<script>
  // ここから時計を動かすプログラムです
  function showClock() {
    const now = new Date();
    const hour = String(now.getHours()).padStart(2, '0');
    const minute = String(now.getMinutes()).padStart(2, '0');
    const second = String(now.getSeconds()).padStart(2, '0');
    const currentTime = `${hour}:${minute}:${second}`;
    document.getElementById('realtime-clock').textContent = currentTime;
  }

  // 1秒ごとに時間を更新する命令
  setInterval(showClock, 1000);
  
  // ページを開いた瞬間に時間を表示する命令
  showClock();
</script>

ステップ3｜プレビューで感動の瞬間を！ 👀

コードを貼り付け終えたら！！？

…どうですか？ さっきまで何もなかった場所に、現在の時刻がリアルタイムでカチ、カチ、と動き出しているはずです。ちょっと感動しませんか？

もしうまく動いていなかったら、焦らずもう一度ステップ2に戻って、コードが全部ちゃんとコピーできているか確認してみてくださいね。

おまけ｜自分好みにアレンジしてみよう

基本の時計が動いただけでも十分ですが、せっかくなら自分のサイトのデザインに合うように、少しだけアレンジしてみましょう。プログラミングの知識は不要です。

時計の見た目（文字サイズ・色）を変えたい

見た目を変えるには、先ほどのコードの<style>と書かれた部分の数字や記号をいじるだけです。

#realtime-clock {
  font-size: 32px; /* ←数字を大きくすれば文字も大きくなる */
  font-weight: normal; /* ←太字が嫌ならここを normal に */
  color: #007bff; /* ←ここを好きなカラーコードに変えてみる */
  text-align: left; /* ←左揃えにしたいなら left に */
  padding: 10px;
}

数値のヒントを参考に、色々な数値を試して、あなたのサイトにぴったりのデザインを探してみてください。

「HH:MM:SS」から「〇時〇分〇秒」に変えたい

このアレンジも驚くほど簡単です。<script>と書かれたプログラム部分の、たった1行を変えるだけ。

// ↓この一行を探して…
const currentTime = `${hour}:${minute}:${second}`;

// ↓このように書き換えるだけ！
const currentTime = `${hour}時${minute}分${second}秒`;

記号の代わりに日本語を入れる。たったこれだけで、時計の表示がガラッと変わります。

カスタムコードをアレンジすると、iPhoneの時計表示のような表現もできちゃいます！

まとめ｜小さな工夫が、サイトを大きく変える

今回は、『Studio』の無料プランでも実装できる、リアルタイム時計の作り方をご紹介しました。

「カスタムコード」と聞くと、つい身構えてしまいますが、中身を理解していなくても「便利な機能を借りてきて、自分のサイトに置かせてもらう」くらいの感覚で使えば、Web制作はもっと自由で楽しくなります。

• ✅ 無料プランでも「Embed」機能があれば、可能性は無限大！
• ✅ まずはコピペで動かしてみる、でOK！
• ✅ 少し慣れたら、数値をいじって自分だけのデザインに。

今回作ったこの時計は、ほんの小さな一つの機能です。でも、サイトに「動き」が加わるだけで、訪問者が受ける印象は大きく変わります。

たったこれだけのことで、あなたのサイトはもっと「生きて」きます。ぜひ、あなたのサイトにも時間を刻んであげてください。きっと、今まで以上にサイトに愛着が湧いてくるはずです。