カスタムコードStudio

【コピペでOK】Studio無料プランで実装できる！カウントダウンタイマーの作り方 🚀

Studioの無料プランで実装できるカウントダウンタイマーの作り方を解説。コピペするだけで、イベントやセールの残り時間をリアルタイム表示可能。フォントや色も自由にカスタマイズでき、初心者でも簡単にサイトを盛り上げられます。

公開 2025年8月31日更新 2025年12月30日読了目安約8分

「限定セールの開始まで、あと3日！」「新サービス公開まで、あと10時間！」

Webサイトでこんな風にカウントダウンが表示されていたら、なんだかワクワクしませんか？😉

イベントまでの期待感を高め、ユーザーの注目を集めるカウントダウンタイマー。『Studio』の無料プランでも、カスタムコードを使えば専門的な知識がなくても、驚くほど簡単に実装できてしまうんです。

今回は、プログラミング初心者の方でもコピペで実装できる、『Studio』のカスタムコード機能を使ったカウントダウンタイマーの作成方法を、分かりやすく解説します！

なぜ『Studio』でカウントダウン？ノーコードの限界を超える魅力 ✨

『Studio』は、コードを書かずにドラッグ＆ドロップの直感的な操作でWebサイトが作れる、今注目のノーコードツールです。デザインの自由度が非常に高く、多くのクリエイターに愛用されています。

しかし、『Studio』の真の魅力はそれだけではありません。「カスタムコード機能」を使えば、ノーコードの枠を超えて、JavaScriptなどのコードを埋め込み、Webサイトに動きやインタラクティブな機能を追加できるのです。

「コード」と聞くと難しそうに感じるかもしれませんが、心配はいりません。今回はコピー＆ペーストするだけで動くコードを用意しました。これを使えば、あなたのサイトがワンランクアップすること間違いなしです！

【💡用語解説】ノーコード（No-Code）とは？ プログラミングコードを一切書かずに、Webサイトやアプリなどを開発できるプラットフォームのこと。専門知識がなくても、アイデアを形にできるのが最大のメリットです。

3ステップで実装！『Studio』でカウントダウンタイマーを作る方法 🚀

それでは、早速作っていきましょう！手順はとてもシンプルです。

準備するものはたったこれだけ！ 💻

今回の実装に必要なものは、以下の3つだけです。

『Studio』のアカウント（無料プランでOK！）
目標の日時（例：2026年1月1日 0時0分）
これから紹介するコード

たったこれだけで、誰でも簡単にカウントダウンタイマーを設置できます。

Step 1: カウントダウンを表示する「箱」を配置しよう

まずは、『Studio』のエディタ画面を開き、カウントダウンの数字を表示させたい場所に、Embedボックスを配置します。左の追加パネルから「Embed」を選択し、好きな場所にドラッグ＆ドロップします。

Step 2: 魔法の呪文！カスタムコードを埋め込もう

次に、カウントダウンを動かすための「呪文」となるコードを埋め込みます。追加した「Embed」ボックスを選択し、コード入力欄に、以下のコードをそのままコピー＆ペーストしてください。

<!-- ✅ カウントダウンを表示する枠（好きな位置に配置されます） -->
<div id="countdown" style="
  background-color: transparent; /* 背景色（透過に設定） */
  color: #000000; /* 文字色（黒に設定） */
  font-family: 'Montserrat', sans-serif; /* フォント（Montserratを利用） */
  font-size: 24px; /* 文字サイズ（ここを変えると大きさを調整できます） */
  font-weight: 400; /* 文字の太さ（100〜900で調整可能） */
  text-align: center; /* 文字を中央揃え */
  padding: 16px 24px; /* 内側の余白（上下16px、左右24px） */
  border-radius: 8px; /* 角丸（0にすると四角になります） */
">
</div>

<script>
  /* ================================
     ✅ カウントダウンの終了日時を変更する場所
     例: 2026年1月1日00:00:00 までに設定
     ================================ */
  const targetDate = new Date("2026-01-01T00:00:00");

  // ✅ カウントダウンを計算して表示する処理
  function updateCountdown() {
    const now = new Date(); // 現在の時間
    const diff = targetDate - now; // 終了日時との差（ミリ秒）

    // ✅ もし終了日時を過ぎていたら「カウントダウン終了！」を表示
    if (diff <= 0) {
      document.getElementById("countdown").textContent = "カウントダウン終了！";
      clearInterval(timer); // カウントを止める
      return;
    }

    // ✅ 残り時間を「日・時間・分・秒」に分けて計算
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    // ✅ 計算結果を表示エリアに反映
    document.getElementById("countdown").textContent =
      `${days}日 ${hours}時間 ${minutes}分 ${seconds}秒`;
  }

  // ✅ 1秒ごとに updateCountdown を実行（動き続けるようにする）
  const timer = setInterval(updateCountdown, 1000);

  // ✅ ページ読み込み直後に1回表示
  updateCountdown();
</script>

一番重要なポイントは、コード内のconst targetDate = new Date("2026-01-01T00:00:00");の部分です。ここの2026-01-01T00:00:00を、あなたが設定したい目標の日時に書き換えてください。これだけでOKです！

※日時の書き換えをした後、一度エディタ画面をリロード（再読み込み）してください。読み込み後に正しいカウントダウンタイマーが表示されます。

Step 3: 最後にテキストやボックスの大きさを整えよう

カウントダウンのテキストが表示されたら、カスタムコード内の設定用コメントを参考に以下の設定を変更してください。

自分が好みのフォント（コード内のグーグルフォントを書き換え）の設定
テキストカラーの変更
背景色の変更
フォントサイズの変更

自分好みのカウントダウンタイマーになったら完成です！

まとめ：ノーコードの先へ！『Studio』でWeb制作はもっと自由になる

いかがでしたか？今回は、『Studio』のカスタムコード機能を使って、コピペだけで簡単にカウントダウンタイマーを実装する方法をご紹介しました。

『Studio』のようなノーコードツールは、「簡単だけど、決まったことしかできない」と思われがちです。しかし、カスタムコード機能を少し使うだけで、表現の幅は無限に広がります。

あなたのWebサイトに、イベントへの期待感を高めるカウントダウンタイマーを設置して、ユーザーを惹きつけてみませんか？この記事をきっかけに、「自分にもできそう！」と感じていただけたら嬉しいです。

【コピペでOK】Studio無料プランで実装できる！カウントダウンタイマーの作り方 🚀

なぜ『Studio』でカウントダウン？ノーコードの限界を超える魅力 ✨