DailyUI #5 アプリアイコン
はじめに
新卒でUI/UXデザイナーを目指す、都内私立大学２年の「すえ」です。
今回はDaily UI5日目のお題である「アプリアイコン」のデザインを作成していきます！
アプリのUIデザインの勉強はしているのですが、アイコンはほとんど触ったことがないので、頑張ってデザインしていこうと思います💪
テーマ
はじめに、今回はDaily UI2日目の「クレジットカード決済」でデザインしたアプリのアイコンをデザインテーマとして取り組んでいこうと思います。
まだ、Daily UI2日目の「クレジットカード決済」に関するUIの記事を読んでいない方はぜひ読んでみてください！
制作過程
ここから、先ほどのテーマに沿ってクレジット決済アプリのアプリアイコンの制作過程についてまとめていきます。
参考集め
始めにアプリアイコンもUIと同様に参考を集めてからデザイン案を考えました。前回デザインしたアプリはカフェの決済画面なので「カフェアプリ」を中心に参考集めをしました。
ラフ書き
集めた参考をもとにアプリアイコンのデザイン案を考えました。
アプリアイコンはあまり作ったことがないので、集めた参考以外にも有名なアプリのアイコンなども参考にできるだけ多くデザイン案を考えました。
アプリアイコン作成
アプリアイコンを作る上で意識したことが２点あります。
1点目は「似たサービスのアプリアイコンとデザインが類似しないようにすること」です。アプリアイコンは、アプリの第一印象を決める重要な要素であるため、アプリの内容がしっかりと伝わるだけでなく、独自性のあるデザインでユーザーの興味を引くようなデザインにしなければいけないと考えたため、デザインが類似しないよう意識してデザインしました。
２点目は「遠くから見てもしっかりと分かるデザインにする」ことです。
アプリのアイコンは、ホーム画面やアプリのストアで見ることが多いため、アプリアイコンが単体で見られる場面は少なく、小さく表示されてもユーザーが見やすく分かりやすいデザインにする必要があると考えました。
そのため、見やすさも意識してアプリアイコンのデザインを行いました。
以上の２点を意識しながら作成したアプリアイコンは以下の通りです。
このアイコンは、カフェのモバイルオーダーができるアプリのアイコンであるため、アプリのイメージカラーである緑とカフェを連想させるコーヒーカップを中央に配置しました。
また、モバイルオーダーがアプリの主な機能のため、スマホを片手で操作する様子もアプリアイコンに詰め込み、どのようなアプリなのかが瞬時に分かるようなアイコンをデザインしました。
ブラッシュアップ
アプリアイコンのブラッシュアップについてまとめていきます。
先ほどデザインしたアプリアイコンは、背景が薄い黄色のため、境界線がボヤけてしまい、アプリのホーム画面など多くのアプリがある中では目立ちにくいと感じたため、テーマカラーの枠線を追加しました。
このアプリは、モバイルオーダーをするユーザー向けのため、アイコンが他のアプリと同化してしまうと、使いたいアプリを探すために時間がかかりUXの観点からも好ましくないと考えました。
そこで、枠線をつけることでブラッシュアップ前のアイコンの問題点である境界線がぼんやりとしている点を改善したアプリアイコンに改善しました。
振り返り
【良かった点🙆♂️】
・どのようなポイントを意識すれば良いのか考えながらデザインできた
・実際にアプリアイコンがホーム画面などに置かれた時の状況を考えて
アイコンを作成できた
【反省点🙅♂️】
・手の部分の太さや余白など細い部分に気を配ることができなかった
今回の振り返りとして、良かった点はアプリアイコンを作る時に「」や「」など、どのポイントを意識してデザインするとより良いアイコンがデザインできるようになるのか事前に考えてからデザインができたことが挙げられると思います。
また、アプリアイコンはユーザーが単体で見ることより、ホーム画面やアプリストアなど他のアイコンが一覧で並べられている中に置かれるため、その時の見え方も意識してデザインを変更できたことが良かったと思います。
反省点として、全体のデザインや見え方は意識できたものの、普段のUIデザインで意識している余白や文字や要素の太さを意識しながらデザインができなかったことです。そのため、アイコンにある手のイラストの太さが細いことや上下の余白が違うなど細かい部分に気を配ることができませんでした。
今後は、アプリアイコンをデザインする時も、画面のUIをデザインする時と同様に余白や太さなどの細かい部分にも気を配り、細部までこだわりが詰まったアイコンがデザインできるようになりたいです。
おわりに
今回はDaily UI 5日目のお題である「アプリアイコン」のデザインについて振り返りを行いました。
あまりアイコンをデザインすることはなかったので、色々と戸惑うことや反省すべき点もありましたが、良かった点もあるので良い部分も反省点も今後に活かせるよう頑張っていきます！！
次回はDaily UI 6日目のお題である「プロフィール画面」のUIデザインに挑戦します！
最後まで読んでいただきありがとうございました！🙇♂️