Squarespaceにカスタムバナーを追加する方法

プロモーションバナーは、年末セールの告知、新商品の発表、イベントの宣伝など、あらゆるウェブサイトでトラフィックを促進するために欠かせない要素です。効果的なカスタムバナーは、リッチメディアやカウントダウンタイマー、強力なCTA（コールトゥアクション）を活用することで、クリック率やクライアントエンゲージメントを向上させます。

Squarespaceユーザーの場合、バナーの追加には外部ソリューションが必要になることがあります。Squarespaceにはネイティブのアナウンスメントバー機能がありますが、このオプションは基本的なリンク付きの1行テキストに限定されており、表示要件も固定的です。また、Fluid Engineエディタを使ってヒーローセクションをアナウンスメントバーとして作成することもできますが、バナーのようなコンパクトでダイナミックな特性には欠けます。

CSSコードを書かずにSquarespace用の本格的なカスタムバナーを作成するには、2つの方法があります。有料のサードパーティプラグインやコードスニペットを購入する方法と、無料で軽量なサーバーレスウィジェットを使用する方法です。

方法1：有料のSquarespaceプラグインまたはカスタムCSSスニペットをインストールする

多くのユーザーは、サードパーティのサービスやコード作成者からカスタムプラグインコードを購入することで、Squarespaceの制限を回避しています。カスタムコードを使えば、デザインの制約を回避し、ページ上にアセットを手動で配置できます。ライセンスを見つけて購入した後、カスタムページブロックに追加するか、コードインジェクション機能を使ってSquarespaceサイトにコードを追加する必要があります。

ニーズに合ったコードが見つかったら、単一のページに追加するか、サイト全体のすべてのページに追加するかによって、2つの方法でサイトに追加できます。それぞれの方法を以下に説明します。

サイト全体

1. 左側のナビゲーションメニューでページタブをクリックします。

2. メニューの下部にあるカスタムコードドロップダウンを選択し、コードインジェクションをクリックします。

3. カスタムコードをサイトのヘッダーまたはフッターに貼り付けます。

単一ページ

1. ページを開き、上部の編集ボタンをクリックします。

2. バナーを追加したい場所でブロックを追加をクリックします。

3. 下にスクロールしてコードオプションをクリックします。

4. 新しいコードブロックをクリックし、ドロップダウンメニューからコードタイプを選択して、コードをブロックに貼り付けます。保存をクリックして確定します。

この方法の問題点は、有料のプレミアムコードにかかるコストと予測不能性です。基本的なバナー、カウントダウンタイマー、または同様のツールで25ドル以上かかるオプションもあります。

「フリーミアム」オプションも誤解を招くことがあります。Squarespaceがコアインフラを更新すると簡単に動作しなくなったり、最適化されていないモバイル非対応のアセットによってサイトの表示速度が低下したりする可能性があります。

ウェブサイトを作成してより効果的にするために、費用をかける必要はないはずです。だからこそ、JotformはSquarespaceユーザー向けに無料のインタラクティブバナーオプションを提供しています。

方法2：無料のインタラクティブバナーウィジェットを追加する（推奨）

バナーは必要だけれど、ライセンス料や定期的なサブスクリプション、カスタムコードにお金をかけたくない場合、最適な解決策は信頼性の高いホスト型埋め込みです。Jotformバナーウィジェットを使えば、バナーを簡単にカスタマイズし、Squarespaceに直接貼り付けられる固有の埋め込みコードを生成できます。

この有料スニペットの代替となるツールをSquarespaceサイトに追加する方法は以下のとおりです。

1. Jotformバナーウィジェットのページにアクセスし、右上の今すぐ始めるボタンをクリックして新しいウィジェットを開きます。

2. ウィジェットプロパティメニューを使ってバナーをカスタマイズします。

3. バナーが完成したら、公開をクリックし、次にコードをコピーボタンをクリックして埋め込みコードを生成します。

次に、以下の手順に従って、プロモーションバナーをSquarespaceのサイト全体または個別のページに埋め込みます。

サイト全体

1. 左側のナビゲーションメニューでページタブをクリックします。

2. メニューの下部にあるカスタムコードドロップダウンを選択し、コードインジェクションをクリックします。

3. カスタムコードをサイトのヘッダーまたはフッターに貼り付けます。

単一ページ

1. バナーを追加するページを開き、上部の編集ボタンをクリックします。

2. バナーを追加したい場所でブロックを追加をクリックします。

3. 下にスクロールしてコードオプションをクリックします。

4. 新しいコードブロックをクリックし、ドロップダウンメニューからコードタイプを選択して、コードをブロックに貼り付けます。保存をクリックして確定します。

Jotformを使えば、この無料バナーウィジェットをSquarespaceに簡単に追加できるだけでなく、ウィジェットビルダーのビジュアルエディタで直接バナーを無料でカスタマイズできます。バナーの背景画像のパーソナライズ、YouTubeやVimeo動画の埋め込み、インタラクティブなCTAボタンの追加、カウントダウンタイマーの挿入、デバイスごとの表示制御が可能です。さらに、Jotformはオフサーバーで動作するため、バナーをサイトに追加してもSquarespaceのコアアップデートと競合したり、レイアウトが崩れたりすることはありません。

スマートなサーバーレスウィジェットでSquarespaceサイトを強化しよう

Jotformでできることはバナーだけではありません。Jotformは、コンバージョンの最大化、ウェブサイトの軽量化、不要なプレミアムプラグインのサブスクリプションの排除に役立つ無料ウェブサイトウィジェットのフルスイートを提供しています。

これらのウィジェットは、シンプルな埋め込みコードでSquarespaceサイトに強力な機能を追加します。主な機能は以下のとおりです。

• FAQウィジェット — よくある質問への回答を表示
• Googleレビューウィジェット — 顧客満足度を表示
• カウントダウンタイマーウィジェット — イベントや新商品の発売に向けたカウントダウン
• トップに戻るウィジェット — よりスムーズなユーザー操作を実現
• QRコードウィジェット — メニューやドキュメントなどへの簡単アクセス

Jotform-Squarespace連携を使えば、オンラインフォームとSquarespaceサイトをシームレスに接続することもできます。

ホームページにバナーを追加するためだけに、プレミアムウェブサイトプラグインの管理に時間とお金を費やす必要はありません。Jotformの無料サーバーレスウェブサイトウィジェットを活用して、ウェブサイト体験を向上させ、重要なリードを獲得しましょう。