Squarespaceにカスタムボタンを追加する方法

CTA（コールトゥアクション）ボタンは、ランディングページにおいて最も価値の高い要素です。購入ページやお問い合わせフォーム、ダウンロードリソースへ訪問者を誘導するには、必ずこのボタンをクリックしてもらう必要があるからです。周囲のセクションから際立つボタン — 独自のカラー、アイコン、ホバーエフェクトを備えたボタン — は、背景に埋もれてしまうボタンと比べて、クリック率が目に見えて向上します。

Squarespace（スクエアスペース）にはネイティブのボタンブロックがありますが、ボタン自体を選択してスタイルを変更するのではなく、グローバルの「サイトスタイル」パネルからデザインを設定する仕組みになっています。ボタンにはプライマリ、セカンダリ、ターシャリの3種類があり、それぞれのタイプはサイト全体に一括で適用されるため、使えるボタンデザインは合計3パターンのみです。プライマリボタンのスタイルを変更すると、サイト上のすべてのプライマリボタンに反映され、セカンダリやターシャリも同様です。さらに、設定項目自体も限られており、アイコン、ホバーエフェクト、グラデーションといったオプションはありません。

サイト上の他のボタンに影響を与えずに、特定のボタンだけに独自のデザインを適用する方法は2つあります。1つ目は、カスタムCSSを自分で書くか購入し、「カスタムCSS」パネルに貼り付けて特定のブロックをターゲットにする方法。2つ目は、無料のホスティングウィジェットを使い、ビジュアルビルダーでカスタムボタンのスタイルを設定したうえで、埋め込みコードをコードブロックに貼り付ける方法です。

CSSを書いたり開発者にスニペットを依頼したりせずに、Squarespace上でカスタムCTAボタンを作成したいサイトオーナー、マーケター、デザイナーの方に向けて、このガイドではSquarespaceでボタンを追加する方法を2つの手法で解説します。まずCSSを使った方法、次にウィジェットを使った方法の順にご紹介します。

方法1：ネイティブブロック＋カスタムCSSスニペットを使う

スクエアスペースのページで独自のボタンデザインを実現する標準的な方法は、ネイティブのボタンブロックを追加し、自分のCSSでそのスタイルを上書きすることです。Squarespaceにはそのための「カスタムCSS」パネルが用意されており、ブロックIDを指定してターゲットすることで、同じタイプのすべてのボタンではなく、特定のボタンだけにスタイル変更を適用できます。

カスタムCSSを使ってSquarespaceにボタンを追加する手順は以下のとおりです：

1. エディタでページを開き、ボタンを追加したいセクションにカーソルを合わせ、ブロックを追加をクリックし、ボタンを選択します。

2. 鉛筆アイコンをクリックするか、ボタンをダブルクリックして、テキストとリンクを設定します。プライマリ、セカンダリ、ターシャリのいずれかを選択し、左上の保存をクリックします。

3. 次に、ブロックIDを確認します。Squarespaceのページ上のすべてのブロックには固有のIDがあり、CSSの先頭にこのIDを指定することで、同じタイプのすべてのボタンではなく、そのボタンだけにスタイル変更を限定できます。ブロックIDは、ブラウザでページを検証する方法（ブロックを右クリックして検証を選択）や、無料のSquarespace IDファインダーブラウザ拡張機能を使って確認できます。

4. エディタの外で、サイドバーのウェブサイトに移動し、ページをクリックしてからカスタムコードを選択し、カスタムCSSを開きます。

5. CSSルールを記述して保存します。対象のブロックIDを指定し、保存をクリックしてください。Squarespace自体のスタイルは詳細度が高いため、自分のCSSを反映させるには!importantの追加が必要になることがよくあります。保存すると、そのボタンだけが意図したデザインに変わり、サイト上の他のボタンはすべてそのままの状態を維持します。

最もよくある問題は、ターゲットの指定ミスです。ブロックIDを付けずに「.sqs-block-button-element」だけでスニペットを書くと、ヘッダーのCTAボタンやチェックアウトボタンを含む、サイト上のすべてのネイティブボタンのスタイルが変更されてしまいます。もう1つのよくある問題はモバイル表示です。デスクトップでは問題なく見える固定幅や大きなフォントサイズが、スマートフォンではボタンが画面からはみ出したり、テキストが1文字ずつ改行されたりする原因になります。

スニペット自体は簡単に見つけることができ、Squarespaceのデザイナーたちがブログで無料で多数公開しています。ただし、より凝ったホバーエフェクトやアニメーション効果は有料アドオンとして販売されていることが多いです。いずれにしても、自分で書いたわけではないコードをサイト全体に影響するパネルに貼り付けることになり、何か表示がおかしくなった場合のデバッグは自己責任で行う必要があります。

方法2：無料のカスタマイズ可能なボタンウィジェットを追加する（推奨）

別のツールでボタンを作成する方法は、SquarespaceにおけるカスタムCSSの代替手段です。ネイティブボタンのスタイルを上書きするのではなく、ページに新しいカスタムボタンを配置する形になります。ビジュアルビルダーでボタンを設定し、埋め込みコードをコピーして、ページ上のコードブロックに貼り付けるだけです。

始める前に、ご利用のSquarespaceプランを確認してください。コードブロックに埋め込みコードを追加するのはプレミアム機能であり、Coreプラン以上が必要です。エントリーレベルのプランでは、コードはブロック内に残りますが機能しません。

どのウィジェットを選ぶかについてですが、Jotformのボタンウィジェットは、Squarespace向けの無料ボタンウィジェットで、ネイティブのボタンブロックよりも多くのビジュアルコントロールが可能です。背景、テキスト、ホバー時のカラーをそれぞれ個別にカスタマイズでき、ラベルの前後にアイコンを追加したり、角の丸み、高さ、パディング、テキストサイズ、シャドウを調整したりできます。

ウィジェットを使ってSquarespaceにボタンを追加する手順は以下のとおりです：

1. Jotformのワークスペースページで作成をクリックし、ウェブサイトウィジェットを選択して「Button」と検索し、ウィジェットを使用をクリックします。

2. 一般タブで、ボタンのアクションを選択します。ウェブページを開く、メールを送信する、WhatsAppチャットを開くなどから選べます。次に、リンクURLとボタンラベルを入力します。スタイルタブに切り替えてカラー、アイコン、形状を設定し、レイアウトタブでボタンをインラインにするかフローティングにするか、デスクトップ・モバイル・両方のどれに表示するかを選択します。

3. 公開をクリックし、埋め込みセクションのコードをコピーをクリックします。

4. Squarespaceエディタでブロックを追加をクリックし、コードを選択します。ブロックモードをHTMLに設定し、プレースホルダーテキストを削除してからコードを貼り付け、保存をクリックします。

ボタンのスタイルはカスタムCSSパネルではなくJotform側で設定されるため、グローバルのサイトスタイルと競合することがなく、変更がサイト上の他のボタンに影響を与えることもありません。カラーやラベルを変更したい場合も、ブロックIDを探してスニペットを書き直す必要はなく、ウィジェットを編集するだけで済みます。

スマートなサーバーレスウィジェットでSquarespaceサイトをパワーアップ

マーケター、サイトオーナー、デザイナーにとって、1つのCTAボタンだけをサイトの他のボタンと異なるデザインにするためにブロックIDを探し回るのは、貴重な時間の無駄遣いです。ボタンウィジェットを使えば数分で解決でき、後からデザインを変更する際もカスタムCSSパネルに触れる必要はありません。

ボタンは、コードスニペットや有料プラグインなしでSquarespaceページに追加できるもののひとつにすぎません。Jotformの無料ウェブサイトウィジェットディレクトリには150種類以上のオプションがあり、以下のようなものが含まれています。

• ローンチや申込締切用のカウントダウンタイマー — 静的なボタンでは生み出せない緊迫感を演出します
• サインアップオファー用のポップアップ — 通常なら有料プラグインが必要になるものです
• 最新の投稿をページに表示し続けるソーシャルフィード — たまにしか更新しないサイトでも常に最新の印象を与えられます

これらはすべて、ボタンと同じようにコードブロックを通じて埋め込みます。つまり、ページに新しい要素を追加するたびに別のスニペットやプラグインを購入する必要はありません。

まだウェブサイトを作成中の方やリニューアルを計画中の方は、開発者なしで後から追加できるパーツを把握しておくと良いでしょう。JotformとSquarespaceの連携を使えば、同じ方法でサイトにフォームを埋め込めるため、サインアップページへ誘導するボタンから、情報を収集するフォームへスムーズに引き継ぐことができます。

Squarespaceでどのコールトゥアクションの方法を選ぶにしても、目を引くボタンはページ上の他の要素に埋もれてしまうボタンよりもはるかに価値があります。ウィジェットは、そのクリックを獲得するためのより速く、より手頃な方法にすぎません。