販売プラン:販売プランページの外観をカスタマイズする
読了時間:4分
販売プランページの外観をカスタマイズすることで、サイトのスタイルに合わせたり、プランで提供する特典を目立たせたりすることができます。
訪問者に新規登録してもらえるよう、プランのレイアウトを調整してみましょう。ボタンやリボンを細かくデザインしたり、テキストの書式を変更したり、背景や配色をカスタマイズしたりすることも可能です。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/b05f5084-8296-4ca9-8f22-b63e9f9efe42/2023/07/05/5620db45-d46c-4df3-a1c7-dc88bd1de827/c4997777-b98c-499f-b2f0-b71a03212b5e.png)
この記事では、販売プランページのデザインをカスタマイズする以下の方法について説明します:
注意:
「プラン・料金」ページはパーツを追加しないことをおすすめします。パーツを追加すると、チェックアウト中に自動的に表示され、重要な情報が非表示になり、プロセスの妨げになります。
プランのレイアウトを調整する
販売プランのレイアウトを調整し、情報をすっきりと読みやすいものにします。これにより、訪問者は各プランとそれぞれの特典を比較しやすくなります。
プランのレイアウトを調整する方法:
- エディタで販売プランページにアクセスします。
- プランが表示されている場所をクリックします。
- 「設定」をクリックします。
- 「レイアウト」をクリックします。
- 下記のオプションを使用し、レイアウトをカスタマイズします:
- ページテキストのレイアウト:タイトル、サブタイトル、免責事項の配置を選択します。
- プランカードの余白:スライダーを使用してプランカード内の上下左右の余白を設定し、角の丸みを調整してカードの角を丸めます。
- プラン詳細のレイアウト:プラン詳細の配置を設定します。
- 特典のレイアウト:プランの特典の箇条書きのスタイル、配置、行間隔を選択します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/b05f5084-8296-4ca9-8f22-b63e9f9efe42/2023/07/05/8ee56717-172d-4918-9fb0-6693acc10aec/1e0a56a7-0524-4fa7-84ba-4937363b10ce.png)
プランに表示される情報をカスタマイズする
販売プランの詳細は、必要な情報のみ表示させることができます。「表示」タブから特定のプランをハイライトしたり、ページタイトルやプランのタグラインなどを表示させるかを選択したりすることができます。
プランに表示される情報をカスタマイズする方法:
- エディタで販売プランが表示されている場所をクリックします。
- 「設定」をクリックします。
- 「表示」をクリックします。
- 以下のオプションを使用して、表示をカスタマイズします:
- プラン情報:ページタイトル、ページサブタイトル、プラン名、プランのタグライン、プランの特典のチェックボックスをクリックして、販売プランに表示させる情報を選択します。
- ハイライトされたプランを表示:トグルを使用し、プランをハイライトしてリボンを追加します。
- 自動更新免責事項:「免責事項を表示」トグルを有効にすると、顧客はプランを購入する前に利用規約が確認できるようになります。有効にすると、「免責事項」下のテキスト入力欄に利用規約が追加できるようになります。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/b05f5084-8296-4ca9-8f22-b63e9f9efe42/2023/07/05/d32edbbb-8320-4d3f-a022-7955c86fc6fb/c669a300-af35-44c6-9e9e-7f581761622b.png)
プランに表示されるテキストをカスタマイズする
「テキスト」タブから、販売プランのテキスト要素であるページタイトル、ページサブタイトル、プラン選択ボタン、無料お試しボタン、およびリボンに表示させたいテキストを入力することができます。
プランに表示されるテキストをカスタマイズする方法:
- エディタで販売プランが表示されている場所をクリックします。
- 「設定」をクリックします。
- 「テキスト」をクリックします。
- タイトルやボタンなど、該当する項目に追加したいテキストを入力します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/b05f5084-8296-4ca9-8f22-b63e9f9efe42/2023/07/05/46dac013-cd6d-4781-be55-b9af14a2bba7/6e0a1621-0e77-4e9d-be7a-a63a42d45dac.png)
プランのデザインをカスタマイズする
「デザイン」タブから販売プランのデザインをカスタマイズすることで、サイト独自の雰囲気を引き立たせることができます。新しい背景を選択したり、テキストの書式を変更したり、ボタンのスタイルを設定したり、リボンを追加したりして、顧客におすすめのプランを宣伝することができます。
プランのデザインをカスタマイズする方法:
- エディタで販売プランページにアクセスします。
- プランが表示されている場所をクリックします。
- 「設定」をクリックします。
- 「デザイン」をクリックします。
- 以下のオプションを使用して、デザインをカスタマイズします:
- 背景・枠線:色を選択し、スライダーをドラッグして、背景、プランカード、特典、区切り線の不透明度を変更します。
- テキストスタイル:プランカードに表示される各テキストのフォントと色を選択します。
- ボタン:プランカード内のボタンのスタイル、フォント、色、枠線の太さ、不透明度を選択します。
- リボン:ハイライトしたプランのリボンのフォント、色、背景の不透明度と色、枠線の太さ、および枠線の不透明度と色を選択します。
ヒント:
ハイライトしたプランは、上記各オプション内の「ハイライト」タブからカスタマイズすることができます。「元のデザインに戻す」をクリックすると、いつでも始めからやり直すことができます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/b05f5084-8296-4ca9-8f22-b63e9f9efe42/2023/07/05/ef1f0231-df59-4a3f-ad58-c615ee2cd78a/f8236a60-996c-4961-b582-61fe3acc4ae4.png)