UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
【翻訳】UXデザインのKPI例：ユーザーエクスペリエンスの測定方法を学ぶ（Kateryna Mayka, Eleken, 2021） - 体験とデザイン、スタートアップについて
www.eleken.co ユーザーエクスペリエンス（UX）は、ウェブサイト、アプリケーション、またはプロダクトの設計と使いやすさに焦点を当てています。優れたUXとは、ユーザーがそれほど困難なく問題を解決したり、ニーズを満たしたりできることを意味します。これは、ユーザーの満足度を高め、コンバージョン率を向上させ、ビジネスコストを削減することにつながります。 しかし、UXの良し悪しを決めるのはユーザーであることは、誰もが知っていることです。では、あなたやあなたのデザインチームがすべてを正しく行い、プロダクトが素晴らしいユーザー体験を提供しようとしていることを理解するには、どうすればよいのでしょうか？ ここで役に立つのが、UXデザインのKPI例です。Elekenはプロダクトデザイナーのチームであるため、KPIパフォーマンスの測定は、プロジェクトでの作業における構成要素の1つとなっています。UX
デザインに活かせるフレームワーク20｜金 成奎
久しぶりのnote投稿です。今回は自分の勉強がてら、UX・情報設計・アジャイル開発など、デザインに関わる様々な局面で知っておくと役立つフレームワークを集めてみました。 有名なものからデザイン以外にも使えそうなものまで幅広く選んでいますので、気になるものがあれば改めて実作業に生かすなり、掘り下げて研究するなり、資料に生かすなりしてもらえると良いのではないかと思います。 （ちなみにここでいう「フレームワーク」とは共通して用いることのできる考え方や思考の型や枠のようなもので、いわゆるCSSフレームワークの類ではありませんので、その点ご了承ください） 1.UXの5段階モデル まずは有名なUXの5段階モデル。アメリカのUXデザイナーであるJesse James Garrett 氏が著書『Elements of User Experience（ウェブ戦略としての「ユーザーエクスペリエンス」）』にて提唱
ユーザーインタビューが失敗する理由
ユーザーインタビューは、誤った目的のために使われることが多い。また、計画や分析が適切でなかったり、インタビューを実施する価値をステークホルダーが理解していないこともある。 Why User Interviews Fail by Maria Rosala on June 9, 2019 日本語版2020年2月3日公開 ユーザーインタビューは、UXの重要な生成的手法だ。生成的な手法（インタビューやフォーカスグループなど）は知識を生み出す。一方、評価的手法（デザイン案のユーザビリティテストなど）は仮説をテストするためのものだ。インタビューを適切に実施すると、ユーザーの以下のことを知ることができる： 思考 信念 メンタルモデル エクスペリエンス こうした知識は、良質な製品やサービスの構築に役立つ。また、想像上のものではない、ユーザーの実際のニーズに対処することを可能にする。（デザインを開始する前に
ユーザーにない知識を補わないと、UXを損なう
調査型のタスクに適した情報の提供ができていないWebサイトは多い。そうしたサイトでは、ユーザーはさまざまな情報ソースを手作業でつなぎ合わせるという不必要な手間をかけなくてはならないのだ。 Unbridged Knowledge Gaps Hurt UX by Kim Flaherty and Kate Moran on March 3, 2019 日本語版2019年10月17日公開 デジタル製品のデザインチームは、ユーザーの技術レベルや情報探索スキルを過大評価していることが多い。2016年にOECDは、中程度の複雑度のタスクを正常に完了できる成人は全体の3分の1しかいないことを明らかにした。このレベルのタスクを完了するには、ユーザーはページやアプリケーション間の移動をする必要がある。また、ステップを複数こなさなければならない上に、ツールやソフトウェアの機能（たとえば、ソート機能など）も利用
「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた｜Tsutomu Sogitani
大阪の実家に帰った時、リビングのテレビの裏側を見たらAmazonのFire Stick TVが挿してありました。このFire Stick TVをテレビに繋ぐと、Amazonのプライムビデオを観ることができるようになります。 プライムビデオには、Amazonプライムの会員であれば、追加費用を払うことなく楽しめる映画やドラマ、アニメなどが豊富に揃っています。さらに個別に追加金額を払うとほとんどの映像コンテンツを観ることができるという、まさにTSUTAYAキラーなサービスです。 うちのおかんは月に2～3回は映画館に行くほどの映画好きなので、プライムビデオのメインターゲットといえるでしょう。本来ならプライムビデオで映画三昧の毎日を送っていてもいいはずです。 しかしながら、Fire Stick TVを挿しているにもかかわらず、プライムビデオを一度も使っていませんでした。初期設定をした私の弟が一通り使
モバイルではメニューを画面下に表示すべき理由
スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ
CSS Nite LP56「ウェブサイト制作、手を動かす前に考えておくこと ［Part II］」
CSS Nite @cssnite 来週土曜日（3月3日）開催のCSS Nite LP56「ウェブサイト制作、手を動かす前に考えておくこと ［Part II］」、あと、若干名、参加可能です。当日決済にて受け付けています。 buff.ly/2EKLEwx #cssnite 2018-02-23 17:45:00 sogitani / baigie inc. @sogitani_baigie CSS Niteのスライド気合入れすぎて100分で語れるか問題勃発。参加者にはお腹いっぱい満足してほしいし、後日復習できるテキストにもしたいし、私の他の講演経験者も満足してほしいのでこのまま行く。好きな言葉ではないが一時的/エピソード的/累積的UXをちゃんと満たす講演＆スライドを目指そう。 2018-02-26 17:09:11 sogitani / baigie inc. @sogitani_baigi
当初の懸念どおりブラウザのプッシュ通知は邪悪に使われはじめている。実装側はクリックまで購読確認を待つべき。 - mizchi's blog
追記: 2019/11/12 2年経ったけど体験が悪化し続けた結果、 Firefox がこの記事の通りになりましたね… www.fxsitecompat.dev プッシュ通知、ネイティブアプリの機能郡をWebに持ち込むPWA技術の売りの一つだが、当初から懸念されていたとおり、非常にノイジーなものとなってしまっている。自分も気づけばあらゆるサイトの購読確認を、無意識で拒否を押すようになってしまった。 hagex.hatenadiary.jp 少し前の記事。最近はどこかで wordpress のプラグインになったのか、目にする機会が非常に多くなり、非常にストレスフル。最初は技術的な目新しさからか、ある程度容認していたが、さすがにこの状況が悪化する一方で、本気でやばいんじゃないかと思っている。とくに初見のブログの記事を読む前に、購読確認が出るのが最悪の体験となっている。 そもそもプッシュ配信とは
UI / UX 学びまとめ
夏、満喫してますか？ 夜は何してる？ フェス、ナイトプール、おうちでまったり、友達とビアガーデン……。ViViモデルが夏の夜にやりたいこと×メイクをまとめました。
「ユーザーが行動をおこす条件」の話｜深津 貴之 (fladdict)｜note
新入社員のこばかなさんが、「こばかなスケッチ」という自分企画を頑張っている。THE GUILDでの日々の仕事と、読書で学んだことを、一枚のスケッチにまとめるチャレンジだ。 彼女のスケッチが溜まってきたので、復習とサポートを兼ねて、解説を書いていきたい。第二回はこの絵。 行動 = 動機 × 実行能力 × きっかけ今回のこばかなさんのイラストは、「フォッグの消費者行動モデル」という概念モデルだ。ざっくり言うと、ユーザーが行動を起こすために必要な3条件を示している。 このモデルでは、「ユーザーが何かアクションを起こす」条件を、 B = MATという、とてもシンプルな式で表現する。 その意味は、「行動(Behavior)」には、「動機(Motivation)」と「実行能力(Ability)」があるタイミングで、「きっかけ(Trigger)」が訪れなければならない…というものだ。 ・動機(Motiv
キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
管理画面と業務フロー - UNIX的なアレ
最近また管理画面に近いものをつくったりしていて感じたのですが、事業会社において管理画面がどのタイミングで実装されているかというのがすごく重要だなと感じたのでちょっと書いてみようと思います。 社内向けの管理画面の実装って割と後に回りがちで、最後に仕方なくなんとか実装するようなケースが多いと思うんですよね。そして、ある程度発生してきたオペレーションの実態に合わせて実装するみたいな流れになるのではないかなと。 それはそれで一つの実装の手法だと思うのですが個人的には逆のほうが良いのではないかなと思っています。 管理画面からオペレーションを設計する まず、以下の理由から管理画面ありきでオペレーションを設計したほうが良いと思っています。 既存のオペレーションありきで管理画面の要件を出すため、イノベーションがうまれづらい 組織の最適化より管理画面の最適化のほうが合理的に行える エンジニアの合理的な思考が
最近のWeb制作の勉強になる！Webサイトのワイヤーフレームやプロトタイプのまとめ
プロジェクトのメンバーでないとなかなか目にすることができないワイヤーフレームやプロトタイプ、他の人がどのように作っているか気になります。 最近のWebサイトやスマホアプリの制作で参考になりそうなワイヤーフレーム、フローチャート、プロトタイプを紹介します。 UXデザインのツールも、Adobe XDが先日ベータ版としてリリースされ、SketchもメジャーアップデートとなるSketch4がリリースされ、充実してきましたね。 Adobe XD Wireframe Kit for UX Designer for Adobe XD まずは年内にWindows版のリリースが予定されているAdobe XDで作成されたワイヤーフレーム用のキット。最近のWebサイトで使用されているコンポーネントが数多く収録されています。
Ingress、ポケモンGOの開発現場。Niantic川島優志さんに聞く。【前編】
さて、日本でもとうとう「ポケモンGO」がローンチされました。皆さんも恐らくご存知の通り、一足先にリリースされたアメリカではもはや社会現象になっています。ローンチからたった一週間ですでにモバイルゲーム歴代最高のユーザー数を獲得し（！）、アクティブユーザー数ではTwitterを追い越しました。僕が住む比較的郊外でさえ、道を歩けばポケモンGOをプレイしている人と何度もすれ違います。アメリカに住んで12年、こんなことは初めてです。とにかく話題で持ちきりのポケモンGO、このゲームを任天堂と共同で開発している会社がサンフランシスコにあるNiantic, Inc.です。 Niantic, Inc.は元々Googleの社内スタートアップとして始まり、これまでにIngressというモバイルゲームを開発してきました。Ingressのゲームコンセプトは陣取りゲーム。ゲームフィールドは私たちが住む現実の世界そのも
プロトタイピングによる合意形成テクニック 〜UXデザインに学ぶ！：2015年7月12日 CMS SUNDAY Vol.4
2015年7月12日（日）「CMS SUNDAY Vol.4 ちゃんと合意をとる！ CMS導入案件プロトタイピング」の資料です。【イベントページ】 http://opencu.com/events/cms-sunday-vol4Read less
確実に良くするUI/UX設計
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
デザインのしたじき
デブサミ「確実に良くするUI/UX設計」 #devsumi
