2022年7月29日 クリーク・アンド・リバー社でのUXデザイン基礎セミナー第2回 「“UXデザイン” のキモ『ユーザーインタビュー』の具体的テクニックを詳解!」のスライドです。 UXデザインの中心的な技法である「ユーザーインタビュー」について、あまり表に出ることのないインタビュールームでの一言一句を実例にしつつ、具体的な会話術を解説しています。Read less
はじめに 個人開発もエンジニア自体の歴も浅いSEです。 就業先がJavaをメインで使う企業なのですが、個人的にフロントエンドまわりが好きです。 元々、興味本位でデザインの本だったりUXに関する本とかを読んでいたりするのですが、 その結論の際にたどり着いたのが、 「理論とか決まってるなら、それをよしなにやってくれるor参考にできるツールとかサイト探せばよくね」 という結論になりました。なんと怠惰な思考でしょうか。 そんなわけで、こちらではデザインに限らず、色々開発に便利なツールを紹介させていただきます。 (有名なのが多いかもしれませんが、ご容赦ください、結局有名なものに行き着くのです) レイアウト関係 1. Awwwards おしゃれなwebサイトが集まっているサイトです。 ここまで個人開発でお洒落にできたらいいなと思いますが、自分はアニメーションを考えるときや、 作りたいフロント側のデザイ
ユーザーインタビューでの質問方法は、収集するデータの信頼性と有用性に影響する。ここでは、インタビューの質問をより良いものにするための6つの方法を紹介する。 6 Mistakes When Crafting Interview Questions by Maria Rosala on March 6, 2022 日本語版2022年7月26日公開 ユーザーインタビューは、ユーザーの経験、背景、ニーズ、要望に関する情報を明らかにする素晴らしい方法である。とはいえ、インタビューの質問を作成するには、ある程度の配慮と注意が必要だ。アンケートには適している質問が、ユーザーインタビューにも適切であるとは限らないからだ。また、質問の構成の仕方が不適切だと、参加者が混乱したり、彼らの思考や感情、ニーズ、欲求が不正確に伝わることになり、その結果、正しくない洞察を導き出してしまう恐れもある。この記事では、インタ
羽山 祥樹@日本ウェブデザイン @storywriter 明日7/15(金)の夜にUXデザインの無料セミナーするんだけど、ネタスライドしかアップしてないので、中身があるか不安に思われている気がしてきたw ちゃんと中身もあるよ! ということでスライドチラ見せ! セミナー申し込み(無料) → creativevillage.ne.jp/111762 pic.twitter.com/wJl3jUyz3b twitter.com/storywriter/st… 2022-07-14 18:04:25 リンク connpass 【UXデザイン基礎】「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 (2022/07/15 19:00〜) ## 【UXデザイン基礎】「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 UXデザインの根幹を理解するための無料セミナーを開催し
ユーザーの直帰率や離脱率とパフォーマンスの関係から、コンテンツを表示する速度や応答性(ページがユーザー入力に応答する速度)がいかに重要であるかは、既によく知られるようになってきています。 ではコンテンツを表示する速度や応答性を上げるにはどうしたらいいでしょう。 結論から述べるとパフォーマンスを客観的な指標に基づいて正確かつ定量的に測定し、そこから課題を見つけて解決することが必要になります。 GoogleはChrome User Experience Reportに新しく応答性指標INPを導入しました。 INPとは INP(Interaction to Next Paint)は、ページの読み込みを開始してからユーザーがページを離れるまでの間に発生するユーザー入力の応答性(インタラクション)を評価する測定基準で、遅延時間を計測します。 計測対象のインタラクションは、以下となります。 ユーザー入
プロダクトマネジメントを学びたい人、プロダクトマネージャーにおすすめの書籍です。 以下、記載した書籍のリストです ## Product Management ### プロダクトマネジメントを広く理解する 「プロダクトマネジメント ―ビルドトラップを避け顧客に価値を届ける」オライリージャパン (2020/10/26) https://www.amazon.co.jp/dp/4873119251/ 「プロダクトマネジメントのすべて 事業戦略・IT開発・UXデザイン・マーケティングからチーム・組織運営まで」翔泳社 (2021/3/3) https://www.amazon.co.jp/dp/4798166391/ 「INSPIRED 熱狂させる製品を生み出すプロダクトマネジメント」日本能率協会マネジメントセンター (2019/11/1) https://www.amazon.co.jp/dp/4
新しいコントローラーのこと。 発売当初のプロモーション番組で、芸能人たちがこぞってコントローラーから伝わってくる臨場感がすごいと言っていた。 どういう仕組なのかよくわからないけど、ゲーム内の質感や反動なんかをフィードバックしてくれるらしい。 やっとの思いで手に入れたPS5で、その部分が一番に楽しみだった。 プリインストールされてるPS5の性能紹介的なゲームをやってるときは楽しかった。 グラフィックもすごかったし、芸人のコメントはさすがに大げさすぎたけど、確かに今まで経験したことのない臨場感を楽しめた。 そうなればやっぱり新しいゲームをプレイしたくなるもので、そこそこアクションの強いゲームを買ってきた。 場面に応じて色々なフィードバックをしてくれるコントローラー。 なんというか、今まで経験したことがないというだけで楽しかった。 ところが、とあるシーンに移った時点で、それが一気に不快感に変わっ
某所で買い切りゲームのゲームデザイナーをしてるけど、レベルって便利なんだよね。多分、多くの人はレベルシステムがもたらす恩恵をさして意識せずにゲームを遊んでると思う。 自分もレベル上げ作業は嫌いなので、昔の一部のRPGみたいなレベル上げ必須の状況はほぼ作らない。ただのプレイ時間水増しだし。 しかし、それを抜きにしてもレベルシステムって色々な恩恵があるんだよね。 難易度調整これはみんな直感的に分かると思う。 ボスを倒せる適正レベルを設定しておいて、ゲームが得意な人は低いレベルでクリアして、ゲームが苦手な人は高いレベルでクリアする。 そういう細かい所を吸収してくれるのがレベルシステム。 同様に、サクサクとザコ敵をぶっ倒してボスまで到達するのが楽しい人もいれば、一つ一つ苦労して倒して回復薬を管理しながらボスまで到達したい人もいる。 そういう楽しみ方も吸収してくれるのがレベルシステム。 ここでレベル
Image by Lili Kovac.On May 11th, 2022, Airbnb announced a redesign that, according to CEO Brian Chesky, was the app’s “biggest change in a decade”. It was met with mixed emotions: some people loved it while others didn’t even understand what changed. I’m a believer. Designers are comfortable understanding how design decisions impact user behavior. In this particular case, what fascinates me is how
学習しやすさは、新規の複雑なインタフェースには不可欠なUXの要素だ。しかし、認知的ウォークスルーを利用すれば、新規ユーザーを失敗させるようなデザイン上の問題を特定することができる。 Evaluate Interface Learnability with Cognitive Walkthroughs by Kim Salazar on February 13, 2022 日本語版2022年7月5日公開 認知的ウォークスルーは、新規ユーザーの視点に立ってシステムの学習しやすさを評価するために用いられる手法である。ユーザーテストとは異なり、ユーザーの参加を必要としない(そのため、実施に比較的費用がかからない)。ヒューリスティック評価やエキスパートレビュー、PURE評価と同じく、高度に構造化された方法で実際にタスクを実行しながら検証し、新規ユーザーの視点からインタフェースを評価していく、さまざま
www.eleken.co ユーザーエクスペリエンス(UX)は、ウェブサイト、アプリケーション、またはプロダクトの設計と使いやすさに焦点を当てています。優れたUXとは、ユーザーがそれほど困難なく問題を解決したり、ニーズを満たしたりできることを意味します。これは、ユーザーの満足度を高め、コンバージョン率を向上させ、ビジネスコストを削減することにつながります。 しかし、UXの良し悪しを決めるのはユーザーであることは、誰もが知っていることです。では、あなたやあなたのデザインチームがすべてを正しく行い、プロダクトが素晴らしいユーザー体験を提供しようとしていることを理解するには、どうすればよいのでしょうか? ここで役に立つのが、UXデザインのKPI例です。Elekenはプロダクトデザイナーのチームであるため、KPIパフォーマンスの測定は、プロジェクトでの作業における構成要素の1つとなっています。UX
こんにちは!ファンと共に時代を進める、Web3スタートアップのGaudiyでエンジニアをしている勝又(@winor30)です。 Gaudiyのプロダクト開発において、最も大切にしていることの1つに、ファンダムな最高のユーザー体験を提供することがあります。 今回は、このファンダムなユーザー体験を提供しながら、プロダクトの成長速度を落とさないために取り組んでいる、UX中心のスキーマ駆動開発についてまとめてみます。 具体的な開発フローや工夫している点についてまとめたので、同じような課題を抱えるチームのご参考になれば嬉しいです! 1. 取り組みの背景 2. Gaudiyのアーキテクチャ構成 3. UX中心のスキーマ駆動開発の概要 3-1. すべてのインターフェースをスキーマ駆動で開発 3-2. スキーマのズレを検知できるようにする 3-3. システム全体の結合は開発初期の段階で行う 3-4. FE
2022年のロゴデザインのトレンドはワードマークとタイポグラフィがより重要な役割を果たしています。特にジェンダーや環境配慮などはどのジャンルのデザインでも積極的に取り入れられています。 デザインの引き出しを増やすには、注目されているトレンドを押さえておくことが大切です。ロゴにはタイポグラフィ、カラー、形など、デザインの基本となる要素が詰まっており、最近のロゴデザインに使われているトレンド、デザインテクニックを紹介します。 2022 Logo Trend Report 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2022年、ロゴデザインのトレンドの傾向 三角形を2つ使用したロゴ「BowTies: 蝶ネクタイ」 一滴の重要性がわかるロゴ「Uvula: 口蓋垂」 ライフラインを表現するロゴ「Rooters: 木の根」 圧力を反転さ
こんにちは、UXライターの8chariです。早いものでSmartHRに入社して1年が経ちました!初めてTech Blogを書くのでドキドキしています。 SmartHRでは、フィーチャーチームでプロダクトを開発しており、開発プロセスの改善を日々行なっています。 この記事では、私が所属しているBチーム*1でヘルプページ作成のプロセスを見直し、チームのボトルネックを解消しようとしている話を紹介します。 特定の業務を担当できるメンバーが限られていて、以下のような課題を感じている方の参考になると嬉しいです。 必要なノウハウや知見がほかのメンバーに広まらない プロジェクトのボトルネックになっている 担当できるメンバーの負荷が高くなっている 前提 UXライターがいる開発現場はあまり多くないと思いますので、前提を説明します。 SmartHRのUXライターは「言葉の力でプロダクトを、もっとわかりやすく」する
先日行われたAppleの開発者向けイベント「WWDC22」で、AppleのUXライターが登壇してインターフェースのライティングについて解説するセッションがあったことを、こちらのツイートで知りました。 WWDCにUXライティングのセッションがあった。https://t.co/09rHJMSOSL Apple製品のインターフェースに含まれる言葉をデザインする際に考慮するポイントを、目的、予測、文脈、共感という4つの軸で説明している — 鈴木慎吾 / TSUMIKI INC. (@shingo2000) June 10, 2022 早速動画をチェックしたところ、あまりにも学びが多過ぎて大興奮だったので、自分にとって学びや発見があった部分を中心にまとめておきたいと思います。有難いことにTranscriptが公開されているのでその翻訳(DeepLは神)と要約がメインになりますが、私は決して英語が得意
製品でこの3つの基本的な心理的欲求に応えることで、ユーザーのモチベーションと幸福感が高まる。その結果、デザインに対するユーザーの関心も高まり、デザインをより利用してもらえるようになるだろう。 Autonomy, Relatedness, and Competence in UX Design by Tanner Kohler on January 9, 2022 日本語版2022年6月21日公開 Nielsen Norman Groupでは、ユーザーは怠惰なのではなく、効率的であると言いたいと思っている。Webサイトやアプリの利用を含め、ユーザーが行うことはすべて、ある程度のエネルギーと集中力を必要とする。人はエネルギーや時間を無限に持っているわけではないので、自分が最もやろうと思うことだけをやることで効率を維持しているのである。しかし、ユーザーは、それをやる必要があるからやろうとすること
連載:徹底解剖! SaaSのUI/UX 本連載では、B2B SaaSや業務システムを中心にUI/UXデザインを手掛けるベイジ(東京都世田谷区)が、SaaSにありがちなUIデザインの問題を実例を交えつつ解説。SaaSスタートアップなどが、ユーザーの満足度を落とさないための改善方法を説明する。 第3回は、画面表示や機能の意味を補ってくれる便利なパーツ、「アイコン」についてご紹介します。 アイコンはほとんどのSaaSで使われているUIデザイン上の重要な要素ですが、使用する上で守るべきルールがいくつか存在します。「どんな時もアイコンを使えば情報を省略できて直感的に操作できる」ということはなく、うまく使わないと画面がより分かりにくくなってしまうこともあります。 今回例として取り上げるのは、見積り・請求管理システムです。中でも比較的利用頻度の高い、見積りの編集画面を参考に、アイコン利用の適切なルールと
こんにちは。れとるときゃりー(@retoruto_carry)と申します。 AppbrewではPdM・デザイナー・フロントエンドエンジニアをやっています。 プライベートでは、個人開発でみんなのボタンメーカーというサービスを運営したりしています。 ほぼ毎週ツイッターのトレンドに乗るような、所謂「バズ系」のWebサービスで、月に50万人くらいに利用してもらっています。 ツイッターをやっている方は、なんとなく見たことある気がする人も多いのではないでしょうか? みんなのボタンメーカー 今回は、その知見を活用し、お仕事で「LIPSショッピング」というコスメの買い物ができるサービスのバズキャンペーンの企画・デザイン・実装を行いました。 コスメクーポンガチャ ちょうどいいので、それを題材にして、再現性をもって「バズ」るサービスを作る方法について話していこうと思います。 キャンペーンはかなり好評で、ツイッ
歩くことで仮想通貨が貯まると噂のアプリ『STEPN』。毎日、基本1万歩以上歩いている私(中澤)にとって、こんなに都合の良いアプリはない。なにせ、普段とすることは変わらないのに仮想通貨が稼げるのだから。 そこで『STEPN』をやってみようというのがこの連載「STEPNをやってみた」である。だがしかし、第4回の現在、いまだに私はSTEPNでウォーキングをできていない。『魔法少女まどか☆マギカ』の鹿目まどかなみに一歩を踏み出せていない。0回と0.5回があるからもう実質6回目なのに……わけがわからないよ。 ・これまでの流れまとめ 毒も漏らしたくなったのが前回のこと。1つ1つの詳細は記事にてご確認いただければと思うが、ザッとまとめるとこうだ。 靴を買わないとアプリがプレイできない ↓ 靴を購入するため、仮想通貨BNBが必要 ↓ BNBは海外の仮想通貨取引所「バイナンス」で買える ↓ BNBを購入する
ゲーミフィケーションではなく「ゲームフルデザイン」。学習をゲーム化する新潮流:LXD in NYC#2 ニューヨーク大学のプログラム「学習デジタルメディアデザイン」には、「学習のためのゲーム(G4L)」という姉妹プログラムがあるという。体験を「ゲームフル」にするデザインとは何か? 2022.06.09 UX、学習科学、認知科学等を横断的に学ぶ学際的デザイン領域「LX(Learining Experience/学習体験)デザイン」。AmazonやBCG、TeslaなどもLXデザイナーを募集するなど、米国内ではその独自の専門性が徐々に注目を集め始めているという。「LXD in NYC」は、2021年よりニューヨーク大学大学院でこのLXデザインを専攻する石渡翔氏による寄稿連載。本記事はその第2回。 前回の記事では「学習体験(LX)デザイン」という、アメリカにおける新たな潮流を主に取り上げた。詳し
AppleやGoogleといったOSを開発するメーカーは、自社プラットフォーム向けのアプリをリリースする開発者向けに、どのようにデザインを構築していけばいいのかをまとめたガイドラインを作成し公開しています。Appleの「Human Interface Guidelines」は、言葉・画像・デザインをどのように選択すればユーザーが簡単にコンテンツや機能を使えるようになるかをまとめたもので、開発者だけでなく多くの人にとって参考になる内容が多く含まれたものとなっています。 Inclusion - Foundations - Human Interface Guidelines - Design - Apple Developer https://developer.apple.com/design/human-interface-guidelines/foundations/inclusion
『機能面』と『情緒面』の2つの側面を意識する。Takramと考える「UXライティング」ラクスル社内勉強会レポート こんにちは、「RAKSUL DESIGN MAGAZINE」です。 デザイン・イノベーション・ファーム「Takram」とラクスルの2社で、定期的に開催している勉強会。先日は「UXライティング」をテーマにした勉強会を行いました。 ラクスルは2020年にデザイン推進室を発足して以来、デザイン経営を軸に事業を展開しています。今回勉強会のテーマとして設定した「UXライティング」は、ことば(伝え方)をデザインするという観点から、ラクスルの全社員に関わる内容で、非常に重要なテーマになっています。 この記事では勉強会のレポートをお届けしながら、近年、プロダクト開発やサービスの運営において注目される「UXライティング」の基本と実践について紐解いていきたいと思います。 UXライティングは「機能面
はじめに ここ最近はデザインシステムの構築や支援を行なっています。そこで、デザインシステムを作ることが目的になっていることを感じることがあります。私はデザインシステムは作ることよりも、育てていく考え方が重要だと思っているので、その考えについてお伝えします、どなたかの参考になれば幸いです。 デザインシステムとは? まずはデザインシステムそのものについてです。デザインシステムの事例から学んでみます。 GoogleのMaterial Designは「チームがより高品質なデジタル体験を各OS上で構築するためのもの」と表しています。 Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the w
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第15弾は、ユーザビリティ・フォーム・ミニマルにデザインする弊害に関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Fifteen. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ページ内リンクを効果的に用意する 2. ボタンのラベルは一貫性を保つ 3. 長いフォームは冗長な作業を最小限に抑える 4. 長いフォームは常にラベルを上部に配置する 5. 不要なテキストでフォームのUIを乱雑にしない 6. 特定のUI要素でミニマムな外観を避ける はじめに 次のプロジェクト
Jesse James Garret氏がおよそ20年前に提唱した“The Elements of User Experience”は、日本では通称「UXの5段階モデル」と呼ばれ、長年にわたり多くのデザインの現場で引用されてきました。わたしたちもこのモデルのお世話になっていた立場ですが、新たに「デザインの5段階モデル」と称し、より応用の効きやすいかたちでの再解釈と発展を試みています。今回はGoodpatch流再解釈である「デザインの5段階モデル」について、オリジナル版との違いと発展させた部分、そしてその背景を簡単にご紹介します。 「UXの5段階モデル」(オリジナル)改め、 「デザインの5段階モデル」 (Goodpatch再解釈)と称し、オリジナルからの破壊的変更はなるべく行わずにいくつかの再解釈と発展を試みています。モデルの抽象度合いを5段階に区切る発想とそれぞれの名称はそのまま継承し、特定
[レベル: 上級] この記事では、 INP という新しい UX 指標について紹介します。 INP は反応性を示す指標です。 FID の置き換わりとしてコア ウェブ バイタルを構成する指標に組み込まれる可能性があります。 INP とは INP は Interaction to Next Paint の略称です。 簡単に言うと、ページ滞在中にユーザーが起こした操作に対する反応、専門用語で言うインタラクション (interaction) の遅延を計測します。 ようは、どのくらい速く反応が返ってくるかです。 もう少し正確に言うと、INP は、ユーザーの操作に対する視覚的な反応が発生するまでにかかる時間を示す指標です。 遅延を表すので、値が小さければ小さいほど良いということになります。 遅れがないということは、すぐに反応するということです。 サクサク反応してくれるサイトは使っていて快適です。 逆に、
マイクロコピーとは、Webサイトやスマホアプリのボタンのラベル、ボタンやフォームに添えるテキスト、エラーメッセージなどのUIデザインに使用される短いテキストのことです。優れたマイクロコピーを使用することで、入力ミスが少なくなったり、ボタンのクリック率があがったり、さまざまな効果を得られます。 思わずクリックしたくなるタイトル、迷わずクリックできるボタンなど見かけませんか? ボタンに書かれているラベル、ボタンに添えられたテキスト、これらに使われる文言はほんの少し工夫を加えるだけで、劇的な効果を発揮します。 WebサイトやスマホアプリのUIで使用する文言、ライティングのテクニックを身につけたい人にお勧めします。本書は「ザ・マイクロコピー(紹介記事)」の第2版で、内容は大幅にアップデートされています。 UIデザインで使用する言葉、ボタン、フォーム、ナビゲーションに使用する文言など、言葉の魅力でU
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第14弾は、レイアウトのグリッド・使いやすいフォーム・配色で悩んだ時に関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Fourteen. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. グリッドの間隔はハードではなく、ソフトに 2. フォームはインタラクションの後、すぐにフィードバックを提供 3. 配色で悩んだ時は、類似色 4. テキストの見栄えを良くするグリッドの使い方 5. 検索ボックスの幅は広くする 6. 素早いアクセスは、ナビゲーションをスティッキーに はじ
2022年5月18日 【iCARE Dev Meetup #33】 デザイナー目線のユーザーとの向き合い方 でのスライドです。ユーザーインタビューをするとき、私たちはつねに「認知バイアス」にさられています。認知バイアスの影響を受けると、私たち自分に都合のよい情報ばかりピックアップしてしまいます。ユーザーにしっかり寄り添ったプロダクトをつくるためには、きちんとバランスのよいユーザーインタビューをする必要があります。本セッションでは、陥りがちな認知バイアスをミニワークを交えて体験し、ユーザーインタビューで気をつけるべきポイントを解説します。 なお、今日の登壇を誘ってくださった @murokaco さんが熱心な研究員(BiS というアイドルのファン)なので、 BiS(第3期)のデビュー曲「BiS -どうやらゾンビのおでまし-」をタイトルに入れてプレゼンしています。Read less
2022年4月14日のウェビナーでは、世界的ベストセラー「UX戦略」著者であるジェイミー・レヴィさんにご登壇いただきました。 本セミナーでは、UX戦略とは何かという基礎から、UX戦略のフレームワークと実際に分析や評価をどう行うかまで、レヴィさんの豊富な経験を元に実例を使って解説していただきました。今回はそのダイジェストをご紹介します。 UX戦略にたどり着くまで 15年前、ジェイミーさんはUXデザイナーとして忙しい日々を送っていました。当時は、UXデザイナーがプロダクトをどうすべきか考える機会はほとんどなく、クライアントからの指示を受けて定められた予算と時間に従ってひたすらPCに向かって作業をしていました。 あるとき、上司からオペラ・ゲイル・ウィンフリー(注)のウェブサイトについて、ディスカバリーフェーズを担当しないかと提案を受けました。ディスカバリーフェーズとは、プロジェクト開発に着手する
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く