Recocoのアイコンについて

f:id:chutofm:20180411162055p:plain

のアイコン、今までざっくりと作ったよとしか言っていなかったのでメモ程度に過程を残しておきます。

今のアイコンは実は２代目です。
初代は2017年1月にクライアントの「アイコンが必要」「猫要素が欲しい」という謎のこだわりからこれ↓

f:id:chutofm:20180411162243p:plain

を作りました。

そのころはこちらも卒論でヒーヒー言っててあんまり時間をかけられなかった気がします。
マイクっぽい線と猫の手も借りたい的なイメージかな。

制作時間はおそらく2時間くらいだと思います。

これでリリース前に数ヶ月やっていたけどユーザーから「モグラみたい」「何かよくわからない」という意見をいただき（私もそう思っていた）リリース前に変更することにしました。

f:id:chutofm:20180411165513p:plain

2代目は2017年2月に制作したらしいので卒論も最終発表会が終わって気持ちに余裕ができた頃に制作したらしいです。（とは言っても時間はあまりかけていなかった気がする）深夜に作り始めて夜が明ける前にはできた気が。

前述の通り

・モグラみたい

・なんのアプリかわからない

との意見があったのと、クライアントから「変更したい」と言われたので新しく作ることにしました。自分でもあまり好きなデザインではなかったし。

「どんなアプリかなんとなくわかるようにする」

「ターゲット層（大学生、ビジネスマン）がダウンロードしそうなデザイン」

1.どんなアイコンがあるかリサーチした（1時間くらい）

「ボイスレコーダーアプリ」のアイコンを色々調べました。
結果、大体が「マイク」「受話器」「録音感のある赤い丸」という感じでした。
ということで、「録音」は例に倣ってマイクなどの分かりやすい物で表現し、Recocoの「振り返る」ことをデザインに取り入れて差をつけようかな、と。

2.色、雰囲気を考える（頭の中で30分くらい）

アプリの中身の配色と系統が違うのは違和感があるのでアプリの配色に揃えました。
大学生〜ビジネスマンとややターゲットが広いのでパキパキしたザ・スタイリッシュではなく少し温かみのある配色にしています。加えて、納期が「翌日」とかだったりしたのでフラットデザイン〜という感じに。

3.とりあえずイラレでこねこね（3時間くらい）

紙で書くよりイラレとかソフトでラフを作り始めることが多いです。
実はあんまりイラレで図形を描くのは得意ではない...
マイクを作ったり「振り返り」を表現するにはどうしようかと考えたり。
最終的に「振り返る」感を１２個の点（時計）と反時計回りの矢印で表現してみました。なんとなく伝わるかなと。

4.微調整（2時間くらい）

グラデーションの比率とかマイクと時計（仮）の距離感サイズ感をひたすら調整しました。
実際の表示サイズはかなり小さいので点の大きさとか矢印の太さとか線の太さとか拡大したり縮小したりひたすら調整。
そのままだとのっぺりした感じだったので、少し影を入れて全体をスッキリさせてみたりしています

5.完成

技術的には難しいことをしていない（できない）けどなかなか万人がDLしやすいデザインになった気はしています。サイズ調整してクライアントに引き渡し。その後そのまま最終発表会用のチラシデザインも降ってきました。

「レコーダーアプリ」ということがマイクでわかるので違和感なく受け入れられているっぽいです。
壁紙を暗めのものにしていた人には「見つけづらい」と言われたもののまあそれは仕方ないような気も。
そこそこ評判が良かったのでよかったです（クライアント本人が作ったと思っている人も多い気がする）

Recoco2の制作の可能性が出てきたらしいのでアイコンもロゴも一新しようかなとおっしゃられていたのでそうなる気がする。そうなったらもっと時間をかけてリサーチとかして経過を残して制作したいと思います。

アイコンの他にはそもそものアプリの配色決めたり、最終発表会で配布するチラシデザイン、今年に入ってからはクマ財団の最終発表会Recocoブース案、ブースに貼ってたポスターとか作ってました。

お仕事募集中です。

ーーーーー

「書き起こしアプリ」として広まっているみたいで評価が低いんですがあくまで「便利なボイスレコーダー」なんです。

録音途中に区切りを自分で入れられるので聞き返すときに「この話題どこだったかな」ってときワンタップで聞き返すことができます。書き起こしはおまけ。Siriを使ってるので「精度が低い！」という文句はApple様にどうぞ、ということみたいです。

講義などの広いスペースで使う場合はほぼ書き起こしされないみたいですが「テスト範囲」とか「重要」みたいなタグを入れておけば聞き返すときにすごく楽なので便利だと思います！

よかったらDLしてみてください。