「あーー！これじゃダメだ！」シェアボタンで学んだシンプルの価値

2025-11-26

シェアボタンつけたい！

ブログ記事を読んだ人が、気軽にシェアできるようにしたいなーって思ってたんですよね。

でも、「シェアボタンってどこまで対応すればいいの？」っていう悩みが出てきた！

X（旧 Twitter）、Facebook、LINE、LinkedIn… どこまで対応するのが正解なんだ！？

というわけで（どういうわけなんだ？）、今回は X のボタンとリンクをコピーするボタンだけ にしました。

実は Facebook のシェアボタンも実装してたんだけど、結局コメントアウトしちゃいました。LINE とか LinkedIn とかも考えたけど、「サイトがゴチャゴチャするな…」って思ってしまって。

だから今回は、「最小限で必要十分」を目指すことにしました。X でシェアしたい人は X で、他の SNS でシェアしたい人はリンクをコピーして自分で投稿してもらえればいいかな、という発想です。

X のボタンは、ホバーしたときに 黒く、X っぽいデザイン にしてみました。

ただのアイコンじゃなくて、「あ、これは X のボタンだな」って一目でわかるデザインにしたかった。ホバー時の変化で、それが伝わればいいなって。

なので、通常時はグレーっぽいボーダーで控えめだけど、マウスを乗せると、黒い背景になって、X のアイコンが白く浮かび上がる。これ、X のブランドカラーに近い感じで、いい感じにできたなー！（自己満足大事）

リンクコピーボタンは、クリックすると記事のタイトルと URL がクリップボードにコピーされるようにしました。

コピーが成功すると、チェックマークが表示される仕様。これで「コピーできた！」っていうのがわかりやすくなってます。

あと、10秒後に元のアイコンに戻るようにしたので、何回でもコピーできます。まあ、普通は1回コピーすれば十分だと思うけど。

シェアボタンは、いいねボタンの横に配置しました。EngagementButtons コンポーネントの中に、いいねボタンとシェアボタンを横並びで表示するようにしました。

記事の最後に、いいねボタンとシェアボタンが並んでる感じです。これで、記事を読んだ人が「いいね」したい人も「シェア」したい人も、同じ場所で操作できるようになりました。

シェアボタンを実装してて、やっぱり悩んだのが「どこまで対応すべきか」ってことです。

Facebook も実装したけど、使わないことにした。LINE や LinkedIn も考えたけど、結局やめた。

でも、将来的には追加する可能性もあるかな。例えば、「設定で表示するボタンを選べる」みたいな機能があれば、ゴチャゴチャせずにいろんな SNS に対応できそう。

ただ、それもまた「めんどくさい」作業になりそうだから、今はこのままかな。必要になったら考えましょ。

シェアボタンを実装してみて、改めて思ったのが「シンプルに保つことの大切さ」です。

「あれもこれも対応しなきゃ」って思ってたんだけど、実際に作ってみると、ボタンが増えるたびになんか窮屈で閉所恐怖症が発動しそうになる！「あーー！これじゃダメだ！」

結局、X とリンクコピーだけにしたことで、見た目もスッキリしたし、実装もシンプルになった。今の僕にはこれでちょうどいい。

「全部対応しないと！」って思うこともあるけど、時には「これだけでいい」って決めることも大事よね。