ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？ それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇

こんにちは、デザイナーの花ちゃんです！ かれこれ3年ほどLIGブログで記事を書いていますが、最近意識していることがあります。それは、文字だけではなく、できるだけ視覚的に情報を伝えるということです。最初は文章を書くことに必死でしたが、よりわかりやすく、最後まで楽しく読んでもらうにはどうしたらいいかを考えるようになり、たどり着いたのが「図解」でした……！！ 今回は、図解を作るときのポイントやグラフ作成時にやりがちな失敗例、ストックしておくと便利なチャート図のデザインパターンをまとめてみました。 【図解を作るときにおすすめの素材】 👉フリーイラスト素材サイト39選【デザイナー厳選】 👉無料で商用利用可なフリーアイコン素材サイト13選【デザイナー厳選】 【一からWebデザインを学びたい方へ】 現場で活かせるWebデザインの基礎をしっかり学びたい、現役デザイナーに教えてもらいたい……という方は、

今回は、人間中心設計に関する国内規格・2021年版JIS Z 8530について、そのポイントを見ていくことにしたい。これは、2019年版ISO 9241-210の(部分的に修正がいれられた)日本版である。 黒須教授 2021年6月15日 これが標準訳になるか ISO 13407が1999年にでて、翌年JIS Z 8530:2000として日本で公開されてから、もう21年が経過した。この規格は、人間中心設計という概念を広め、ユーザビリティに対する社会的関心を高めたものとして、大きな意味を持つものだった。筆者も『ユーザ工学入門』(1999)とか『ISO13407がわかる本』(2001)などを出して、その概念の普及に努めた。 その改訂版がISO 9241-210という番号に変わって2010年にでたが、これは当時流行していたUXの概念を未消化なまま導入したり、ちょっと無節操に内容を拡大したようなバー

キャレットアイコンは、アコーディオンがその場で開くのであって、新しいページへの直接のリンクではない、ということを最も明確にユーザーに示すことができていた。 Accordion Icons: Which Signifiers Work Best? by Page Laubheimer and Raluca Budiu on August 23, 2020 日本語版2021年4月8日公開 アコーディオンが、現在、人気のあるUI要素であるのには理由がある。というのも、モバイルでは、コンテンツを折りたたんでページの長さを管理可能にする不可欠なツールになっている一方、デスクトップでも、視覚的な複雑さを軽減し、ユーザーが目下のタスクに最も関連性の高いコンテンツに集中できるようにしてくれるからだ（複雑なアプリケーションには特に適している）。 モバイルUXとアプリケーションデザインの両方の講座でよく聞かれ

動き（英: Motion）は、デジタルデザインのユーザーエクスペリエンスに大きな影響を与えます。 しかし、インターフェース要素にモーションデザインの基本原則をうまく取り入れなければ、使いやすさとなるユーザビリティは損なわれてしまいます。 この記事では、ユーザーに説得力と感動を与える、モーションデザインの基本原則12個をまとめています。 モーションデザインとは？ モーションデザインとUXの組み合わせは、比較的新しいものですが、そのルーツは世界中のひとを魅了し続けるディズニーです。 ディズニー社の現場で長年培われ、トップクリエイターFrank ThomasとOllie Johnstonが苦心して作成したアニメーションの基本原則12個（英: 12 Principles of Animation）は、「生命を吹き込むイリュージョン: ディズニーアニメーション（英: The Illusion of

多くのデザイナーが日々、使いやすいデザインについて模索しています。 WebページやスマホアプリのUIデザインにおいて、使いやすいデザインへの一つの答えとなる記事を紹介します。 すっきりデザインされたUIよりも、はっきりと分かるようにデザインされたUIの方が使いやすい最高のUI！ The Obvious UI is Often the Best UI by Susanna Zaraysky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 下部のナビゲーションバー = 使用率の増加 下部のナビゲーションバーとアクセシビリティ 「明白な」アイコンが「一般的な」アイコンとは限らない 他のUIをコピーしても、明白なデザインは保証されません 明白なものを見つけるには、問題点を見つけること はじめに フランスの哲学者ヴォルテールの言

大規模なユーザビリティ調査によって、現在、最も一般的かつ有害なWebデザインの間違いが明らかになったが、そうした間違いは意外なものでも新しいものでもなかった。つまり、それらは課題としてずっと続いており、Webサイトのユーザビリティを損ない続けているのである。 Top 10 Enduring Web-Design Mistakes by Amy Schade, Yunnuo Cheng, and Samyukta Sherugar on October 30, 2016 日本語版2017年2月23日公開 1996年以来、我々はWebデザインの間違い・トップ10のリストを作成してきているが、現在のWebデザインの間違いを調べるために、今年もアメリカとイギリスで215人の参加者からなる大規模なユーザビリティ調査を実施した。小さな地場企業からエンターテインメントサイト、非営利団体、グローバル企業に

アプリやウェブアプリケーションは、ユーザーからの入力がなければ何も変化しません。プロダクトデザイナー、開発者、そしてプロダクトマネージャーがそれを理解することはとても重要です。 テキストフィールドは、ユーザーが短いテキストを入力するための基本パーツです。どのようなアプリでも、個人情報の入力を求める小さなテキストフィールドを必ず目にします。 この記事では、テキストフィールドを中心にデータ入力を改善する重要な要素について見ていきたいと思います。ただし、すべてのルールには例外があるということを念頭に置いておいてください。 わかりやすさ わかりやすいテキストラベル ユーザーはどんな種類のデータをフィールドに入力するべきか知りたいと考えます。明確なラベルテキストはユーザーにそれを伝えるメインの手段になります。もちろん、アイコンを頼りにフィールドの意味を理解することもあります。例えば、ユーザーが虫眼鏡

現時点での問題点 HTML のコーディングとしては上記の通りでよいはずですが、実際には、スクリーンリーダーでの利用において、多少の問題が残っているのが現状です。私の手元にある、ローコストなユーザーエージェント環境では、実質的に使えるのが Windows NVDA + Firefox くらいという結果でした。 音声読み上げ 結合したデータセル (「ホワイト、ブラック」) にフォーカスが当たった場合、Windows NVDA + Firefox および Mac VoiceOver + Safari では特に問題なく読み上げられたのですが、以下のユーザーエージェントの組み合わせで、問題が見られました。 Windows NVDA + Chrome headers 属性で紐づいている <th> 要素すべてが読み上げられない (最初に紐づいている「商品A」のみ読み上げられる)。 Windows NVD

モバイルデバイス用の入力欄をデザインするときには、14のユーザビリティ要件からなるこのリストを満たしているかどうかをチェックしよう。 A Checklist for Designing Mobile Input Fields by Raluca Budiu on June 14, 2015 日本語版2015年7月10日公開 デザイン対象がWebページであれ、Webベースのアプリケーション（たとえば、SaaS）やネイティブモバイルアプリであれ、基本の構成要素の1つになるのが、ユーザーがテキストを入力する地味なテキスト入力欄である。このウィジェットは大量に利用されているので、その利用自体について、この記事で話す気はない。アプリケーションデザインにおいて、ワークフロー等の全体像に関わる問題は良質なユーザーエクスペリエンスにとって重要であり、指摘する必要のある課題がたくさんあるからである（こうした

ユーザビリティの概念を、人工物品質特性と利用品質特性、それぞれ客観的なものと主観的なものとに分け、現時点で自分に納得できる整理ができたので、ここに報告したい。 黒須教授 2014年11月4日 （「ユーザビリティ再考(1)」からのつづき） 製品品質と利用品質の区別 今回の考え方は、結果的にISO 9241-11とISO 25010とNielsenの定義(すなわちShackelの定義でもある)をひっくるめたものになっている。説明の流れはISO 25010をベースにした方がいいだろう。そもそも、製品品質とそれが使われた時の利用品質を区別している点を適切に思っているからだ。 ISO 25010で一番違和感があったのは、ISO 9241-11と同じ定義(すなわち、有効さと効率と満足感)が利用品質に含まれている点だった。ユーザビリティの定義がユーザビリティではなく利用品質の側に入っているということがど

ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ

現実的なタスクシナリオを書くことで参加者を関与させ、行動を促そう。また、そのインタフェースがどのように利用されるべきかは明かさないようにしよう。 Turn User Goals into Task Scenarios for Usability Testing by Marieke McCloskey on January 12, 2014 日本語版2014年2月4日公開 あるインタフェースで何が機能し、何が機能してないかを理解する最も有効な方法は、それを利用しているユーザーを観察することである。これがユーザビリティテストの本質だ。適切な参加者が現実的な活動をしようとしているとき、ユーザーが苦労する原因になりそうなことについての定性的知見は得られる。こうした知見はデザインをどのように改善すべきかを決定するのに役立つ。 また、サイト全体のユーザビリティを明らかにする手段として、ユーザーがタス

Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ

CSS に1行加えるだけで ラベルまわりがとってもわかりやすくなる。 「そんなん当たり前」という人もいるかもしれないけど Gmail やら Twitter やらのログイン画面を見たら 実装されてなかったので一応。 label というのはフォームの部品とセットで使うやつで、 ある部品とその項目名を結びつけるやつね。 ↓このようなチェックボックスがあるとき 次回から自動的にログイン ↓こんなふうにラベルを指定しておくと <input type="checkbox" id="rememberme"> <label for="rememberme">次回から自動的にログイン</label> テキスト部分とチェックボックスが関連づけられるので テキストをクリックした時も チェックボックスにチェックが入るようになりますね。 ここをクリックでチェック入れられるよ 小さいチェックボックスにマウスカーソルを