マイスピーの会員サイトで「noteの有料記事」のような仕組みを作る方法【置き換え文字(囲み)活用術】
はじめに
noteでは、1つの記事の中で
「無料で読める部分」と「購入者だけが読める有料部分」を
分けて公開できます。
読者は記事の冒頭を読んで内容に興味を持ったら、
その場で購入して続きを読む、という体験ができるわけです。
実はこれと同じような仕組みを、
MyASP(マイスピー)の会員サイトでも
再現することができます。
使うのは「置き換え文字(囲み)」という機能です。
この記事では、マイスピーの会員サイト記事の中に
「無料で読める部分」と「有料購入者だけが読める部分」
を共存させ、noteのような有料記事を
疑似的に実現する具体的な手順を解説します。
全体の仕組みをざっくり理解する
まず、完成イメージと仕組みの全体像を押さえておきましょう。
読者が会員サイトの記事にアクセスすると、
記事の前半部分(無料パート)は誰でも読めます。
しかし、途中から先の有料パートは表示されず、
代わりに「この続きを読むには有料プランへのご登録が必要です」
といった案内文と購入ボタンが表示されます。
読者がそのボタンを押すと、
マイスピーの有料商品シナリオの登録フォーム(決済ページ)に飛びます。
そこでクレジットカードなどで決済を完了すると、
該当シナリオに「登録済みで有効」な状態になります。
その状態で改めて記事にアクセスすると、
置き換え文字(囲み)の表示条件が満たされるため、
有料パートが表示されるようになる、という仕組みです。
ポイントは以下の3つです。
1つ目:「置き換え文字(囲み)」で表示を制御する。
会員サイト記事の有料パート部分を
「所属シナリオ条件ブロック」のタグで囲みます。
これにより、対象シナリオに登録済みのユーザーにだけ、
その部分が表示されるようになります。
2つ目:有料商品シナリオを「鍵」として使う。
マイスピーの有料商品シナリオを1つ作成し、
決済が完了するとそのシナリオに
自動登録される状態にしておきます。
このシナリオへの登録が、
有料コンテンツを表示する「鍵」の役割を果たします。
3つ目:無料部分に購入への導線を設置する。
無料パートの末尾に、有料商品シナリオの
登録フォームへのリンクやボタンを置きます。
これがnoteの「記事を購入する」ボタンに相当します。
事前準備:有料商品シナリオを作成する
まず、有料コンテンツの「鍵」となる有料商品シナリオを作成します。
手順
マイスピーの管理画面にログインし、
「シナリオ新規作成」から「有料商品」を
選択してシナリオを作成します。
シナリオ名は、たとえば
「【有料記事】〇〇の完全解説」など、
販売する記事の内容がわかる名前に
しておくとよいでしょう。
続いて「販売設定」画面で、
支払方法と料金を設定します。
noteのように1記事ごとの買い切りであれば、
単発決済で金額を設定するのがシンプルです。
販売設定が完了したら、
そのシナリオの「登録フォーム」のURLを
控えておいてください。
このURLが、あとで記事内に設置する
購入ボタンのリンク先になります。
手順1:会員サイト記事に「無料パート」を書く
ここからは、実際の会員サイト記事の作成に入ります。
会員サイトの記事作成画面を開いたら、
まずは記事の前半部分、
つまり誰でも読める無料パートを書いていきます。
noteの有料記事でも冒頭は
かなりしっかり内容が書かれていて、
「この先も読みたい」と思わせる
構成になっていますよね。
同じように、無料パートだけでも価値を
感じてもらえる内容にしつつ、
「この先にもっと良い情報がある」と
期待させる書き方を意識しましょう。
手順2:無料パートの末尾に「購入の案内」を設置する
無料パートを書き終えたら、
その直後に「ここから先は有料です」という案内文と、
購入ページへのリンク(ボタン)を設置します。
この案内文のポイントは、
有料商品シナリオに登録されていない人にだけ
表示するということです。
すでに購入済みの人にまで
「購入してください」と表示されたら不自然ですよね。
ここでも「置き換え文字(囲み)」を使います。
具体的には、
案内文を「該当しないユーザーにのみ表示」の設定で囲みます。
こうすることで、有料商品シナリオに登録されていない人だけに
この案内が表示されます。
記事内のイメージ(コードエディタ上での記述)
ここまでが無料パートの本文です。(中略)
%is_user_active_not_【有料記事シナリオのID】%
<div style="background:#f5f5f5; border:1px solid #ddd; border-radius:8px; padding:30px; text-align:center; margin:30px 0;">
<p style="font-size:18px; font-weight:bold;">📖 この続きを読むには有料プランへの登録が必要です</p>
<p>ここから先では、〇〇の具体的なやり方をステップバイステップで解説しています。</p>
<a href="有料商品シナリオの登録フォームURL"
style="display:inline-block; background:#e74c3c; color:#fff; padding:15px 40px; border-radius:5px; text-decoration:none; font-size:16px; font-weight:bold;">
この記事を購入する(980円)
</a>
<p style="font-size:12px; color:#888; margin-top:10px;">※決済完了後、このページを再読み込みすると続きが表示されます。</p>
</div>
%/is_user_active_not_【有料記事シナリオのID】%
「%is_user_active_not_【シナリオID】%」と
「%/is_user_active_not_【シナリオID】%」で囲んだ部分は、
そのシナリオに登録されていないユーザーにだけ表示されます。
つまり、未購入者にだけ購入案内が見える状態になります。
購入済みの人がこの記事にアクセスしたときは、
この案内ブロックは丸ごと非表示になり、
代わりにすぐ下に続く有料パートがシームレスに表示されます。
手順3:「有料パート」を書いて置き換え文字(囲み)で囲む
購入案内のブロックの直後に、
いよいよ有料パートの本文を書いていきます。
有料パートの全体を、
今度は「該当するユーザーにのみ表示」の設定で囲みます。
こうすることで、
有料商品シナリオに登録済み(=決済完了済み)のユーザーだけに、
この部分が表示されるようになります。
記事内のイメージ(コードエディタ上での記述)
%is_user_active_【有料記事シナリオのID】%
<ここに有料パートの本文を書く>
例:
<h2>〇〇を成功させる3つの具体的ステップ</h2>
<p>ステップ1は〜〜です。……</p>
<p>ステップ2は〜〜です。……</p>
<p>ステップ3は〜〜です。……</p>
%/is_user_active_【有料記事シナリオのID】%
「%is_user_active_【シナリオID】%」と
「%/is_user_active_【シナリオID】%」で
囲んだ部分は、そのシナリオに登録済みで
有効なユーザーにだけ表示されます。
手順4:置き換え文字(囲み)の具体的な設定手順
ここで、マイスピーの管理画面上での
実際の操作手順を整理しておきます。
4-1. エディタの準備
会員サイト記事の編集画面を開いたら、
エディタを「コードエディタ」または
「ビジュアルエディタ」に切り替えてください。
置き換え文字(囲み)は
ブロックエディタでは利用できないため、
必ずこのどちらかを使用します。
また、本文入力欄の下部にある
「改行をBRタグにする」のチェックは
外すことを推奨します。
チェックが入ったままだと、
自動挿入される改行タグによって
表示が崩れる可能性があります。
4-2. 購入案内ブロック(未購入者向け)の設定
まず、購入案内のテキストやHTMLを
記事内に記述します。
次に、その部分を選択した状態で、
置き換え文字挿入パネルの
「置き換え文字(囲み)」カテゴリを開きます。
「所属シナリオ条件ブロック」を選択し、
対象シナリオとして事前に作成した
有料商品シナリオを指定します。
オプションは
「該当しないユーザーにのみ表示」を
選んでください。
この設定で、
選択したテキスト部分が
置き換え文字のタグで囲まれます。
4-3. 有料パート(購入者向け)の設定
続いて、有料パートの本文を記述し、
その部分を選択します。
同じように置き換え文字挿入パネルから
「所属シナリオ条件ブロック」を選択し、
対象シナリオには同じ有料商品シナリオを指定します。
今度はオプションを
「該当するユーザーにのみ表示」に
設定してください。
これで、有料パートの前後に
置き換え文字のタグが挿入されます。
完成形の記事構成イメージ
最終的に、記事全体は以下のような構成になります。
【無料パート ─ 誰でも読める部分】
タイトル、導入文、前半の解説など
─────────────────────────
【購入案内ブロック ─ 未購入者にだけ表示】
%is_user_active_not_【シナリオID】%
┌─────────────────────┐
│ この続きは有料です │
│ [この記事を購入する(980円)] │
│ ※決済完了後、再読み込みで │
│ 続きが表示されます │
└─────────────────────┘
%/is_user_active_not_【シナリオID】%
【有料パート ─ 購入者にだけ表示】
%is_user_active_【シナリオID】%
有料コンテンツの本文
・具体的なノウハウ
・テンプレート
・事例解説 など
%/is_user_active_【シナリオID】%
未購入者から見た場合:
無料パートの本文が表示され、
その下に購入案内ブロックが表示されます。
有料パートは一切表示されません。
noteの有料記事とほぼ同じ見た目です。
購入者から見た場合:
無料パートの本文の直後に、
有料パートの本文がシームレスに
続いて表示されます。
購入案内ブロックは表示されません。
まるで1つの記事として
自然に通して読める状態になります。
読者が購入してから有料パートを読むまでの流れ
読者の体験を時系列で整理すると、
次のようになります。
ステップ1:
読者が会員サイトの記事にアクセスし、
無料パートを読みます。
ステップ2:
記事の途中に表示された
「この記事を購入する」ボタンをクリックします。
ステップ3:
マイスピーの有料商品シナリオの
登録フォーム(決済ページ)に遷移します。
ここで名前・メールアドレス・決済情報を入力し、
決済を完了します。
ステップ4:
決済が正常に完了すると、
そのユーザーは有料商品シナリオに
「登録済みで有効」な状態になります。
ステップ5:
読者が元の会員サイト記事に戻り、
ページを再読み込み(リロード)すると、
置き換え文字(囲み)の条件が満たされ、
有料パートが表示されるようになります。
このように、
マイスピーの既存機能の組み合わせだけで、
noteのような有料記事の体験を再現できるのです。
運用のコツと注意点
決済完了後の導線を忘れずに設定する
有料商品シナリオの
「登録完了ページ」や「サンクスメール」の中で、
「記事のページに戻って再読み込みしてください」と
案内しておくと親切です。
可能であれば、
登録完了ページに会員サイト記事への
リンクを直接設置しておくと、
読者が迷わず有料パートにたどり着けます。
会員サイトへのログイン状態を確認する
置き換え文字(囲み)は、
ユーザーが会員サイトにログインした状態で
アクセスしたときに、
そのユーザーのシナリオ登録状況を
判定して表示を切り替えます。
そのため、読者が会員サイトに
ログインしていることが前提となります。
会員サイトのログインが必要な記事として公開するか、
記事内にログインの案内を添えておくようにしましょう。
1記事1シナリオで管理するとわかりやすい
記事ごとに有料商品シナリオを分けておくと、
「この記事の有料パートを見られるのは、
このシナリオに登録されている人」という
対応関係がシンプルになります。
複数の記事をまとめて1つのシナリオで
管理することもできますが、
まずは1対1の構成から始めるのがおすすめです。
複数の有料記事をパッケージ販売することもできる
応用として、
複数の記事の有料パートを同じシナリオの条件で囲めば、
「1回の決済で複数の有料記事がすべて読めるようになる」という
パッケージ販売も実現できます。
noteの「マガジン」に近い運用です。
メールとの連携で購入率を上げる
マイスピーはメール配信ツールでもありますから、
会員サイトの記事を公開したタイミングで
「新しい記事を公開しました。前半は無料で読めますのでぜひご覧ください」
といったメールを配信し、
記事への導線を作ることで、
より多くの読者に有料パートの
存在を知ってもらえます。
まとめ
マイスピーの「置き換え文字(囲み)」機能を使えば、
1つの会員サイト記事の中に
「無料で読める部分」と「購入者だけが読める部分」を
共存させることができます。
やることをシンプルにまとめると、
①有料商品シナリオを1つ作り、記事内の有料パートを「所属シナリオ条件ブロック(該当するユーザーにのみ表示)」で囲み、
②未購入者向けの購入案内を「所属シナリオ条件ブロック(該当しないユーザーにのみ表示)」で囲む。
これだけです。
noteの有料記事のような
仕組みを自分の会員サイトで実現できれば、
プラットフォームに依存せず、
手数料も自分でコントロールしながら
コンテンツ販売ができます。
マイスピーの会員サイトを運用している方は、
ぜひ試してみてください。