半年で3億回押された「ありがとう」を伝えるボタン

みなさま、初めまして。
デザイナーのキムハヨンと申します。2013年に新卒入社しました。
現在、「きいてよ！ミルチョ」のデザインを担当しています。

今回はミルチョの流れの中でKEYボタンになる、
「ありがとうボタン」の制作方法についてお話させていただきたいと思います。

きいてよ！ミルチョ」とは…？

不思議な生き物ミルチョにど～でもいいひとりごとをきいてもらいながら
ゆる～くつながる新感覚コミュニティです。

ミルチョの流れ

ミルチョには以下の図のような流れがあります。

①Bさんのひとりごとに対して、
②Aさんが、ひとりごと「きいたよ」と言うと、
③Bさんは、きいてくれて「ありがとう」と返します。

ありがとうボタンは基本、図のようにハートの形ですが、季節ごとのイベントによって背景に合わせたモチーフでデザインを変えています。

ありがとうボタンの作り方

例えば、昨年の8月はかき氷をモチーフにしたありがとうボタンを作りました。
そのプロセスを具体的にご紹介致します。

まず、プロデューサーから夏を感じられるテーマのありがとうボタンを作りたいと依頼があり（①）、スイカやアイスバー、かき氷など思いついたものをスケッチしてみます（②）。
その中からボタンとしての素材になるかどうかの基準で絞り、モチーフを決めます（③）。
今回はかき氷の方が多くの人に共感できるモチーフであったため、「かき氷」を選びました。
モチーフを実物とまったく違うものならないようにするため、まずかき氷の参考になるイメージを検索します（④）。

そこからかき氷の形をちゃんと描き始めます（⑤）。
描いた紙をスキャンしてIllustratorでパスに起こします（⑥）。

起こしたパスのデータをPhotoshopにシェイプレイヤーとして持ってきます（⑦）。
色塗りとサイズ調整をして仮で入れてみます（⑧）。

→色が可愛くないし、表現も細かすぎて押して嬉しくなるボタンには見えないことに気付きます。

それでもう一度紙に描いて（⑤）、Illustrator→Photoshopのプロセスを踏みます（⑥→⑦）。


そうすることによって、以下のようなボタンになりました。


氷とシロップが混ざってるところの表現を簡略化して2段分けし、少し高めの彩度の色を使って夏に食べたくなるかき氷を表現しました。
コップの波の柄も最初のリアルな表現より可愛くなったと思います。
4色のバリエーションを出して、押した時にランダムに表示させるような設定をしたので、その変化によって楽しさも感じることができます。
スーパーありがとうボタンは普通のありがとうボタンの4色を使って、特別なボタン(コメントを書くとスーパーありがとうボタンを返すことができます)という認識をさせることができました。

まとめると、ありがとうボタンは8段階で出来上がります。
①テーマを与えられる
②テーマに合わせて思いつくものをスケッチする
③その中からモチーフを決める
④参考になるイメージを検索する
⑤下地を描く
⑥Illustratorでパスで起こす
⑦Photoshopでシェイプレイヤーとして持ってくる
⑧色塗り&サイズ調整をする

ボタンに押し心地をつける

しかし、ここで終わりではありません。
押した後のボタンのデザインが決まったらそれを元にして、今度は押す前のボタン(default)を作ります。
押す前のボタンはユーザーに期待感を持たせるためにシルエットだけ見せます。
イラストの細かい要素を捨てて形だけ残して、そこに押せる感を与えるため、90°下に内部シャドウを6px入れて立体感を表します。
次に押した瞬間のボタン(active)を作ります。
押す前のボタンとは逆に、90°上に内部シャドウを6px入れて、押されて凹んでいることを表現します。
そして、以下のような「default → active → after」ボタンになります。

最後に

いかがでしたか？
ミルチョチームに配属されてから今まで7ヶ月間作ってきたありがとうボタンは、
103万会員に合計3億回以上押されています。(2014年1月現在354,909,086回)
ユーザーがかわいい！押したい！という気持になって「ありがとう」を伝えられるよう、今までより良いモチーフとイラストを生み出していきたいと思います。