音声SNS:投稿画面の振り返り＃５
はじめに
新卒でUI/UXデザイナーを目指す、都内私立大学２年の「すえ」です。
今回は、いよいよ音声SNSの最後の課題である「設定画面」のデザイン作成に取り組んだので、その振り返りをしていきます！
1.設計
今回もこれまでと同様に、紙とタブレットで設計をしていきました。設定画面は１画面でシンプルな構成を意識してデザインの設計をしました。
今回の設定画面で意識したことは「シンプルさ」です。なぜシンプルさを意識したのかというと、iPhoneやTwitter・インスタグラムなどの設定画面はシンプルなデザインが多く、操作性が重要視されているものが多いと感じたからです。ここからは個人的な考察になるのですが、当たり前のことですが、ユーザーが求めていることは「簡単に変更したい設定を変更できること」だと思います。そのため、いかにユーザーが求めている設定を変更しやすくするのかを自分なりに考えた結果、シンプルでどの設定がどこにあるのかが分かりやすいデザインが一番いいと思い上のようなデザイン構成にしました。
タブレットのデザイン過程では、紙でデザインしたラフがきのより細かな部分まで考えていきました。具体的には、各設定のカテゴリーのタイトルにはグレーでどの設定のグループなのかテキストを用いて視覚的に分かりやすくなるようデザインしました。また、ログアウトの部分は赤文字で重要なアクションであるということをユーザーに伝えるためこの部分だけデザインを少し変更しました。
2.Figmaでデザイン
Figmaでのデザインの工程では、大きな変更はしていないのですが、音声SNSを通じて余白の大切さを学んだので、設定の項目をカテゴリー別に分けた際、視覚的に違うカテゴリーであるということを示すために、カテゴリーごとの余白の調整を行いました。
3.反省点
【良かった点🙆♂️】
・iPhoneやTwitter・インスタグラムなどの設定画面を参考にしてデザインを
作成することができた
・先月の課題であった余白の取り方について学んだことを活かしてデザイン
できた
【反省点🙅♂️】
・「ログアウト」の文字だけ太字で文字に統一感がない
今回のデザインは、特に余白の取り方を意識してデザインすることができました。アカウントや一般のように大きく３つのカテゴリーに分ける際に、それぞれのカテゴリーの余白感を4または8の倍数で間隔を取り、見た目に統一感のあるデザインに仕上げることができました。
反省点としては、画面下部にある「デザイン」の文字だけが太字になっており、文字の統一感がないこと点が挙げられると思います。１箇所だけ太字であると、色(赤)と太字の２重で重要度を示しているため、統一感がなくなってしまったのだと思いました。このような場合は「色または太字」のどちらか一方を採用して、画面全体として統一感のあるデザインを心がけていきたいです。
4.反省点を踏まえて
先ほどの「ログアウト」部分のデザインの修正をしていきます。
具体的に変更した内容は、「ログアウト」の文字を太字から通常の太さに変更し、フォントの太さを他のテキストと同じにすることで画面全体のフォントの太さが揃い、画面全体として統一感のあるデザインに仕上げることができました。
5.感想
今回は音声SNS最後の課題ということで、画面数や構造はシンプルでありながら、ユーザー視点を忘れずに使いやすいデザインにするためにはどうしたらいいのか考えつつデザインを進めることができました。
音声SNSの課題に取り組んだ最初のことは、フォントや余白の取り方についての知識が浅く、とこをどうすれば良いのか悩みながらデザインを作り始めたのですが、音声SNSの最終では、学んだ余白の取り方を意識しながら画面のデザインすることができました。
おわりに
今回は設定画面のデザインについて振り返りました。
今まで音声SNSに関する記事を読んでいただきありがとうございます！
この課題を通して、同じ投稿画面や設定画面でもユーザーの年齢や求めている内容が異なっている場合があるため、デザインがサービスによって違う点を学びました。
また、以前は苦手意識のあった余白の取り方についても、先ほど振り返りをしたように、少しずつ余白の取り方を学びながら、今回のデザインにも学んだ内容を活かしながらデザインを進めることができました。
今回で音声SNSの課題は終わりになるのですが、新卒でUI/UXデザイナとして就職できるようになるためには、まだまだ学ばなければいけないことが多くあるので、再度気を引き締めて勉強に取り組んでいこうと思います！！💪
ここまで読んでいただいた方本当にありがとうございます🙇♂️
これからも応援よろしくお願いします！！
この記事が気に入ったらサポートをしてみませんか？