みなさま、こんにちは!
2013年に新卒入社したハヤサカと申します。
現在、大人のブカツbk2というSNSサービスのデザインを担当しています。

今回は担当しているサービスの中で、Amebaユーザーの30代~40代を意識しながら作っているUIデザインについて、スマホアプリを中心にご紹介させていただきたいと思います。

大人のブカツbk2とは

大人のブカツbk2は、"趣味でつながる"25歳以上限定のコミュニティサービスです。
「スマホ写真部」や「大人のラーメン部」、「なんか友達少ない部」など個性豊かな4000以上のブカツから自分にぴったりのブカツを見つけて、大人同士の落ち着いたコミュニケーションを楽しむことができます。
現在のメインユーザー層は30代から40代で、男女問わずご利用いただいております。
詳しくはこちら→http://bk-2.jp

bk2カバー画像

大人のデザインルール

はじめに、サービスで規定しているデザインルールについてご紹介します。

1.落ち着いたトーンのカラー
30代~40代がサービスを長時間使うことを想定して、使用するカラーも目に優しい落ち着いたトーンでまとめました。男女問わず利用していただいているので、色も中性的なカラーを使用しています。

bk2のカラーパレット

2.可愛くなりすぎないアイコン
カラー規定同様、男女問わず利用していただいているため、可愛いくなりすぎず、しかし堅苦しくならないデザインを採用しています。小さくても識別できるように、細かなパーツは使用しないようにしています。

bk2のアイコン

大人のいいねボタン

次に、bk2で使用している「いいねボタン」についてご紹介します。

bk2に於いて、「いいねボタン」は会話と同じくらい重要な要素です。
・押してもらったユーザーのモチベーション向上
・アクティブなメンバーが顕著に分かるので盛り上がっている雰囲気がでる
などの理由があげられます。
さらに、コメントを記入するよりも気軽に気持ちを伝えることができるため、ユーザーには沢山ボタンを押して欲しいです。
そのためボタンを押す前の方が押した後よりも、押したくなるデザインである必要があります。

以上の理由で、現在bk2で使用されている「いいねボタン」は
①押す前は着色ありの立体ボタン→②触ると色が落ち、下に深くへこむ→③押した後は少し上に戻る、という3パターンの画像で出来ています。

さらに30代~40代のユーザーは10代~20代のユーザーと比べて分かりやすさが求められるため、親指のアイコンにテキストの表記を加えたところ、クリック率向上に効果がありました。

bk2のいいねボタン

アクションボタンについては、弊社の画像系のサービスや掲示板系のサービスではまた違う扱い方をしているので、他のサービスの例も参考にしてみてください。

大人のUI設計

次に、このサービスのUI設計についてご紹介します。

まずはユーザーのアクションフローをご説明します。
①ブカツに入る
②ユーザー同士が出会う
③好きな趣味の話で盛り上がる
④毎日更新やお知らせをチェックする
⑤ ③~④を繰り返してモチベーションが高くなり、また新しいブカツを探しはじめる
→①へ戻る

この①~⑤のループに没頭してもらうために、30代~40代のユーザーでも迷わないシンプルなナビゲーションをつくりました。それが、ブカツを探すページマイページです。

bk2のナビゲーション

bk2のナビゲーション

タブをふたつに絞り、自分に関わる情報とそれ以外をしっかりと分けることで、サービス内での動線がシンプルになります。
この構造にしたことで、社内でも定着率がトップレベルのサービスに成長することができました。

最後に

最後まで読んでいただきありがとうございます!

bk2は制作チームにもユーザーの皆さんにも恵まれ、日々進化しています。
わたしもbk2チームの一員として、ユーザーの皆さんにとってより良い時間を提供するために
日々精進して参ります。

今回ご紹介したのはbk2の世界観を構成する一部ですが、まだまだご紹介したいアイディアが沢山詰まっているサービスです。25歳以上の方、ぜひこの機会に覗いてみてくださいね。
そしてこれからもbk2をよろしくおねがいします!

bk2サイトリンク用画像