モバイルファーストのウェブデザインがデスクトップに及ぼす悪影響
モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First Web Design on Desktop by Kim Salazar, Tim Neusesser and Nishi Chitale on October 13, 2023 日本語版2024年2月6日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、
ダークモードとライトモード：どちらが良いのか
正常な視力の人（または視力を矯正している人）は、ライトモードのほうがよく見える傾向があるが、白内障および関連疾患のある人の中には、ダークモードのほうが見え方が良好になる人もいる。その一方で、ライトモードでの長時間の読書は、近視を引き起こす可能性も指摘されている。 Dark Mode vs. Light Mode: Which Is Better? by Raluca Budiu on February 2, 2020 日本語版2022年10月31日公開 最近、iOS 13へのダークモードの導入をきっかけに、ダークモードのデザイントレンドとしての人気とそのユーザビリティについて、ある記者からコメントを求められた。また、UXカンファレンスの参加者からもダークモードについてのこの質問を何度か受けている。 iOS 13：ライトモード（左）とダークモード（右）。 前もって言っておかなければならないが
発達障害の人向けノートが5万冊のヒット 誰の目にも優しい
大栗紙工（大阪市）が開発・製造した「mahora（まほら）」シリーズは、発達障害がある人の声を基に企画し、紙の色やケイ線を工夫したノートだ。「目に優しい」「集中しやすい」「書きやすい」といった、本来は発達障害がある人に向けた特徴を、開発途中から文具店や卸などが評価。「年配の人や子供など誰にでも使いやすいノートとしてアピールできるのでは」と注目された。 ＜前回（第6回）はこちら＞ 「まほら」が完成すると、大栗紙工は自社でECサイトを立ち上げて2020年2月に2品目からテスト販売を開始。同年8月には卸の取り扱いもスタートし、21年2月までの1年間で約1万7000冊を販売した。さらにユーザーの意見から21年2月には商品の色や大きさなどラインアップを強化。同年7月までに累計で約5万冊を売り上げるヒット商品となった。発達障害がある人だけでなく、誰が使っても目に優しいノートとして人気を博した。 大栗紙
なぜECで「カゴ落ち」は起こるの？価格表示や決済など、ユーザー調査で見えた思わぬ離脱ポイント
EC事業者にとって悩みのタネなのが「カゴ落ち」。購入の意思をもって入力フォームにたどり着いたユーザーが、離脱してしまうのはなぜでしょうか？エンドユーザーへのインタビューやアンケートで見えてきたもの。それは、「価格の総額を表示するタイミング」など事業者側では見落としがちな意外なポイントが、実は離脱要因になっていたことでした。A/Bテストによるカゴ落ち改善事例と合わせて、お伝えします。 改善事例1：送料や手数料が離脱理由の1位！・・「総額表示」を1ページ目で見せたところ？ ユーザー調査で不安や疑問に感じた事例で多かったのが、価格について。 私たちが行った200人を対象としたアンケート調査でも、フォームで離脱する理由では「送料手数料が気になる」という回答が15.2％で1位でした。 情報入力や支払い方法の段階で、「総額でいくらかかかるか分からないのが不安」と、入力をやめた経験を語るユーザーが多くい
Google 品質評価ガイドライン 解説（02：評価基準）
2.Google 品質評価ガイドライン解説（評価基準・評価対象）</h2>\r\n"}}" id="text-9d41e6452c" class="cmp-text"> 2.Google 品質評価ガイドライン解説（評価基準・評価対象） このページでは、「<a href=\"https://static.googleusercontent.com/media/guidelines.raterhub.com/ja//searchqualityevaluatorguidelines.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Google 品質評価ガイドライン（General Guidelines）</a>」の評価基準・評価対象を解説します。ガイドラインの概要を知りたい方はこちらを、最新版（2020年10月版）を含む過去の更新内容を確認
ユーザー体験における「態度」を測るということ
統計とユーザビリティのコンサルティングを行っている会社、MeasuringUの創始者です。20以上の記事、統計とユーザーエクスペリエンスに関する５冊の本の著者です。 人々がどのようにインターフェイスに対してインタラクションをするのかを見ることで、何が機能していて、どこの改善が必要なのかが分かります。 このような行動観察はユーザー体験を理解するために不可欠ではありますが、それだけでは不十分です。 プロダクトが本来の機能を果たし、適正な価格であり、信頼性があるからといって、必ずしも良いユーザー体験が提供されるわけではありません。 ユーザーは体験が複雑すぎるか、難しいと感じているかもしれません。たとえば、経理系アプリのような多くのB2Bソフトウェアプロダクトは、組織のニーズを満たし、信頼性がありますが、多くの手順と混乱を招くような専門用語のオンパレードによって、あまりいい体験を提供できているとは
ユーザビリティの原則と現場で使えるユーザビリティテストの方法
今回は、Web制作の現場でも使えるようなユーザビリティテストの方法をご紹介します。 アクセス解析を使ったものではなく、あくまでもサイトの構造の問題点を洗い出す方法です。 そのため、それにいたる細かい基本部分についてもかなり大胆に触れてます。 試験をする前に、どのような観点からサイトを見て行く必要があるのかと言うユーザビリティの原則から、試験方法、試験の結果からの問題解決にむけて、私がこれまで行ってきている仕事の一部をご紹介します。 Webユーザビリティについて：目次 書き出したらとまらなくなりましたが、これでも結構情報削りすぎたかなぁというのはあります。 私の仕事について方法を学べばユーザビリティテストは出来る最大の原則はユーザーに考えさせない事たった一人でも試験をするほうが100倍ましになるユーザーの視点を理解する箇所法則1「長いテキストを最初からよし見ようとは思わない」法則2「長たらし
サイトの問題点を浮き彫りにする「UX監査」のガイドライン
Cassandra Naji氏は、Webアプリやモバイルアプリ用のプロトタイピングツールJustinmindのマーケティングコンテンツ編集者です。 たとえばあなたがECサイトを運営していると考えてください。訪問者が検索エンジン経由でサイトを見つけてWebサイトを閲覧していることはわかっています。訪問者は購買手続きを始めました。ところが途中で手続きを止めてしまいコンバージョンまで至りませんでした。 何が原因で手続きを止めてしまったのかわかりません。情報ヒエラルキーやユーザーフローをアップデートすべきときなのかもしれません。どのようにすれば、手直しすべき部分がわかるのでしょうか。 UX監査は、Webサイトやアプリといったデジタルプロダクトの中で、ユーザーを悩ませコンバージョンを妨げているポイントを明らかにして、不完全な箇所を突き止める方法です。 UX監査は会計監査と同じように実証的な手法で既存
若者の「袋麺離れ」が顕著 メーカーは販売減食い止めに必死（NEWS ポストセブン） - Yahoo!ニュース
日清食品が6月から「カップヌードル」はじめ即席麺を一斉値上げすると発表したばかりだが、現在、即席麺は年間どのくらい食べられているかご存知だろうか。世界ラーメン協会によれば、2017年に世界中で消費された即席麺はなんと1001億食にも及び、日本は中国、インドネシアに続き3位。年間56億6000万食が消費されている。 【写真】袋麺に新しい食べ方も 世界初のインスタントラーメン「チキンラーメン」を発売（1958年）したのも日清食品で、誕生から60年を超えてロングセラーを続けているのは周知の通り。いまや定番商品だけでなく、数えきれないほどの新商品が多くの食品メーカーから発売され、日本の即席麺市場は緩やかながら、なお拡大しているというから驚きだ。
ユーザーは音声だけでWebサイトをどう使うのか？ 弁護士ドットコム、アクセシビリティユーザー調査の結果を公開 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
いよいよユーザーテストに入ります。テストの結果どうなり、何がわかったのでしょうか。今回は、ユーザーテスト本番の様子をお伝えします。 中根さん登場！前回の記事でもご紹介した中根さんに、実際に当社までお越しいただきました。中根さんは、アクセシビリティの専門家です。かつてはW3CのWAI (Web Accessibility Initiative) でアクセシビリティガイドラインの策定にも関わっており、現在ではアクセシビリティの情報サイト「AccSell」を主催して、Webに限らず、アクセシビリティ全般の情報を積極的に発信されています。 弁護士ドットコムの社内からは、20名ほどの参加者が集まりました。テストに先立ち、まずは視覚障害者の一般的な環境や、中根さんの普段の利用方法をご紹介いただきました。この内容は第1回、第2回の記事で触れた内容と重複しますので、そちらをご覧いただければと思います。 い
モバイルウェブのスピードアップに不可欠なのは 画像・JS・フォント の最適化 #ChromeDevSummit
[レベル: 中級] 昨日とおとといに続いて、今日も Chrome Dev Summit 2018 のセッションレポートをお届けします。 セッションのタイトルは “Speed Essentials: Key Techniques for Fast Websites” です。 昨日レポートしたセッションと同じようにモバイルウェブの高速化がテーマです。 しかし、こちらはより実践的な内容になっています。 パフォーマンス改善に非常に役立つテクニックが満載です。 パフォーマンス改善の優先対象は画像とJS、フォントの3つ モバイルウェブで 1 ページあたりデータ量が多いリソースは次の順番（HTTP Archive 調べ） 画像 (約 500 KB) JavaScript (約 380 KB) フォント (約 80 KB) この 3 つは Performance Budget（パフォーマンス バジェット）
Ptengineウェブ運営All-in-Oneプラットフォーム | ウェブの改善や改善業務はこれひとつで完結
サイト強化はこれひとつ はやく、大きな成果へ ヒートマップ、サイト解析、ページ編集、A/Bテスト、WEB接客、パーソナライゼーション 1つのタグ設置だけで、全てノーコードで使えます。
大型化するスマホに対応する時に確認したい「親指ゾーンマップ」
Scottは元Tinderのプロダクトマネージャー兼リードデザイナー。現在はプロダクトコンサル会社Philosophie所属。ウェブやモバイル製品の構築を15年以上行っています。https://twitter.com/scotthurff。 本記事はTinderの元リードデザイナーであり、今はGoogleや任天堂をクライアントに持つプロダクトコンサル会社Philosophieに所属するScott Hurff氏のブログエントリーからの翻訳転載です。記事自体はiPhone 6発表時に書かれたものですが、議論自体は現行のものにも適用されますので、時事的な部分は割愛しつつ翻訳してお届けします。 親指のためのデザインとは、親指が自然な動きで弧を描く動作で使えるように、最適な形でインターフェイスを構築することです。 しかしこれは非常に複雑な問題です。私たちは画面上の至るところに点在するUI要素に触れよ
成果爆増！CV200%増・離脱率50%が達成できるスマホサイトEFO 5つのポイント！ | SimilarWeb日本公式ブログ
成果爆増！CV200%増・離脱率50%が達成できるスマホサイトEFO 5つのポイント！ 2016/2/1 フレームワーク こんにちは、WEBコンサルティング会社のタガタメ代表取締役の酒井です。 スマホサイト経由でのWEBサイトの利用率は爆発的に伸びています。スマホからのアクセスを見ると「ZOZOTOWN」「ユニクロ」などのファッションサイトで64％、「Amazon」「楽天市場」「Yahoo! ショッピング」などの大手通販サイトでも56％と完全にパソコンからのアクセスを抜いています（2015年ニールセン調査）。 ところが、パソコンの入力フォーム最適化（EFO）に比べてスマホのEFOは大幅に遅れているのが現状です。 ここでは、スマホサイトのEFOを一気に改善する5つの方法をお伝えします。 ①フリガナ入力でカタカナを要求してはいけません これはパソコンも同様ですが、そもそもなぜフリガナ入力がカタ
ECフォームに取り入れたい！クレジットカード情報入力を楽にする最新EFO手法 | UI改善ブログ by f-tra
ECサイトの購入フォームでは、多くの場合クレジットカードによる決済方法を用意していることがほどんどです。 銀行振込みや代引き、コンビニ支払いなどほかの決済方法に比べ、その場で情報を入力するだけで手続きが済み、手数料もかからないことの多いクレジットカードは、オンラインショッピングを楽しむユーザーにとってもなくてはならないものです。 とはいえ、カード番号や有効期限、セキュリティコードなどと入力量が比較定期多いというのもクレジットカードの特徴。 今回はそんなクレジットカード情報の入力フォームの最適化についてポイントをお伝えしていきます。 余計な入力欄はなるべく減らす クレジットカード情報のフォーム入力でよくあるのが、カード会社を選択させる入力欄です。 しかし結論から言うと、このカードブランドの入力欄は用意する必要がありません。 カード番号とブランドは対応している なぜならば、実はカード番号の冒頭
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
“ディズニープラス”を退会しようとすると、ちょっと面倒な感じの手続きになるらしい「絶対にやめるという強い意志を試される仕様」
ショッピングカートはユーザーが欲しいものを保存する「外部記憶領域」である。【ネッ担まとめ】 | ネットショップ担当者が知っておくべきニュースのまとめ
若者はリンクもスクロールも嫌――記事の体裁が新鮮すぎる「BuzzFeed Kawaii」に聞く、ミレニアル世代のネットメディアへの接し方
高齢者UIプロトタイプ検証の学び
純利益をあげているEコマースTOP100サイトに見る、購入フローの全ステップをキャプチャでおさめたまとめ