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

課題

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

解決方法

いいねのマークを若葉に

当社は

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

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

いいねの感謝を伝える

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

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

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

hoverで色を変更(PCのみ)

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

hover時の表示

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

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

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

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

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

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

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

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


ご相談・お問い合わせはこちら

a-blog cmsについてのご相談、ご依頼など。お気軽にお問い合わせください。
頂いた内容については、3営業日以内の返信を心がけております。
他社で作成のa-blog cmsの修正も、頻繁にご依頼頂いております。
コーディング済データへのa-blog cms導入も実績多数です。
小さなことから、お気になさらずお気軽にご相談ください。

    必須

    この記事について

    サイト運用でのお困りごと

    技術協力でのお困りごと

    その他

    ご相談・お問い合わせ種別を入力してください。

  • 必須

    ご相談・お問い合わせ内容を入力してください。

  • 必須

    お名前を入力してください。

  • 必須

    ふりがなを入力してください。

  • 必須

    メールアドレスを入力してください。

    正しいメールアドレスを入力してください。




a-blog cms