こんにちは。デザイナーの高松です。
スマートキャンプのデザインブログも、今回で10週目になりました！
今週は2月14日が更新日ということで、表題のとおり、バレンタインにちなんだ記事を書いてみようと思います。

アプリで見かけるハートマーク

UI上で使用されるハートマークや吹き出しは、アプリの「いいね！」や「コメント」機能としてよく使われるだけに、重要でありながら目立ちすぎてはいけない、繊細な存在です。

各アプリのデザイナーさんが目立ちすぎないように設計しているからこそ、「このアプリのハートの特徴、覚えてる？」と聞かれたら、答えるのはなかなか難しいですよね。

今回はそのハートマークにスポットを当てて、役割や形、インタラクションに注目してみます。

1. Twitter

機能名：いいね　/　インタクラション：あり
Twitterのハートマークは以前、スターだったことを覚えていますか？2015年にスターの「favorite」からハートの「like」に変更され、Twitterユーザーの中では話題になりました。

スターはTwitter初心者にはわかりにくさがあった。
既存の利用者にとっても、いいねと思うツイートはすべてお気に入り（favorite）というわけではなかった。

ハートのいいね（like）は直感的にわかりやすい上に、多くの感情を表現できる。少し気になった投稿にも押しやすい。

変更した背景には、いいね機能を使ってコミュニケーションを活発にしてほしいというTwitterの思いがあり、Twitterでいいねされた投稿がタイムラインや各所で閲覧できることにも、そういった思いが表れているのかもしれません。

2. Instagram

機能名：いいね！　/　インタクラション：あり
Instagramのいいね！は、ハートマークをタップする他に、写真のダブルタップでもいいね！ができるところが特徴です。タップと同時に現れる大きいハートマークは、写真の扱い方を大きくしているInstagramだからこそ、印象的なインタラクションです。

3. メルカリ

機能名：いいね！　/　インタクラション：ボタンにあり
メルカリのいいね！は背景に水面のようなインタラクションがついています。SNSと違う点は、出品者へのリアクションではなく、購入意欲が高い商品をストックするお気に入りとしての役割が大きいところですね。

4. Kurashiru

 機能名：お気に入り　/　インタクラション：あり
Kurashiruは気になるメニューをストックする機能にハートマークを使っています。投稿者へのリアクションではなく、ユーザーが個人的にストックする機能であるため、名称も「いいね」ではなく「お気に入り」となっています。さすが、今はバレンタインメニューが充実していますね・・。

5. Airbnb

機能名：お気に入り　/　インタラクション：あり
Airbnbでは、部屋の評価をスターでつけているため、お気に入りはハートマークで表現しています。旅行やグルメなど、商品の評価が必要になるアプリでは、スターやその他のアイコンの使い所が重要になりそうです。

6. Uber Eats

機能名：お気に入り　/　インタラクション：なし
Airbnbと同様、店舗の評価にスターが使われるため、お気に入りはハートマークにされています。メニュー写真の上部に表示されるためか、ハートのカラーは白。とってもシンプルです！

7. note

機能名：スキ　/　インタクラション：あり
スマートキャンプのデザインブログもお世話になっているnote！なんといっても特徴は機能名ですね。「いいね」よりも直接的な「スキ」という表現にnoteらしさがあります。

さらにPC版ではスキをつけたあとにお礼メッセージを表示できる機能もあり、ボタンクリックひとつでキャッチボールができるのも素敵です。

形と色の比較

簡単にアウトラインと色を比較してみました。
※正確な形とカラーコードではありませんのでご容赦ください。

こうしてみると、Twitterがやや縦に長く、スリムな印象です。
メルカリやnoteは、他と比べると頭の部分が小さめで可愛らしい印象です。一方でAirbnbやUberEatsのように頭を大きく、足を直線的なラインにすると存在感のあるハートになります。
色も赤やピンク、オレンジよりのものまで、それぞれで個性がありますね！

ハートが支えるコミュニケーション

まとめてみると、ハートマークが表現しているアプリの機能は大きく2つに分類できるようでした。

1.  投稿者へ共感を伝える、フィードバック機能
2.  コンテンツを自分のために保存する、ストック機能

この2つの機能は、それぞれのアプリにとって、なくてはならない重要な機能です。特にSNSなどのコミュニケーション中心のアプリでは、テキストを打たずに、ハートマークに全てを代弁してもらうことも多いのではないでしょうか。

普段、気に留めずに見ているハートマークは、実は各所に配置されていて私たちのコミュニケーションを密かに支えてくれていることに気づいたバレンタイン前日でした。

次週をお楽しみに！

スマートキャンプのデザインブログとは

WRITER & EDITOR :
Yume Takamatsu ( SMARTCAMP / Designer / @dream_yt95 )