コンポーネント図鑑とは、webサイトを通じコンポーネントという「いち生物」についてまとめた図鑑です。ここでは、研究員が日々この生物について感じている意見や考えを記載しています。

NHK放送文化研究所が2021年に発表した「国民生活時間調査2020」によると、テレビを見る人（1日に15分以上テレビを見る人）は全体の8割を切り、16～19歳では5割を下回った。すでに日本国民の2割以上はテレビとあまり縁のない生活を送っていることになるが、NHKのネット受信契約が始まると、そんな人たちもスマホ操作を誤ると受信契約を求められそうだ。しかも誤りやすい状況ができようとしていた。 2025年10月から「同時配信」「見逃し配信」「番組関連情報の配信」を必須業務として展開するNHKは、ネットサービスの提供イメージについて、9月に一部メディアを集めて説明会を実施した。この時の資料と報道から、ネット上の受信契約手順（案）とその画面には、いわゆるダークパターン（ユーザーを騙し、人々の判断を誤らせるインタフェース、総務省の資料より）が含まれているように見受けられる。 「同意して利用する」クリ

ライトニングトーク ｢ちょっといいUI｣を目指す努力 インタラクションの観点から、UIデザインにおける細かな振る舞いやこだわり、苦悩、課題などについて考えます。ライトニングトークでは事例をいくつか紹介します。 （ディスカッションパートの情報は本講演資料には含まれませ…

寺田 学（@terapyon）です。2024年10月の「Python Monthly Topics」は、Python Web UIフレームワークの1つであるStreamlitの基本的な使い方を紹介します。 2024年4月には、「⁠Python Web UIフレームワークで作るデスクトップアプリ」と題し、Steamlitを使ってデスクトップアプリ化をする紹介を行いました。 今回はStreamlitにフォーカスを当てて、よく使う機能を紹介します。Streamlitにはたくさんの機能があり、公式ドキュメント APIリファレンスを見ても、どの機能から使って良いのかわからないという声がありました。今回は、筆者目線でよく使うであろう機能に絞って紹介します。 Streamlitとは StreamlitはPythonで構築できるWeb用のフレームワークです。Pythonのモジュールを定義することで、インタ

An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.

ダークパターンレポート2024ダークパターンの 無自覚な使用を防ぐために 4社の取り組み例から 考察する、 防止活動普及の鍵 消費者よりも企業にとって都合の良い行動を取るようにし向ける手法、ダークパターン。 悪意のある事業者が意図的に用いる手法だと思われるかもしれません。 しかし、ビジネスで求められる目標を達成するため、 悪意がなくても結果的にダークパターンを用いてしまう可能性があります。 企業はどうすればこの「ダークパターンの無自覚な使用」を防ぎ、 消費者とのより倫理的な関係性を目指していけるのでしょうか? コンセントでは、所属企業にダークパターン使用防止の取り組みがある ビジネスパーソン4名にインタビューを行いました。 本レポートは具体的な取り組み内容を紹介するとともに、 そこから見えたダークパターン問題に向き合う上での課題や 無自覚な使用を防ぐための論点を考察するものです。 調査結果

来る2024年8月19日、『About Face: The Essentials of Interaction Design』第4版（Alan Cooper、Robert Reimann、David Cronin、Christopher Noessel 著、2014年出版）の邦訳版、『ABOUT FACE インタラクションデザインの本質』がマイナビ出版より発売されます。ソシオメディアが翻訳と監訳を行いました。現在、Amazon など各書店で予約受付中です。 『About Face』は、“Visual Basicの父” として知られる アラン・クーパー氏を主要執筆者とする、ソフトウェアについての他に類をみない実践的なデザイン書で、デスクトップやモバイルのネイティブアプリケーションはもちろん、ウェブアプリケーションや組み込み機器を含む多様なデジタル製品のデザインについて、リサーチ、コンセプトメ

Refactoring UIで公開された「Building Your Color Palette」より許可をもらい、日本語抄訳しています。 これまでに以下のように鮮やかな色の配色ツールを使ったことはあるでしょうか？ ベースとなる色を選び、「補色」や「類似色」などいくつかの配色オプションを調整すると、ホームページを構築するために使用すべき５つの色見本が表示されるというものです。 完璧な配色を選ぶためのこの計算された科学的アプローチは、とても魅力的に見えますが、実はあまり役に立ちません。 自分のサイトをこんな風にしたのなら話は別ですが… 実際のホームページに必要な配色 ずばり、５つのHEXカラーコードだけでは何も作れません。 実際にホームページを制作するには、もっと包括的な色のセットが必要です。 インターフェースにはこれだけたくさんの色が使われている 良いとされる配色カラーパレットは、3つのカ

本セミナーでは、デザインやITの知識を持たない方でも直感的で使いやすいUIの検討（アプリケーションの画面設計等）を行える方法論をご紹介します。 DXに取り組む企業の増加、ノーコード開発ツールの発展などの背景から、最近、デザインやITの知識をほとんど持たない方が業務用アプリ等の画面をつくる機会が増え…

JRの職員がマルスを操作する動画が話題になった。 この動画について、職人性を賞賛する立場と、UIとして問題があるという立場が対立していた。 nobkzさんのこの記事は、「熟練が必要なのはUIとして問題がある」という立場での記述だとおもう。 一連の話題に対して違和感を持ったが、違和感の源泉は明確で、「UIとしてよいかどうか」という立論自体に机上の論理以上のものにならないということもあるが、そもそも「マルスとはどういうシステムなのか」が議論されていないことがおおきい。 わたしもマルスについて名前は知ってはいたものの、具体的にはどういうシステムであるかは知らなかったので、少し調べてみることにした。 マルスについて Twitter(X)で話題になっていたもとの動画はこちらである。 ここだけ取り上げてみて、マルスの良し悪しを論じるのは鉛筆を取り上げて絵の良し悪しを論じるようなものだとおもう。 次の動

久しぶりに記事を書く。最近マルス端末のUIについてツイートがあった。 この件に関して、UIについてやUXに対して日々やってきている人間は「ダメなUI」という認識の人が多いように思う。一方で、システムの開発者にとってはこれは、その認識でない人間が多いようだ。なので、この辺を私なりに意見を書いておこうと思う。 まぁ、これはいつもなのだが、書いていることが散らかってる。基本的に音声入力のメモなので、読みにくいかもしれないが読んでくれ参考になれば幸いだ。 熟練が必要なUIは基本的によくない まず、基本的に熟練が必要なUIはそもそも良くないって話をしていく。順番に話していこう、まず、熟練が必要なUIが支持される理由を考え、それに対して、批判していき、なぜ熟練が必要なUIはダメかを語ってみよう。 熟練が必要なUIが支持される理由 その前に、こういった熟練のUIが支持される理由についてかいておこう。それ

パスワードレスなユーザー認証を実現する業界標準である「パスキー」を策定するFIDOアライアンスは、パスキーのユーザー体験を最適化させるためのデザインガイドラインの公開を発表しました。 パスキーは、従来のパスワードによるユーザー認証よりも強力で安全な認証方式とされており、普及が期待されていますが、多くのユーザーが慣れ親しんできたパスワード方式と比べると、サインアップやサインインの方法が分かりにくいという課題が指摘されていました。 FIDOアライアンスによるデザインガイドラインの公開は、こうした状況を改善するものとして期待されます。 パスキーのデザインガイドラインの内容 デザインガイドラインは主に以下の要素から構成されています。 UXの原則（UX princeples） コンテンツの原則（Content principles） デザインパターン（スキーマ、サンプルビデオ、AndroidとiOS

50+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. Perfect companion for shadcn/ui.

こんにちは！東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか？ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか？ そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって使いやすく、安全な道具や製品、システムを考える学問です。人間特性をもとに環境や道具の使い勝手などを研究する学問でもあります。 「人間特性」とは、知覚から認知、身体に至るまで人間特有のあらゆる機能や性質のことです。どうしてそのような行動をするのか、という原理を知っていることが、モノづくりや仕組みづくりをする人たちにはとても大切なんです。 弊社デザイン部門には人間特性ワーキンググループという専門チームがあり、デザイン部門内で情報共有や勉強会を行っております。 noteにも「人間工学シリーズ」と

うそのカウントダウンタイマーや、在庫が少ない、需要が高いなどの表示。 画像では、カウントダウンタイマーや「今だけ」の表示で焦らせて「今買わなければ」という気持ちに追い込んでいます。 今回私たちは、企業の間ではダークパターンがどのように認識されていて、どのような対策を取っているのか、現状を把握するために独自にアンケート調査を行いました。 調査は、武蔵野美術大学の長谷川敦士教授の監修のもとで行い、ダークパターンが使用されることの多い6つのジャンル（ネットショッピング、旅行予約サービス、飲食店予約サービス、動画配信サービス、音楽配信サービス、電子コミック配信サービス）について、利用者の多い5つのサービス、あわせて30のサービスを対象にしました（利用者数については、ニールセンとICT総研の調査を元にしています）。このうち、16のサービスの運営企業から回答がありました（回答率は53％）。 回答した企

World IA Day Tokyo 2024 (2024年3月2日開催) https://www.worldiaday.org/events/tokyo/2024 上記イベントの話題提供3「UIをもたらすコンテクストの考察」にて使用したスライドを公開用に編集したものです。 作者：森田 雄 /…

結論話題の記事「UIの色を変えただけで大量のクレームを頂戴してしまった話」を読みました。ユーザーを軽視した内容に驚愕したのですが、それよりも記事が批判されている原因を理解できていない様子の方が存在することに衝撃を受けました。 現職のデザイナーあるいはデザイナーを目指している方々にお伝えしたいことは以下の3点です。 具体的な不都合を訴える問い合わせは無益なクレームではなく有益なフィードバックです。プロダクトの価値向上につながる貴重な意見ですから無視するべきではありません。 時間の経過でユーザーがUIに慣れることはありません。問い合わせをしても無駄だと学習して離脱したパターンを疑いましょう。受け入れられる場合も含めて画面の変更はユーザーに負担を強いているのだと自覚してください。 色覚特性や色とコントラストについて学びましょう。色だけで情報を伝えるデザインはアンチパターンですから避けてください。

Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが

モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 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日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、