タグ

designとaccessibilityに関するk_oshimaのブックマーク (5)

  • 「UIの色を変えただけで大量のクレームを頂戴してしまった話」の何が問題か?|moutend

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

    「UIの色を変えただけで大量のクレームを頂戴してしまった話」の何が問題か?|moutend
    k_oshima
    k_oshima 2024/03/08
    デザインには大きな力が秘められています。さじ加減ひとつで多くの人を幸せにできる力です。
  • 「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog

    「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要

    「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
  • ローソンPB新パッケージの「わかりにくすぎる」という問題 ユニバーサルデザインの専門家に訊く - wezzy|ウェジー

    ローソンは2020年春、プライベートブランド商品のロゴ・パッケージを刷新した。これまでの「ローソンセレクト」を「L basic(エル ベーシック)」「L marche(エル マルシェ)」の2つのブランドに一新したという。手掛けたのは国内外で幅広いクリエイティブを行うデザインオフィスnendoだ。 確かにデザインは美しい。しかし店頭に並んだ商品を見ると、統一感はあるが何の商品だかわかりづらい。Twitterでも「前のデザインの方がわかりやすかった」という消費者の声が目立つ。 筆者の和久井は、ライターと並行して合同会社ブラインドライターズという、視覚障害者を中心とした会社を運営している。スタッフには、中心視野が欠けていて焦点が合わない人、全体的にぼやけて見える人、トイレットペーパーの芯から物を覗いているように見える視野の狭い人など、さまざまな視覚の状態の人がいる。彼らにも見てもらったが、「非常

    ローソンPB新パッケージの「わかりにくすぎる」という問題 ユニバーサルデザインの専門家に訊く - wezzy|ウェジー
  • React-axe で React アプリケーションのアクセシビリティを向上させる | メルカリエンジニアリング

    こんにちは、この 4 月にメルカリに新卒入社したフロントエンドエンジニアの @karszawa です。 この頃は Google I/O 2019 のキーノートでアクセシビリティが大きく取り上げられたり、Safari に Audit タブが追加されアクセシビリティに関する様々なテストできるようになったりと、フロントエンド界隈におけるアクセシビリティへの関心の高まりを感じます。 記事では React アプリケーションのアクセシビリティをチェックするためのライブラリである React-axe と、その中心技術である axe-core を応用した様々なツールをご紹介します。 React-axe とは React-axe は React アプリケーションのアクセシビリティをチェックするためのツールです。チェックの結果は Chrome DevTools に表示され、開発中にアクセシビリティの問題に気

    React-axe で React アプリケーションのアクセシビリティを向上させる | メルカリエンジニアリング
  • エンジニアのための配色まとめ - Qiita

    無彩色 白と黒との混合で得られる色(白と黒自体も含む)の総称。 白・黒・さまざまな濃度の灰色が含まれる。 彩度が0であることを表す。 無彩色でない色は、有彩色である。 via 写真技術 色と陰影(手代木さんblogより) - 写真技術と光への道でフォトディレクション-Jimdo撮影編 有彩色 白、黒、灰色以外の色味を持った色のこと。 有彩色にはさらに、純色、清色、中間色に分類される。 以下のような図を、 等色相面 と言う。 via 純色、清色、中間色|株式会社ノイエデザイン 純色 各色相において、最も彩度が高い色。 ただし、色空間によっては純色以外にも彩度が最大になる色がある。 清色 清色はさらに、明清色、暗清色に分類される。 清色にはくすんだ印象がなく、濁りがない色という特徴がある。 明清色 純色に白だけを加えた色。 ピンクや水色など 暗清色 純色に黒だけを加えた色。 紺色や茶色など 中

    エンジニアのための配色まとめ - Qiita
  • 1