DailyUI #7　設定画面

はじめに

新卒でUI/UXデザイナーを目指す、都内私立大学２年の「すえ」です。
今回はDailyUI 7日目のお題ある「設定画面」のUI作成をしたので、そのまとめをしたいと思います。
DailyUIも残すところあと3日となり、これまで学んだ内容を活かして、良いUIがデザインできるよう頑張ります💪

テーマ設定

今回のテーマは、6日目で作成した「ファッション用SNSの設定画面」というテーマでUIの作成をしました。
主な利用者の層は、大学生から20代の比較的若い方が使うことを想定しており、概要は自分のファッションや人気のあるインフルエンサーのファッションを閲覧できるSNSアプリです。

詳しくは6日目DailyUIの記事を読んでみてください！

制作過程

ここからは、ファション用SNSの設定画面のUIをデザインした過程についてまとめていこうと思います。今回は、「設定画面の一覧」と詳細ページの１つである「通知設定」のUIをデザインします。

参考集め

はじめに、いつも通り参考となるUIデザインをネット上で収集しました。
今回集めた参考は、ニュースアプリやSNSなど幅広いジャンルのUIを参考として集めました。

実際に集めた参考UI

ラフ書き

先ほど集めた参考UIをもとに設定画面の一覧と、詳細画面である通知設定のラフ書きを描きました。今回は設定ページであるため、雰囲気としてはアップルの設定画面をモチーフにラフ書きをデザインしました。

「設定画面」のラフ書き

UI作成

ラフ書きをもとに実際に完成したUIは以下の通りです。
こだわったポイントは、なるべくシンプルに必要な情報だけを表示することを意識してデザインしました。設定画面は、項目が多いため情報が散らかりがちなので、設定のジャンルごとにタイトルとカテゴリ分けすることでシンプルな見た目の設定画面に仕上げました。

左の画面の下部にある「ログアウト」の文字のみ赤字にすることで、他の設定項目とは違うという印象を与え、画面の下部に配置することでミスタップが減ると考えたため、この位置に配置しました。

作成したUI

ブラッシュアップ

では、いつも通り完成したUIのブラッシュアップをしていきます。
今回は設定一覧画面の画面テーマを変更できる「外観モード」のブラッシュアップを行いました。変更した内容は、外観モードをタップして、詳細画面に遷移したのちにテーマを選択する仕様から、設定一覧画面でテーマ選択ができるよう変更しました。

このようにデザインを変えた理由が２点あります。
１点目はテーマ変更でユーザーが求めていることは、簡単にテーマが変更できることだと考えました。以前のUIのように詳細画面でテーマ変更をする構成にしてしまうと詳細画面に遷移する手間が増えてしまいアプリの使用感が低下してしまうと考えました。
２点目は他の設定項目と違い、仮にタップミスをしても大きな影響を与えないからです。ユーザーが間違えて変更したいテーマと違うものを選択しても、画面の表示テーマが変わるだけでアプリの使用に大きな影響は与えない点と間違えても容易にテーマの変更ができるためデザインを変更しました。

(左：改善前 / 右 : 改善後)

振り返り

【良かった点🙆‍♂️】
・シンプルな設定画面の中でユーザー視点でUIを考えられた
・ユーザーのミスタップを考慮してデザインできた

【反省点🙅‍♂️】
・設定のタイトルだけでは内容が伝わりにくい箇所があった

　

今回作成した「ファッション用SNSアプリの設定画面」では、良かった点としてユーザー視点でUIをデザインできたことだと思います。「ユーザーが何を求めてこの項目をタップするのか」について自分なりに考えてUIを作ることができたので、使用感の良いデザインに仕上がったと思います。

反省点としては、設定項目のタイトルだけでは何を変更する項目なのか分かりにくい箇所があったため、タイトルの下に説明文を追加するとより分かりやすいUIになると思いました。

おわりに

今回は「設定画面」のUIをデザインしました。設定画面はどのアプリにもほとんど使われる基礎的な画面ではあるものの、情報が多いため構造を考えることが難しかったです。
また、ユーザー視点でUIを考えられた点が今回のデザインの中で最も良かった点だと思います。このユーザー視点はこれから色々なアプリをデザインしていく中で必ず必要になるので、常に意識してデザインできるようになりたいです。

次回の投稿は、DailyUI 8日目のお題である「404ページ」のデザインについてまとめていきます。

最後まで読んでいただきありがとうございました！🙇‍♂️