ユニクロ公式サイトが視覚障害者には使えない。健常者からも大不評
リンク note（ノート） ユニクロ公式サイトが使えません（ついでにレジも）｜ブラインドライターズ ブラインドライターズのスタッフは9割が視覚障害者。 先日、みんなで「どうやって服を買うか」の話になりました。 マネキンの服は見えないので、コーディネートが分からない 下着を買いたいけど、店員さんの性別が分からないので声をかけづらい ロービジョンなので黒なのか紺なのかわかりにくく、店で買いづらい などと、たくさんの悩みごとがありました。 確かに、異性の店員さんに下着の相談はしにくいですよね。 タグが読めなければ、サイズも分からない。リアルでの買い物は一人ではけっこう難しそうです。 そんなときに便利なのがEC 484 users 65
iOSとAndroidの"Divider"の線幅の違いと各社の対応｜鈴木慎吾 / TSUMIKI INC.
アプリやWebサイトをデザインする際に、情報をまとまりごとに線で区切ることがあります。リストの各項目を区切ったり、コンテンツをセクションごとに区切ったりする場合です。この区切り線は"Divider"と呼ばれます。 このDividerの線幅について、国内外のサービス各社の対応を調べてみました。 iOSとAndroidのDividerの線幅の違いiOSアプリのリストはSwiftUIで以下のように実装できます。 var body: some View { List { Section(header: Text("タイトル")) { Text("テキスト") Text("テキスト") Text("テキスト") } } .listStyle(.plain) }これをプレビューすると、各リストの間に 物理ピクセル数 1 の太さの線が表示されます。 iOSアプリのリストAndroidアプリのリストは以下
ヘッダー（グローバルナビゲーション）のデザイン事例100選｜akane
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像
Webデザインで「紙っぽさ」を出す方法を考えてみる｜akane
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を
その状態のデザイン考えてなかった！ UI Stackってナニ｜kana
アプリの画面をデザインする際、エンジニアさんに 「なにも登録データがない場合、どう表示しますか」「選択したときの状態ってどんなデザインですか」などと聞かれて 「ｳﾜｱ考えてなかったすみません、今作ります。。」 （なんて自分はポンコツなんだ、、ｳｳｳ） と、なりたくないですよね。 UI Stackは👆のような状況を回避するのに便利で大事な考え方だと思ったので、言葉の意味を知らない方はぜひ読んでってください！ UI Stack アメリカのプロダクトデザイナー Scott Hurff さんが世に出した 「UIの考慮すべき5つの状態」という考え方です 5つの状態 ・Blank State（空っぽの状態） ・Loading State（ローディング状態） ・Partial State（部分達成状態） ・Error State（エラー状態） ・Ideal State（理想状態） 一つ一つ参考を交えな
知識０から、ちょっとUIデザインに詳しくなるnote｜やました
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 デバイスやソフトによるUIの違い皆さんがお使
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
【翻訳】なぜ、最悪のUXを持つプロダクトが市場を制するのか？（Meelis Ojasild, 2022） - 体験とデザイン、スタートアップについて
meelis-ojasild.medium.com 企業がユーザーエクスペリエンスに基づいてソフトウェアを選択するというのは神話です。しかし、PMは主にUXに注目しています。では、実際はどうなっているのでしょうか？ ソフトウェアの選定プロセス これが一般的なソフトウェア選定の仕組みです。 人々は問題とそれを解決する可能性のあるソフトウェア・カテゴリーを認識します。 ソフトウェアのカテゴリーを広くグーグル検索しています（例えば「ベストCRMツール」）。 彼らは、Googleで上位に表示されるいくつかの結果を閲覧します Googleのトップページで最もよく使われているソフトウェアソリューション（Salesforce、Hubspot、Pipedriveなど）を（精神的または物理的に）メモしておくのです。 安いものから試していく（HubspotとPipedriveとします）。 テストでは、1つのコ
モバイルユーザーエクスペリエンスの現状 – U-Site
最初のiPhoneから15年が経ち、モバイルのユーザーエクスペリエンスの質は安定してきた。モバイル標準もできてきた一方、モバイルWebとネイティブアプリの区別はあいまいになりつつある。 The State of Mobile User Experience by Raluca Budiu on January 1, 2023 日本語版2023年6月9日公開 最初のiPhoneが発売されたのは2007年6月だった。2008年の終わりに、我々がモバイルレポートの初版のための調査を開始したときには、ユーザーの持つモバイルデバイスはまだ原始的なもので、ユーザーエクスペリエンスもひどいものが大半だった。当時は、ほとんどのモバイルデバイスやモバイルサイトが引き起こす悲惨な状況に比べれば、それなりにまともなエクスペリエンスというだけで好ましいものとされていたのである。 5年前、モバイルレポートの第4版を
ウェブアクセシビリティを無料で学べる資料まとめ（10年分）｜magi1125
こんにちは。伊原 力也（@magi1125）と申します。業務アプリケーションのデザイナー、デザインチームのマネージャー、アクセシビリティ関連のコンサルタントなどをやっています。 ウェブアクセシビリティを普及啓発する活動を始めて10年が経ちました。おかげさまで興味を持ってくれる人はかなり増えたと感じています。しかし、人が増えると声は届きにくくなります。「アクセシビリティをどこから学び始めていいかわからない」という意見も目にするようになってきました。 また、私はこれまでにアクセシビリティに関する書籍を何冊か書いていますが、専門書ってちょっと高いので、興味があるぐらいの段階で本を買うのはちょっと……という気持ちもわかります。 ということで、これまで自分が発信したり関わったりしたコンテンツのうち、ウェブアクセシビリティの理解の助けになりそうものをベストアルバム的に一度まとめてみることにしました。
UIデザインの「あれ」の名前を知ろう｜株式会社ドヴァ
こんにちは。ドヴァ マーケティングサービス部所属デザイナーのマリコです。 WebのUI・UXデザインの仕事をしていると、デザイナー同士なら「ここのデザイン、コレをこうしたい（身振り手振り）」だけでほとんど伝わるけど……、クライアントに説明するときはそのイメージと一緒に、正式名称で正しく伝えるようにしよう、と思うことがよくあります。 でも、パーツデザインの名称って意外と知られていないものが多いので、今回はその一部を紹介します。「これは絶対この名前で、それ以外は間違いです！」というわけではなく、さまざまな呼び方がある場合も多いため、こういう呼び方もあるんだなぁという気楽な感じで読んでいただければ嬉しいです。 『三本線のボタン』⇒ハンバーガーメニューボタン 今や、どのWebサイトでも使われている超定番のナビゲーションメニューボタン。名前のとおり、ハンバーガーのパティとバンズのような形状からこの名
ABEMAにおけるサムネイル検証とOPE活用
CFML勉強会で発表した資料です(https://cfml.connpass.com/event/264017/) 概要: ABEMAにおいてサムネイルは、番組へユーザーを誘導する重要な役割を担っており、より良いサムネイルを作成するための検証や、ユーザーにとって相性の良いサムネイルを選択する最適化は非常に重要なデータサイエンスのタスクとなっています。この発表では、そういった検証や最適化における、A/BテストやOPEの活用の事例についてお話しします。
「のどが渇いた」というユーザーに何を出す？ ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
2022年9月13日 株式会社メンバーズ ポップインサイトカンパニーでのウェビナーのスライドです。「ユーザーが欲しいと言った機能をつけたのに使われない！」という経験はありませんか。プロダクトをつくるとき「ユーザーの心理を理解しよう」とよく言われます。しかし、ユーザーに言われたままやることと、ユーザーが本当に望んでいることは異なります。「UXデザイン・UXリサーチ」は、ユーザーを理解するための専門技術です。ユーザーインタビューやユーザビリティテストを用いてファクトを集めることで、ユーザーの表面的な言葉に惑わされない、本当のインサイトにたどりつくことができます。かんたんなワークも交えながら、体系的に解説いたします。Read less
“アプリUIあるある”な6つのNGボタン 人事SaaSを例に専門家が解説
“アプリUIあるある”な6つのNGボタン 人事SaaSを例に専門家が解説：徹底解剖！ SaaSのUI／UX（1/2 ページ） 急拡大するSaaS市場。分野によっては競合も多く、わずかな欠点が競争力に影響する場合もあるだろう。しかしサービスの成長が速いと、なかなか課題点を修正しきれず、そのままになってしまうこともある。 中でもUI／UXは使いやすさを高め、ユーザーの満足度を保つ重要な要素の一つにもかかわらず、問題を修正しないままビジネスを続けてしまう企業もあるという。人数も予算も少なく、UI／UXの分析に回せるリソースが限られるスタートアップではなおさらかもしれない。 そこで、本連載ではB2B SaaSや業務システムを中心にUI／UXデザインを手掛けるベイジ（東京都世田谷区）が、SaaSにありがちなUIデザインの問題を実例を交えつつ解説。ユーザーの満足度を落とさないための改善方法を解説する。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
鈴木慎吾 / TSUMIKI INC. on X: "Slackのオンボーディングを観察した記事。ぱっと見では気が付かないほど細やかだけど、良く考えられていて面白い。 https://t.co/HRpX1sy5hz - コーチマークのステップの途中にカスタムカラーの選択を挟む - 誤ったメールアドレスの警告 - https://t.co/AJYL2MSM92"
https://twitter.com/so_hasegawa/status/1789226410898534545?s=43&t=soNcT6O2AeVewuhHm1Gciw
ヤフーのユーザー5,400万人から"同意"を得るための技術
https://twitter.com/u2qshinshiro/status/1725286741475819553?s=43&t=soNcT6O2AeVewuhHm1Gciw
【CEDEC 2018】明快で軽快！ Nintendo SwitchのUIを触るだけで楽しい理由 - GAME Watch
問い合わせ率が3年間で半分になった
