Webサービスで使われるお気に入りボタン11選【UIデザイン】

公開日: : 最終更新日:2016/04/15 UI, サービス開発

ランサーズディレクター田畑です。 ランサーズでは、ディレクターが細かい箇所までUI設計を行い、その上でデザイナーさんがより良い物を作り上げるという方針を取って施策を進めています。そこで仮説に基づいてUIを設計するのですが、その段階で他のサービスを参考させていただいております。 多くのサービスが採用しているUIは、ユーザさんが慣れている、使い勝手がいいなどの理由があるので、UI設計をする際に、既存のものを多くインプットすることは重要です。 本日のテーマは『お気に入りボタン』です。 Webサービスには欠かせないのがお気に入りボタンだと思います。各種サービスにお気に入りボタンがあるため、ビギナーユーザーからも良く使われる機能なのではないでしょうか。 そのお気に入りボタンにも考えることは複数存在します。『星マークか、クリップマークか』『通常の状態』『マウスオーバーした際の変化』『ボタンクリック後の動作』『JavaScriptでどのように魅せるか』などなど。 今回は『お気に入りボタン』のUIを参考にさせていただいた、UIの素晴らしいサイトを紹介させていただきます。

TABROOM

2014y05m29d_095427380 2014y05m29d_095429217 2014y05m29d_095437006

Gmail

2014y05m29d_1112127372014y05m29d_111220865

Twitter

2014y05m28d_155218496 2014y05m28d_155222115

ニコニコ動画

2014y05m28d_154542004 2014y05m28d_154545354

Airbnb

2014y05m28d_153551680 2014y05m28d_153557227 2014y05m28d_153605814 Airbnbではお気に入りすると、地図上のアイコンもお気に入りアイコンに変わります。  

Qiita

2014y05m28d_153824123 2014y05m28d_153831449 Qiitaでは右にあるフォルダアイコンで追加削除できます。

Retty

2014y05m29d_100033283 2014y05m29d_100036059 2014y05m29d_100038794

食べログ

2014y05m28d_153914269 2014y05m28d_153925665

ぐるなび

2014y05m28d_154029395 2014y05m28d_154035899

ヤフオク

2014y05m29d_111723587 2014y05m29d_111740186 2014y05m29d_111742433

iemo

2014y05m29d_094550932 2014y05m29d_094556043

最後に

いかがでしたでしょうか。 一重に「お気に入りボタン」といえどかなりの種類が存在します。☆ボタン以外にも♡ボタンなども合ったりするので、自分のサービスに一番適した形でお気に入りボタンを提供することをおすすめします。  

ランサーズでは一緒に成長したい人を募集中!

一緒に企画を作っていくディレクターの方、技術力を磨きたいエンジニア・デザイナーの方、新規事業でビジネススキルを身につけたい方。 ランサーズで一緒に働きませんか?下記URLよりご応募ください。 ランサーズ株式会社|募集要項 日本最大級のクラウドソーシング「ランサーズ」はこちら!

この記事を書いた人

田畑Twitter:@hayato_ts
Webサービスディレクター、グロースハックチームディレクター
以前はメディアを複数運営していました。
ディレクターブログのメイン更新担当として日々更新していきます。
趣味でサイトをいくつか運営しています。

関連記事

新入Webディレクター必見!ディレクターが抑えるべきメディア16選

今回はWebディレクターを目指している方や、将来Webで起業したいと考えている方にも参考になると思う

記事を読む

Webディレクターが憶えておきたいMySQL構文の参考サイト

ランサーズディレクター田畑です。 Webディレクターが企画・施策を検討するにあたって必要な数値の取得

記事を読む

成功事例から学ぶ!業界別国内オウンドメディア事例まとめ

ランサーズディレクター田畑です。 最近『オウンドメディア』という、企業が所有するメディア媒体というも

記事を読む

オウンドメディアの効果を最大限発揮するための運用フローのつくりかた

ランサーズディレクター田畑です。 インターネットの発達により、スタートアップに中小企業などでも自社で

記事を読む

エンゲージメント向上!サービスで使えるゲーミフィケーション事例9選!

ディレクターブログ更新担当・田畑です。 皆さん人生で一度くらいはゲームをプレイしたことがあるのではな

記事を読む

Webサービスで使われるポップアップ12選【UIデザイン】

ランサーズでは、ディレクターがUI設計を行い、その上でデザイナーさんがより良い物を作り上げるという方

記事を読む

PAGE TOP ↑