モバイルアプリに最適なボタンサイズと間隔とは
UX Movementの創立者、ライター。ユーザーに優しいユーザーエクスペリエンスデザインのスキルを読者の方が上達できるよう、UX Movementのブログを作りました。 あなたのユーザーはスマホアプリやモバイルサイトのボタンをちゃんと狙った通りに押せているでしょうか？ きちんと押せているかをユーザーのせいにする前に、ボタンのサイズや間隔が最適化されているかどうか確認しましょう。 ボタンが最適なサイズと間隔になっていないと、ユーザーが狙いを外したり、間違ったボタンを押してしまいます。この記事ではどの程度が最適かを見ていきます。以下の数値は、96DPIでのCSSピクセルを基準にしています。 ボタンサイズの基準 まずは基準となるサイズがわからなければ、ボタンのサイズが最適かどうかを判断できません。幸いなことに、ボタンのサイズと間隔に関するリサーチによって、高齢者を含むほとんどのユーザーに有効な
間違えるな！誰に向けたデザインかは誰もが迷わず使えてから考える事 | UX TIMES
「ターゲットのニーズに合わせたデザインを」という話を聞くことがあります。 ターゲットやペルソナに合わせたデザインは必要ではありますが、その前に考えるべきことがあります。 ユーザーが迷わず、当たり前に使えることです。 当たり前に使えるとは？ 「当たり前品質」という言葉をご存知でしょうか。 狩野モデルという手法の中にある「それが充足されれば当たり前と受け止められるが、不充足であれば顧客の不満を引き起こす要素」のことで、車であれば「ブレーキがついている」「座席が備わっている」といったような、あって当たり前のもののことです。 モノとして「あって当たり前」以外には「できて当たり前」という考え方にも繋がります。 Webサイトであれば「リンクを押すと想像している通りのリンク先へ遷移する」「迷うことなく目的を達成できる」というものです。 ユーザビリティテストの重要性 ここまで読んだ方で、「そんな簡単なこと
ページのダウンロード時間が1000ミリ秒を超えると、Googlebotがクロールに制限をかける可能性あり
[レベル: 上級] Googlebot がページをクロールするときにかかるダウンロード時間が 1,000 ミリ秒を超えると、クロールに支障をきたすかもしれません。 一応の目安として、100 〜 500 ミリ秒以内を考慮しておくとよさそうです。 ページのダウンロード時間は 100 〜 500 ミリ秒が理想、1,000 ミリ秒は遅すぎ （旧）Search Console のクロールの統計情報レポートでは、ページのダウンロード時間の情報を確認することができます。 ページのダウンロード時間は、Googlebot がリソースを純粋にリクエストするのにかかった時間を示すデータです。 PageSpeed Insights のようにユーザーが使うブラウザの表示にかかる時間ではありません。 リソースは、HTML のほか画像や CSS、JavaScript、PDF なども含みます。 ダウンロード時間の目安に関
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
iOSにおける半モーダルビューの解釈｜usagimaru
iOS 8の頃より見かけるようになった新しいモーダルビューの形態と、その設計思想、UI としての使われ方について考察します。この新しいモーダルビューのことを私は他のモーダルビューと区別する意味合いで「半モーダルビュー（Semi-Modal View）」と呼んでいますが、実際にガイドライン上でそのような定義がされているわけではありません。「ハーフモーダル」という呼び方も耳にすることがありますが、私は後述の理由からこの呼び方は推奨していません。 今回はパターンとしてあえて区別することで他のモーダルビューとの違いを明確にし、その特徴や仕組み、正しい設計とはどのようにあるべきかを理解しやすくすることを目指します。なお、2019年版のHIG（すなわちiOS 13対応版）からはモーダルビューのスタイルの一つとして Sheet の記述が現れるようになりましたが、今回は Sheet スタイルに限らずもう少
UXデザインにマズローの欲求階層説は有効なのか
ユーザーは、自分のウォンツよりもニーズを満たす製品を選ぶ傾向にあることが立証されています。Abraham Maslow氏は人間の欲求についての理解を深め、それがどのように満たされるのか研究しました。デザインの文脈においても、マズローの欲求階層説を活用することで、ユーザーのウォンツよりもニーズを満たす、より効果的なUXを提供することができます。 ユーザーにあなたの製品を受け入れてもらいたければ、受け入れてくれるように動機づける必要があります。アメリカの心理学者、Abraham Maslow氏は、人間のモチベーションに関する研究で知られています。1943年、Maslow氏は論文『人間のモチベーションに関する理論』を発表しました。論文の中で、彼は人間の欲求について自身の解釈を明らかにし、欲求がもっとも基本的なものからもっとも複雑なものへと、階層を形成していることを提唱しました。 彼は、人間が満足
目から鱗のスマホユーザー体験、情報は長くなっても1ページにまとめた方がいい？ | 企業ホームページ運営の心得
コンテンツは現場にあふれている。会議室で話し合うより職人を呼べ。営業マンと話をさせろ。Web 2.0だ、CGMだ、Ajaxだと騒いでいるのは「インターネット業界」だけ。中小企業の「商売用」ホームページにはそれ以前にもっともっと大切なものがある。企業ホームページの最初の一歩がわからずにボタンを掛け違えているWeb担当者に心得を授ける実践現場主義コラム。 宮脇 睦（有限会社アズモード） ※1 やっぱり！ ハンバーガーメニューをやめたらPVも再訪問も劇的に改善！ などSEO記事まとめ10+3本 右か左か論争スマホ向けのコンテンツの課題は、情報量が限られる小さな画面にあります。PC閲覧を基本にデザインされてきたWebコンテンツは、画面の上下左右のいずれかに「メニュー」が常駐されているという常識がありました。しかし、スマホでこれを守ると一画面あたりの情報量が少なくなります。 そこで画面を有効利用する
見やすいサイトを作るときに最低限チェックしたい６項目
いくらコンテンツが良くても、見やすいサイトでないとユーザーはすぐに離脱してしまうでしょう。「見やすい」というのは、コンテキストやユーザーに依存する部分も多いのですが、そこには最低限守るべきルールがいくつかあります。 この記事では、見やすいサイトを作るときに最低限チェックしておきたい項目をご紹介します。 フォントサイズ フォントサイズや行間などは文章の視認性を大きく左右します。 WCAG 2.0では英語などの場合は18ptまたは14ptの太字、日本語の場合はそれと同等の文字サイズが望ましいとされています。1pxは0.75ptと同等とされているので、18ptは24pxとほぼ同等です。さらに、行の高さ（line-height）は150%〜200%、段落の間隔は行送りの1.5倍以上が推奨されています。 ＊18ptは1.5emと同等、14ptは1.2emと同等 そのほか、Googleも読みやすいフォ
ボタンのラベルや配置順序のベストプラクティスとは | UX MILK
サイトやアプリにおける典型的なフォーム（もしくはダイアログボックス）には、通常いくつかのボタンがあります。ほとんどのケースで、ユーザーは２つの選択肢を目にします。１つはユーザーの主となるタスクを表し、一方は付随する副次的なタスク（フォームに入力した内容の取り消しやキャンセルなど）を表します。 この記事ではアクションボタンに関する基本的なUXについて概観し、デザイナーの間でよくある質問である「OKかキャンセル、どちらのボタンが最初にくるべきか」に答えます。 エラー防止 Jakob Nielsen氏のユーザビリティ・ヒューリスティックによると、「丁寧なデザインによって、最初の段階で問題が起こることを防止する」とあります。ユーザーが突発的に間違ったものを選択してしまうかもしれない状況を排除できるように努力する必要があります。 濃淡で視覚的な区別をつける ２つのボタンの違いを明確にするために、ボタ
フォームのデータ入力における表記ゆれを防止する方法
Webフォームには、二つのタイプのデータ入力が存在します。特定のフォーマットが存在しないデータ入力（文字入力のみ）と、特定のフォーマットが存在するデータ入力（文字と記号によるもの）です。この二つのタイプを、同じように扱うことはできません。 特定のフォーマットでのデータ入力を行う際、多くのデザイナーは「正しい入力をさせる」という責任をユーザーに対して負わせています。このことが、フォームのUXにおける大きな問題を引き起こします。 フォーマットの「ゆれ」により内容を破棄してしまう ユーザーはフォームにテキストを入力すると、それがフォーマット化されていないことに気付くでしょう。このときユーザーは、記号を入力した方がよいのかどうか、判断に迷います。このフォーマットの「ゆれ」により、ユーザーは不安を感じて、入力した内容を破棄してしまいます。 特定のフォーマットで入力しようと決めたユーザーは、文字以外の
衝撃！スマホアプリのUIは3年でどのように変化しているのか調べてみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ いつも元気ハツラツ・天真爛漫・平成生まれゆとり世代、のんちゃんです。 わたしは中学2年生の頃から携帯電話なるものを使用し、友達とコミュニケーションをとっていました。ちなみにPCは小学4年生くらいから夢中に触っていて、親に電源抜かれたこともありましたねぇ。 ガラケーからスマホにしたのは5年前の大学1年生の時だったと思います。最初はAndroidでしたが、その後はずっとiPhoneです。 昔のiPhoneであろうとも、いまの充電器があればカメラロールとかメールとかを見返せるのがおもしろくて、実家に帰ってとてつもなく暇な時は、ひとりでそういった遊びをしています。 ちなみにすごくどうでもいいのですが、わたしはiPhoneを変更しても、あえて写真とかは引き継いで移行させません。 思い出は、そっと大事に眠らせておきたいのです。 さて、前置きが長くなりましたが、過去のiPhoneを漁ってい
御社のウェブサイトは「簡単モドキ」になっていないか？ 「簡単」のギャップが生まれる理由（第4回） | 見るゾウ！ 知るゾウ！ ユーザー像！
こんにちは！ 象好きのかたわら、パソコン教室を運営し、教室に通っている方の操作を観察し、お困りごとを発見する仕事をしているモリマミコと申します。アジアゾウがとても好きなんだゾウ。ゾウさんについて語らせたら、電源を切れない壊れかけのRadioのように、小一時間は話し続ける自信があるゾウ！ ある日、当社が運営するパソコン教室に「なんかうちのパソコンが変なの」とノートパソコンを持ち込まれた方がいらっしゃいました。 何が“変”と感じられましたか？ とうかがっても よくわからないけど、なんか“変”なの。 というお答え。 パソコンを操作していただくと、インターネットエクスプローラーを起動しても、何も表示されない。画面は真っ白だ。 何もしていないのに、ヤフーが出なくなっちゃったのよ、変でしょ。幽霊かしら。それ以外に原因が考えられないでしょ。 とおっしゃる。 幽霊!? YOU礼！ ギャグは要冷凍！ と心の
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
フロントエンドも気にかけたいUI/UXの話。LIGブログのドロップダウンメニュー実装で気付いたこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
LIGブログの中の人、ゆたろです。どうもです。 フロントエンドの皆さんは、サイト上に新たに機能を実装する際、UI/UXをどのくらい意識していますか？ UI/UXはデザイナーさんの領域、と思いがちですが、フロントエンドも意識をすることで、より無駄なく・効果的なサイトの制作に役立ちます。 今回は、少し前のLIGブログ上にあったグローバルメニューで実際に上がった、フロント領域でのUI/UXの問題点と、それに対しての改善の一例を紹介いたします。当記事を通して、UX改善方法の参考、UXを意識した実装をするきっかけになればと思います。 変更前のグローバルメニューってどんなのだっけ？ https://web.archive.org/web/20160422094831/https://liginc.co.jp/（※） こちらが、今年の4月後半にリリースされた、ドロップダウンの付いているグローバルメニュー
食材宅配サービスOisixにおけるUXの取り組みとアプリの改善事例
有機野菜などの食品宅配専門のECサービス「Oisix」を展開するオイシックス株式会社。同社ではサービスのUXを向上するため「UX室」というチームを設け、日々サービスの改善を行っています。 今回はオイシックスのUI/UXデザイナーである福山さんにオイシックスのUXデザインの取り組みと、実際の事例のお話をお伺いしました。 Oisixとは 「Oisix」は有機野菜や無添加食品などの定期宅配を行うECサービスで、Webとアプリ両方で展開しています。定期宅配と言っても、注文の最低金額設定もなく、注文をしない週があっても良いなど、自由でフレキシブルな買い物体験を提供しています。 オイシックスにおけるUXデザインの取り組み 福山 遊果 氏 EC事業部 UX室 UIデザインセクション UI/UXデザイナー 千葉県千葉市出身。多摩美術大学情報デザイン学科を卒業し、ソフトウェア会社でのUI/UXデザインを経て
モバイルSEOに役立つGoogle純正ツール×5
[対象: 初〜中級] この記事では、モバイル向けサイトのユーザビリティやユーザーエクスペリエンスの向上に役立つ、Googleが提供する公式ツールを5つ紹介します。 Chrome PageSpeed Insights Mobile-Friendly Test Fetch as Google モバイルユーザビリティ レポート 順に説明します。 Chrome Google Chromeの「デベロッパー ツール」では、スマートフォン端末で見たときのそのページの表示をエミュレーションできます。 「デベロッパー ツール」は次の手順で起動します。 [Google Chromeの設定]（右上の3本バー） − [その他のツール] − [デベロッパー ツール] Ctrl + Shift + i (Windows) / Cmd + Opt + i (Mac) スマホを表すアイコンをクリックするとスマホでの表示モ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo - Adobe Blog
本当に実践的なデザインドキュメントの書き方 第2回：受託側と発注側のミゾを埋めるUXデザインドキュメント | アドビUX道場 #UXDojo – Adobe Creative Station
見るゾウ！ 知るゾウ！ ユーザー像！ コーナーの記事一覧 | Web担当者Forum
【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 初代編集長ブログ―安田英久
