ユーザーがどれだけ速くタスクを完了できるかは、ボタンの置き方次第で大きく変わります。タスクが速く完了すれば、より満足できる体験が生まれます。もしそれを望むのなら、ユーザーがそこにあってほしいと思う場所にボタンを置くべきです。 これは、あなたが使うであろうすべてのボタンの配置についての包括的な分析です。ユーザーが時間を無駄にすることが無いように、どの置き方があなたのアプリに最適なのかを学びましょう。 ユーザーは行動を起こす前に、画面をざっと見なければなりません。画面上にあるコンテンツが、どのアクションを行うべきかについて決断するための情報を与えるのです。画面を見終わるとすぐに、CTA（Call to Action＝行動喚起）が現れなければなりません。画面を見終わったとき、ユーザーはどこを見ているでしょうか？ ユーザーの視線は、左上の隅から右下の隅までジグザグに移動することがわかります。著名な

Webデザインに触れるすべてのユーザーは（少なくともシンギュラリティが到来するまでは）人間であり、なにかしらの心理学的法則の対象です。何十年もの研究において、心理学者と哲学者は今日に至るまで有効な人間の本質を観察し続けており、有能なUXデザイナーであれば、彼らの研究に目を向けるのが賢明でしょう。 疑うまでもなく、UXに心理学を適用することはシームレスで楽しいユーザー体験を提供する上で最適な選択です。人間の心理に注意を払わないWebサイトを閲覧することは、（VoxのJoe Posner氏が述べているように）押し戸を引いているようなもので、自身のせいでなくとも自分が愚かだと感じてしまうものです。 幸運なことに、あなたのデザインが心理的に適切なのかを試すために、臨床試験をしたり論文を書く必要はありません。既に心理学者がやっているからです。ここではUXデザインを考える際に頭に留めておきたいいくつか

NemanjaはBMWやSubaruなどのブランドも手掛けたことのある、UI /UXプロダクトデザイナーです。 プロダクトデザイナーは、短期間に多くの情報を表示してしまうことがよくあります。「スキャナビリティ（読み取りやすさ）」という言葉の意味や、一般的な視線の動きのパターン、そして現代のデザイン原則を理解していれば、消費しやすいコンテンツと、魅力的なUIをつくることができるでしょう。 インターネットの世界は日々新たなアプリ、Webサイト、記事などが現れて広がっていきます。溢れかえるコンテンツから自分に関係のあるものだけを探すことは骨が折れるため、ユーザーを情報に注意を引きつけることはますます難しくなっています。 マーケティングの専門家であるDavid Zheng氏によれば、60%以上のユーザーは15秒以内にサイトを離脱しているというのです。 調査によれば、ユーザーはサイトの一言一句をきち

Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 私たちはどのようにデザインを「視て」いるのでしょうか？　今更少し奇妙に感じられるかもしれませんが、考えてみましょう。人間の目がどのように動くのか理解すれば、要素を効果的に配置できるようになるはずです。 Webページのレイアウトはすべて、特定のヒエラルキーに従います。ヘッダーは本文の上に表示されるでしょう。メニューはスクリーンの上部か、下部か、左右か、それらの組み合わせです。デザイナーは、ページの中で優先順位がもっとも高いコンテンツを一番上に構成しようとします。続いて、残りのコンテンツを優先度の高いものから順に配置します。 「ヒエラルキー」とは、重要度の高いものから低いものへと組織化された、シンプルなよりよい表現方法です。また、この言葉はコンテンツのかたまり同

UX Movementの創立者、ライターです。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始めました。 モバイルアプリをデザインするとき、ソリッド（塗りつぶし）かアウトライン、どちらのアイコンを使用するか決めなければいけないときがあります。ユーザー体験にはどちらが最適なのでしょうか。 単なる好みの問題だと考える人もいますが、研究によると、認識の速さに違いがあることがわかっています。 ソリッドアイコンとアウトラインアイコンのどちらを使うべきかがわかれば、モバイルアプリの操作がしやすくなります。ユーザーはアイコンをより早く認識し、正しい選択をすることができるのです。 「Filled-in vs. Outline Icons: The Impact of Icon Style on Usability」という調査で、アイコンのスタイルは作業効率

Brendaはプロのライター兼ブロガー。個人ブランド「The Design Inkwell」を運営している。 フォントの選び方ひとつで、デザインの仕上がりが良くも悪くもなることは誰もが知っています。それ以上に、ネット上にはフォントがデザインの中心的な要素となっているケースが数多く見受けられます。あちらこちらに多くのフォントが散らばっているので、あるデザインに使われているフォントを特定することは簡単ではありません。 幸いなことにフォントを特定するのに役立つツールがいくつか公開されており、この記事ではその中でもおすすめなものをピックアップしています。ブラウザの拡張機能もあれば、Webアプリもあります。以下のリストをブックマークしておけば、デザインやWebサイトにどのフォントが使われているのかがすぐにわかるでしょう。 WhatFontIs WhatFontlsは、画像をアップロードするか、そのフ

PaulはUXのデザイナーでありデジタルトランスフォーメーションの専門家です。彼はユーザーを促進するためのウェブやソーシャルメディア、モバイルの活用を、非営利やビジネスの分野で手助けしています。 ユーザーがWebページをすべて読むことは滅多にありません。したがって、Webに文章を書く際には、少し違った書き方をする必要があります。つまり、集中力を欠いたユーザーに対応した書き方です。 もしかしたら、あなたもこの記事の大部分を読まないかもしれません。実際、ユーザーは平均的にWebページの約28％しか読まないのです。人々の記憶に残るような説得的な記事を作る余地はあまり多くありません。 人々の注意が向かないので、Webで文章を書くことは大変な作業です。『優れたWebのコピーライターが気をつけている７つのこと』という記事でも述べたように、どんなに優れたライターであっても、Web上で何かを伝えるのには苦

株式会社ニジボックス　UI/UX制作室 UXグループ　マネジャー 2016年リクルートの実証実験機関「Media Technology Lab.（現次世代事業開発室）」から分社化されて生まれた、ニジボックスにジョイン。 ニジボックスでUXデザイナーをしている中井と言います。 去る９月に行われたUX MILK Fest 2019で「職域から考えるUXデザイナーという職業」というタイトルで、定義があいまいになりがちな「UXデザイナー」という職業についてお話しさせて頂きましたので、今回はその内容を記事としてまとめさせていただきます。 曖昧になりがちなUXデザイナーという職業 UXデザイナーという職業について「なんでもできる人」「スーパープレイヤー」と考える人がいます。一方で、なかなかそういう人を見つけるのは難しく、仮にそう定義すると、UXデザイナーを名乗れる人がかなり限られてしまいますし、現実的

UX Movementの創立者、ライター。ユーザーに優しいユーザーエクスペリエンスデザインのスキルを読者の方が上達できるよう、UX Movementのブログを作りました。 あなたのユーザーはスマホアプリやモバイルサイトのボタンをちゃんと狙った通りに押せているでしょうか？　きちんと押せているかをユーザーのせいにする前に、ボタンのサイズや間隔が最適化されているかどうか確認しましょう。 ボタンが最適なサイズと間隔になっていないと、ユーザーが狙いを外したり、間違ったボタンを押してしまいます。この記事ではどの程度が最適かを見ていきます。以下の数値は、96DPIでのCSSピクセルを基準にしています。 ボタンサイズの基準 まずは基準となるサイズがわからなければ、ボタンのサイズが最適かどうかを判断できません。幸いなことに、ボタンのサイズと間隔に関するリサーチによって、高齢者を含むほとんどのユーザーに有効な

Natalyは、ウクライナのSevastopolのWeb開発者で、WordPressとITの執筆に情熱を注いでいます。彼女は自分のLand-of-Webを運営して、制作に役に立つ記事やチュートリアルなどを掲載しています。 デザイナーは彼ら自身を表現しようと常にもがいています。心や魂をプロジェクトに込めることが彼らのモットーです。 すべての仕事、コンセプト、スケッチ、そしてアイコンは、デザイナーの創造力とハードワークから生み出されています。 デザインをあまり知らない大多数の人にとってデザイナーは、ロマンチックで冒険的で、時にはつまらない職業かもしれません。 しかし現実には、自己犠牲を伴う苦職業なのです。 傑作と呼ばれるデザインは、計り知れない努力とブレインストーミングのもとに成り立っています。 さらに言えば、他の職業の人と同じように、デザイナーは締め切りを守り、プレッシャーを克服し、日々の仕

カナダの制作会社でデザイナーになり、UXデザインに従事。ドイツのベルリンにてフリーランスデザイナーとして活動後、日本に帰国。現在株式会社yappliのUX/UIデザイナーとして、WEBやアプリのデザインを手がける。 こんにちは、UX/UIデザイナーとして働いている岡田です。普段は管理画面のデザイン改善や、時にはアプリのデザインをしています。 先日「ビジネスのためのUX」をテーマとしたUX DAYS TOKYO 2019に参加してきました。そこでの学びについて、私自身の意見も交えながらいくつかピックアップして皆さんに共有したいと思います。 １. 調和の取れた組織運用 おそらく皆さんの多くは、良いUXデザインを作り上げたい、使いやすいプロダクトを提供したいと考えているのではないでしょうか。そんな皆さんは、あるプロダクトのUXデザインをするときにはまず何から考え始めますか？　ユーザーインタビュー

現在では、Webサイトの割合のおよそ50%を画像が占めるようになっています。パフォーマンスの低下は収益やユーザー満足度の低下と密接に結びついているため、私たちデザイナーはサイト上の画像の扱いにもっと責任を持たなくてはなりません。 Webサイトはどんどん重くなっています。httparchive.orgのデータによると、６年前の2012年2月15日には986KBだったWebサイトの平均的重量は、2018年2月15日には3,686KBもありました。 つまり、Webサイトはこの６年間で373.8%も重くなったのです。衝撃的な速度で悪化しています。 数年前と比べると、動画もサイトの主要なコンテンツになっていますが、それでもサイト全体の表示スピードにもっとも寄与しているのは画像です。 なぜパフォーマンスが重要なのか 優れたパフォーマンスの重要性について支持する調査は簡単に見つかります。 AMP Pro

NatalyはウクライナのSevastopolに住むWeb開発者で、WordPressやITライティングに従事しています。便利な要素や記事を紹介するブログを連載しています。 Webサイトの導入部分をよりドラマチックな演出にしたくありませんか？　目を見張るようなアニメーションや、ハイエンドなライブラリを駆使した実験的で独創的なデザインなどで訪問者の心を掴みたいと思いませんか？　そのようなときは、スプラッシュスクリーンに注目するべきです。 デスクトップアプリケーションの世界で誕生してから、スプラッシュスクリーンは現在までWebデザインにおける定番となりました。スプラッシュスクリーンは軽くて比較的シンプルながら、強力な要素です。私たちデザイナーはいつも最初の数秒間の重要性について話しており、スプラッシュスクリーンこそがこの課題の達成に直接関係するWebアプリケーションの要素の１つなのです。 この

アドビは、日本人のデジタルコンテンツ消費に関する“5つのトレンド”を発表した。米国、オーストラリア、インド、日本の4か国で、デジタルデバイス（スマートフォン、タブレット、PCなど）を所有する18歳以上のユーザーを対象とした意識調査「2019 Adobe Consumer Content Survey」の結果をもとに、日本人のデジタルコンテンツ消費に焦点を絞って分析を行った。 その結果、以下の5つが、日本人のデジタルコンテンツ消費における傾向だと指摘されている。 日本の消費者がデジタルコンテンツに費やす時間は、一日平均4.8時間。日本の消費者は、質の低い体験に不寛容。日本の消費者は、実店舗よりYahoo!ショッピングや楽天などの「オンラインショッピングサイト」を利用。ブランド企業は、不快にさせない程度にパーソナライズしたコンテンツの提供が必要。ほとんどの消費者が、依然としてソーシャルメディア

早速ですが、読者の中に「UXってなに？」と聞かれて詳しく回答できる方はどれくらいいるでしょう。 「User Experienceです!」みたいな回答はもちろん正解ですが、今回はなしです。 UXとは多くの定義があり、一言で表現することは難しいとされています。 人間中心設計の第一人者である、ドナルド・ノーマン氏とWebユーザビリティの第一人者と言われているヤコブ・ニールセン氏が共同で設立したコンサルティング会社のニールセン・ノーマンは 「UXとは企業やサービスや製品とのエンドユーザーのインタラクションすべての側面のこと」 と定義しています。 ざっくりいうと 利用者の体験 みたいな感じだと思います。 製品やサービスの使いやすさだけではなく、人間の感情を考慮して、購入前から購入後まで通して得られるすべての体験を満足してもらうサービスを提供する。というのがUXデザインに当てはまるのではないでしょうか

ブログ運営 ブログに「上に戻る」ボタンはいらないと思う理由。付ける意味がないしスマホで表示されると記事に集中できません。 「ブログ書いてるけど、『上に戻る』ボタンって付けたほうがいいのかな？」 ...今回は、私がブログ記事に「上に戻る」ボタンを付けない理由について書いていきます。 いろいろなブログを拝見していると、パソコンとスマホを問わず画面の右下にたまに「上に戻る」ボタンを設置しているサイトを見かけます。 ご存知の人もいるでしょうが、クリックすれば一気にブログの１番上までスクロールできる...という機能です。メニューが上にあるブログだと別の記事が探しやすいメリットがあります。 ただ、私はブログに上に戻るボタンは付けてません。仮に付けるとしてもパソコンだけで、スマホ版には設置しないでしょう。 記事中に「上に戻る」ボタンがあると気が散ってしまう まず上に戻るボタンがいらない理由として大きいの

マイクロインタラクションは2017年のもっとも大きなトレンドの一つとして、ビットコインと同様に話題になりました。デベロッパー達は進んでユーザー体験をよりよいものにしようとし、熱意を持ってこの仕事に当たりました。私たちは少しずつ、知的で分かりやすいインターフェイスの時代へと入っていったのです。 よいユーザー体験の根幹を成すものとして、上質なマイクロインタラクションはとてもよい効果をもたらします。この工夫のおかげでWebサイトは馴染みやすくより人間らしさを持ち、魅力的で遊び心にあふれたものになります。インターフェイスはより直感的に操作できるものになり、楽しさを提供しています。 これとは別に、優れたインタラクションとして、マウスを通したインタラクションがあげられます。タッチスクリーンの普及の勢いは凄まじいですが、多くのユーザーはマウス無しではやっていけないでしょう。ドラッグ&ドロップがよい例です

色は私たちの認識や感情に大きな影響を与えます。正しく使用された場合、その色はユーザーの特定の反応を引き出す事ができます。ここでは下記の理由に則り、赤と緑という２つの色に注目したいと思います。 赤色と緑色はどちらも実用的な色であるため、UIデザインにとって非常に重要です。 UIのアクセントカラーとして赤と緑を使用する、一般的な方法を見ていきましょう。 重要さを意味します。即座に注目を集め、ユーザーに迅速な決断を促す非常に目立つ色です。 赤色はとても高い温度を示す色です。情熱から怒りというような感情が含まれている強烈な色でもあります。 警告または危険を意味します。 赤いライトが点滅している場合、人々は危険または緊急事態を連想します。 エラー表示 赤色は多くの場合、警告や非常に重要で確認が必要なもののいずれかに関連付けられています。そのため、エラー表示について考えるときに最初に思いつくのは赤色で

Ericは20年以上の経験を持つWebデザイナーです。『Your Guide to Becoming a Freelance Web Designer』の著者でもあります。 ページネーションはデザインの中での必需性が低く、見過ごされることが多いもののひとつです。しかしブログやコンテンツの多いサイトでは、ページネーションはナビゲーションにおいて重要な意味を持ちます。サイトのページネーションが上手く作られていると、ユーザーはサイトを深くまで探求するようになるでしょう。 信じられないかもしれませんが、ページネーションのレベルを次のステップまで引き上げるデザイナーたちがいます。ここではWebサイト改善に役立つ、独創的なページネーションのコードスニペットを見ていきましょう。 シンプルで直観的なホバー効果 基本的なホバー効果によって標準的なページネーションは大幅に改善されます。カーソル移動に合わせて滑