PRC-012 公開  更新

無料トライアル型 料金表

無料で試せる期間と、そのあとに有料へ切り替わる日・金額を並べて示す料金表の設計です。
いつまで無料で、いつから有料になり、いつ、いくら請求されるのか、料金を発生させずにやめるにはいつまでに解約すればよいのかを、申し込む前と最終確認の画面で確かめられます。
SaaSやオンライン学習、会員サービスなど、試してから続けてもらうサービスに向いています。

ワイヤーフレーム(PC)

無料トライアル型 料金表 PC版ワイヤーフレーム

ワイヤーフレーム(SP)

無料トライアル型 料金表 SP版ワイヤーフレーム

SP版の特徴

  1. タイムラインは縦に4行:横幅が狭くても、無料期間の終了日時、有料契約の開始日、初回の請求日を、日付の順に読めるようにしています。
  2. 無料のラベルはプラン名の横:無料であることを示しつつ、カードの主役は無料期間のあとの月額にしています。
  3. 解約期限とカード登録をCTAの近くに:申し込む直前に、カード登録の要否と、料金を発生させないための解約期限を確認できるようにしています。
  4. 最終確認は縦に並べる:契約の内容を1項目ずつ確かめ、必要なら修正に戻れるようにしています。

採用前の判断ポイント

向いているケース

  • 無料期間のあとに、有料の契約へ切り替わる料金体系になっている
  • 無料期間の終了日時、有料契約の開始日、初回の請求日と金額、料金を発生させないための解約期限を画面上で示せる
  • 使ってみることで価値が伝わりやすいサービス
  • SaaS、オンライン学習・動画などの配信サービス、アプリ、会員サービスなど

向かないケース

  • 無料期間の終了日時や、料金を発生させないための解約期限を、申し込みの前に示せない(意図しない有料の契約につながり、トラブルの原因になります)
  • 期間を区切らず、機能を制限した無料プランをずっと提供する(無料プランを含めて比べる3プラン比較型が向きます)
  • 導入に相談や設定が必要で、申し込み後すぐに試せない(相談から始める下限価格型などが向きます)

このワイヤーの特徴

いつまで無料で、いつから有料になるかが一目で分かる

「14日間無料」とだけ書かれていると、いつの何時まで無料なのか、その後どうなるのかが分かりません。
今日申し込んだ場合の無料期間の終了日時、有料契約の開始日、初回の請求日を日付入りのタイムラインで示すことで、いつまで無料で、いつから有料になり、いつ請求されるのかを一目で確かめられます。

無料期間のあとの金額を、申し込む前に確かめられる

無料の表示だけが目立つと、続けた場合の費用を調べずに申し込んでしまいがちです。
無料期間のあとの月額をカードの中で大きく示すことで、試した後も使い続けるかどうかを、金額を知ったうえで判断できます。

料金を発生させないための解約期限を先に示す

どうすれば料金をかけずにやめられるのかが分からないと、試すかどうかを判断しにくくなります。
料金を発生させないための解約期限と解約の方法をタイムラインとCTAの近くで示すことで、条件を理解したうえで、試すかどうかを判断できます。

申し込みの最終確認で、契約の内容をもう一度確かめられる

「お申し込み内容の最終確認」のような見出しを付けた画面に、無料期間、有料契約の開始日と金額、初回の請求日、自動更新、解約期限をまとめ、修正に戻れるようにしておくことで、申し込みを確定する前に、自分が何に申し込むのかを確かめ直せます。

SPでは、有料になる日と解約期限をCTAの近くに置く

SPでは、縦のタイムラインで日付を順に示し、各カードのCTAの近くにカード登録の要否と、料金を発生させないための解約期限を1行で置いています。画面が縦に長くても、申し込む直前に大事な条件を見落としにくくなります。

制作時のよくある失敗

「無料」だけを大きく見せ、有料になる日と金額が小さい

「0円」「無料」を大きく、有料後の金額を小さな注記にすると、無料期間のあとに請求が始まることに気づかないまま申し込まれやすくなります。
無料の表示と同じカードの中に、有料になる日と金額を読める大きさで書きます。

自動で有料に切り替わることが書かれていない

無料期間が終わると自動で有料の契約になる場合、そのことが申し込みの前に分からないと、請求が来てから気づくことになります。
自動で切り替わることと、自動更新であることを、申し込みボタンの近くに書きます。

解約の方法や、料金を発生させないための期限が分かりにくい

解約の方法が別のページにしか書かれていなかったり、「いつでも解約可能」と書きながら実際には条件があったりすると、トラブルにつながります。
解約の方法と、料金を発生させないための解約期限を、料金表の中で示します。

最終確認の画面で、内容を確認・修正できない

申し込みボタンを押す前に契約の内容をまとめて確認できず、修正にも戻れない画面では、意図しない申し込みが起きやすくなります。
最終確認の画面に契約の内容をまとめ、修正に戻れるボタンを置きます。

無料期間の数え方があいまい

申し込み日を1日目とするのか、申し込んだ時刻から数えるのか、何時までが無料なのかが書かれていないと、検討者と事業者で終わりの日時がずれます。
「14日間」だけでなく、今日申し込んだ場合の終了日時(例:10月10日 23:59まで)を表示し、必要ならタイムゾーンも書きます。

よくある質問

無料トライアルの申し込み画面では、何を表示すればいいですか?

一般消費者向けにインターネットで申し込みを受ける通信販売では、特定商取引法により、最終確認画面などで申し込みを受ける場合に、分量、価格、支払いの時期と方法、提供の時期、申し込みの撤回・解除に関する事項などを表示することが求められ、誤認させるような表示も禁止されています。
また、最終確認画面で申し込みの内容を容易に確認・訂正できるようにしていない場合は、行政処分の対象になります。
消費者庁のガイドラインでは、「注文内容の最終確認」のような表題を付けるなど、最終確認の画面であることが分かる標記が望ましいとされています。
無料トライアルでは、無料期間の終了日時、有料契約の開始日と金額、初回の請求日、自動で続くかどうか、料金を発生させないための解約期限と解約の方法を、最終確認画面で一覧して確認できるようにします。
料金表でも、申し込み前に確認できる位置へ示しておくと分かりやすくなります。
表示する事項の詳細は、消費者庁の通信販売のガイドラインで確認し、必要に応じて専門家に相談してください。

無料トライアルでも、クレジットカードの登録を求めたほうがいいですか?

事業の方針によって判断が分かれます。
登録を求める場合は、なぜ登録が必要なのか(無料期間のあとに自動で請求するため)と、無料期間中は請求されないことを、登録の画面と料金表の両方で示します。
登録を求めない場合は、無料期間が終わったあとにどう手続きすれば続けられるのかを示します。

無料期間の終わりが近いことを知らせたほうがいいですか?

料金表の設計とは別の仕組みですが、終了前にメールなどで知らせる場合は、料金表の近くに「無料期間の終了3日前にお知らせします」のように書いておくと、試す人の安心につながります。
知らせない場合は、有料になる日付を申し込み完了の画面やメールに残しておきます。

3プラン比較型の無料プランとは何が違いますか?

無料プランは、期間を区切らずに機能や利用量を制限して提供するもので、有料プランと並べて比べる3プラン比較型の中で扱えます。
この型は、期間を区切って有料の機能を試してもらい、期間のあとに有料の契約へ切り替わる場合を扱います。

同じパーツのPattern

料金表の型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開