プログラミングマガジン

プログラミングを中心にIT技術をできるだけわかりやすくまとめます。

  • ホーム
  • UX
  • 【UX】「UXデザイン」のプロセス
 
 
     
  • サーバー言語  
    • Ruby
    • Rails
    • PHP
    • Laravel
  •  
  • データ設計  
    • NoSQL
    • SQL
    • RDB設計
    • Oracle
  •  
  • インフラ  
       
    • AWS
    •  
    • 基本
    •  
    • セキュリティ
    • コンテナ全般
    • Linux
    • Git
  • Web
       
    • Web開発
    • JavaScript
    • Vue.js
    • React
    • TypeScript
  •  
  • 設計  
       
    • 実装設計
    •  
    • 認証設計
    • 例外設計
    •  
    • 動画設計
    • DDD
  • 問い合わせ
  

【UX】「UXデザイン」のプロセス

01.02

  • miyabisan2
  • コメントを書く

この記事は3分で読めます

UX自体は形のない物ですが下記のような流れで仕事を進めることになります。

企画検討

行動観察

個々のセンスに依存する作り手側が時代を読んでニーズを見つけるより、最近はユーザーが持っている潜在的なニーズを得てそれを元に企画を考える手法が一般的になっています。実際の現場でユーザーの行動を観察する行動観察により潜在ニーズを発見します。先入観に囚われすぎると思わぬ発見ができにくかったりするので思い込みは避けます。

フォトダイアリー

行動観察は観察者に過剰な労力がかかるので写真とその時の情報を行動者に文書化してもらうフォトダイアリーという簡易的な行動観察の手法も取られる場合があります。

アンケート

あまり込み入った質問は不向きなので潜在ニーズを得るというよりは大まかなニーズの傾向を把握するのに用いられます。点数を付けてもらうような形式にしておけば定量化も可能です。

インタビュー

質問する側も回答する側も自由に行えるので潜在ニーズの発掘ができる可能性が上がる。定量的なデータは得にくく定性的な情報収集にむいています。

  • 直接インタビュー
  • 電話インタビュー
  • ビデオチャットインタビュー

ジャーニーマップ

収集したデータを記述して関係者と共有する手法、時間軸でユーザーがどのような変化が起きたかまとめます。Webや実店舗等の異なるメディアをまたぐユーザー行動の変化を表現するのに適しています。特に昨今は一つの複数メディアを用いて行動するのが当たり前の時代なのでそれらを含めてユーザーの行動を把握することが非常に重要になっています。

  • 行動の変化
  • 感情の変化
  • 思考の変化

ペルソナ/シナリオ

架空の個人のプロフィール、行動等を詳細にまとめます。実在の人物像として感じられることが重要。ターゲットを明確にすることで製品の特徴を前面に出していくことが求められる。結果として人の心に刺さりやすい製品になります。広い層にうけるような製品を目指すとなんの特徴もない製品になりかねないので注意です。

  • ペルソナは1製品に複数作る場合がある(親子をターゲット)
  • ペルソナは関係者間で合意を取りながら作成する。

ストーリーボード

漫画のようにペルソナがゴールまで達成するまでの流れを絵や文字で表すことです。ここで考えたプロセスに沿ったUIを作れば良い。このストーリーボードを作ることこそがUXデザインの肝と言えるでしょう。

仕様検討

最適なUIを模索します。下記の手法で形にしていきます。最近ではワイヤーフレームの作成や画面フローの作成せずに、まとめてXD等のプロトタイピングツールを使って作成することが増えているようです。クライアントによってどのような手法を使うかは使い分けが必要になるようです。

ワイヤーフレーム

各画面内のボタンや表示エリアのレイアウトを簡単な情報構造で表したものでスケッチのようなものです。複数画面ある場合は各画面に置いてそれぞれワイヤーフレームを作成します。

用途

情報構造についてお互いの認識をすり合わせるために使います。

デザインカンプ

Photoshop等で画像や文言等を当て込んでワイヤーフレームよりも詳しく見せる手法です。まだ未定の場合は仮で当て込んだりします。

画面フロー

画面遷移図とも呼びます。通常はワイヤーフレームと同時並行で作成されることが多いです。

ペーパープロトタイピング

案が妥当かどうか簡易的にテストをすることです。被験者を実際に用意して進行役が被験者の操作に応じて画面を遷移させたりします。(実際に動くものはないです。)、細かい仕様のテストはできないですが大雑把な根幹部分に関わる問題は解決できます。

また、プロトタイピング自体は第三者にレイアウトや意図をわかり安く伝えることができるWebデザインの手法として広く普及しています。

主なプロトタイピングツール

今は多くのプロトタイピングツールが出ています。特に人気なのは「sketch」と「Adobe XD」でしょう。

  • portt
  • STUDIO
  • inVision
  • Marvel
  • CanvasFlip
  • Principle
  • Botsociety
  • Origami Studio
  • Adobe XD
  • sketch

モックアップ

質感やスペック等を得るものです。HTMLやCSS等でWebブラウザ上で客に見せていくこと。サーバーサイドの実装までは行いません。

設計開発

実装

製品を作ることです。そのままの意味です。

ユーザビリティテスト

被験者にテストをしてもらいます。被験者には頭の中で考えていることを発話しながら操作してもらう思考発話法等があります。定性的で原因を推測しやすく総合評価が可能になります。

ヒューリスティック評価

被験者を使わず専門家が経験に基づいて行うユーザービリティ評価になります。それでも各個人の評価に依存してしまいがちになるので複数評価者を用意してチェックリストを使って客観的に評価する手法もあります。

認知的ウォークスルー

専門家が被験者になりきってどのようなつまづきが発生しそうか考えることです。完成度の低い仕様書やプロトタイプレベルでも評価は可能です。(一般の被験者には難しいことなので専門家に行ってもらうことが可能です。)

リリース後

リリース後は製品のフォローをします。フォローで得られた知見は次の製品開発にも役立ったりします。

アクセスログ

Webサイトのアクセス解析をする。開発前のテストに比べて何倍ものデータが手に入るので結果を簡単に定量化できます。欠点としては「ユーザーの振る舞いの原因」はわからないことです。

A/Bテスト

同じページに対してA案、B案と作成し同時に公開します。確率50%でアクセスを振り分けるようにします。成績が良い方のページを採用します。ハードウェアとかではできないのでWebならではのテスト方法になります。

ユーザーの声を収集する。

市場における自社製品の実態を把握します。

  • ネット上でのレビュー、SNS、口コミ
  • アンケート、インタビュー、ユーザビリティテスト

競合との比較

すでにリリースされた製品を評価します。二つの製品を評価する際に前に見た製品が後の製品の評価に影響するという順序評価等を意識することも重要になります。影響しないようにクロスさせたりある被験者には一つの製品の評価だけ求めるというような手法をとったりします。

ガイドライン

評価によって得られた効果のある知見を設計ガイドラインとしてルール化すること。開発の手戻りの手間が減ります。新しい担当者の教育用資料としても活用できます。

手法の開発

これまでにはない成果を出したい場合には新しい手法を開発する必要があります。

  • 2020 01.02
  • miyabisan2
  • コメントを書く
  • UX
  • Tweets Twitter
  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. 2020 01.02

    【UX】「ユーザビリティ」について

  2. 2020 01.02

    【UX】「UX(ユーザー・エクスペリエンス)」とは?

  3. 2020 01.04

    【UX】UIパターン一覧

  4. 2020 01.02

    【UX】「UIデザイン」の基本ルール

  • コメント ( 0 )
  • トラックバック ( 0 )
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

返信をキャンセルする。

【UX】「UX(ユーザー・エクスペリエンス)」とは?

【UX】「UIデザイン」の基本ルール

RETURN TOP

アーカイブ

  • 2023年1月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年6月
  • 2021年5月
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年6月
  • 2019年5月
  • 2019年3月
  • 2019年1月
  • 2018年12月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

カテゴリー

  • .NET Framework
  • Ajax
  • Android
  • Apache
  • API
  • Auth0
  • AWS
  • Babel
  • Babylon.js
  • Bitbucket
  • BootStrap
  • C#
  • C++
  • CGI
  • CSS
  • Cypress
  • C言語
  • DBスペシャリスト
  • DDD
  • DevOps
  • Django
  • Docker
  • Eclipse
  • EKS
  • Firebase
  • Git
  • GitHub Actions
  • GitLab
  • GraphQL
  • gRPC
  • Hasura
  • Heroku
  • HTML
  • HTML5
  • Java
  • JavaScript
  • Javaサーブレット
  • Jekins
  • JIRA
  • jQuery
  • JSP
  • JSTL
  • JUnit
  • Kubernetes
  • Laravel
  • linux
  • Mac
  • Maven
  • MySQL
  • Next.js
  • nginx
  • Node.js
  • NoSQL
  • Nuxt.js
  • OAuth
  • Open ID Connect
  • Oracle
  • OS
  • PHP
  • PL/SQL
  • PostgreSQL
  • PowerShell
  • Prisma
  • PWA
  • Python
  • React
  • Recoil
  • Redis
  • Redux
  • Rspec
  • Ruby
  • Ruby on Rails
  • Salesforce
  • Sass
  • SEO
  • Slack
  • SPA
  • Spring Boot
  • Spring Framework
  • Spring MVC
  • SQL
  • Struts
  • Struts2
  • Sublime Text
  • Swagger
  • Tailwind CSS
  • Three.js
  • Tomcat
  • TypeScript
  • UML
  • Unity
  • UX
  • VB.NET
  • Visual Basic
  • VSCode
  • Vue.js
  • WebGL
  • WebHook
  • webpack
  • WebRTC
  • WebSocket
  • Webサービス開発
  • Webデザイン
  • Web技術
  • wireshark
  • XD
  • XML
  • インフラ
  • オブジェクト指向
  • クラウド
  • ゲームプランニング
  • ゲーム開発
  • サーバー
  • システム開発
  • スクラム
  • スマホアプリ開発
  • セキュリティ
  • その他
  • データベース
  • データ分析
  • デザインパターン
  • テスト
  • ネットワーク
  • バージョン管理システム
  • ハードウェア
  • プログラミング全般
  • マイクロサービス
  • マルチメディア
  • リファクタリング
  • 人間関係
  • 会計知識
  • 体調管理
  • 副業
  • 動画
  • 国際化
  • 応用情報
  • 情報処理技術者試験
  • 文字コード
  • 日常生活
  • 未分類
  • 業務知識
  • 要件定義
  • 設計
  • 関数型言語
RETURN TOP

Copyright ©  プログラミングマガジン | Wordpress Thema | @