3,000団体以上のNPO・NGOとの繋がりを通じた希少なN=1が多く集まる調査パネルを基に、これまでリーチが困難であった人々を含む多様な声を通じて、尖ったインサイトや気づきを得て、新しいアイデアやイノベーションを共創する定性調査サービスです。
ヨーロッパの消費者団体が行っている自動車安全評価システム「Euro NCAP」が自動車産業に向けて、操作を行う部分にタッチパネルを使うのをやめて、物理的なボタンやスイッチに戻すべきであるとの提言を行いました。 Car industry told to dial back use of touchscreens https://www.thetimes.co.uk/article/stop-making-dangerous-touchscreens-car-firms-told-xv3gmpdc6 European crash tester says carmakers must bring back physical controls | Ars Technica https://arstechnica.com/cars/2024/03/carmakers-must-bring-back-
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の1要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑&黄」から「緑塗り&緑枠線」に変更しました。「え、それだけ?」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
デザイナーの keita です。 年始にベンチプレスの MAX 測定をしたら 105kg でした。今年の目標は 120kg です。 この記事では、生成 AI をデザインプロセスに取り入れるためにチームで試行錯誤した内容を紹介します。ぜひ、最後までお付き合いください。 きっかけ はじめに AI を使ってみる インタビューデータからペルソナを作成 まずは 1 人ずつ整理 1 人のペルソナに統合 ペルソナの課題抽出 リサーチを AI で代替してみた結果 AI が作成したペルソナを使ってみる ペルソナにヘルプセンターの記事を評価させてみる 結果 最後に あとがき ボツ案 文字起こしデータから記事を作成 出力された記事のトーンを変更 出力された記事 きっかけ 「ChatGPT をはじめとした AI ツールが便利なのはわかったけど、自分たちの業務をより効率化するためにデザインプロセスで代替できるところ
「デザイナーだけがデザインをする時代は古い」「デザインにセンスはない」と語るのは、Udemyの「UI/UXの改善を進めるための基礎講座」などで人気を誇る、UI/UXデザイナーの濱野将氏。生成AI時代において、デザインをビジネスをつなげるためのポイントや、UI/UXの基礎を解説します。 UI/UXデザイナーが教えるデザインの基本 濱野将氏:それでは、僕からは「ビジネスを実現する『デザイン』の基本」をお話しさせていただきます。よろしくお願いします。 今日のアジェンダはこんな感じです。「デザインの必要性」「デザイナーだけがデザインする時代はもう古い」「UI/UXについて」。今回はAIがテーマなので「AIを使ったプロジェクトの進め方」も少し紹介させていただきたいなと思っております。 簡単に自己紹介をさせてください。株式会社IMAKE代表の濱野と申します。職業はUI/UXデザイナーで、講師もさせてい
XDからFigmaへ移行したい人のためにFigmaの機能を紹介 この記事では、XDからFigmaに移行しようとしている方、Figmaを使ったことのない方に向けて、Figmaの機能の中からよく使用するものを紹介しています。 この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 マスクとして使用 Figmaでもマスクを使うと図形などからはみ出した部分を表示しないようにできます。 画像と図形を用意します。図形はその形からはみ出て部分を表示しなくなるので、その図形でくり抜かれたような表示になります。 マスクの作成方法 マスクとして使用したい図形の前面に画像を配置します。 図形と画像の両方を選択した状態にし、上部ツールバーにある[マスクとして使用]アイコ
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上(2019年12月現在)ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
こんにちは!スマートバンクで事業開発を担当している土屋(@takeshi)です。 先日、スマートバンクのBizDevに興味を持ってくださった方に向けて、プロダクト「B/43」が挑む顧客課題の面白さやポテンシャル、事業検討の試行錯誤やナレッジ会社などの全体像をご紹介するページをリリースしました! smartbank.co.jp スマートバンクのBizDevにおける主な役割としては「事業検討」「事業企画」「事業推進」があり、幅広い領域をカバーしながら日々アクションしています。 BizDevがカバーする領域 その中でも、特にスマートバンクらしい体制で取り組んでいるのが、 事業検討フェーズにおける「顧客課題調査」です。 下の図にあるように、何かしら事業を立ち上げたいと思った時に、BizDevがオーナーシップを持って関わっていきますが、事業機会の探索・検証のフェーズはPM、UXリサーチャーと一緒に進
まえがきアニメーションを多く取り入れたWebサイトが好きかどうかのアンケートを取ると、ネガティブな票が多く占めることがよくありますが、それに関して思うところがあったので「Webサイトにアニメーションは必要あるのか」というテーマで自分の思っていることを言語化してみました。 X (Twitter)で「動くWebサイト 嫌い」で検索 Xでちらっと検索しただけでも動くサイトが嫌い、という方は結構いそうですね。もし「アニメーションはすべて悪」と思っている人がいたらぜひ読んでいただきたいです。 この議論はアプリなどにも言えることですが、私の主なお仕事はWebサイトのフロントエンド実装なので、Webサイトについて書かせていただきます。 また、保険をかけているわけではないですが、私はUI (ユーザーインターフェース) の研究をしている専門家でもないんでもないので、この記事の内容に学術的なものは一切ありませ
生成AIボットは、コンテンツエディター、調査アシスタント、アイデア出しのパートナー、デザインアシスタントの役割を果たすことでUX専門家をサポートしている。 AI as a UX Assistant by Feifei Liu, Mingjin Zhang and Raluca Budiu on October 27, 2023 日本語版2024年2月14日公開 UX専門家が日々の仕事で生成AIをどのように利用しているかを理解するために、我々は800人以上の回答者による大規模な調査を実施した。回答者の92%が少なくとも1つの生成AIツールを利用したことがあると答え、これらのボットを仕事で利用した人のうちの63%が(毎日ではないにせよ)少なくとも週に数回は利用していた。最もよく使われていた用途は、テキストコンテンツの生成と編集である。 調査概要 841人のUX専門家を対象にアンケート調査を実施
こんにちは。 iCAREのクラウドPdMチームのKmatです。 今年こそ数年ぶりにデンマークに飛ぼうかなとコペンハーゲンへの直行便を調べたら、、、2名で70万円超でそっ閉じしました。エコノミークラスとは⁉︎ さて、今回はプロダクトのUXに関する話です。(社内で日報に書いてたものを整理がてら転記編集) 毒の沼地を歩く=インタラクションコスト 先日、社内で仕事へのモチベーションについて話しているときに、モチベーションは日々下がるもので「毒の沼地を歩く」ようなもの。だから上げることより、ダメージの軽減もだいじ!という例えを出してふと思い出しました。 (そういえばこれ、昔、別の場面で挙げたことがあるな…🤔) …数年前、ToCのサービスを作っているときにUXリサーチをしていて「information-foraging theory」をベースに「インタラクションコスト」について考察したことがあります
メルカリで値段の「¥マーク」を小さくしたら購入率が伸びた理由、ペイディがサービス名を「カタカナ表記」にする理由など、プロダクトのマーケ施策まとめ30(2023) 2023年に取材した記事から、長く参考になりそうな施策をまとめました。※ 数値等はあくまで取材当時のものです。 1、商品ページの「¥マーク」を小さくしたら購入率アップ(メルカリ)メルカリでは、商品詳細ページの「値段の¥マーク」を小さくしたところ、購入率が大きく上昇した。 理由としては、¥マークを小さくしたほうが、心理的な「価格の圧迫感」が減って、心理的にすこし安く感じるためと考えられている。例えば、¥マークが大きいと桁数が多く感じたり、価格を高めに感じやすい。 この案があがったときには、社内でも懐疑的だったそうだが、テストすると小さな開発コストで大きなリターンを得られる施策になった。 元記事:https://markelabo.c
テキスト要素の役割は大きく、特にアプリやゲームでは、適切な言葉遣いがユーザー体験に大きく影響します。WWDC23の開催期間中、Apple UXライティングチームは技術的な概念から始まり、インスピレーションをもたらすコンテンツ、アプリに「個性」を持たせる必要性についてなど、幅広いトピックに関してQ&Aセッションを行いました。今回、このQ&Aの抜粋と、ユーザーインターフェイスのライティングをさらに深める上で役立つリソースをいくつか紹介します。 インターフェイスのライティング ... Watch now 自分のアプリでは大量のテキストを使っています。文章を読みやすくするベストプラクティスについて教えてください。「この文章を使って何を達成したいのか」ということをまず自問してください。その答えに沿って、文章作成に取り組みます。まずは各段落を、一つひとつの文章に分けます。そしてはじめに戻り、各文章を可
モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First Web Design on Desktop by Kim Salazar, Tim Neusesser and Nishi Chitale on October 13, 2023 日本語版2024年2月6日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、
UXについて色々と考えることがあり、少し言葉にまとめてみた。何が正しいという話ではないが、率直に感じていることである。 意図されたBad UX 車を運転する人なら経験したことがあると思うが、「近づかないと識別できない信号」というのがある。 この手の信号は、近付くまで青なのか赤なのか判別できない。そのため信号の近くになるまで、このまま進むべきか、ブレーキを踏むべきか、とドキドキさせられる。 先日までペーパードライバーだった私は、当初、スムーズな運転を妨げてストレスを感じさせるこの信号を、液晶の表示角度などの計算を誤った設置ミスだと思っていた。 しかしこれは、複雑な交差点などでの交通事故を防ぐために意図的に仕掛けられたもののようである。 いちドライバーとしては、けっして心地よい体験ではない。しかし、社会全体にとっては良い方向に向かうようデザインされた信号といえる。 このような「意図的にユーザー
今までちゃんと使ったことがなかったTikTokを最近がっつり触ったところ、UIやインタラクションの細かな作り込みに気づくことが多く、発見の連続でした。今後の機能開発やUIデザインの参考にもできそうなので記事にまとめます。 調査期間:2024/1/22 - 1/29 使用環境:iPhone 15、iOS17 1. アクションなしの没入体験TikTokで最も特徴的なのは動画フィードでのレコメンドの仕組みです。フルスクリーンで表示されるショート動画が上下のスワイプで切り替わり、視聴行動(視聴時間やスキップなど)に応じて次の動画がレコメンドされ続けます。そのため利用者はフォロー、いいね、コメントなどの主体的なアクションを一切しなくても、フィードをスクロールするだけで自分好みのコンテンツが表示され続けます。 動画フィードでは利用者の視聴行動に応じて動画が次々とおすすめされるTwitterやInsta
こんにちは、株式会社Algomaticの大野です。Algomaticは、スタートアップスタジオ型を取り、生成AIを活用した事業を同時多発的に立ち上げている会社です。 「AI(人工知能)、機械学習」というと一部のアカデミアだけに任された領域にも聞こえますが、新たな生成AIサービスの爆発的な普及には、UI/UXにおける発明も同様に求められる、と思っています。インターネット革命やスマホ革命で、それぞれ新技術を前提とした全く新しいプロダクトの設計・UI/UXが求められたことと同様に、です。 今日は、AIネイティブなプロダクト・UI/UXのあり方について、よく社内で議論していたり、思考していることをお話できればと思います。 生成AI時代、トップのUXデザイナーが主役になる時代だなとつくづく思います。技術者だけでなく 理由はシンプルで、技術革新により体験設計の正解がリセットされたので、全く新しいスタン
前回は、「UIデザインってそもそも何なの?」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策(プロトタイピングとユーザビリティ評価)を話しました。 ※2024年5月14日に最後の勉強会+交流会を開催いたします。詳細はXの固定ツイートをご参照ください 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の3つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念(ナビゲーション、インタラクションなど)を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる
サイゼリヤが新しい注文方法を導入している。これまでは、各テーブルに置いてある注文用紙に利用客が番号を記入して店員に渡すスタイルだったが、どのように変わったのだろうか。筆者が都内の店舗で体験した内容を交えながら解説する。 テーブルで見つけた小さな「札」 入店後、店員に案内されてテーブルに移動すると、長方形の小さな札を見つけた。札には「いらっしゃいませ」「テーブル番号24」「注文用QR」といった情報が記載されている。見た目は、小売業界で導入が進んでいる電子棚札(画面が電子ペーパーになっており、価格などをリアルタイムに変更可能)に似ている。「この小さな札は何だろう?」というのが最初に見たときの感想だ。
宇宙航空研究開発機構(JAXA)は1月20日、小型月着陸実証機「SLIM」の月面着陸を実施。着陸後に太陽電池の発電ができなくなるというトラブルはあったものの、探査機からの電波は正常に受信できており、日本初の月面着陸をついに実現した。これは日本の宇宙開発において、非常に大きなマイルストーンになったと言えるだろう。 SLIM着陸直後のサブ管制室内の様子 (C)JAXA 筆者は前日22時より、JAXA相模原キャンパスにて取材を開始。本記事では、そのときの様子をレポートしたい。 開場の30分前に現場に到着したのだが、すでに大勢の報道陣が プレスセンター内部の様子。筆者は右側最前列を確保できた ライブ配信された月面降下中のSLIMのテレメトリ画面 SLIMは同日0時に、最終降下を開始。高度15kmでメインエンジンを噴射して減速し、周回軌道を脱出、月面へと舵を切った。月のような重力天体では、一旦降下を
ZennサイトのUIにおいて、角丸のチューニングを行い、その大きな目的としては、前回のエレベーションのチューニングと同様にユーザー体験の向上を図りました。本稿では、実施した角丸のチューニングがどのようにユーザー体験向上に貢献するかについて解説し、さらにCSS変数の調整による柔軟性にも触れます。 角丸とは 「角丸」とは、オブジェクトの角に丸みを持たせるデザイン要素です。主に矩形のオブジェクトに適用され、CSSのborder-radiusプロパティを使用して角丸の半径を指定します。 角丸が持つ意味は、オブジェクトが丸みを帯びることで、そのオブジェクトがインタラクト(クリック/タップ/ドラッグ&ドロップ/フリック/スワイプ)可能であることを示します。これは物理世界のメンタルモデルと連動し、触れやすさや触れた際の怪我のしにくさを意味します。 Zennの角丸チューニングの経緯と目的 Zennでは、以
HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた!(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogleトレンドで調べた結果である。 アメリ
コロナ禍を経て日本のキャッシュレスは大きく進展した。コード決済などが生活に定着しつつある中、現在急速な普及が始まっているのがタッチ決済だ。これは、カードを交通系ICのように“かざして”決済できる機能で、海外ではデファクトスタンダードになりつつある。 国内ではここ数年で普及が進み、新規発行されるクレジットカードのほとんどはタッチ決済に対応しており、店舗側もチェーン店を中心に対応が進みつつある。さらに電車やバスなどの交通系についても試験的な対応が進んでおり、カード1枚あれば移動から日常の買い物まで全てタッチで済ませられる状況が近づいてきている。 タッチ決済は各国際ブランドが利用できるが、国内において最も積極的に推進しているのがビザ・ワールドワイド・ジャパン(Visa)だ。2023年4月1日に社長に就任したシータン・キトニー氏は、「日本の決済エコスステムは、最もスマートで最もパーソナルなものにな
伝わらないと悩むところは多いUXデザイナーやUXリサーチャーから、ユーザーの課題を優先的に取り組めない、または課題を伝えても理解されないという相談を受けることがあります。デザイナーを含め、多くの人がユーザーに価値を提供したいと考えています。しかし、価値観の違いや事業の優先順位により、意図が伝わらないことがあります。特に大きな組織では、このような悩みを耳にすることが多いです。 デザイナーだけでなく、異なる分野の専門家も「大事に思っていることが周知されない」という悩みを持っています。例えば、気候変動に関するジャーナリズムの分野では、災害の報道だけでは読者の関心を引きにくく、報道の優先順位も低いことが課題とされています。 この問題に取り組む一環として、2022年1月に The Oxford Climate Journalism Network(OCJN)が設立されました。記者、編集者、写真家、フ
明けましておめでとうございます。 大遅刻で年が明けてしまいましたが、この記事はUIデザイン Advent Calendar 2023 23日目の記事です。 注意 本記事で取り上げている例は実在する企業・プロジェクトとは一切関係ありません。 本記事は、筆者が実際に業務中にしてしまった失敗をモチベーションに書かれているものの、具体例は完全に一から創作しており関連性はありません。 はじめに 某企業でエンジニアとしてスマートフォンアプリ開発をしています。 その中で、アプリの見た目や挙動を要件通りに実装する際、正直モヤモヤと違和感のあるデザインが何箇所かありました。 しかしながら、ユーザの期待操作や導線を考えてどうして改善したほうが良いと考えたのか、という形にうまく言語化できず、関係者の皆さんに全く伝わらない説明をしてしまうという悔しい思いをしました。 今後そのようなことがあった際に、せめて似たケー
The right UI can elevate an application from functional to unforgettable, making the difference between a user who engages once and one who returns time and again. — Crafted to be your ultimate roadmap in the journey of UI design. Whether you are a seasoned designer looking to refresh your approach or a novice eager to learn the ropes, these rules are tailored to help you create interfaces that ar
I can’t believe I am writing this, but… as UX designers, we must understand the users. Shocker! However, is this enough when we design international products? Perhaps not. I believe only interviewing users doesn’t give you a full understanding. You get an idea of the user’s behaviour but not the causes of these very behaviours. Multicultural UX design is complex. To get a profound comprehension of
このように有言実行してきたのがLayerXの歴史であり、AI-UXとAXに関しても有言実行して実現していきます。 (2024/1/9追記) 偶然ではありますが、2024年1月にGoogle ResearchもAI-UXに関する記事を出していました。 ここではAI-UXの責任性。どうやってバイアスの少ないAI-UXを実現していくのかがメインで紹介されています。 AI-UXとAX(AI Transformation)ChatGPTの衝撃はみなさんの記憶に新しいと思います。技術的な進化の速さはもちろんのこと、スマホ以来、久々に登場したUXの転換点であることも重要です。ChatGPTに刺激されて、今後さまざまなアイデア、UXが実現していくでしょう。 この変化から生まれる体験を、AI-UX(※弊社の造語です)と名付けたいと思います。AI-UXは、「AIを前提とした理想のUX」です。 大事な点は、AI
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く