2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

UI/UXデザイン入門編

Last updated at Posted at 2022-05-07

画面設計、ワイヤーフレームなども業務で担当したり、Google認定のUXデザインコース受けたり、本を読ん得た知識を箇条書きではありますが備忘録としてまとめました。

UXデザインとは

  • ユーザーが製品に触れる前・最中・後のすべての体験を設計すること
  • ユーザーが快適に製品を利用でき、ポジティブな感情を抱いて貰るように設計すること

UIデザインとは?

  • 良いUXを実現する為の画面、フロー、操作を視覚的に設計すること
  • ユーザがUIに触れた経験から抱く感情、反応をより良くなるように設計すること

UIは、UXを構成する要素の代表的なものですが、UXという大きな枠組みの中に位置する。
なので、UX/UIデザインと呼ぶケースも多々あります。

また、
UXプランニング (どう使ってもらうか、どう感じるかの設計)
UIデザインシステム (視覚的にどう触れるかの設計)
とも言われています。

なぜUXデザインが必要なのか?UXデザインの使命は?

ユーザーが製品やサービスに触れて、

  • 好きになってもらう為
  • ポジティブな感情を持ってもらう為
  • 繰り返し使ってもらう為
  • 繰り返し買ってもらう為
  • 繰り返し来てもらう為

つまり、ユーザーの行動、習慣を変えることがUXデザインの使命といえます。

製品やサービスを使いやすい、楽しいと思ってもらえれば、口コミで勝手に広まってビジネスへの貢献にも繋がる。

ユーザー体験の「体験」とは?

体験はサービス利用中だけではなく、前と後も含む!

  • 予期的(利用前)
  • 一時的(利用中)
  • エピソード的(利用後)
  • 累積的(利用時間全体)

の4段階のストーリーになる。

ペルソナとユーザーフロー

  • ペルソナは「誰が使うか」
  • ユーザーフローは「どう使うか」
    なので、両者をセットで設計する必要があります。

ペルソナとは?

サービスの典型的なユーザー像のことで、マーケティングにおいて活用される概念。

実際にその人物が実在しているかのように、年齢、性別、居住地、職業、役職、年収、趣味、特技、価値観、家族構成、生い立ち、休日の過ごし方、ライフスタイル……などリアリティのある詳細な情報を設定する。

ユーザーフロー

ユーザーがアプリの中でどういう流れで操作をして、目的を果たすのか?を設計する
例:ECサイトで買い物する場合

  1. ECサイトページを開く
  2. 欲しい商品をさがsカゴに入れる
  3. お会計ページへ進む
  4. カゴに入れた商品の内容を表示して、間違いないかを確認、あれば修正
  5. 住所、クレジットカード情報を入力して支払い確定
  6. 買い物完了

UXデザイナーの役割

  • ユーザーユーザーがどう製品を使うかに興味を持つ事が一番大事
  • ユーザーの使いやすい使いにくいをしっかりと言語化できる

アクセシビリティとユニーバサルデザイン

両者は似ていますが、以下のような違いがあります。

アクセシビリティ ユニーバサルデザイン
対象 障がいのある人 すべての人
目的 制限を乗り越える 制限をなくす
音声読み上げ、字幕 多言語対応、誰でも使えるUI、アイコン

アクセシビリティ

近づきやすさ、利用しやすさ、などの意味を持つ英単語。
ITの分野では機器やソフトウェア、システム、情報などが身体の状態や能力の違いによらず様々な人から同じように利用できる状態やその度合いのこと。

これを意識したデザインをaccessible design アクセシブルデザインと呼ぶ

ソフトウェア開発では健常者のユーザー向けではなく、障害者でも使える様にしないといけない。障害者でも使える様に作ることが結果として健常者にもメリットとなる。

例:タイプライターはかつて目の見えない人が文書を書くのに役立ち、健常者は使ってなかったが、結果として健常者も使う様になった。

ユニバーサルデザイン

文化・言語・国籍や年齢・性別・能力などの違いにかかわらず、出来るだけ多くの人が利用できることを目指した建築(設備)・製品・情報などの設計(デザイン)のこと

例:デフォルトのアイコンを女性、男性で分ける、顔文字の肌の色を人種別に分ける、多言語対応するとか、

支援技術:Assistive Technology

障害者が機器を操作するために手助けする技術

例:手が使えない人向けのアイトラッキング操作のコンピューター、声で操作できるVUIとか、目が目ない人のための声での道案内、足が不自由な人でも運転できる車など、

プロダクト開発ライフサイクル5段階

  • Brainstorm(リサーチ)
  • Define(ターゲットユーザーを決める)
  • Design(ストーリーボード、スケッチ、ワイヤー、などで可視化)
  • Test(ユーザーに見てもらう)
  • Launch(これで終わりではない、世の中に出して反応をみる)

この全てを一人のUXデザイナーが担当するケースも小規模のベンチャーではあるかもしれないが、大体は担当が分かれる。

UXデザインの3大フレームワーク

  • 人間中心設計
  • 5段階モデリング
  • デザイン思考

の3つがある。それぞれとても深いので詳細は割愛します。

良いUXデザインを設計するのはソフトウェアの世界だけではない

  • ビル、駅の中のサイン
  • 駅の乗り換え案内
  • 空港のチェックイン
  • 使いやすいフライパン
  • 持ちやすいペットボトル

などなどソフトウェア以外でも優れたUXデザインの設計例は沢山ある。

ソフトウェアに限定せず、色々なユーザー体験から考察して、自分のサービスに転用していく力も必要。

優れたUIUXデザインの特徴

  • ユーザーが考えなくても直感的に使える
  • ユーザーファーストで使い心地を考え抜かれている
  • アプリ内の居心地がいい
  • 飽きない、長時間使ってしまう

まとめ

どんな業種・職業でもUXデザインのフレームワークや思考は役に立つと言われていますし、ITに問わずデザイン思考を導入する企業が増えています。

フロントエンドエンジニアはユーザー体験を提供するプロであり、ユーザーが触るUIの実装(最後の部分)を担うプロ。
このプロとして、実装だけではなくその上流工程も含めて、担当領域を広げてUIUXデザイナーの肩書きも持ちたいと思います。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?