記事カテゴリー : 情報設計 (IA)
(全73件 : 1/8ページ)

見えにくい、読みにくい「困った!」を解決するデザイン

『見えにくい、読みにくい「困った!」を解決するデザイン』を読みました。色、文字、ことば、図解、UI のビジュアルデザインについて、アクセシビリティ (あるいはユニバーサルデザイン、インクルーシブデザイン) の観点から「このように改善するとよい」をわかりやすくまとめた書籍です。

Figma 用のアクセシビリティ注釈キット「A11y Annotations」

Figma で作成したウェブサイト/アプリケーションの画面設計 (ワイヤーフレームやプロトタイプ) に対して、アクセシビリティに関するアノテーション (注釈) を付けるためのキットを、Figma Community にて公開しました。よろしければ、皆さんのプロジェクトやチームの活動で、ご活用いただければ幸いです。

一覧ページにおける画像 (サムネイル) を伴うリンクの設計

一覧ページにおける各リンクは、リンク間の識別性を高めたり、よりユーザーの目を惹いたりするために、画像 (サムネイル) を伴うものがよく見られます。このような画像を伴う一覧のリンクは、案外アクセシビリティの問題が生じやすいところでもあります。

Twitter 投稿画像の代替テキスト入力リマインダー

Twitter の「ALT」バッジによって、本来の代替テキストとは違う意図のテキストが投稿画像に対して入れられてしまう問題が見られますが、こうした背景からか、Twitter では画像の代替テキストを適切に記述するようユーザーにリマインダーを提示する機能が追加されました。

ウェブアプリのダークモード対応 〜「見やすさ」「わかりやすさ」の観点で考える (PWA Night vol.41)

2022年7月20日に開催された「PWA Night vol.41 〜 Design」に登壇させていただき、『ウェブアプリのダークモード対応 〜「見やすさ」「わかりやすさ」の観点で考える』というテーマでお話をしました。

Twitter の「ALT」バッジ

2022年4月8日付で、Twitter は「ALT」バッジをグローバルにリリースしました。晴眼者に向けて画像に代替テキストを付けることを啓発、促進する意味合いがあるのだろうと思いますが、実際には「ALT」バッジが表示されたことによってかえって、本来の代替テキストとは違う意図のテキストが入れられてしまうケースが見られるようになっています。

Designing Connected Content

「DESIGNING CONNECTED CONTENT — デジタルプロダクトの長期的な成長を支える構造化コンテンツ」を読みました。デジタルコンテンツについて、基本となるのは「構造化コンテンツ」であり、まず構造を設計し、その構造に基づいてコンテンツを作り、最後にインターフェースとしてパブリッシュしよう、と説くものです。

ウェブコンテンツのダークモード対応

ウェブコンテンツのダークモード対応は、必ずしも必須というわけではありませんが、ユーザー体験に寄った視点で考えると一定の意義はあると言えます。なお、ウェブコンテンツにおいては CSS のメディア特性 (prefers-color-scheme) を用いることでダークモード対応ができますが、実際にダークモード対応の実装をする場合は、いくつか気をつけておきたいことがあります。

ブラウズか検索か

ウェブサイトにおける情報探索の方法には、大きく分けて、ブラウズと検索があります。どちらを利用するかはユーザー次第ではありますが、ユーザー行動の基本的嗜好として、まずはブラウズが検索に優先すると考察することができます。

YouTube における「低く評価 (dislike)」ボタンのカウント数の非表示

YouTube の各動画には、「高く評価 (like)」ボタンと「低く評価 (dislike)」ボタンが備えられています。以前は、両方のボタンに対して、それぞれが押されたカウント数が明示されていましたが、2021年11月以降、「低く評価 (dislike)」ボタンのカウント数が非表示になりました。