今活用しているツールを紹介 古川陽介氏（以下、古川）：今、具体的にいくつかツールや考え方が出てきました。今聞いているみなさんはおそらく、「じゃあ、どれを使ったらいいんだろう？」とか「何をしたらいいんだろう？」となっているかもしれないですが、倉見さんにお聞きします。ずばり私たちは今何をやっているでしょうかというところで。例えば……。 倉見洋輔氏（以下、倉見）：すごく話を誘導されている感もありますが（笑）。 古川：そうですね（笑）。誘導しているんだけど。 例えば、先ほど言っていたHTMLとかそういうのをスナップショットでテストしているとか、もしくは、見た目の部分でテストをしているとか、そういうところでどういうことをやっていますかと聞いてもいいですか？ 倉見：宣伝の場をいただきありがとうございます（笑）。特に見た目に関する層のテストではいくつか活用しているツールがあります。 1つはやはり、「St
「開け口」から切るとレシピも切れちゃう…食品パッケージの“モヤッ”に共感続々 キユーピーに理由を聞いてみた｜FNNプライムオンライン
食品パッケージの「なんで？」が話題 インスタント食品や料理の素などのパッケージについている「開け口」の表示。それに従ってビリッと袋を開け、さあ作り方を読もうとパッケージを裏返してみると、レシピの部分がちょうど破れて読めない！ 誰もが一度は体験した事があるだろうそんな現象について、Twitterユーザーのオヨネ（@Dq4O4ne）さんが投稿した画像が共感を集めている。 「なんなん、なんであけくちの下に作り方書くん？なんなん？」 オヨネさんが投稿したのは、キユーピー株式会社が販売している「キユーピー3分クッキング 野菜をたべよう！チャウダーの素」を「あけくち」に従って開けたところ、パッケージ裏面に記載された必要な野菜の分量やレシピがちょうど真っ二つに切れてしまったという写真だ。 この記事の画像（5枚） この投稿には「わかる！ちょうどいい位置にある」「他のメーカーでもある、なんでなんだろう」の声
(() => { "use strict"; const elements = Array.from(document.querySelectorAll("*")); const clickEvents = elements .map((element) => { const listeners = getEventListeners(element); const clickListeners = listeners.click || []; clickListeners.forEach((event) => (event.owner = element)); return clickListeners; }) .flat(); for (const event of clickEvents) { if (event.owner.matches("button, a[href]")) {
パーソナルコンピュータにおける巨人の一人、ラリー・テスラーさんが2月17日（米国時間）、74歳で死去した。 テスラーさんは、Xerox PARC（パロアルト研究所）でグラフィカルユーザーインタフェース（GUI）を備えた最初のワードプロセッサソフトウェア「Gypsy」を開発し、カット、コピー＆ペーストとモードレスでのテキスト編集を発明した。Appleに入社後はLisa、Newtonの開発に携わった。Newtonの心臓部となったRISCプロセッサの開発企業であるARM（現在のArm）へのAppleの出資を主導したのもテスラーさんだった。 カット、コピー、ペーストのキーボードショートカットがなぜそれぞれCommand + X、Command + C、Command + Vなのかについて、テスラーさんが自身のWebサイトで解説している。 GypsyではControlキーを「Look」と呼んでおり、
無限ローディングや「さらに表示」ボタンを採用することで、商品の読み込み時にスムーズなインタラクションを提供することができる。 Alternatives to Pagination on Product-Listing Pages by Kate Moran on March 6, 2022 日本語版2022年8月4日公開 最近、従来のページネーションコントロールをやめて、インタラクションコストを少し下げることのできるデザインパターンを選択するECサイトが多くなってきた。これらのパターンを採用したほうがいいのだろうか。それは、提供している商品の数による。 従来からのページネーションでは、商品の一覧を複数のページに分割し、ページごとに一定の数の商品を配置していく。そのため、さらに商品を見るには、画面の上部または下部にある「次へ」ボタンをクリックかタップして、次のページに移動する必要がある。ペー
プラットフォームになりつつあるVisual Studio Code 今、開発者の人気が最も伸びていると考えられている開発環境がMicrosoftの開発する「Visual Studio Code」だ。Windowsの統合開発環境としては、特定のプログラミング言語ではIntelliJが、ターミナルではVimがといったように、分野によって他の統合開発環境や多機能エディタのほうが人気が高い。しかし、ユーザーの増加数と勢いから見ると、Visual Studio Codeが第1の候補ではないかとみられている（参考「TOP IDE index」）。 Visual Studio Codeの最大の特徴は、開発環境としての機能をプラグインによって提供しているということにある。Visual Studio Codeは、開発環境のプラットフォームとして機能する。ユーザーは、自分の使うプログラミング言語に合わせてプラ
ユーザーインタビューは、誤った目的のために使われることが多い。また、計画や分析が適切でなかったり、インタビューを実施する価値をステークホルダーが理解していないこともある。 Why User Interviews Fail by Maria Rosala on June 9, 2019 日本語版2020年2月3日公開 ユーザーインタビューは、UXの重要な生成的手法だ。生成的な手法（インタビューやフォーカスグループなど）は知識を生み出す。一方、評価的手法（デザイン案のユーザビリティテストなど）は仮説をテストするためのものだ。インタビューを適切に実施すると、ユーザーの以下のことを知ることができる： 思考 信念 メンタルモデル エクスペリエンス こうした知識は、良質な製品やサービスの構築に役立つ。また、想像上のものではない、ユーザーの実際のニーズに対処することを可能にする。（デザインを開始する前に
はじめに フロントエンドエンジニアのみなさん、 要素を非活性にする際、disabled=trueを使っていませんか？ アクセシビリティ的にそのやり方は良くないです。 最近、アクセシビリティに配慮したアプリケーションの開発に携わっています。 その中でシニアエンジニアから頂いたフィードバックについて共有したいと思います。 結論 disabled=true ではなく aria-disabled=true を使う disabledの場合 disabledが付与されている要素はフォーカスができません。 そのため、キーボードを用いて操作しているユーザーにとって、 要素の存在を認知しにくいものにしてしまいます。 （フォーカスできない要素は存在しない要素とほぼ同義だから） ちなみにテキストフィールドをdisabledにすると上記のように、ボタンのフォーカスがスキップされ、スクリーンリーダーでも検知すること
こんにちは。GMOペパボ株式会社でCDO（Chief Design Officer）を務めている小久保浩大郎 a.k.a. kotarok です。CDOというのはまあ役職の話なのですが実務者としてはIAという領域を得意としています。ということでIAの話です。Information Architectureですよ。Artificial Intelligenceの方ではありません。 ペパボでは隔月でデザイナーの社内勉強会「Designer's MTG（通称デザミ）」を行っており、先日はIAをテーマに開催しました。今回から数回に渡ってそこで話された内容をダイジェストでお届けしたいと思います。と言っても実はIAをテーマにしたデザミは今回が2回目だったりします。前回の模様やデザミ自体の取り組みも記事になっております。 そんな2回目のIA回はテーマを具体的に「わかりやすさを作るIA」としました。私自身
「私は新Pixel 6が本当に気に入っているが、指紋認証が体験を台無しにしている」というユーザーの11月6日（現地時間）のツイートに、米Googleの公式Twitterアカウントが10分後に返答した。 Pixel 6シリーズの指紋認証は、背面ではなくディスプレイ内の光学式センサーによるものだ。Pixelシリーズでディスプレイ内センサーを採用するのはこれが初。 ユーザーのツイートは「ロック解除できるまでに6、7回トライしなければならないことがよくある。ソフトウェア更新で改善されるのを期待しているが、改善されなければこの端末をあきらめるかもしれない」と続く。 これに対しGoogleは「ご面倒をかけて申し訳ありません。Pixel 6の指紋認証センサーは強化されたセキュリティアルゴリズムを採用しています。そのため、場合によっては検証に時間がかかったり、センサーにしっかり指紋を接触させなければならな
トラックボールはマウスのように動かすのではなく、備え付けられているボールを指で動かすことでマウスカーソルを操作する入力インターフェースです。トラックボールには大まかに「人さし指で操作するタイプ」「親指で操作するタイプ」「手のひらで操作するタイプ」があり、それぞれのトラックボールを自作できるオープンソースプロジェクトが「Ploopy」です。 Homepage - Ploopy https://ploopy.co/ Ploopyで開発されているのは、標準サイズの人さし指操作型である「Classic Trackball」、手のひらにスッポリおさまるミニサイズの人さし指操作型である「Mini Trackball」、ほぼボールしかない超小型の「Nano Trackball」、カスタマイズ可能な8ボタンを備えた「Mouse」、そして標準サイズの親指操作型「Thumb Trackball」の5種類があり
苦手な｢ショートカットキー｣まるごと覚える凄技
コンテンツブロックが有効であることを検知しました。 このサイトを利用するには、コンテンツブロック機能（広告ブロック機能を持つ拡張機能等）を無効にしてページを再読み込みしてください。 ✕
2024年度リクルート エンジニアコース新人研修の講義資料です
公開日 : 2023年9月22日 カテゴリー : アクセシビリティ 「Stark」というウェブアクセシビリティ検証ツールがあります。各種ブラウザ (Chrome、Firefox、Safari、Edge) の拡張機能として、あるいは各種デザインツール (Figma、Sketch、Adobe XD) のプラグインとして、色覚シミュレーションや色のコントラスト比のチェックができるツールとして以前から知られていましたが、現在は、それ以外にもアクセシビリティに関する様々なチェックができるようになっています。 この記事では、Stark で可能なウェブアクセシビリティ検証について、Chrome 拡張機能を例に、無料プランで使える機能をご紹介します。 Chrome 拡張機能で Stark を開いたところ。 機能一覧 (Contrast、Typography、Alt-Text、Touch Targets、F
目が見えなくなったり、手が動かなくなった時、私たちはゲームを遊べるのか ― そんな時の救いとなるかもしれない“PS5のアクセシビリティ”に迫る
目が見えなくなったり、手が動かなくなった時、私たちはゲームを遊べるのか ― そんな時の救いとなるかもしれない“PS5のアクセシビリティ”に迫る コントローラーは雨や風を感じられるほどのリアリティになり、グラフィックやオーディオの性能なども向上、ロード時間も短縮された。とにかく没入感が格段に上がっている。 だがもうひとつ、注目したい機能がある。アクセシビリティの向上だ。 『ラチェット＆クランク パラレル・トラブル』の視覚アクセシビリティ 世の中には、さまざまな障害を持つ人がいる。視覚障害だけでも、まったく見えない人、見えているけれどピントの合わない人、視野が欠けている人、視力はいいけれど視野は狭い人など、千差万別だ。 四肢障害にもいろいろある。片手が動かない、指が動かない、動くけれど俊敏な動きが難しいなど、人の能力はさまざまだ。 こうした障害は、他人事ではない。今日、もしかしたら明日、事故に
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年に引き続き、技術仕様と国内法整備に関して、2022年のWebアクセシビリティの短期的な予測をしてみます。 WCAG 2.2とWCAG 3.0 WCAG 2.2に関しては、2020年末では2021年2月にCandidate Recommendation（勧告候補）になる予定だったものが、ずるずるとスケジュールが後ろ倒しになっており、執筆時点の2021年12月初頭になっても未だに勧告候補のステータスにはない状況です。一方で、執筆時点でのWhat’s New in WCAG 2.2 Working Draftによれば、2022年6月にRecommendation（勧告）を発行するスケジュールとのことです。 このスケジュールに間に合わせるのであれば、逆算すると4月までに勧告候補を発行する必要があります。よって、4月に勧告候
UXデザインにおいてはユーザーを理解し、寄り添うことが重要だと考えられている。『HmntyCntrd』のファウンダーでUXリサーチャーのVivianne Castillo氏は、『The Emotional Toll of Working in UX（UX領域で働くことによる感情的な負荷）』という記事のなかで、ユーザーを含む「人間」と向き合うときに、心にかかる負荷やセルフケアの必要性を綴った。 自分自身という「人間」を理解すること記事の内容を紹介する前に『HmntyCntrd』やCastillo氏について紹介しておきたい。 『HmntyCntrd』は、人間中心なUXデザインのためのオンラインコースやコミュニティを提供している。2021年にはFast Companyの『最もイノベーティブなデザインカンパニー』にも選ばれた。以下はコース内容を一部抜粋したものだ。 人間中心なデザインを実践するとき
千葉みき @mikichan459 この写真友達に見せたら、「どこがおかしいのかわからない」って。 実際は、エグいくらいの傾斜で、避けて遠回りしたくらいだったんだけどなぁ😔 他の友達も、「写真ではわからない」って。 伝わらないものかぁ😔 pic.twitter.com/o4sxqWHCwL
Webサイトにモーダルは必要か
これは備忘録であり、閉じた空間で話したことをオープンにしたいと思って公開している記事です。文字起こしでありません。 経緯としては、僕がモーダルの不満をツイートしたのがキッカケで、情報設計の分野の大先輩の稲本さんに、とりあえず不満を聞いてもらいつつ、いっしょに意見を整理させてもらった。 定義 ここでいうモーダルは、「モーダルダイアログ」のことで、他の操作を受け付けない状態、つまり文字通りモード状態になるもの。基本的に全面に被さるダイアログが現れてその他の操作はそれをを閉じるまで不可能になるインターフェイスと定義する。 Webアプリはわかる、しかしWebサイトのそれはわからん まず前提として、Webアプリケーションにおけるモーダルの有用性や必要性は理解できている。そもそもGUIが誕生した初期から存在していて、WindowsやmacなどのOSでも要所々々で今でも採用されているインターフェイスだ。
Hiroshi Saito @spiral_world 今の主な肩書きは予備校の数学講師； 著書「ラングレーの問題にトドメをさす！」「大学数学への道（共著）」（現代数学社）； 雑誌「現代数学」の「数学パズルにトドメをさす？！」連載終了； gensu.co.jp/saito/puzzle/ ； facebook.com/hiroshi.saito.… ； 音楽活動も再開するぞ Hiroshi Saito @spiral_world スーパーのレジで、このアイスのバーコードが読めずに店員が四苦八苦してて、結局値段を手打ちされたのだが、今確認したらこんなふざけたデザインになってて、もしかしたらバーコードリーダーが賢すぎてバーコード全体の形状をエラー判定した可能性も。森永サンデーカップ。 pic.twitter.com/uVL8vwcTGx
NemanjaはBMWやSubaruなどのブランドも手掛けたことのある、UI /UXプロダクトデザイナーです。 プロダクトデザイナーは、短期間に多くの情報を表示してしまうことがよくあります。「スキャナビリティ（読み取りやすさ）」という言葉の意味や、一般的な視線の動きのパターン、そして現代のデザイン原則を理解していれば、消費しやすいコンテンツと、魅力的なUIをつくることができるでしょう。 インターネットの世界は日々新たなアプリ、Webサイト、記事などが現れて広がっていきます。溢れかえるコンテンツから自分に関係のあるものだけを探すことは骨が折れるため、ユーザーを情報に注意を引きつけることはますます難しくなっています。 マーケティングの専門家であるDavid Zheng氏によれば、60%以上のユーザーは15秒以内にサイトを離脱しているというのです。 調査によれば、ユーザーはサイトの一言一句をきち
2020年、サイボウズのアクセシビリティを振り返る - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。開発本部 デザイン＆リサーチ アクセシビリティチームの SUGI(@blindsoup2p1)です。 私は今年の4月に新卒で入社した全盲のスクリーンリーダーユーザーで、アクセシビリティ・エンジニアとして活動しています。 サイボウズでは今年、正式にアクセシビリティチームが発足し、グループウェアのアクセシビリティ向上や社内への啓発を進めてきました！ この記事では、今年1年アクセシビリティチームが取り組んできた過程と成果をまとめ、来年の展望を示します。 と共に、エクストリームユーザーである私がアクセシビリティ向上にどうかかわっていったのかを合わせて紹介します。 ※アクセシビリティとは、能力・環境・状況にかかわらず、誰もがサービスやコンテンツを利用できること、またはその度合いのことです。 よくアクセシビリティは障害者・高齢者対応という誤解を受けますが、能力・環境・状況（の制約）は障害者
「スマホUIに影響を受けたパソコンUI」を眺める｜ritar
これは designing plus nine Advent Calendar 13日目の記事です。 こんにちは。ritarと申します。 最近、「スマホがなければ存在しなかったであろう、パソコンのUIデザイン」に興味があります。 何を言っているのかと思うかもしれませんが、とりあえずこちらをご覧ください。 macOS Big Sur (2020) 以降のコントロールセンターめちゃくちゃスマホっぽい、指で触って押せそうな見た目ですが、これはパソコン（Mac）の最近のUIです。 別の画面で昔のUIと最近のものを比べてみると…… Bluetooth設定（左：2020以前、右：2020以降）余白が増え、明らかにスマホっぽくなっています。各行の高さがとても増えています。 このようにスマホに影響を受けたであろうUIデザインは最近多く、それを見て「最近の流行りなんだな」とか「安直に時代に流されやがって」と
こちらは、Webアクセシビリティ Advent Calendar 2019 の２１日目の記事です。 Vue.js 開発における Web アクセシビリティ対応にまつわる内容となっております。（英訳記事） この記事は公開から１年以上が経過しています。内容が一部古い箇所があります。 自己紹介 大山奥人（おおやまおくと）と申します。ネット上では、おおやまみちのく、yamanoku と名乗って活動しています。 制作会社の Web デザイナーとして働き出し、株式会社GEEK でマークアップ・フロントエンドエンジニアとして従事した後、2019 年 10 月から株式会社クラウドワークスに在籍しております。 役職は UX エンジニアです。個人ではアクセシビリティ啓蒙も行っています。 著書 これからはじめるwebアクセシビリティ 技術書典で「これからはじめるwebアクセシビリティ」という技術同人誌を発表しまし
ドコモのコード決済サービス「d払い」が、大幅にリニューアルされたのは3月16日のこと。事前にアナウンスされてはいたが、アプリを開いた際に初めてUI（ユーザーインタフェーイス）が刷新されていたこと気付き、その違いの大きさに驚いた人もいるはずだ。ドコモのコーポレートカラーである赤を前面に打ち出したデザインは、白やベージュが基調になり、dポイントカードも画面上部のスワイプだけで呼び出せるようになった。 また、このリニューアルに伴い、これまで決済時に画面の遷移しかなかったd払いに、決済音が加わった。競合他社の決済サービスは当初から導入していたサウンドにも追随した格好だ。一大リニューアルを果たしたd払いだが、その狙いはどこにあったのか。同サービスのUIやUX（ユーザー体験）を担当したドコモのスマートライフカンパニー ウォレットサービス部の3人に経緯や成果を聞いた。 【訂正：2023年4月22日10時
CSS と WAI-ARIA 「WAI-ARIA」はブラウザー・支援技術が認識できる「意味」を注釈することで、ユーザーの理解を助ける技術です。この与えられた注釈は CSS にも共有され、意味をたよりに装飾の手がかりとすることができます。 セマンティックな「状態」表現 特別な理由があり「セマンティックではない」以下の様なマークアップを行った場合をみてみます。spanタグの class 名に btnの名前が付与されていますが、ブラウザー・支援技術は、以下をボタンだと認識できません。
チャコちゃん @69SORAMAME217 @Dq4O4ne FF外から失礼します🙇♀ ほんとほんといつも思ってるのに何回もやっちゃうやつで爆笑しました😂😂😂 あと、コンビニの揚げ物の袋の点線にシール貼るのもやめてほしい😂😂😂 2021-04-05 15:38:01
kintoneのアクセシビリティ改善とESLintルールの整備 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。Poca11y（ポカリ）チームのSUGI(@blindsoup2p1)と小林(@sukoyakarizumu)です。 わたしたちPoca11yチームは「kintone」のアクセシビリティ改善活動に参加しています。この記事ではkintoneのアクセシビリティを改善するチーム体制について解説します。さらにPoca11yチームとkintone開発チームが協力して整備したアクセシビリティを強化するためのESLintルールについても解説します。 Poca11y（アクセシビリティ）チームとkintoneのアクセシビリティ改善 Poca11yチームとは Poca11yチームはサイボウズ全体の「アクセシビリティ」向上を目的としたチームです。Poca11yチームでは主に以下3種類の活動を行なっています。 社内啓発：アクセシビリティの社内研修・勉強会・ガイドライン作成などを行います。 製品改善：サ
Webのアクセシビリティの確認としてスクリーンリーダーを使った動作確認もしてもらうと 「リンクとかボタンしか読まれず、見出しや説明文がスキップされてしまいました」 という報告をされることが時々あります。 これは大抵、スクリーンリーダーを起動して、Tabキーだけを繰り返し押してしまっていることによって起こります。スクリーンリーダーの操作方法を伝えると、読み飛ばしたと思っていたところもちゃんと読みあげてくれたということがほとんです。 アクセシビリティをかなり意識したページであっても、Tabキーだけでスクリーンリーダーを操作しているかぎり、ページの隅々まで読めることはほとんどありません。スクリーンリーダーにはTabキーを押す以外にもいろいろな操作が存在して、それを憶える必要があるわけです。私はアクセシビリティチェックのやり方を説明するときには、必ずその操作方法のうち最低限のものを紹介しているつも
アクセシビリティとオープンデータについて
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
以前、Next.jsのスクロール位置復元について記事を書きました。 上記記事でSPAとMPA(Multi Page Application)における、ブラウザバック/フォワード時のスクロール位置復元について言及しました。 MPAではスクロール位置がブラウザによって復元されることがある(ブラウザの実装に依存) SPAではこれらが軽視されがち Next.jsにおいても、デフォルトでは復元されない(ChromeでSSGページなど一部条件下では復元される) Next.jsではexperimental.scrollRestorationを有効にするとスクロール位置をsession storageに保存し復元する これらと同様に、ブラウザバック/フォワード時のUI復元についても軽視されがちなものの1つです。最近もこの手のUI体験の悪さについて、問題提起がされ話題になりました。 ブラウザバック/フォワー
政府は2023年度からマイナンバーカードと介護保険の保険証を一本化する。健康保険証の機能も先行して組み合わせる予定で行政と医療、介護の手続きが1枚のカードで済むようになる。政府は16年からマイナンバーカードの交付を始めたが、現在の普及率は15%程度にとどまっている。生活に便利な多機能カードと定義し直し、取得者を増やす狙いだ。介護保険の保険証は、要介護認定やケアプランの作成を申請する際に不可欠な
はじめに この記事では以下のアクセシビリティ要件を満たすモーダルを実装します。 モーダル要素に role 属性、aria-modal 属性、aria-labelledby 属性、aria-describedby 属性が付与されている モーダルを開くと、モーダル内の最初の focusable な要素に自動でフォーカスされる モーダルが開いている間、モーダル以外の要素に aria-hidden 属性が付与される モーダルが開いている間、モーダル以外の要素のスクロールが無効化される モーダルが開いている間、モーダル内でフォーカスがトラップされる Esc キーを押下すると、モーダルが閉じる モーダルの外側をクリックすると、モーダルが閉じる モーダルを閉じると、モーダルが開く前にフォーカスされていた要素にフォーカスが戻る
アップル、目で iPhoneやiPadを操作するアイトラッキングを追加。乗り物酔い防止や振動で感じる音楽などアクセシビリティ機能強化 | テクノエッジ TechnoEdge
ガジェット全般、サイエンス、宇宙、音楽、モータースポーツetc... 電気・ネットワーク技術者。実績媒体Engadget日本版, Autoblog日本版, Forbes JAPAN他 アップルは、毎年5月に行われれる世界各地でアクセシビリティを考える一日（Global Accessibility Awareness Day：GAAD）に合わせ、障害を持つ人たちに新たな体験を提供すべく、アップル製品への複数の新機能追加を発表しました。 今回発表された新機能のうち、iPhoneやiPadを対象とするものとしては、アイトラッキング(Eye Tracking)機能をはじめとして、カスタマイズ可能なVocal Shortcuts機能、Music Haptics機能、Vehicle Motion Cues機能などがあります。 アイトラッキングまず、一般ユーザーでも気になりそうなアイトラッキング機能は、
Yuichi ITOH / 伊藤雄一 @yuichi_itoh かつて大阪大学の広報・アートディレクションを生業としてましたが，今は青山学院大学の教授やってます． イトレオ/研究者/ハカセ/発明家/アートディレクター/KJ/青学/HCI/バイク乗り/Buell X1('99+'01)+1098R+KSR80+V125G🎓🕙https://t.co/hVdpxiXd3t youtube.com/c/yuichiitoh/
こんにちは、クックパッド デザイナーの平塚（@tsukasio615）です。クリエイション開発部では、レシピやつくれぽなどクックパッドの投稿体験に関する開発を行っています。 今回は、レシピ投稿の中でも重要な「レシピを書く画面」のUI改善についてご紹介します。 課題の洗い出しと優先度決めある日、プロダクトオーナーからレシピ投稿のユーザビリティ改善をしたいというオーダーがありました。レシピ投稿と言っても、ユーザーがレシピを書こう！と思ってから、実際に書き、レシピを公開するまで、範囲は多岐に渡ります。この一連の流れの中で、ユーザーが迷うことなくレシピ公開まで進められるように改善するのが目的です。今回は具体を進める前に、レシピ公開率（レシピを公開した数 / レシピ投稿画面を開いた数）をこの施策の指標として定めました。 具体的にどこを改善するか決める段階で、まずはレシピ投稿のユーザビリティテストを行
はじめに デザイナー以外の方でも、サイトやアプリを作るためにUIを作成することはよくあると思います。 そんな時に最低限知っておくと良さそうな、アクセシビリティに関するTipsをまとめてみました。 この記事で紹介する以外にも色々とあるとは思うので、是非コメントなどで「これも追加した方がいいんじゃないか」など提案いただけると助かります！ この記事ではFigmaなどのデザインツールでUIをデザインする段階を想定しています。 そのため、「ボタンはdivでなくbuttonで実装する」「アイコンフォントにaria-labelをつける」「音声を勝手に再生しない」といった実装段階のポイントは扱いません。 読みやすい文字のサイズや色、フォントを使う 文字サイズ Webサイトやアプリで使われている本文のフォントサイズは14~18pxが多いです。 また、W3Cでは英文の場合18ポイント以上もしくは、14ポイント
異なる二社の間で鍵の貸し借りをしなくても両社が独自の鍵で開けられるシステムに「シンプルかつ確実なデザイン」「アナログOR演算じゃん」などの声
葬送の電波やくざ🤍🐰🩷 @denpa893 東京電力の送電線鉄塔にau基地局ついてたけど その柵の鍵が頭よかった これなら東京電力とauの間で鍵の貸し借りしなくても両社独自の鍵で開けられるし すばらしいな pic.twitter.com/ZkVwMRno75
もう年末ですね。 去年の今頃は風邪で鼻水だらだらの記憶がありますが、皆さんは如何お過ごしですか？ どうも、しばおです。 さて、いきなりですが、皆さん ハンバーガーボタン ってどうやって作ってます？ ハンバーガーボタン の作り方をググったりすると、空っぽの span タグ 3個で作ってたり、div タグ や チェックボックスで作ってたりするのをよく見かけます。 でもね。僕的には、button 要素がベストだと思っているんです。 そこで今回は、なぜハンバーガーボタンを button 要素で作った方がいいのかや、僕なりの作り方をできる限り詳しく解説をしてみたいと思います。 ちなみにこの記事は、ある程度、HTMLやCSS、JavaScriptを使った基本的なコーディングを理解している人向けになりますので、CSSって何？って方は先に、基本的なコーディングを学習しておいて下さい。 ハンバーガーボタン
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「フロントエンドのテストは“不安定さ・壊れやすさ”との戦い」 和田卓人×倉見洋輔×古川陽介が語る、アクセシビリティの重要性
アクセシブルじゃないクリックイベントを発見する
カット、コピー＆ペーストの父、ラリー・テスラーさん死去
商品一覧ページにおけるページネーションの代替案
Visual Studio Codeショートカットキー15選
ユーザーインタビューが失敗する理由
要素を非活性にするのに、まさか disabled を使ってないよね？ - Qiita
わかりやすさを作るIA - Pepabo Tech Portal
「Pixel 6」の「指紋認証が遅い」というツイートにGoogleがリプライ
世界に1つだけの「自分だけのトラックボール」を自作できるオープンソースプロジェクト「Ploopy」
Webアクセシビリティ入門_2024
ウェブアクセシビリティ検証ツール「Stark」 | Accessible & Usable
2022年のWebアクセシビリティ | gihyo.jp
「共感」が負債に。元GoogleのUXリサーチャーが語る、デザイナーのメンタルヘルス問題｜designing
エグい角度のスロープの写真を友達に見せたけど「どこがおかしいのかわからない」と言われた「これは無理」「むしろ危険スポット」
「本当に読まないです」スーパーのレジでアイスのバーコードが読めずに店員が四苦八苦…原因はデザイン？アイス？
【Hothotレビュー】 Unihertzの代表作が期待を裏切らない進化！ミニミニスマホ「Jelly Star」レビュー
よりよいスキャナビリティのためのUIデザイン
Vue.js から考えるアクセシビリティについて - 2019
“打倒PayPay”でスタートした「d払い」アプリの刷新 賛否両論の決済音を導入したワケ
WAI-ARIA 準拠には CSS Modules が最適という話
「何考えてこのデザインにしたのか…」なんでパッケージの開け口の下に作り方とか大事な説明を書くの？？？？？
スクリーンリーダーの操作にはTab以外のキーも必要です - Qiita
Next.jsで戻る厨を満たすrecoil-sync-next
介護・健康保険証、マイナンバーカードと一本化へ - 日本経済新聞
実装しながら理解するモーダルのアクセシビリティ with React
勢いよく降りてぶつかりかけた鏡の写真がバズった3日後に対応がされる世界…「判断が早い」「元ムラウチだったのか」など
ねらいどおりの変化を起こす、UI改善について｜tsukasio
サイトやアプリのUIデザインをする時に知っておくと良いアクセシビリティのこと - Qiita
ハンバーガーボタン 何で作ってる？僕なりの作り方を解説してみる。 - Shibajuku