みなさま、はじめまして！
デザイナーの山幡です。今年の4月に新卒で入社しました。
今は、CMでもおなじみ「きいてよ！ミルチョ」のUIデザインを担当しています。
今回はミルチョの中で最重要とも言えるボタン「きいてよ！ボタン」の制作エピソードをメインに、UIデザインについて考えていることやポイントなどをお話できたらと思います。
ユーザーが何か行動を起こす時に使えるボタンなどを提供してあげて、
その行動の結果をユーザーに見える形で表示してあげる。これが役割です。
といったかんじで説明すると何だか難しいかんじですが、
ミルチョの場合はもっと簡単に考えています。
ミルチョの住んでいる畑（？）と僕たちが今生活している世界。
この間に挟まってて、ミルチョの世界と僕たちの世界をつないでいるのがUIです。
間にあるものだから、きちんと操作できるのはもちろんのこと、ミルチョの独特な世界観も踏襲して、ユーザーが世界に入りこんでいけるようなデザインになるように心がけています。
きいてよ！ボタンは、押すとテキスト入力画面が立ち上がり、どーでもいいひとりごとを投稿すると、ミルチョや他のユーザーがきいてくれます。
ミルチョというコミュニティサービスを成立させるためには、
1番使われるべきボタンだと思います。
社長との会議で「コアな機能だから、もっと目立たせた方がいい。」という話があり、
本格的にデザインの改修に入りました。
改修前のきいてよ！ボタンはこんなかんじ↓
しかし、どれもわざわざ変えて効果が見込めるほどの違いのあるボタンにはなりませんでした。
そんなダカイ策が見つからないでいる僕に、
先輩デザイナーのサトウさんが声をかけてくれました。
「こういうプラスチックみたいなボタンが、真ん中にどーんと置いてあったら押すよね。」
た、確かに…
でも、ミルチョのUIでは今までそんな処理やパースをかけたことはないし…。
いわばミルチョのUIの中ではルール違反のボタンです。
しかし、ミルチョの世界の中にたった１つだけルールを破ったボタンが置いてあれば、
ユーザーが一番気になるボタンにはなると思いました。
その「異物感」を不快なものでなく「良い意味での異物感」になるようにするのは
デザインの課題でした。
ボタンの形自体は、ユーザーのひとりごとをフワフワ浮かべている雲から引っ張ってくることにしました。ボタンの形は、イラストレーター上でパスで作ります。
（拡大縮小に影響を受けず、編集にとっても便利！）
ボタンの上面と側面でかける処理が異なるため、パーツを分けておきます。
作ったパスデータをフォトショップ上に持ってきて処理をかけます。
モチーフを参考にしながらたくさん処理をかけて、
目で見ながら濃さを調整したり効果的でない処理を削ったりしていくやり方が好きです。
（少々時間はかかりますが...）
ここでプラスチックっぽい質感に見せるポイントは、
エッジにかけた光沢処理とパッキリとしたハイライトです。
これがないと立体的ではありますが、質感はプラスチックっぽくありません。
そして、出来上がったボタンに最後のひと工夫、押したときの処理を加えてあげます。
この２枚をユーザーが画面をタップしたときに切り替えてあげることで、
ギュッと押した感（リアクション）が出て、ユーザー体験が向上します。
30万人を越えるユーザーに、通算280万回押されているボタンになりました。
（※累計きいてよ数参照 2012年12月現在）
ゆる～いデザインのミルチョですが、
ユーザーにそのゆる～い体験を続けてもらえるように
今日紹介したきいてよ！ボタンをはじめとして日々様々な改良を続けています。
「ど～でもいいひとりごとでゆる～くつながる新感覚コミュニティ きいてよ！ミルチョ」
これからもよろしくおねがいします！→ http://mirucho.me
（まだの人はこれを機に始めて、きいてよ！ボタンを押してみてください！）
最後まで読んでいただきありがとうございました！
デザイナーの山幡です。今年の4月に新卒で入社しました。
今は、CMでもおなじみ「きいてよ！ミルチョ」のUIデザインを担当しています。
今回はミルチョの中で最重要とも言えるボタン「きいてよ！ボタン」の制作エピソードをメインに、UIデザインについて考えていることやポイントなどをお話できたらと思います。
「UI」って何？
UIとはユーザーインターフェース（User Interface）の略です。ユーザーが何か行動を起こす時に使えるボタンなどを提供してあげて、
その行動の結果をユーザーに見える形で表示してあげる。これが役割です。
といったかんじで説明すると何だか難しいかんじですが、
ミルチョの場合はもっと簡単に考えています。
この間に挟まってて、ミルチョの世界と僕たちの世界をつないでいるのがUIです。
間にあるものだから、きちんと操作できるのはもちろんのこと、ミルチョの独特な世界観も踏襲して、ユーザーが世界に入りこんでいけるようなデザインになるように心がけています。
きいてよ！ボタン
僕がミルチョチームに入って1番最初に苦戦した作業が、きいてよ！ボタンの作成でした。きいてよ！ボタンは、押すとテキスト入力画面が立ち上がり、どーでもいいひとりごとを投稿すると、ミルチョや他のユーザーがきいてくれます。
ミルチョというコミュニティサービスを成立させるためには、1番使われるべきボタンだと思います。
社長との会議で「コアな機能だから、もっと目立たせた方がいい。」という話があり、
本格的にデザインの改修に入りました。
改修前のきいてよ！ボタンはこんなかんじ↓
ルールを破る
とりあえず考えつくだけのボタンのパターンを用意しました。
しかし、どれもわざわざ変えて効果が見込めるほどの違いのあるボタンにはなりませんでした。 そんなダカイ策が見つからないでいる僕に、
先輩デザイナーのサトウさんが声をかけてくれました。
「こういうプラスチックみたいなボタンが、真ん中にどーんと置いてあったら押すよね。」
た、確かに…
でも、ミルチョのUIでは今までそんな処理やパースをかけたことはないし…。
いわばミルチョのUIの中ではルール違反のボタンです。
しかし、ミルチョの世界の中にたった１つだけルールを破ったボタンが置いてあれば、
ユーザーが一番気になるボタンにはなると思いました。
その「異物感」を不快なものでなく「良い意味での異物感」になるようにするのは
デザインの課題でした。
きいてよ！ボタンを作る
まずは、パースや処理でルールを破る分、ボタンの形自体は、ユーザーのひとりごとをフワフワ浮かべている雲から引っ張ってくることにしました。ボタンの形は、イラストレーター上でパスで作ります。
（拡大縮小に影響を受けず、編集にとっても便利！）
ボタンの上面と側面でかける処理が異なるため、パーツを分けておきます。作ったパスデータをフォトショップ上に持ってきて処理をかけます。
モチーフを参考にしながらたくさん処理をかけて、
目で見ながら濃さを調整したり効果的でない処理を削ったりしていくやり方が好きです。
（少々時間はかかりますが...）
ここでプラスチックっぽい質感に見せるポイントは、
エッジにかけた光沢処理とパッキリとしたハイライトです。
これがないと立体的ではありますが、質感はプラスチックっぽくありません。
そして、出来上がったボタンに最後のひと工夫、押したときの処理を加えてあげます。
この２枚をユーザーが画面をタップしたときに切り替えてあげることで、ギュッと押した感（リアクション）が出て、ユーザー体験が向上します。
最後に
こうして完成したきいてよ！ボタンは、30万人を越えるユーザーに、通算280万回押されているボタンになりました。
（※累計きいてよ数参照 2012年12月現在）
ゆる～いデザインのミルチョですが、
ユーザーにそのゆる～い体験を続けてもらえるように
今日紹介したきいてよ！ボタンをはじめとして日々様々な改良を続けています。
「ど～でもいいひとりごとでゆる～くつながる新感覚コミュニティ きいてよ！ミルチョ」
これからもよろしくおねがいします！→ http://mirucho.me
（まだの人はこれを機に始めて、きいてよ！ボタンを押してみてください！）
最後まで読んでいただきありがとうございました！