デザイン視点でTIME HACKER

img

はじめに

KeyHolderに次いでProject.Unknown2作目のアプリ、時間管理系ツールTIME HACKERがリリースされました!
デザイン担当のぽぽたです。

この記事ではデザイン視点で、TIME HACKER完成までのいろんなことを紹介させていただこうと思います。

TIME HACKERの紹介ページはこちらになります。
TIME HACKER - 時間管理 - Project Unknown

ロゴデザイン決定までの流れ

f:id:project-unknown:20180716170654p:plain

ロゴのデザインは、ゆう@あんのうんさんとの度重なる話し合いで決めていきました。

自分の時間を管理し、生活改善のサポートをするアプリということで、ゆう@あんのうんさんから時間や計測のイメージと聞き、いろんなサイズや色違いのアイコンを作ってみました。
テーマカラーになる青は割と早い段階にノリで決まった気がします。ゆるい。

f:id:project-unknown:20180716170706p:plain

そこから更に絞って...を何度か繰り返し。
ロゴはアプリの顔になるので、納得いく形になるまで話し合いました。

f:id:project-unknown:20180716170011p:plain

最終的に決まったTIME HACKERの公式ロゴ。
時計と円グラフを合わせたイメージになっています。

作成したアイコン

TIME HACKERで作成したアクションアイコンの一覧です。

f:id:project-unknown:20180716161615p:plain

ここに来て初めて数えてみたのですが、計68個になりました。
こう並べてみると数より少なく感じてしまいますね、自分の感覚的にはこの倍くらい作ったように思うのですが...。

本当は船、飛行機、バイク、ホワイトボードなども作る予定だったのですが、話し合いの末現段階では見送ることになりました。
こちらより機能・アイコン追加要望のページを設けていますので「ボツになったアイコンを使いたい!」や「こんなアイコンが欲しい!」などありましたらお気軽にご提案ください^^

TIME HACKER ご要望・お問い合わせ

アクションアイコンのデザインについて

ゆう@あんのうんさんから「こういうアイコンが欲しい」というリストをもらい、それを元に考えていきました。
ロゴもそうなんですが、アイコンを作るということ自体あまり経験がなかったので、結構苦戦してしまいました...。

シンプルで わかりやすく 使いやすいを意識しているアプリなので、アイコンも極力シンプルにしたかったんですよね。

f:id:project-unknown:20180716193234p:plain

初期に作ったアイコン3種。
〜不純物0%、クリアーな味わい〜という感じのシンプルさですね。

f:id:project-unknown:20180716193839p:plain

後期に作ったアイコン3種。
描けば描くほど前面に乗り出してくる『伝われ...!』という気持ちとこだわりが反映されていくアイコン達......。

電車は最初、シンプルに横向きの四角いハコにしたかったんです。
しかしサイズ的にとても短く路面電車のようになってしまうな...と思ったので、奥行きを意識したのは苦肉の策ではありました。
単純にシンプルといっても、伝わらなければ仕方ないですもんね...。

f:id:project-unknown:20180717002236p:plain

いろいろなアイコンの要望をもらい着手し、初めて気づいたのは動詞を表現するのは難しい!ということですね。
上のアイコンは何を表現しているかわかりますでしょうか?
アイコンを作る際の要望リストには、左からくつろぐ 遊ぶとありました。

くつろぐスタイルは人それぞれですよね。
スマホをいじりながらベッドでゴロゴロや...ソファーに座りコーヒーを飲みながら本を読む...。
遊ぶに関しても、なにでどう遊ぶのか...シンプルなアイコンでどう表現すれば伝わるだろうかと結構悩みました。
いろいろ考えてみて、最終的に決めたのがくつろぐ=ソファーと、遊ぶ=楽しそうな感じでした。

今後アイコンを追加する際は、もっと分かりやすく、もっとシンプルに表現できるよう表現力も養いたいところです。
アクションアイコンは全て好きに名前をつけることができるので、自分の感覚で好きに使っていただければ嬉しいです!

レポートアイコンのデザインについて

f:id:project-unknown:20180717010732p:plain

こちらは手描きで紙にいくつか案を出してみたもの。

グラフ的なものは、あまり考えずにロゴに寄せて円グラフ表現にしていたのですが、一番下の画像の、時間管理の画面は棒グラフ表現なのに円グラフアイコンだと混乱しない?という、どうまずさんからのごもっとも過ぎるツッコミにより、全員意見一致で急遽円グラフから棒グラフに変更になりました。
アプリ申請当日の出来事です(笑)

f:id:project-unknown:20180717012427p:plain

最終的に決まったレポートアイコン各種。

最後に

KeyHolderでもアイコンは少し作成したのですが、比でないほどたくさんのアイコンを作成することになったTIME HACKERでした。
そして初めての経験や思考錯誤の末の発見やと、とても実りのある開発でした。

まだまだデザイナーと胸を張れるほどの力量はないのですが...これからもProject.Unknownのデザイン担当として少しづつ精進していきたいです!

f:id:project-unknown:20180717051430p:plain

TIME HACKERは自分の時間を管理し、生活改善のサポートをする時間管理アプリです。
気になりましたら是非使ってみてください^^
timehacker.page.link

う〜のん語録

うなな:バナナ
うまいらる : おいしいもの、おやつ、食べること