サーバーサイドな人がフロントエンドでUI/UXを始める最初の一歩

about me

普段サーバーサイドエンジニアとして働いており、クラウドサービスによるインフラの構築やjsのフレームワークを使ったフロントエンド開発にも携わってます。プログラマー視点でフロントエンドには携われてますが、「デザイン」を意識した時にノウハウや知識などが足りないと思い独学で学んだことを共有しようと記事に起こしました。

target

UI/UXについてしっかりとした書籍を読む手間を省きたい人向けの読み物です。
- さらっとUI/UXについて知りたい人
- これからフロントエンドで「UXデザイン」を考えていきたい人
- UXデザイン設計の視点でフロントエンド開発を考えたい人
- UI/UXについて学ぶ際に何から手を付けるべきか悩んでいる人

useless

UXデザイン視点の記事なので次に当てはまる方には役に立てないと思います
- フロントエンドの開発を「コーディング」視点で学びたい方
- モダンな開発環境を整える手法を知りたい方
- UI/UXデザインにより具体的にデザインされたものを見たい人
- UIの設計ノウハウを知りたい人

サーバーサイドな人がUI/UXに取り組むには

これから開発するサービスでは要件定義のフェーズがあるかと思うので、UXデザインを一緒に考慮できると思います。
既に開発中のサービスに関しては、以下のステップを実施してみましょう。

• UXとは何かを知る（この記事で概要は掴めるはず）
• ユーザーの課題を明確にする
• ペルソナとユーザー体験を考える
• ユーザー体験の障害となる物がないか見つける
• サービスに反映してみる

UXとは何かを理解するところから始められるように、以降では一般的な概要をまとめてあります。

UIとUX

そもそもの定義を確認

UI (User Interface)

ユーザーが操作したり、操作した結果を表示する仕組みをUIと呼びます。
パソコン内のことに関わらず、リモコンやゲームのコントローラーもUIです。
フロントエンド開発でデザインを考える際は、Webページの画面や表示しているモニター、モバイルデバイスなどが主なUIです。

UX (User Experience)

ユーザー体験のことです。
提供するモノを通してユーザーが得られる体験のことを指します。
モノは提供する製品やサービスを指し、モノを受けることにより生じる「コト」について考えデザインすることをUXデザインと呼びます。

デザインする

一般的に「デザイン」というと、アーティスティックなイラストやフォトグラフなどを使って見た目を描くことがイメージされると思います。
UXデザインでは「コト」を考えるので、提供したモノにより体験して欲しいコトを思い描くことも「デザイン」となります。
「ECサイトを作成する」は前者のデザイン、「インドネシアの工芸品を世界に発信するためECサイトを作り、文化を伝える」ことまで考えると後者のデザインの意味を持ちます。

UIデザインとUXデザイン

UI/UXと一括りに表現されますが、デザインする範囲は異なります。

UIデザイン

Webサービスの作成においては、画面構成や機能への導線を考えデザインします。
主に「わかりやすい」、「使いやすい」といった「易い」を求めてデザイン設計していきます。

UXデザイン

Webサービスの作成においては、どうしてWebサービスを作りたいのか、誰に向けたサービスか、サービス提供後にユーザーに何を得て欲しいか、ユーザーの期待は何か……これらを考えることがUXデザインです。
サービスの企画段階からユーザーが提供された後の期待する効果までを思い描くことが求められます。
Webサイト利用中のユーザー体験も考えておく必要があるため、UIデザインについても把握が必要です。
（このためUI/UXと括られることが多いです）

○○デザイナー

UIデザイナーやUXデザイナーとはどのような人なのか

UIデザイナー

UIデザイナーは、提供するサービスの利便性と明瞭性を向上する設計/デザインを行うため、開発チーム寄りの人となります。
Webサービスの開発ではWebデザイナーが役割を担うことが多いですが、ゲーム開発では明確にUIデザイナーとして別れてます。

UXデザイナー

UXデザイナーは、クライアントの課題を解決するための方法と期待する効果までをデザインするため、営業やマーケティングの人が担うこともできます。もちろん開発チーム寄りの人でも担えますが、開発者視点よりもユーザー視点であることを求められます。

「モノ」売りから「コト」売りの時代へ

科学や技術の進歩のおかげで、人間が便利に暮らすためのモノはある程度出揃ってきています。
モノが出揃う事で機能的な差異は少なくなり、代替品や複数のモノを所持することでやりたい事ができる時代です。

競争要因の変化

モノの差異が少なくなると、差別化できるのは価格やバリエーションなど競争要因が少ないという事です。
ですので、この時代にモノを売ったり広めたりするには「コト」が最大の差別化要因となります。
マーケティングでいう「ブランディング」が重要となります。

求められている「コト」を理解して「コト」を提供する

UXデザイナーは、求められている「コト」を提供するための仕組みづくりをデザインするため、ニーズを把握するスキルや効果的な提供方法を考える力が必要です。
そのため、ユーザー体験を考える時にマーケティングの知識があるとより的確にクライアントの要求に応え、ユーザーが感じていることをキャッチする手段も増えると思います。
ブランディングや消費者購買行動、サンプリングなどある程度知っているだけでもUXデザインに生かせると思いました。

UXデザインでやること

実際にUXを考えてデザインしていくためには、何をすれば良いでしょうか。
目的は「ユーザーに体験してもらいたいことをデザインする」なので、体験させたい内容と、体験できる仕組みを作る必要があります。
体験させたい内容は、クライアントやサービス企画者と話し合って固まると思います。
以降は、体験できる仕組み作りの際に使う手法を紹介します。

ペルソナの設定

提供するモノを利用するユーザー像を作成します。
どんな人がモノを利用するか、利用するときにどんな行動をとるかなどを想定してコトをデザインしていきます。
そのため、ペルソナは具体的に細部まで設定することが重要です。誰もが同じような人物像をイメージできる情報をペルソナに設定しましょう。

• 基本的な情報（名前、年齢、生年月日、性別、家族、職業）
• 性格、趣味、体調
• 悩み

ペルソナを設定することで、「こういう人物だったらどんな見た目が良い」とか「操作の仕方はこれがいい」などその人に向けたデザインが可能となります。
ここで設定するペルソナは、提供するモノを使うであろう人物にすることが多いですが、市場の拡大や顧客層の拡大などをしたい場合は、訴求したい人物像を設定してデザインすることも効果的です。

ペルソナの行動を考える（カスタマージャーニーマップ）

ペルソナの設定をしたら、その人物が体験する流れを考えます。
提供するモノを利用している時だけではなく、利用前から利用後までの体験を網羅して時系列で考えていきます。
この時にユーザー体験の流れを分析するために「カスタマージャーニーマップ」を作成します。
有名なサンプルでは、スターバックスコーヒーのカスタマージャニーマップがあります。

Starbucks Experience Map

時系列

• 利用前（利用に至るまでの動機）
• 利用中
• 利用後（再起的な体験や継続的な体験も考慮すると良い）

体験を考える要素

• 行動
  • ▼例
  • 何かを探している
  • 誰々から何について教えてもらった
  • サービスにアクセスする
  • 複数の情報を比較する
  • 意思決定する
• 思考や感情
  • ▼例
  • こんな時に○○があったらいいな
  • ○○と聞いたので気になる
  • 見た目がシンプルだな
  • AよりBの方がいいな
  • ちゃんと完了したのか不安だな
• 課題（ニーズや悩み）
  • ▼例
  • 検索ヒット率が悪い
  • 類似サイトがありよく間違われる
  • 画面読み込みに時間がかかる
  • 比較候補が上下に出るのでスクロールが必要

ペルソナの行動と体験を考えて課題となる、なりそうな事を出していく。
課題の改善をしていくことで、ユーザー体験の向上を図っていく。

カスタマージャーニーマップの効果

利用前から利用後のユーザー体験まで考慮するため、提供するモノに必要な機能や導線も見つけることができます。
例えば、「老舗の和風旅館で昔ながらを感じてもらえる旅館予約サイト」を提供していた場合、
予約までは和風の見た目で統一されていたら、利用後のメール通知や問い合わせ用画面も同じテイストで統一されているべきです。
役割が別れてしまう機能にまで「ユーザー体験」を意識してデザインできるため、満足度の高いユーザー体験を提供できる効果があります。

ユーザーインタビュー

提供するモノを利用しそうな人に直接アンケートや聞き込みをする手法です。
ユーザーの課題や行動を決める価値観などを知ることができるので、ペルソナの設定やカスタマージャーニーマップを作成する際に有効な手段です。

目的別のインタビュー方法

インタビューは得たい情報により1対1か1対複数で行います。

1対1で行う（デプスインタビュー）

ユーザーの行動心理や背景について掘り下げたい時、デリケートな質問をしたい場合1対1で行うのが効果的です。

1対複数で行う（グループインタビュー）

提供するモノに対してのユーザーの反応や理解度、受け入れ度合いとそれらの理由を知りたい時、グループによる新たな気づきやアイデアを出したい時に効果的です。

ユーザビリティテスト

提供するモノの実物や試作品で、ユーザーを想定した人に使ってもらう事で使い勝手をテストします。
UIについてリリース前にフィードバックを受けるのに効果的です。

テスト方法

提供するモノをテストしてもらう人を集め、目的を伝えてモノを使ってもらいます。
この時に「使い方」を指示するのではなく、あくまで目的だけ伝えます。
そして、使う際に思ったこと、感じたことを声に出してもらいます。

例：
担当者　　「○月○日に旅行へ行くので宿泊したい旅館を自由に選んで予約してください」
テスター　「予約のボタンがあるので押してみます」
テスター　「予約画面になりましたが、旅館や日付が選択式で旅館の情報がわかりません」
テスター　「最初のページに戻って旅館の一覧を見てみます」
担当者　　「（・・・泊まり先が決まってる人向けの予約ボタンになっているな）」

使い勝手を知ることでUIの利便性を向上することができます。
Webサービスにおいては、操作しやすくわかりやすいというのは、ページの離脱率にも影響があるので重要なポイントです。
操作の仕方でユーザー体験が意図したものと崩れないのか、UXの視点でも観ることができます。

UIの改善に反映する

使い勝手が把握できたらUIに反映します。この時、UXで考えた体験にマッチしないことは検討材料として残し、反映は熟考しましょう。
開発者が提供する

プロトタイピング

ペルソナやカスタマージャーニーマップの作成後に、プロトタイプ（試作品）を作って使ってもらうこともUXデザインの中で役立ちます。
従来的な「要件・設計＞画面設計＞コーディング」という工程だと時間がかかる上に修正も工程ごとに発生するので時間がかかります。
現在はアジャイル開発によるリリースサイクルの短期化や、デザインツールの充実により早めにユーザーに触れてもらえることができます。

プロトタイプのフィードバック

Adobe XDやFigmaといったデザインツールがあるため、Webサービスにおいてはプロトタイプの作成とフィードバックを受けるまでの時間が早くなっています。
プロトタイプを使用したフィードバックをペルソナやカスタマージャニーマップにも反映することで、UXデザインの品質向上になります。

終わりに（二歩目以降について）

UI/UXデザインはユーザーが体験することに注目した設計（デザイン）手法です。

UIデザインについては、「使いやすい」「わかりやすい」「覚えやすい」をキーワードにデザインやレイアウトについて学習していけると思います。
実際にサンプルなどを見ながら学べると良いかと思います。

UXデザインについては、「ペルソナ」「ユーザーニーズ」「ユーザーストーリー」などをキーワードに学習していけるかと思います。
「UXデザインプロセス」を紹介されている記事もあるので実用的に学べると思います。

ユーザーに「コト」を提供するため、UXデザインとはこいうものだ！というレイアウトや見た目はありません。対象のユーザーにより、効果的な見た目を考えていくのがUI/UXです。

学んでいく中で、行動心理学やカラーコーディネート、マーケティングや統計学などの知識が役に立つ分野なのかとも思います。見せ方や見え方を意識する舞台美術さんやフラワーアレンジメントの方も、向いているのかもしれません。

システムが快適に動いてくれるようにという視点から、使う人が快適か、期待した体験が得られるかという視点になれれば、UXの一歩は踏み出せていると思います。