カラーユニバーサルデザイン推奨配色セットについて – NPO法人 カラーユニバーサルデザイン機構 CUDO
「カラーユニバーサルデザイン推奨配色セット」は、文字やサインなど、比較的小さな面積でも見分けやすい、高彩度のアクセントカラー9色、案内図や地図の塗り分けなど、広い面積に用いる高明度・低彩度のベースカラー7色、これらの色と誤認しにくい無彩色4色の合計20色（塗装用のみ代替色2色を含む22色）のカラーパレットです。 特徴はC型の人が同じ色のグループに感じる色の中から、C型とP型とD型色覚の人に見分けやすく、またP型D型色覚の人が色の名前を間違えにくい色を選んでいます。 実際に使いやすいように、RGB指定値、CMYK指定値、日本塗料工業会の色票番号、そして参考にマンセル値も表記しました。 ガイドブックの入手 １）有償印刷版 CUD推奨配色セット ガイドブック 頒価と送料 一冊 100円＋配送料 〔配送料〕 ・1冊————— 配送料 210円 （内訳 定形外郵便210 円） ・2冊————— 配送
Next.jsで戻る厨を満たすrecoil-sync-next
以前、Next.jsのスクロール位置復元について記事を書きました。 上記記事でSPAとMPA(Multi Page Application)における、ブラウザバック/フォワード時のスクロール位置復元について言及しました。 MPAではスクロール位置がブラウザによって復元されることがある(ブラウザの実装に依存) SPAではこれらが軽視されがち Next.jsにおいても、デフォルトでは復元されない(ChromeでSSGページなど一部条件下では復元される) Next.jsではexperimental.scrollRestorationを有効にするとスクロール位置をsession storageに保存し復元する これらと同様に、ブラウザバック/フォワード時のUI復元についても軽視されがちなものの1つです。最近もこの手のUI体験の悪さについて、問題提起がされ話題になりました。 ブラウザバック/フォワー
Next.jsはどうやってスクロール位置を復元するのか
Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなかったり、ChromeでもgetServerSideProps利用時にはこのフラグを有効にしないとスクロール位置が復元されないなど不安定な状態です。最近この辺りについて識者の方々から色々ご教示いただき、自分では気付けないような部分の知見も多く得られたので、備忘録兼ねてscrollRestorationが何を解決しようとして、どう実装されて
ブラウザのキーボードを制御する inputmode
October 26, 2019 created( August 1, 2022 updated ) input[type]によるキーボードの表示制御Googleの記事、web foundamentals 最適なフォームの作成では、type属性による入力しやすいキーボードの表示コントロールが説明されていました。 例えば、type="email"を指定すると、 <input type="email"> emailが入力しやすいキーボードが表示されます。 しかし、この指定方法には副作用もありました。 例えば、type="number" を指定した場合、 <input type="number"> このように、入力フィールド内に余計な入力補助要素 が表示したり、フィールドにhoverした状態でmouse wheelを動かすと 入力済みの値が勝手に増減 したりします。 前者はCSSで後者はJava
商品一覧ページにおけるページネーションの代替案
無限ローディングや「さらに表示」ボタンを採用することで、商品の読み込み時にスムーズなインタラクションを提供することができる。 Alternatives to Pagination on Product-Listing Pages by Kate Moran on March 6, 2022 日本語版2022年8月4日公開 最近、従来のページネーションコントロールをやめて、インタラクションコストを少し下げることのできるデザインパターンを選択するECサイトが多くなってきた。これらのパターンを採用したほうがいいのだろうか。それは、提供している商品の数による。 従来からのページネーションでは、商品の一覧を複数のページに分割し、ページごとに一定の数の商品を配置していく。そのため、さらに商品を見るには、画面の上部または下部にある「次へ」ボタンをクリックかタップして、次のページに移動する必要がある。ペー
Sign-in form best practices | Articles | web.dev
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
ユーザーが許可したくなるPush通知を考える｜sadakoa｜note
初めましての方もこんにちは、さだこえ (@sadako_a_ ) と申します。 DeNAに新卒で入社後、現在は株式会社FOLIOのデジタルプロダクトデザイナーとして、オンライン証券のUIデザインに従事しながら、スタートアップのデザイン支援を副業で行っています。 今記事では、主にアプリの機能として欠かせないPush通知に焦点を当て、記事を執筆します。 Push通知とはご存知の通りPush通知とは、アプリやwebサービスで何か変更や更新があった場合にお知らせをする機能です。一般的にこの業界で言われるPush通知は、Apple Push Notificationを指していることが多いと思われます。 その理由の1つとして、AndroidはPush通知に関してユーザーの許可を取る必要が無いからです。（ダウンロードする際にオプトインされるため、許可率は100%になる。） iOSやWeb Browser
快適なUXを実現するOptimistic Updates(楽観的更新)とは何か
先日、とあるJavaScript関連の記事を読んでいたところ、"Optimistic Updates" という技術が紹介されていました。 日本語に直すと "楽観的更新" といったところでしょうか。 はじめて聞いた言葉で、日本語の記事も見当たらなかったため記事にしてみます。 Optimistic Updatesとは Optimistic Updatesというのは、ネイティブアプリやSPA(Single Page Application)などで使われる技術で、非同期の通信処理が成功するという前提(楽観)のもとに、通信のレスポンスを待たずに次の処理を行うというものです。 最も多いOptimistic Updatesの使い方は、UIへの反映をリクエストの結果を待たずに行うというものでしょう。 Optimistic Updatesの例 例えば、よくある「いいね」ボタンのようなものにOptimisti
「カートに入れる」は業界用語 ヤフー「らくらく通販」、ECの当たり前を覆したスマホUIに注目
ECzine Day（イーシージン・デイ）とは、ECzineが主催するカンファレンス型のイベントです。変化の激しいEC業界、この日にリアルな場にお越しいただくことで、トレンドやトピックスを効率的に短時間で網羅する機会としていただければ幸いです。
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes
Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. $(".chosen-select").chosen({disable_search_threshold: 10}); Default Text Support Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
言語依存指標 | スパ帝国
「洋ゲーやりたいけど英語わからん」という人に必要な語学力を伝える人向けガイド 「このゲームやりたいんだけどどれぐらい英語力あればいい？」という質問はたまに受ける。CivilizationでもEUでもFTLでもドイツ製ボードゲームでも何でもいいが、とにかく日本語化されていないゲームは地球上に大量にある。そこで既存のプレイヤーが必要語学水準を伝えようとするのだが、その際に適切な指標が無い事がしばしば問題になる。「簡単な英語が分かれば大丈夫だよ」「高校生ぐらいのテキストが読めればいいんじゃないかな」…簡単ってどの程度だ？ どの高校のどのテキストの水準だ？ 「簡単」とか「TOEIC何点程度の単語」といった基準は恣意的で曖昧ゆえ役に立たぬ。そこであるゲームがどの程度の言語依存性を持っているかを0〜5の数値で機械的に表す指標を考案した。英語に限らず「その言語をどれだけ読めれば良いか」を伝える為のツール
高コンバージョンを保つウェブサイトが採用する5つの行動心理学テクと実例|グロースハックジャパン|Growth Hack Japan
7/25最新記事 見落とされがちなオフライン上での3つのリファラルチャンス edited by Ryutaro Mori 過去に何度もお伝えしてきた行動心理学を利用したコンバージョン最適化テクニック。 本日は、growth hack japanの中でまだお伝えしてなかった行動心理学テクを、実例とともに5つ紹介します。 参考:5 Psychological Principles of High Converting Websites プレグナンツの法則 プレグナンツの法則によると、人間は明確で順序だった物事を好み、複雑なアイディアやデザインを恐れる傾向にあります。 シンプルなものほど予期せぬ不快なサプライズを引き起こしにくいということを本能的に感じ取り、それに従ってシンプルに物事を解釈する人間の傾向を表しています。 例えば以下の英文を見てみましょう。 ① Welcome to growth
ブラウザにはウェブページの日付を一定の場所に表示してほしい - Random Thoughts
私には、ウェブ記事を読むときに、まず日付を確認する習慣があります。このことは私にとっては「最低限の情報リテラシー」に思えます。なぜならば、その情報が「いつ書かれたものであるか」は、非常に重要なコンテキストあるいはメタ情報だからです。なぜ日付が重要かというと、「書かれたあとに知られた情報は、反映されていない」ことを意味しているからです。 現代の情報は評価が変遷しがちです。数年前の記事に書かれたことが、現在の「常識」から見ておかしいことなど日常茶飯事です。代表的な例としては、遠隔操作ウイルス事件やSTAP事件などがあります。それまで「事実」として語られていた内容が、ある時点を境に「誤り」になることは日常茶飯事です。したがって、記事の内容を解釈するにあたっては、記事の日付を考慮しなければなりません。さもなくば、私たちは誤った結論に達してしまう恐れもあります。 この点について人々がどうしているか想
スマホユーザーの過半数が広告嫌いかもしれなくて震えた – 55.5%が「自ら意思を持って広告をクリックしたことがない」 | sakedrink.info
This domain may be for sale!
"Threes!"の開発者が語る「効果的なアプリのチュートリアル」の作り方 #GDC14
Threes! by Sirvo LLC (iOS | Android) Threes! の開発者 Sirvo LLC の Asher Vollmer (twitter: @AsherVo) が GDC 2014 のセッションで、「効果的なスマートフォンアプリのチュートリアルを作る方法」を語った。 講演のタイトルは "Prime, Teach, Observe: Tutorializing Innovative Mechanics" チュートリアルが達成すべき役割は以下の 4 つ。 Teach (教える) Comfort (心地よくさせる) Excite (興奮させる) Respect (気遣う) 従ってチュートリアルの各要素が、上記の役割をちゃんと果たしているかを意識して作るべきである。 Tell the player what to do (プレーヤーにやることを教える) Teach
スマホサイト最適化25の最新ルール | グロースハックジャパン | growth hack japan
Ryutaro Mori TwitterでGHJをフォロー！ FacebookでGHJをフォロー！ NEW スタートアップに欠かせない6種類の人間 検索エンジン大手グーグルが、スマホサイト最適化に関する大規模なリサーチを行いました。 その結果から導き出した「スマホサイト最適化25のルール」は、モバイル時代、特にtoCビジネスには欠かせない内容です。 調査に関して 本調査は、GoogleとAnswerLabの共同指揮の下に行われました。 モバイルサイトにとって最良のデザイン慣行を提言することを目的に行われた本調査は、以下の方法論で実行されています。 ・シカゴ・サンフランシスコにて、119時間のユーザービリティテストを敢行 ・iOS・Android両方を含むユーザーに調査を実施 ・ユーザーは、商品の購入、価格の調査、予約など、コンバージョンに関連するタスクを実行し、各サイトのユーザービリティを
連載ユーザビリティ講座第1回 選びにくいメニュー｜石橋秀仁
上図は、note会員登録フローで提示される「関心のあるジャンル」選択画面です。今回はこの画面をレビューします。 問題「関心のあるジャンル」として提示されている選択肢の意味、互いの区別が、わかりませんでした： * 「カルチャー」と「エンタメ」の区別 * 「カルチャー」と「ライフスタイル」の区別 * 「カルチャー」と「モノ」の区別 利用のコンテキストスティーブ・ジョブス＆ウォズニアック伝記漫画『スティーブズ #01｜投げ銭版』に投げ銭するために会員登録しようとしました。 思考* このマンガは面白いし、続きに期待しているので、投げ銭したいから、会員登録しよう。 * こんなマンガなら、ほかにも読みたい。ここで選択したジャンルのコンテンツは、今後自動的に推薦されてくるだろうと期待できる。だから「関心のあるジャンル」を選択しておきたい。 * これらの選択肢が「ジャンル」と呼ばれるからには、相互に排他的
連載ユーザビリティ講座第2回 予想と異なる挙動がユーザーを混乱させる｜石橋秀仁
今回はnoteの記事公開ボタンをレビューします。 問題 -------------------------------------------- ユーザー・インターフェイスの意味論（セマンティクス）が理解できませんでした。択一式の選択肢で、チェックボックス動作をするかと思ったら、そうではなかったので混乱しました。 画面遷移 -------------------------------------------- 1. 初期状態 「無料ノート」がデフォルトで選択されているように見えます： 2. 「無料ノート」ボタンをクリックした状態 デフォルトで「無料ノート」が選択されているように見えましたが、それを確実にするため、念のため「無料ノート」ボタンをクリックしました。すると、期待を裏切って「有料ノート」が選択されてしまったように見える画面になりました： ※なぜか「無料ノート」の色が黒くなっている
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「推測されやすい」パスワードを入力させないためにフロントエンドエンジニアができること
