Daily UI #007 「Setting」設定画面のUIデザイン
Contents
こんにちはゆうきです！
7日目のお題は「Setting」ということでアプリの設定画面のUIを作成しましたので、そのまとめになります。
7日目のお題
7日目のお題は「Setting」設定画面に関連するUIデザインになります。
前回に引き続き、コスプレ特化型アプリ「CosComi」の設定画面を作成していくことにしました。
業種をランダムで選ぶ、、、みたいなのはどうなったのかな？
DailyUIは時短が大事なんですよ、、、
制作の流れ
ペルソナを設定
ペルソナは#006「User Profile」と同じくCosComi制作時に設定したペルソナを使用しています。
SNSやコミュニティアプリとしての側面からアクセシビリティに配慮した設定も実装しました。
アプリの設定画面を調査
Androidとインスタグラムの設定画面
双方の共通点は、大きなフォントとアイコンを組み合わせた設定項目が特徴です。
Androidに関してはUI設計のガイドラインに寄り添ったデザインで、「わかりやすい表示」「項目の直感的な構成」「見つけやすい設定」などの条件を反映している印象です。
AndroidアプリかiOSアプリかで求められるUI設計が変わってくるので、ガイドラインは読んでおきましょう！（私もですが…）
・iOSアプリのデザインガイドライン
・Andoridアプリのデザインガイドライン
その特徴を反映しているインスタグラムに関してはすべての設定項目に対して適切なアイコンが設定されており、設定内容を直感的に理解しやすいデザインになっています。
アイコンとテキストを組み合わせる理由
- 視覚的な認識の向上
- 設定内容と対応するアイコンを組み合わせることで、ユーザーは直感的に設定項目を理解しやすくなる
- デザイン観点の魅力
- アイコンをつけることで視覚的なデザイン要素としても機能するので、画面全体の魅力や見栄えの向上の役にたつ
- 言語の壁
- アイコンの意味を理解できれば、言語に依存しない情報伝達手段として利用することもできる
という解釈から、アイコンを組み合わせた設定項目を作成していくことにします。
UIデザインを作成
設定画面TOP
シンプルなデザインでSNSアプリにおいて必要な設定項目にアイコンを付属させました。
特定の情報を強調する必要がない場合、フォントやアイコンを控えめにすることで、全体的なバランスを保ちながら、画面上の情報が過度に目立つことを防ぐことができると考えました。
「CosComiについて」の項目ではコスメアプリ「LIPS」を参考にアプリ利用規約や運営情報などをまとめています。
アカウント設定
複数のメールアドレスを使用していると迷子になることもあるかと思いますので、その際にどのメールアドレスを現在使用しているのか伏せ字で表示するようにしています。
設定項目の下に簡単な設定内容を書く理由
- 簡単な設定内容を追加することで、ユーザーが設定項目の目的や機能を理解しやすくなる
- ユーザーが項目をクリックせずに直接内容を確認できるため、利便性が向上
- 視覚障害のあるユーザーや読み込み速度の遅い環境下でも情報を理解しやすくなる
プライバシー設定
イーロンマスク氏がXのブロック機能廃止を発表し、Googleとアップルのアプリ規約違反である
という記事から、SNSアプリを考えるときにブロック機能は必須ということを初めて知りました笑
ブロック以外にもユーザーワードのミュート機能も実装しています。
コ⚪︎ナ渦で毎日不安な情報が流れてたときTwitterのミュート機能はかなり活用しました
アクセシビリティ
SNSにおけるアクセシビリティは特定の状況下にある人々が、ソーシャルメディアを利用する際に、情報にアクセスしやすくするための取り組みや機能を指しているようです。
色のコントラストやアプリ内のアニメーション動作を制限したり、ダークモードとライトモードの切り替えなどの機能があります。
X(旧Twitter)を参考に内容を設定しました。
通知設定
SNSの通知設定で当たり前のように見られると思いますが、トグルボタンの切り替えでデザインしました。
トグルボタンの実装が多い理由
- オンとオフの状態を直感的に示すことができる
- 通知の設定など、複数のオプションを提供する場面で有用
- 通知の設定が即座に変更される
- 一般的なUIパターンの一つであり、多くのユーザーが使い慣れている
という特徴から多用されている傾向にあります。
まとめ
#007「Setting」設定画面のUIデザインのまとめです。
- アイコンとテキストの組み合わせによるユーザーへの素早い情報認知の提供
- ブロック機能はGoogle、アップルのアプリ規約においてユーザーが安全に利用するための必須機能
- 動作やアニメーションはアクセシビリティに考慮し、実装にあたってはアニメーション停止を想定したエンジニアフレンドリーの観点でデザイン考える
- トグルボタンは直感的にオンオフを切り替える場面や複数の通知を設定する上で有用
#007 「Setting」設定画面 プロトタイプはこちら ↓ ↓
今回はユーザーがSNSとして利用する際に必要な最低限の設定項目を考えましたが、アプリの実装内容により過去の履歴やコメントについての設定項目も増えていきそうな気がしているので、今後のCosComiアプリの作り込みを通して内容も変えていこうと思います！
最後までご覧いただきありがとうございました！
次回の404ページは、ポートフォリオ作品のホテルサイト「HOTEL小町」の404ページを作ったのですが、あまり語ることがないので「Works 制作作品」からご覧になってください。
