アプリの中のグラフを、そのままアイコンにした話 | 開発ノート

めぐる日記には、これまで書いた日記の気分を集計して見せる「気分の傾向」という画面があって、そこにあるドーナツ型のグラフが自分でもかなり気に入っていた。もともと使っていたアプリアイコンにいまいち満足できていなかったので、思い切ってこのグラフをそのままアイコンにしてしまうことにした。

グラフから、アイコンの素材だけを抜き出す

グラフそのものには、真ん中に天気アイコンと「穏やか」のような文字が乗っていたり、記録がない気分は灰色で表示されたりする。アイコンにするには、そういった文字や記号、意味を持たない灰色の部分は全部取り除いて、色のついたリングだけのシンプルな形にする必要があった。残す色も、アプリの中の色味とまったく同じトーンを使うことにこだわった。アイコンだけ見た人が実際にアプリを開いた時、「あの色、あのグラフだ」と繋がるようにしたかったから。

角の丸みで一度失敗する

新しいアプリアイコンの仕組み(Icon Composerという、色ごとに画像を分けて重ねて立体的に見せるツール)を使うには、色ごとに独立した画像を用意する必要があった。リングを色の数だけ切り分けて、それぞれの切れ端の角を少し丸めたい。最初にやった方法は、切れ端の端にリングの太さと同じ大きさの円をくっつけるという単純なやり方だったんだけど、これだと丸みが強すぎて、まるで別の形(半円のカプセルのような形)にしか見えなくなってしまった。アプリの中の本物のグラフは、もっと控えめで自然な丸みだった。

円のサイズを単純に小さくしてみたら、今度は形が崩れて、切れ端に不自然な出っ張りができてしまった。単純に「丸をくっつける」という発想そのものが、小さい丸みには向いていなかった。

結局、図形を少しだけ内側に縮めてから、同じ分だけ外側に戻す、という2段階の処理に切り替えた。この方法だと、角のような尖った部分だけが自然に削られて、まっすぐな辺はそのまま保たれる。ちょうど、角砂糖の角を軽くこすって丸くするような感覚に近い。これでようやく、アプリの中のグラフと同じ、控えめな丸みを再現できた。

色や太さは、後からもう一段調整

一度完成させた後も、「もう少し色を鮮やかに、リングも太く」という調整と、「使っている色を7色から5色に減らして、その分を目立つ色に配分し直す」という調整を追加で行った。色数を減らした時、一番小さい割合だった色の帯が他の色より薄く・細く見えてしまう問題が起きたけど、原因は「一番小さい割合の帯に、他と同じ丸み処理をかけると、丸みが図形の大きさに対して相対的に強くかかりすぎてしまう」ことだった。色の割合を見直して、どの帯も十分な大きさを持つように配分し直したら解消した。

持ち帰ったこと

「丸くする」という一言でも、単純に丸を足すやり方と、図形を縮めてから戻すやり方では、見た目の自然さが全く違う
小さい図形に均一な処理をかけると、大きい図形とは違う見え方になることがある。図形のサイズに応じて処理の強さを調整する必要がある場面がある
アプリの世界観(色・形)がすでにアプリの中にあるなら、新しく考えるより、それをそのまま活かした方が説得力のあるアイコンになる