カスタムCSSなしでSquarespaceのレスポンシブ料金表を作成する方法

料金表があれば、顧客は自分が支払う金額に対して何を得られるのかを簡単に確認できます。SaaSプラン、代理店パッケージ、メンバーシップ、サブスクリプションなど、どのようなサービスを販売する場合でもこれは重要です。実際、2024年のZuora/Harris Pollの調査では、米国の成人の80%が、定期購入型の商品・サービスにおける購入・支払い方法の柔軟性について「重要」「非常に重要」「絶対に不可欠」と回答しています。

しかし、Squarespaceには従来の行と列で構成される料金表を作成するためのネイティブブロックがありません。テキスト、ボタン、Fluid Engineを使って自分で作成することは可能ですが、デスクトップとモバイルのレイアウトをそれぞれ個別に設定する必要があります。

3つの料金プランカードを2つの異なる画面サイズに合わせて手動で配置する作業に午後の時間を費やしたくないという方のために、もっと簡単な方法をご紹介しましょう。

方法1：Squarespaceのネイティブレイアウトブロックで料金表を作成する

Squarespaceにはすでに「Pricing Plan」ブロックが用意されているため、販売内容によってはゼロから表を作成する必要がない場合もあります。このブロックは、メンバーシップや限定コンテンツ（Member Sites、コース、動画、有料ブログなど）向けの料金プランに対応しています。

無料、一括払い、分割払い、定期課金のいずれのアクセス方法も設定でき、複数のプランブロックを並べて料金比較ができるようにすることも可能です。

販売内容がこれに該当する場合の設定手順は以下のとおりです。

1. 料金プランを作成する：「Products」から、販売したいコンテンツやメンバーシップを作成し、価格設定とアクセスルールを追加します。対象コンテンツをまとめたバンドルプランを作成することもできます。
2. Pricing Planブロックを追加する：ページを編集し、「Add block (+)」をクリックして「Pricing Plan」を選択し、作成したプランを指定します。
3. プランのスタイルを設定する：「Design」で、タイトル、説明、価格、特典、ボタンの表示・非表示を選択します。複数のプランを横並びに表示したい場合は、ブロックを追加してください。

ただし注意点として、SquarespaceのPricing Planブロックはメンバーシップや限定コンテンツと紐づいています。そのため、SaaSのプラン、代理店パッケージ、フリーランスのリテイナー契約、その他のサービスを比較する料金表には使えません。

そのような場合のネイティブな回避策はFluid Engineです。テキストブロックとボタンブロックを個別に使って各プランを作成し、列状に並べて配置します。ただし、デスクトップとモバイルのレイアウトはそれぞれ別々に調整する必要があります。

Squarespaceの公式ドキュメントにも、このブロックは限定コンテンツへのアクセスを販売するためのものであり、プラン、パッケージ、サービスを比較する汎用的な価格表を作成するためのものではないと明記されています。

また、独立系の開発者が販売するSquarespace専用の料金表プラグインを購入することもできます。たとえば、Will Myersは3つのプリセットスタイルとSquarespace 7.1対応のプラグインをサイトごとに25ドルで販売しています。ただし、Squarespace公式のExtensionsマーケットプレイスにも公式インテグレーションにも含まれていないため、おすすめはしません。

方法2：無料でカスタマイズ可能な料金表ウィジェットを追加する

複数のカードを横並びにするのではなく、比較形式の料金表を使いたい場合は、Jotformの料金表ウィジェットがおすすめです。

ビジュアルビルダーでは、月額・年額の価格表の追加、プランや機能の編集、各CTA（コールトゥアクション）のリンク先設定、カード・カルーセル・フル比較などのレイアウト選択が可能です。

さらに、おすすめのプランに「Popular」ラベルを表示したり、割引や旧価格を追加したり、カラー、タイポグラフィ、ボタン、列幅、モバイル表示の動作を細かくコントロールすることもできます。

すばやく簡単に始められます。

1. 料金表を作成する：プラン、価格、機能、説明、CTAリンクを追加します。複数の価格表（たとえば月額と年額）を作成し、訪問者がタブで切り替えられるようにすることも可能です。
2. レイアウトを選んでスタイルを設定する：Modern Grid、Compact Columns、Classic Comparison、Card Carouselなどのプリセットから選び、お使いのSquarespaceサイトに合わせてデザインを調整します。
3. Squarespaceに埋め込む：「Try It on Your Website for Free」をクリックし、生成された埋め込みコードをコピーします。次にSquarespaceのページを開いて「Code」ブロックを追加し、コードをHTMLとして貼り付けます。「Display Source」がオフになっていることを確認してから、保存してページをプレビューしてください。

Jotformが料金表を1つの埋め込みとして処理するため、Squarespace側ではそれを表示するだけで済みます。しかも現時点では、ウィジェットの定期的な利用料は発生しません。Jotformウェブサイトウィジェットは2027年まで無料で利用できます。

ウィジェットライブラリを開いたついでに…

料金表だけで終わらせる必要はありません。Jotformウェブサイトウィジェットを使えば、以下のような機能も追加できます。

• FAQウィジェット：料金、請求、解約、機能、オンボーディングに関するよくある質問を掲載
• Googleレビューウィジェット：訪問者をGoogleに移動させることなく、意思決定の場にソーシャルプルーフを表示
• ポップアップウィジェット：ニュースレター登録、割引、デモ案内、ローンチ告知、離脱時オファーなどに活用

料金表が役目を果たした後は、JotformのSquarespace連携を使って、埋め込みの登録フォームや決済フォームで次のステップへスムーズにつなげることができます。