こんにちは、Kome（@chankomeppy）です。
noteの記事下には「この記事が気に入ったら、サポートしてみませんか？」というボタンがある。いわゆる「投げ銭」的な機能だ。
はてなブログでも「note」のようにサポート機能（投げ銭）があればいいのに…
はてなブログでも外部サービスを使って「投げ銭」的な機能を実装できたので、やり方をまとめておきます。CSSはコピペOKなので参考にしてね～
▼目次はこちら （クリックして表示）
会員登録なしで「投げ銭」できる外部サービスは2つある
はてなブログにはnoteのサポート機能のようなものがないので、外部のサービスを使う必要がある。
投げ銭してもらうのに会員登録が必要だと、「投げ銭しようと思ったけど会員登録するのが面倒だからやめよう」となる可能性が大いにある。そこで、この記事では「会員登録なし」で投げ銭できるサービスに限定して紹介する。
どちらも新しいサービスで、codocは2019年9月、plogは2020年10月にリリース。（後者は個人が開発している）
せっかくなので、どちらも設置してみた。新しいものは使ってみたいし。
ちなみに、会員登録を伴う投げ銭機能だと「Paypal.me」が挙げられるが、本名がバッチリ公開されるので、匿名でブログをやっている人は使えない。
Amazonの「欲しいものリスト」公開は昔から匿名で支援を募れるツールとして使われてきた。参考までに、私の欲しいものリストを貼っておくので、見てくださいｗ
codoc
まずcodecについて。読み方はコードク。
こちらは投げ銭機能だけでなく、noteのような有料記事ツール、サブスクリプションツールも提供している、むしろこっちの方がメインだと思われる。
| 利用料金 | 無料 |
|---|---|
| 手数料 | 15% |
| 売上金の最低支払金額 | 1,000円以上 |
| 売上金の受け取り方法 | 銀行口座振り込み |
| 売上金の振込手数料 | 1回300円 |
codoc: 投げ銭機能
「サポート機能（投げ銭）」のウィジェットを設置することで、訪問者が投げ銭できるようになる。
デフォルトの見た目はCSSで整えることができる（ただし、はてなブログだと色は変更できない模様…）
記事下にタグを設置してしまえば、noteのサポート機能と同じように使うことができる。
▼私は記事下にこれを設置したよ。
codoc: 投げ銭機能の設定方法
- codocのアカウントを作る。
1-1：「無料で始める」をクリック
1-2：アカウントはTwitter・Facebookと連携可能
1-3：メール認証をしてアカウント作成完了
- サポート機能（投げ銭）のウィジェットを作成する。
2-1：ダッシュボード左下の「ウィジェット」または「サポート機能（投げ銭）の設置」をクリック
2-2：「デザイン」タブを選択
2-3：①いいねの表示、②codocについての表示、③Powerd by codocの表示、④サポートボタンの中に表示されるテキストを設定し、設定を保存する
（※1）①②③④はこんな風に表示される
（※2）「テーマを選択」でボタンの色や形を変更しても、はてなブログで表示するとデフォルトのテーマカラー（青色）が表示されてしまう（2020年12月現在）
2-4：「サポート」タブを選択し、サポートボタンの上に表示されるテキストを入力→「<>貼り付けタグを表示」をクリック
- タグを貼り付ける
3-1：タグをコピーする（JS＋要素）
3-2：はてなブログのデザイン→カスタマイズ→記事→記事下にコピーしたタグを貼り付け
これで記事下にサポートボタン（投げ銭ボタン）が設置された！
codoc: 投げ銭ボタンのCSSカスタマイズ
デフォルトの見た目で問題なければそのままでOK。
私はnoteのサポートボタンのような見た目にしたかったので、CSSでボタンの見た目を整えた。
しかし、CSSを使ってもサポートボタンの中に表示されるテキストの色を変更することができなかった。
ボタンの外枠と背景の色のはCSSで変更できたが、ボタンの中に表示されるテキストの色と同系色ではないと見た目的に微妙だったので、以下で紹介するCSSでは色は何も変えずデフォルトのままにしている。
/* cococのサポートボタンをnote風にするCSS */ .codoc-support { max-width: 100% !important; background: #f8f9fa !important; border: none !important; border-radius: 10px 10px 0 0 !important; margin: 24px 0 0 !important; padding: 16px 16px 5px !important; } .codoc-support .codoc-support-title { margin-bottom: 8px !important; } .codoc-bottom { border-radius: 0 !important; margin: 0 !important; padding: 0 !important; } .codoc-like-wrap { padding-top: 0 !important; margin-bottom: 0 !important; } .codoc-copyright { margin: 0 0 24px !important; background: #f8f9fa; border-radius: 0 0 10px 10px; padding: 0 0 16px; font-size: 10px !important; color: #aaa !important; }
↑このコードをコピーして、デザイン→カスタマイズ→デザインCSSに張り付ければ、私が使っているサポートボタンと同じものがあなたのブログにも表示されます。
▼こんな風になりまーす！
私とお揃いのボタンを使ってみませんか？😂
お揃いのボタンを設置された場合は、コメントで教えてくれたらボタンを見に遊びに行きますｗ
codoc: 投げ銭してみる
codocで投げ銭するとどんな感じなのか。支援の手順はどうか？使いやすいものか？
人に使っていただく前に自分で知る必要があると思い、自分で自分に投げ銭をした。
ここからは「支援者」の目線です。
- 「サポートする」をクリック
- ブログ運営者へのメッセージとサポート金額（投げ銭する金額）を指定して「この価格に決定」をクリック→「会員登録しないで決済」をクリック
てか、「Komeアカウント」ってナニｗｗｗ
これはcodocのアカウントのことを指しているのだが、なぜKomeアカウントと表示されるのかは不明。システムの不具合なのか、わざとこのようにに表示される仕様なのか分からないが、codoc内でKomeアカウント会員専用コンテンツを配信しているとかそういうわけではないが、そういう風にも見えちゃうーｗ - ①Apple Pay・Google Pay、②クレジットカードで支払う
【①Apple Pay・Google Payの場合】
「今すぐ支払う」ボタンを右にスワイプし、「続行」をクリックして支払い完了。
【②クレジットカードの場合】
必要情報を入力し「支払う」をクリックして支払い完了。
支払い完了画面が表示され、登録メールアドレスに支払い完了のお知らせが届く（「myself」というニックネームで支援しました）
- 支援したアカウントからメッセージが届く
- 支援履歴の確認・領収書の発行には、codocの会員登録が必要となる
スムーズに投げ銭できた！
次に「ブログ運営者」の目線で見てみる。
投げ銭を受け取ると、codoc運営から通知メールが届く。
支援いただいたらお礼を言うのが礼儀、myselfさんに返信を送る。
返信メッセージは、こんな風に支援者に届くよ。
これでcodocの投げ銭の一連の手順の説明はおしまい。
全体的にnoteに似ていて使いやすく、法人が運営しているという点も安心ポイントだ。手数料が15%というのはちょっぴり多いような気もするが、noteも15%なので、まぁこれが相場ということで…。
plog
次にplogについて。読み方はピーログ？プログ？わかりません。
このサービスは先述の通り個人開発で、しかもリリースされたばかり。
これからどんどん機能が追加されていくと思うので、ここで説明していることはすぐに古い情報となってしまうかもしれない。
| 利用料金 | 無料 |
|---|---|
| 手数料 | 5% |
| 売上金の最低支払金額 | 1,000円以上 |
| 売上金の受け取り方法 | Amazonギフトカード 現金振り込みは対応中 |
| 売上金の振込手数料 | N/A |
手数料は業界最安値らしい。
plog: 投げ銭機能
現時点での仕様では、用意されているボタンの種類は一つ。
ボタンをクリックすると「支援」した人だけが閲覧できるコンテンツが表示される仕組みになっている。
「記事」を支援者限定コンテンツとすれば「有料記事」になるし、「お礼」を支援者限定コンテンツとしれば「投げ銭」として使うことができる。
codocと大きく異なる点は、支援者が自分で支援金額を設定できないこと。
こちらが定めた「定額」の支援金ボタンしか作ることができない。逆にシンプルで分かりやすくていいけどね！
▼私はこんなのを作ってみたよ。
iframeなので、CSSを使って見た目を変更することはできない。 ボタンの見た目が結構ポップなので、まじめ系ブログには向いていないだろう。当ブログのような雑記ブログにはピッタリ。
plog: 投げ銭機能の設定方法
- plogのアカウントを作る。
1-1：グーグルと連携するだけでOK
- 投げ銭ボタン用のタグを作成する。
2-1：Googleと連携完了後、「はじめる」をクリック
2-2：金額を設定し、有料部分（課金後に表示されるコンテンツ）をHTMLで入力し、「追加する」をクリック
2-3：出来上がったコードをコピーし、任意の場所に貼り付け
任意の場所とは、記事下でもよいし、記事中でも、お好きな場所にどうぞ。
一つのボタンに対して支援金額が固定であること、CSSでボタンの見た目を整えられないことから、記事下に固定するような使い方ではなく、必要なときに単発で使うのに向いているのではないかと、個人的には感じた。
他の投げ銭サービスは最低支援額が100円からであることが一般的、50円から支援できるというのは支援のハードルが低くてよいと思う。雑誌の「袋閉じ」的な感覚で色々な使い道ができそうな予感がする。
ボタン設置までの手順は、かなりシンプルで使いやすいと感じた。
plog: 投げ銭してみる
plogの投げ銭についても、まずは自分で試してみた。
まずは投げ銭する側の「支援者」目線で見てみる。
- 「購入して続きを読む」をクリック
- Googleと連携してサインイン
- カード情報を入力して「購入する」をクリック
- 「購入ありがとう！」的なメッセージが表示される（のだが、10秒間くらいしか表示されないのでスクリーンショットを撮り逃した）。
支援者のGmailアドレスに支払いに関するメールは届かないようだ。
支払い手順もかなりシンプルで、投げ銭したらそれで終わり！メッセージのやりとりもできないので支援というよりは、本当に言葉通りの投げ銭。こういうシンプルな機能のほうが実はいいのかもしれない。
次に、投げ銭が発生すると「ブログ運営者」にはどのようなことが起きるのか。
plog運営者より通知メールが届くのみ。メールの内容もシンプルすぎていい！笑
plogの投げ銭をしてみたい人は「↑上部に設置したボタン」をクリックしてみてください。50円なのでｗ
固定金額の投げ銭ボタンは、50円のボタン、100円のボタン、1,000円のボタン、、、というようにいくつも作ることができるが、1ページに複数の投げ銭のボタンを設置することができない。複数設置すると、2つ目以降のボタンがきちんと表示されないようだ。
また、plogには自分の売上金を確認するできるページが用意されておらず、投げ銭発生時の通知メールにも金額が記されておらず、投げ銭が発生した記事のURLがあるだけだ。
1ページに投げ銭ボタンを1つしか設定できないので、投げ銭が発生した記事のURLが分かればいくら投げ銭されたのかも判明するとはいえ、売上金を非常に把握しにくいし、自分で管理しなければいけない。
1ページにボタンを1つしか設置できないのは不便なので、固定ページを使ってカスタムしてみました。苦肉の策～ｗ
【重要】特定商取引法に基づく表記
サイトで何かを販売することは「通信販売」にあたる。
消費者庁の特定商取引法ガイドによると、このように定義されている。
「通信販売」とは、販売業者または役務提供事業者（※１）が「郵便等」（※２）によって売買契約または役務提供契約の申込みを受けて行う商品、権利の販売または役務の提供のことをいいます。
※１「販売業者または役務提供事業者」とは、販売または役務の提供を業として営む者を意味します。「業として営む」とは、営利の意思をもって、反復継続して取引を行うことをいいます。なお、営利の意思の有無については、その者の意思にかかわらず、客観的に判断されることとなります。上記要件に該当すれば、個人でも特定商取引法上の「事業者」となります。また、インターネット・オークションにおける出品者が「販売業者」に該当するかどうかの考え方については、「インターネット・オークションにおける「販売業者」に係るガイドライン」を御参照ください。
２「郵便等」には、郵便または信書便、電話機、ファクシミリ装置そのほかの通信機器または情報処理に用いられる機器を利用する方法、電報、預金または貯金の口座に対する払込み、のいずれかであれば該当します。
特定商取引法ガイド
インターネットオークションの場合だと、以下の規模で取引をした場合に「営利 の意思を持って反復継続して取引を行う者として販売業者」に該当すると考えられる。落札額の合計が1か月で100万円以上、1年間で1,000万円以上。
この数字を参考にすると、私が設置する投げ銭は「業として営む」に値しない規模であり、「販売業者または薬務提供事業者」に該当しないと判断した。これに関しては、noteのFAQも参考にしている。
noteのユーザーで特定商取引法に基づく表記をしている人を見たことがあるだろうか？私は見たことがない。note運営は特定商取引法（特商法）に基づく「販売業者」に該当する場合以外は、掲載する必要はありません。
とFAQで宣言している。
ただ、生計を立てられるくらいに「投げ銭」や「有料記事」を販売するのであれば、特商法表記が求められるであろう。大半の人は特商法表記掲載の対象とならず、連絡の開示を求められても応じる義務がない。
とはいえ、なにかこれが原因でトラブルになるのもいやなので、私はプライバシーポリシーに外部サービスを利用した投げ銭についてという項目を追加した。
codocやplogは有料記事や投げ銭機能の「サービス」を提供する会社であり、売買契約はブログ運営者と読者（支援者）の間で結ばれる。
codocやplogは有料記事や投げ銭機能の支援金をブログ運営者に代わって収受するが、売買契約はブログ運営者と読者（支援者）の間で結ばれる。
codocもplogも、無料ですぐに利用可能で、誰もが気軽に使えるサービスであるが、タグを設置する際には「自分でものを売っているんだぞ！」「トラブルが起きたら自己責任なんだぞ！」という意識を頭に置くことも忘れずに！
さいごに
おそらく誰も投げ銭してくれないのではないかと思うが、誰かが支援してくれる可能性もゼロではないので、とりあえず設置はしておく。
この記事がはてなブロガーの皆さまの参考になれば幸いです。
最後までお読みいただき有難うございました♪
