Daily UI #5
こんばんは！
前回の投稿からだいぶ日が空いてしまいましたが、今日は「アプリアイコン」のデザインをします！
今回はカレンダーアプリのデザイン場面を想定して、制作を行いました！
既存のカレンダーアプリの観察
初めに、App Storeでダウンロード数が多いアプリのアイコンを観察して、気が付いたことをまとめました。
カレンダー要素を抜粋しているアイコン
アイコンに曜日や日付が書いてあるものです。これはAppleの純正のカレンダーやGoogleのカレンダーの特徴で、慣れている人は一目で認識できると思います。MacのGoogleカレンダーは数字の部分が日にちと連動して変わるのが特徴的ですよね。日めくりカレンダーのような感覚で認識できます。
ブランド化されているカレンダーアプリのアイコン
カレンダーアプリとして認知が広まっているアプリは、特にカレンダー感はなく、アプリのキャラクターやモチーフになっているアイコンが用いられていました。
簡易的なカレンダーをモチーフにしたアイコン
月間のカレンダーを簡易的に表したアイコンです。一列に4~5個並んでいるものが3行連なっており、色が変わったりしていてカレンダーっぽいデザインになっています。横に7個なくてもカレンダーかなってわかるものですね…。右のデザインはおそらく祝日を赤で表していて、左のものは予定がたくさん入っているような印象があります。
ちょっと思ったことを発散。
ブランド化しているものは別として、カレンダーアプリをアイコン化する時に、「カレンダーっぽさ」や「カレンダーの特徴」が何か？というところが鍵になっていると思いました。
日付なのか、マスなのか、曜日なのか、年号なのか。
スケジュール帳という観点だと、手帳やペンがアイコンになるのかな？とか、手帳を止めるバンドが特徴的かな？とか。
アプリアイコンのデザインを制作する
アプリアイコンを制作するのが初めてだったので、調べながら制作しました！参考にしたサイトはこちら。
アプリアイコンの制作ポイント
・シンプルなデザインにすること
・どんな背景でもデザインが成り立つようにすること
・正方形で作ること
・同ジャンルとの雰囲気を合わせつつも、目立つようにすること
アプリアイコンデザイン案
こちらが私が作成した「カレンダーアプリアイコン」のデザインです。
（時間かけて考えてみたんですけど、納得いくデザインができませんでした…。一旦アウトプットして、また作り直すかもです🥲）
一番左「カレンダ」
アプリタイトルは決まっていないけれど、いっそのことデカデカと書いてみては？と思い、太めのフォントで四角を埋めてみました。
シンプルなカレンダーって、白黒に加えて祝日の赤がポイントになっているイメージがあったので、こんな感じの配色に。
左から二番目「2022 calendar」
カレンダーの日付や曜日は日々変化するので、アイコンに用いる場合何を選択するべきか迷ってしまうけれど、西暦なら1年間は同じなのでずっと使い続けられると思いました。
右から二番目「Jan 1-7」
やっぱり定番の月と日にちをモチーフにしたアイコンも制作してみたくて、年の始まりの一週間を表示したものを作ってみました。
一番右「暦」
カレンダーのモチーフになるものを書き出していたときに、月の満ち欠けが思い浮かび、そこから派生させたデザインです。もっと月の感じ（クレーターとか）を出してみたかったけど、上手くできず…。暦の字体はカーブの感じや線の太さを少しいじって、読みやすさと筆のぽてっと感を大事にしながら変更してみました。
学んだこと
難しい！奥が深い！アイデアが思い浮かんでも表現できない！
今回初めてアイコンをデザインしたのですが、難しかった…。デザインする面積が小さいので情報の取捨選択が大事だと思いました。またユーザーがパッとみて何のアプリなのかをスムーズに認識するアイコンって何だろう？とか、こんなデザインは何のツールを使えばいいのかな？とか色々な疑問が浮かびました！UIデザインとは異なる点も多々あったので、アイコン制作をもっと勉強してみたいと思いました！
最後まで読んでいただき、ありがとうございました🙌🏻🤍