自社サイトの独自「いいねボタン」で工夫したこと、まとめ

課題

• いいねボタンをできるだけ、わかりやすい、親しみのあるものにしたい

解決方法

いいねのマークを若葉に

当社は

• 「データ（情報）」の
• 「ファーム（畑）」を作り
• 「果実（問題解決→良くする）」

を得られるようにという精神の元に社名を決めました。
そのため、いいねのマークもgoodマークでなく若葉のマークにしました。

いいねの感謝を伝える

いいねを押していただいた方には、リアクションのお礼（いいねを頂き、ありがとうございました。）を表示するようにしました。

いいね後のアイコンを変更

いいねを押していただくと、いいね後のアイコンが若葉から変化するようにしました。
この記事の最後にある「いいねボタン」を押していただき、ぜひご確認ください。

hoverで色を変更（PCのみ）

Hover時に色が変わるようにしました。
通常時から色をつけるのは、少しうるさく感じたのでやめました。

スマートフォンではボタンを右に移動し、色をつける

スマートフォン表示の場合は、右側にあった方がボタンを押しやすいと思い、位置を変更しました。

また、スマートフォンの場合はいいねボタンに色がついていた方が分かりやすいと感じましたので、PCのhover時の色をつけました。

カスタマイズは、a-blog cms＋jsで

いいねボタン自体はa-blog cmsを色々カスタマイズして作成しました。いいねされたかどうかの判別はjsを利用しています。

いいねボタンの機能についてもphpなどでプログラムを組まず、a-blog cmsのカスタマイズのみで行いました。

そのため実現できない機能（いいねの取り消し）などもありましたが、最終的に「これが必要」と思う機能がa-blog cmsのカスタマイズで実現できそうだったので、手探りで開発しつつ、実装しました。

いいねボタンはこちらから