![見出し画像](https://assets.st-note.com/production/uploads/images/144367987/rectangle_large_type_2_1dd0bb11eee607e5904e13dbf881b234.png?width=800)
UX/UI専攻 1日目&2日目
はじめに
5月末からUX/UIを学ぶべくスクールに通っているのでそこで得た知識や気づきをアウトプットしていく。
(前提)用語確認
UI = User Interface
UX = User Experience
UXデザインの5段階モデル(J.ギャレット氏の著書「Elements of User Experience」で提唱された)
UXデザインする際のフレームワーク
デザイナーは表層がイメージできていて、それを実現するために戦略から考えるみたいなこともある
![](https://assets.st-note.com/img/1718620742234-1rKx5HSkah.png?width=800)
UIデザインとは
コンポーネントを組み合わせて画面を設計すること
コンポーネントはデザインシステムに集約する
デザインシステムは明確な基準に基づいた再利用可能なコンポーネントの集まり
コンポーネントをレイアウトする
商業デザイナー(プロ)
思考のプロセスをしっかりとした方法論に落とし込む → フレームワークを利用するなどして鍛えられた審美眼と共に製品のデザインへと落とし込む
一貫性
プロダクト内の一貫性
同じような画面は同じように操作できる
どの画面も似たような画面になていると前回の学習が不要になる
同じ形状のものは同じ操作であるべき
例えばボタンと同じ形をしたステータスラベルは、結構な数の人がタップをしている。これは改善すべき。
プロダクト外の一貫性
前提
ユーザが自分たちのサービスを使っている時間は「他のアプリ全体の利用時間の数%以下」。
メガサービスを使っている時間が圧倒的に多い
→メガサービスに操作性を合わせるべき
考え方
世の中のアプリと合わせる
世の中のアプリを操作する中で形成されたデザインのスタンダート(ユーザのメンタルモデル)に合わせる
意識すると良いこと
世の中のアプリを積極的に(触るだけでなく)使ってみる。
「使ってみる」というのが大事。触ってキャプチャをとってペタペタと貼って並べるのは無意味。とにかく使ってヘビーユーザになること。
Complexion Reduction
Complexion Reduction とは 「色彩を抑えたデザイン」
①追加装飾を極力使わない
画面内に装飾的な要素が多く配置されていると、ある要素(機能)を目立たせるために過剰な装飾をしないといけなくなる
ユーザが画面を見た時にコンテンツが目に入り、その後に機能が目に入るの順番になるのが良くない
②UIの「見た目と動き」に一貫性を持たせる
上記一貫性の通り
③ナビゲーションを見やすくする
iTunesの昔と今のUI比較が例に出ていたけど、あまりピンと来なかった。。。
④余白を利用してセクションわけ
罫線は極力使わず「余白」を利用する
TODO(すぐやること)
世の中のアプリを積極的に(触るだけではなく)使ってみる。
金融系のアプリにかかわらず幅広く
感想
Complexion Reduction はざーっと説明されただけなのであまりピンと来なかったし、実務に活かすイメージが沸かなかった。
まだ2日なので新しい気づきや知識は少ない。これからに期待。
ほんとにいろんな人がいることがわかったので、もっと積極的にメンバーと交流していこうと思う。
この記事が気に入ったらサポートをしてみませんか?