「寄付」より「応援」を。Note ライクなボタンをブログに実装した理由

ノートさんの UX、すごくない？

文章・画像・音声・動画などのコンテンツを投稿・公開し、必要なら有料販売もできるプラットフォーム「Note（ノート）」というサービスがありますよね。このサービスの「チップで応援する」という表現と体験が、すごくいいなと以前から思ってたんです。

日本人って「寄付」という言葉にあまり馴染みがなくて、少し距離があるように感じませんか？「寄付」と言われると、何か崇高な目的とか重い責任が伴いそうで、つい身構えちゃうというか。

ノートさんはそこをうまく「チップで応援」という表現に置き換えてるんですよね。「お金で活動を応援する」という行為をカジュアルに肯定してくれて、心理的なハードルをぐっと下げてくれる。「投げ銭」ほど軽くなく、「寄付」ほど重くない。この絶妙なバランス感覚、素晴らしすぎるじゃないですか！

早速実装してみた！

というわけで、このブログにもその「応援の仕組み」を取り入れてみることにしました！ 記事を読み終わった後に、「いい記事だったな」「役に立ったな」と感じてくれた人が、気軽にポチッとサポートできる導線を作りたかったのです。

デザインはNoteを参考にしつつ、自分のサイトに合わせてカスタマイズしました。 実装にあたってこだわったポイントをいくつか紹介しますね。

1. コンポーネントとしての再利用性

最初は記事ページに直接 HTML を書いてたんですが、将来的に他のページでも使いたくなることを見越して、独立した Svelte コンポーネントに切り出しました。 こうすることで、文言の修正やデザインの変更が一箇所で済むし、サイト全体で統一されたメンテナンスが可能になります。

2. オリジナルの SVG アイコン

ボタンに添えるアイコンにもこだわりました。既存のライブラリにあるアイコンじゃなくて、「ハート」の中に「円マーク（¥）」が入った独自のアイコンをSVGで作成しました。

こだわりポイントは、円マークを単に上に重ねるんじゃなくて、ハート型から円の形をくり抜いている（透明にしている） 点です。SVGの mask 機能を使って、円マークの部分をマスクとして扱うことで実現してます。

これにより、ボタンの背景色がハートのくり抜かれた部分から透けて見えて、より一体感のあるデザインになりました。あと、親要素の文字色に合わせてアイコンの色も自動で変わるように工夫してたりします。

3. 視覚的なフィードバックとレスポンシブ対応

ボタンはただのリンクじゃなくて、ユーザーのアクションに反応するように Tailwind CSS でアニメーションを付けてます。

• マウスを乗せると少し大きくなる
• クリックすると少し凹む
• ホバー時にエメラルド色の影を落として発光感を出す

こうした細かいインタラクションが、「押したくなるボタン」を作る上で重要だと思うんですよね。

また、スマホなどの小さな画面では幅いっぱいに広がり、PCなどの大きな画面では程よい幅に収まるようレスポンシブ対応もして、どのデバイスでも押しやすいボタンを目指しました。

なぜ OpenCollective？

ちなみに、リンク先には「OpenCollective」というプラットフォームを使ってます。 これは、オープンソースプロジェクトやコミュニティへの寄付を透明性高く管理できるサービスです。集まった資金の使い道がすべて公開されるので、応援してくれた方にも「自分のお金がどう使われているか」を知ってもらうことができて、安心感に繋がるかなと思って選びました。

応援お待ちしています！

というわけで、この記事の下にも早速そのボタンが表示されているはずです。

もしこの記事や、これまでの活動が少しでも「面白い」「役に立った」と思っていただけたなら、ぜひ下のボタンから応援していただけると嬉しいです。いただいたサポートは、今後の開発活動や記事執筆の大きな励み（とコーヒー代）になります！

最後まで読んでいただきありがとうございました！