00:06
9月20日、火曜日ですね。 遅刻は朝9時を回りました。
はい、おはようございます。 kkeethことぐわはらです。 本日もNo.88 朝活を始めていきたいかなと思います。
はい、えーっと
今朝もニュースを見てから今に至るんですけど、 まぁなかなか痛々しいニュースだったり、
自然現象における自然災害だったり、 本当最近いろんなことが勃発して、
なんかちょっと大変な世の中になってきたなって感じはしますね。
まあですけど、今日も一日頑張っていきたいと思います。 では、えっと今日はですね、
タイトルがあります。 The UX Design Process- Making the Most of User Experience ですね。
はい、まぁUX周りの体験の話があったので、
2日前も同じものを、似たようなやつを読んだんですけど、 あのUXの観点のなんだっけ、モドルボタンの
挙動だったりデザインだったりみたいな話があったんですけど、 そこに載ってたUXデザインの話ですね。
のリンクがあったので、ちょっとパラッと見た感じ面白そうだったので、 やっぱりこれを見たいなというところで、
今日はこいつを読んでいきたいなと思ってます。 はい。
Kさんとプテラノドさんですね。 おはようございます。 ご参加いただきありがとうございます。
では、早速記事入っていきたいかなと思います。
いきましょう。 UXデザインのプロセスを知りたがりませんか?と。
UXプロセスに従うことで、デザイナーはデザインを繰り返し、 継続的に改善し、
訪問者に最高の体験を提供することができます。
最終的なゴールというのは、洗練された製品にはなりますけれども、 UXとかフィードバック、ウェブサイトの
UXデザインのテストに継続的に重点を置いています。
eコマースのUXデザインプロセスを明確に確立することで、 企業の時間だったりエネルギーだったり、コストというのを節約することもできますよ、と。
はい、言ってます。
eコマースのUXデザインのところについて、 また別の記事のリンクが貼ってますという感じですね。
この記事では、そのユーザーエクスペアレンスデザインの プロセスの内側を紹介し、
現在のUXシステムを改善する方法と、 UXのベストプラクティスに関する詳細情報を入手できる場所をお伝えしますよ、 ということでした。
UXベストプラクティスというところも記事のリンクが貼ってますので、 後ほど見てみてください。
では行きましょう。
What is UX Design? UXデザインって何ですか?というところから入りましょう。
行きます。
ユーザーエクスペアレンス、いわゆるUXというものは、 ユーザーが企業ですね。
企業というかウェブサイトだったりサービスだったり、 製品などとか含めた企業ですね。
と、接する際のあらゆるインタラクションのことを UXと言います。
UXデザイナーというのは、そのユーザーエクスペアレンスを 最高のものにすることに専念します。
そのためには、綿密な訂正・定量調査によって、 ユーザーの度を理解するところから始まります。
次にUXデザイナーというのは、ウェブサイトを設計し、 ユーザーが簡単かつ効率的に快適な体験を得られるように最適化します。
UXデザイナーも、まず先にそのユーザーの旅というのを理解した後に、
03:06
ユーザーの旅というかカスタマーじゃないですかね、理解して、
ウェブサイトを次に設計して、最後に最適化をしていくというものですね。
この辺はエンジニアと同じような流れですね。
一体ガードを作って、そこからリファクタイニングをしたりとか、 というところをするんですね。
UXデザインのプロセスというのは、ユーザーリサーチ・分析・検証・実装の 5つの主要なフェーズに分けることができます。
UXデザインプロセスのステップというのは、 通常この順番で行われますが、繰り返し行われるワークフローになります。
製品開発中というのは、これらのステップを定期的に見直し、 デザインを最適化・改良していくことになります。
UXデザインもそういうイテレーションを回すのであれば、 スクラムは開発のフレームワークの一つですけど、
UXデザインに関しても全然適用できるなと思いました。
逆に言うと、スクラムってすごく汎用性が高いなと改めて思いましたね。
では、ステップを1つずつ見ていきたいと思います。
まずステップ1ですね。スタートウィズユーザーリサーチですね。
ユーザーの調査から始めましょうと言います。
ユーザーリサーチでは、ユーザーのニーズ・欲求・目標・動機・行動など、 ユーザーについてできる限りのことを学びます。
このステップには、ユーザーリサーチとマーケットリサーチも含まれます。
UXデザイナーというのは、業界標準を理解し、 ユーザーの真の問題を解決する製品・プロダクトを作る機械を見つけることができます。
ユーザーからの情報というのは、訪問者がどのようにページを移動するかを明らかにし、
人々が使いたいと思うeコマースサイトやアプリを構築するのに役立ちます。
ここでは、この段階で採用できるUXリサーチの方法をいくつか紹介していきましょうと。
今回は合計4つあります。
1つはユーザビリティテストと呼ばれるもの。 2つ目にユーザーインタビューと調査ですね。
調査というかサーベイなので、アンケート取る意味に近い感じですね。
3つ目がカードソートというものだそうです。 4つ目にベンチマークテストというところでした。
この調査段階でのサポートは必要でしょうか? というふうに言ってますね。
ベイマードが提供する最新のリサーチ結果は、現在のデザイントレンド、ユーザーの行動の変化、
競合他社の現状を常に把握することができますよというふうに言ってます。
ベイマードというのはそういうサイトですかね。
ベイマードのプレミアム構築でユーザーがホームページや検索ツールなどをどのように操作するか、
その辺に関する7万1000時間以上に及ぶUX調査の全容を把握することができるので、もし興味ある方は
プレミアムのサブスクリプションがあるので登録してくださいという感じでした。
7万1000時間ってかなりすごいですね。
06:00
UXだけに関してだと思いますけど、
に特化した調査というのが見ることができるというのはかなり強いので、
この辺はデザイナーの方とかに
勧めてみてもいいかもしれないですね。
はい、まず一つ目がユーザー調査からでした。
では続いてステップ2ですね。ステップ2はアナライズ・ザ・データですね。
はい、データの分析をしていきましょうということです。
このステップではリサーチ段階で収集した情報をデザインを最適化するための重要な要素に注視します。
データはユーザーペルソナとユーザージャーニーマップという2つの要素に集約されます。
はい、で一つ目ユーザーペルソナってやつですね。
ユーザーペルソナは典型的なユーザーを架空のしかし現実的に表現したものです。
いわゆるペルソナですね。
で、各ユーザーペルソナには
人口統計、性格、ペインポイント、動機、課題などの特徴が含まれます。
効果的なペルソナっていうのはオフィスの片隅に貼っておくだけの流行の厚紙製の切り抜きではないですよと。
効果的なペルソナを作成するには、実在の人物を表し
期待されることを正確に把握し、ユーザーがウェブサイトをどのように利用するかを理解することが必要です。
ペルソナを作成することでユーザーへの共感が容易になります。
また、UXチームはこのペルソナを設計開発におけるラシン版として活用することができます。
結果的に
一般的によく言われるペルソナ設定という感じですね。
まあでもこれするかしないかでだいぶ話が変わるのでやっぱりやったほうがいいなと思いました。
で、続いてユーザージャーニーマップですね。
ユーザーのジャーニーマップっていうのは、ユーザーが最終的なゴールに向けてウェブサイトを利用する様子を
段階的にかつ視覚的に表現するプロセスになります。
正確で詳細なジャーニーマップというのは、顧客体験のストーリーを伝えるのに役立ち、ユーザーが行っていることを考えることに
ウェブサイトやアプリが合わせることができますというふうに仰っています。
はい、まあ本当その通りだなという感じがしましたね。
以上今のがステップ2のアナライズ・ザ・データでした。
で、続いて3つ目。3つ目めちゃめちゃ長いな。
ちょっと区切って翻訳しよう。
3つ目ですね。ステップ3ですけど、ステップ3は正にデザインですね。
はい、ここから具体的に入っていくんでしょうね。
はい、リサーチと分析が完了し、ウェブサイトに対するニーズと期待を十分に理解できたと感じたのであれば、
いよいよデザインフェーズに入ります。
このフェーズでは、UXデザイナーとUIデザイナーが協力してウェブサイトやアプリを制作していきますと。
なんとなく、UXデザイナーとUIデザイナーって一緒にやっているというか、
同じ人が両方の側面を持っているみたいな印象が僕の中では強いですね。
もちろんちゃんと分けているんであれば、それはそれで素晴らしいことだと思いますけども。
はい。
その中で一個一個手順とかプロセスに入りますと。
1つ目はやっぱりまずスケッチから入りそうですね。
デザインプロセスの最初のステップというのはスケッチ、つまりアイディアを視覚化することですと。
09:01
スケッチは通常デザイナーが
デジタルで行う迅速かつミニマルなドローイングになります。
スケッチの目的というのは、次の段階に進む前にウェブサイトやアプリケーションに
最も適したデザインソリューションを見つけることです。
スケッチはデザイナーが想像性を発揮して初期段階のアイディアを提案し、フィードバックを得て
前進させるデザインについて共同で意思決定を行うのに役立ちます。
はい、これは本当その通りだよな。やっぱりまず最初は
スケッチから入るんですね。手書きだったり、デジタルだったりいろんな方法あると思いますけど。
基本的にこの記事ではデジタルと書いてますけど、意外と手書きでバーっと書いちゃう方も
今もいらっしゃると思いますし、手が一番早いですからね。
言うて、それを共有したりするときにやっぱりデジタルに残さないといけないよねってのがありますけども、はい。
というところです。まずはスケッチングはそうでした。
続いてワイヤーフレーミングですね。
次のステップワイヤーフレームというのは、ページインターフェースを簡略化して表現したもので
レイアウトと重要な要素を、単なるスケッチよりもちょっと詳細にですね、定義していきますと。
UXデザイナーはそのワイヤーフレームを使用して
ウェブサイトのビジュアルデザインと情報アーキテクチャーというのを関連付けます。
ワイヤーフレームはデザイナーがコンテンツや情報を表現する方法を明らかにし、
ユーザーが必要なものを迅速、簡単、かつ
効率的に得られるようコンテンツの優先順位を決定するのに役立ちます。
この時点でワイヤーフレームをクライアントとかお客さんとかステックホルダーとかに
見せていくデザイナーさんも結構いらっしゃると思いますし、
割とその辺から見せても僕はいいと思ってますね。
ちゃんとやっぱり情報設計とか情報アーキテクチャーの関連付けもここで行うのであれば、
この時点でお客さんと
見せ合いずつお話しして、やっぱり認識速度が
後からやっぱり気づいたこととかで来ないように先に
潰していくっていうのは結構いい話じゃないかと思います。
まあその他で時間もかかるのでトレードオフだと思いますが。
はい。
戻りますね。ワイヤーフレームっていうのはサイトの足場であり、
安価で迅速に実行できるバージョンです。
そうね。したがって通常グレースケールで作成され、ボタンや画像などのコンテンツのプレイスホルダーは含まれます。
これはUXデザイナーがデザインに関するフィードバックを収集するためのもう一つのステップです。
ワイヤーフレームはページ上のスペースの割り当てっていうのを示し、
コンテンツや画像の優先順位や整理の仕方を示し、
UIデザインがユーザーの行動にどのように対応するかをマッピングします。
ワイヤーフレームの作成が完了すると、サイトの外観が視覚的に表現されるため、
ユーザー調査データどう一致しているかどうかというのを評価することができます。
ワイヤーフレームが完成し、サイトの主要機能が決まったらUXデザイナーはワイヤーフレームを次のステージに
プロトタイピングに渡しますと。
はいはいはい。次は実際にプロトタイプですね。
Mock じゃなくて、ちょっと動くようなものまで落とし込んでいくってところですね。
はい、でも何ですかね、やっぱワイヤーフレームまで来たら開発に携わる
12:02
フロントだけじゃなくて、これサーバーサイト、バックエンドの人も一回ワイヤーフレームとその出てきた情報、アーキテクチャですかね、
とかの紐付けの成果物っていうのを見てみた方がいいんじゃないかと思いますね。
その上でAPIだったらこういうデータが、この何ですかね、画面とかこのボタンを押した時とかに
こういう情報必要だよねっていうのがなんとなく見えてくるので、割とAPIの設計がこの辺からもう既に
着手し始めることも可能じゃ可能な気はしましたし、
認識損ないようにここの時点から、
何ですかね、
いろんなデータとユーザーのやり取りっていうところを見ていくのはいいんじゃないかなと思ったりします。
ただもうここが完成品とか、もうここで完全に
設計が完成するわけではないので、
ざっくり見るだけでいいと思いますが、把握しておくっていうのは結構いいんじゃないかなと思いますね。
まあ構図の話は出てくるので別としてありますけど、
フロントエンジニアはもうここをがっつりちゃんと見た方がいいと思いましたね。
ワイヤーフレーム段階でフロントの人間だったらここは見ておいて、
全容把握しておいて、ざっくりこんな感じになるんだなっていうのを見つつ、
フロント側としてどう落とし込むかみたいところの現実解を見出し始めるのはいい話だと思いましたね。
はい。
では続いていきましょう。クリエイティングザプロトタイプのところからいきますね。続いて、
はいはいはい。きた。はい。じゃあ続いてプロトタイプの作成ですね。
プロトタイプの段階では、デザイナーがサイトのモックアップを作成し、
実装したときにどのように見えるか感じられるかっていうのを示します。
プロトタイプはウェブサイトのユーザビリティや
機能性をリアルタイムにテストするための下書きバージョンですと。
プロトタイプを作成することで、デザイン全体がどのように連携しているかっていうのを説明できるため、
エラーや抜け、もしくは矛盾を修復して、より良いユーザ体験を実現することができます。
UXデザイナーはプロトタイプを迅速かつ
容易に作成できるため、コストも最小限に抑えられ、UXチームの時間、コスト、エネルギーというのを節約することができます。
またUXデザイナーっていうのは、そのプロトタイプを作成した後、ユーザーからのフィードバックを収集し、
オリジナルのアイディアの開発と改良を継続することができます。
また、プロトタイプを共有することは、ユーザー、経営人、クライアント、その他のステークホルダーにアイデアやコンセプトを提示する優れた方法ともなります。
そうですね。
経営人まで見せるんだったら、確かにプロトタイプレベルまで落とし込んでから見せる方が確かにいいかもしれないですね。
ワイヤーフレームでも、ある程度のクオリティがあるんだったらいいかもしれないですけど。
はい。
では続いて、デザインスペシフィケーションですね。設計仕様です。
このところに行きましょう。
そうですね、デザインってちょっとアルファベットで書いてあるとあれですけど、こいつタギ語なんでね。
設計っていうのもデザインって英語で言うので、なんか悩ましいですよね。
はい、今回のデザインは設計の方っぽいですね。
はい、ではプロトタイプが完成したら、UX UIチームというのはデザイン資料をデベロッパーに渡してコーディングを依頼しますと。
UX デザイナーとはプロトタイプを実現、実用的なウェブサイトにするために
15:04
開発者が必要とする全てのビジュアルデザインアセットというのを設計仕様書を伝えますと。
デザイン仕様というのは
スタイル、カラー、スキーム、フォントなどのUIデザインの詳細を情報アーキテクチャ、ユーザージャーに
スタイルと一緒に開発者に伝達します。
はい、でなるとこの部分を見た感じ最初のやつは設計仕様じゃなくてデザイン仕様っていうふうに訳したほうがいいかもしれないと思いましたね。
はい、まあでもこの辺でそうですね。スタイル、カラー、スキーム、フォントなどなどみたいなところですね。
はい、いわゆるデザインシステムがあったらいいだと本当に思いますね、この辺から。
まああのプロトタイプの時にも
UXデザイナーもしくはUIデザイナーかなは
デザインシステムをちゃんと起こすことはあると思いますので、まあその辺見ながら
エンジニアとかデベロッパーはどんどんそれを具現化していくって感じになると思いますね。
逆にデザインシステムがないとデザイナーとエンジニア間でのコミュニケーションが爆発的に増えるので
やっぱりちゃんとある方がいいと思いますので、そこにコストをかけるのは全然ありだなと思ったりはしています。
まあ何回かそのデザインシステムがないプロジェクトに入ったことはあるんですけど
やっぱり
地獄とは言わないですけど、やっぱりコミュニケーションがすごく増えたので
あんまよろしくないなと思いましたし、いちいちやりとりして、これが正解なんですね、それをまたドキュメントに起こしてっていうのをやるんですけど
やっぱりエンジニアはデザインシステムをあんま作った人
作ったことある人は多くないので、結果的にそのドキュメンテーションの時間もめちゃめちゃかかるんですよね
あんまよろしくないなと思いました
はい、というところです。じゃあ次、ステップ4ですね
いきましょう、ステップ4
The validation stage ってところですね
ユーザーテスティングか、ユーザーテストの段階に入りますと
デザイナーはこの段階でウェブサイトやアプリがユーザーにとって有効かどうかというのを判断します
社内でのテストに始まり、実際のユーザーを対象としたテストに発展していきます
このテストにはスプリットテスト、フォーカスグループ、アナリティクスレビュー、ライブユーザビリティテストなどが含まれます
全然知らないワードがちょっと飛び交ってきた
検証段階ではウェブサイトやアプリの最も重要な欠点というのが明らかになります
この段階でデザイナーが得るフィードバックっていうのは、UXとUIを継続的に改良するのに役立ちますと
はい
ここまで来ると本当にUXデザイナーだけの話じゃなくなってきますよね
完全にUIデザイナーもしっかり絡んでいかなきゃいけない気はしますね、この辺まで
ちなみにUX&UIっていうところにまた別の記事が貼ってますね
でもURL的にUI vs UXって書いてあるので
英語本文的には&で書いてますけど、実は&じゃない気がしますけど
まあまあ記事のリンクがあるんで見てみてください、ということでした
続いてステップ5ですね
ラスト、リリース&インプリメンテーション オブ ザ UX デザイン プロセスです
はい、UXデザインのプロセスのリリースと実装ですね
はい、リサーチ、テスト、改良のすべてを終えたらいよいよ本番になります
18:00
ウェブサイト、アプリ、ページをリリースするのです
リリース後も開発者は細かな不具合を修正します
またUXデザイナーは、ユーザーが実際の現場でどのようにサイトを操作しているかというデータを収集します
この情報は将来のイテレーションやUX監視でサイトを改善するために使用されます
はい、ここはもう本当は皆さん共通の認識の通りだという感じがしましたね
はい、リリース後はどんどんどんどん改善、改良のために
データを取ってまたそれを分析してまた落とし込んでというように
今回の5つのサイクルをもう1回繰り返していくところだと思いますね
はい
で、行きましょう。で、ラストですね
Looking for more UX Researchです。もっとUXリサーチを探しですかというところですね
はい、UXプロセスフローを改善するためのアイディアを探しならば、これもうあれですね、営業トークですね
はい、何たらかんたらでいっぱいあるので見てみてくださいと
で、一応繰り返しになりますけど、今回のこの記事の載っているサイト
Baymardってやつですね
にはその7万1000時間以上を及ぶユーザーエクスペリエンスの調査をガイドラインにまとめていって
その御社のデザイン判断に役立てることができるよということを言ってました
ちゃんとガイドラインとしてドキュメント化してあるのであればやっぱり
1回サブスクリプション登録しておいて
会社の中でも
UXとかもしかしたらUIデザイナーとUXデザイナーって結局協業している
もしくは1人が2役やっているという現場も全然あると思うので
会社として1回これを持っておいて、その7万1000時間のガイドラインを
見ながら参考にするのは結構いいんじゃないかなと思ったりしましたね
はい、さすがにやっぱりこの時間ずっと調査をしたっていうのはかなり大きいとは思ったりしてますね
ユーザー数がどうなのかというのと、ECサイトだけなのかウェブアプリケーションなのかという
その対象のプロダクトによって話が変わるかもしれないですけど
やっぱりUXっていうのは最終的にユーザーの
細かなお話とか体験っていうところが重要になってくるので
そこってしっかり
ガイドラインとして落とし込めてあるというのはかなり大きいと思うので
見てもいいんじゃないかなと思いました
で
しかもガイドラインが1つ1本にあるわけじゃなくて550以上のガイドラインがあるっぽいですね
それのユーザーエクスペリエンスの特定の側面だったり機能だったりデザインパターンに焦点を当てた
ガイドラインがそれぞれ作られてるっぽいので
それは結構いいですね
必要な観点のガイドラインがありそうですね
550以上もあれば何かしら見つかると思うのでそれもいいと思いました
はい
というところでこの記事のリンク貼ってますので見てみてくださいということでした
あくまでこのリサーチはEコマースのユーザーエクスペリエンスなので
ECサイトが限定っぽいので
ウェブアプリケーションまで発展するかちょっと難しいですけどそういうお話がありますよということでした
はいではちょっと短いですけど今日の朝活動はここで区切りたいなと思います
で今日ですね火曜日
あの
実は弊社としてはですね計画有給不予備で
あのうちの会社のメンバーは結構皆さんお休みしてますね
僕はカレンダー通り仕事をする予定なので今日もこの後出社ですね出勤する予定です
リモートでですけどね
はい皆さんは多分お仕事の方が多いのかなと思いました世間的にはですけど
21:02
はいというところで3連休上がりの明けの一発目ですね今日からまた一週間頑張っていけたらなと
思いますはいでは今日もご参加いただいた皆さんありがとうございました
また明日が久しぶりにちゃんと技術的な記事読んでいきたいかなと思うんでまたなんか
ザーッと探してみたいと思いますでは終了しますお疲れ様でした
