「パスキー」のユーザー体験を最適化させるデザインガイドライン、FIDOアライアンスが公開
パスワードレスなユーザー認証を実現する業界標準である「パスキー」を策定するFIDOアライアンスは、パスキーのユーザー体験を最適化させるためのデザインガイドラインの公開を発表しました。 パスキーは、従来のパスワードによるユーザー認証よりも強力で安全な認証方式とされており、普及が期待されていますが、多くのユーザーが慣れ親しんできたパスワード方式と比べると、サインアップやサインインの方法が分かりにくいという課題が指摘されていました。 FIDOアライアンスによるデザインガイドラインの公開は、こうした状況を改善するものとして期待されます。 パスキーのデザインガイドラインの内容 デザインガイドラインは主に以下の要素から構成されています。 UXの原則（UX princeples） コンテンツの原則（Content principles） デザインパターン（スキーマ、サンプルビデオ、AndroidとiOS
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.11
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第11弾は角丸やアイコンなどのUI要素、ダークテーマにおける読みやすさに関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Eleven. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークテーマのテキストはコントラストを下げる 2. アイコンをわかりやすくするためにラベルを付ける 3. 角丸を補完的に使用する 4. ダークテーマで要素の奥行きを正しく伝える 5. Atkinson書体でコンテンツをよりアクセシブルに 6. メッセージは短く、要点を絞る はじめに 次
『Fortnite』開発者が語るゲームのUXデザイン 人間の脳の“制約”を見抜く
2020年3月28日、NPO法人国際ゲーム開発者協会日本（IGDA日本）主催の特別ウェビナー「『Fortnite』のユーザーエクスペリエンス」が開かれました。講演者は、世界的ヒットゲーム『Fortnite』のUXディレクターで、書籍『ゲーマーズブレイン UXと神経科学におけるゲームデザインの原則』の著者としても知られるセリア・ホデント氏。自身が携わった『Fortnite』開発時の事例を中心に、ゲームのUXデザインや人間の脳のしくみについて解説しました。 ※この記事はIGDA日本に許可をいただき、ログミーTechが独自に編集したものです。内容についての責任は弊メディアにあります。 『Fortnite』におけるUX設計を語る セリア・ホデント氏：本日はみなさんとこういうかたちでお話しすることができて、大変うれしく思います。ただ、本当であれば東京でみなさんと直接お会いしながらできるはずだったのが
はじめてのUIデザインを読んで実践したら多くの変化があった｜Funakoshi Kiyomi
「さあ、デザインするぞ！」 そう思ってmacに向かい、デザイナーなりたてホヤホヤの1年前の私はいきなり画面のビジュアルからつくり始めました。情報設計せず、最初からワイヤー書いて、色をつけていく…。今思い返すと失神しそうです😇 デザイナーになりたての方、もしくはデザイナーになろうとしている方のなかには「デザイナーはイケてるデザインを作るのが仕事」と思っている方も一定数いるのではないでしょうか。(決して間違ってはないけどね！) でも私は今こう思っています 「良いインターフェースは見た目から始まるわけではない」と。 今回は「はじめてのUIデザイン」を参考に自分が歩んだプロセスをしっかりと文字にして残しておきたい&私の経験が誰かの役に立てたら、と思いこの記事を書いています。 さ！前置きはこれくらいにして始めよう💨 [目次] 1.「はじめてのUIデザイン」について 2.私がデザインを担当したプロ
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
ユーザーインターフェース（UI）デザインの原則とトレンド
ユーザーインターフェース（UI）デザインは、サイトを訪れるユーザーが快適に閲覧したり、サービスを利用したりするのに重要な項目の一つです。不適切なUIで設計されたサイトは、ユーザーにとって使いづらく、UXが低下するおそれがあります。しかし、いざ自社サイトのUIデザインを見直したいと思っても、「何を改善すれば良いのかわからない」と悩む方もいるでしょう。 そこで今回は、UIデザインの基礎知識から、2018年のトレンドまで、詳しくご紹介します。 UIデザインの基礎知識 UIデザインを検討するには、UIの意味や目的を理解することが大切です。まずは基本を押さえて次のステップへとつなげましょう。 UIデザインとは？ インターフェースには「接点」や「境界面」という意味があり、2つ以上の異なるものを結びつける際に必要な窓口のようなものを指します。そのためUIは、ユーザーとコンピューター（システムまたはプログ
魅力的なマテリアルデザインのコードスニペット10選
JakeはUIデザインやWeb開発の記事を執筆するライターです。彼の仕事はあらゆるWebや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 マテリアルデザインがWebの世界で大流行しています。フレームワークやカスタムUIキットを使ったマテリアルスタイルの新しいサイトが毎月いくつも登場しています。 しかし、これは悪いことではありません。むしろその逆です。Googleが自ら好ましいデザイン言語であると認めた、お墨付きのトレンドを用いることによって、デザインプロセスを簡略化できるからです。 もしマテリアルデザインに関心があるのならば、これから紹介するコードスニペットはうってつけです。私のお気に入りの中から、10のスニペットを紹介していきます。 レスポンシブテーブル See the Pen Material Desig
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
「Windows 95の画期的なユーザーインターフェースはどのようにして開発されたのか」を詳細にまとめた論文
by m01229 MicrosoftがWindows 3.1の後継OSとして1995年に発売したWindows 95は、発売からわずか4日で400万本の売上を見せ、PCを一般家庭にも普及させた立役者としても知られています。そのWindows 95が一般にも受け入れられた理由のひとつに、スタートボタンや右クリックの実装など、ユーザーインターフェースのデザインが当時としては革新的であったことが挙げられます。以下のブログでは、「Windows 95のユーザーインターフェースがどのようにデザインされたのか」について書かれた、Microsoftの元従業員のKent Sullivan氏の論文「Windows 95のユーザーインターフェース：ユーザビリティ・エンジニアリングにおける事例研究」が紹介されています。 Designing Windows 95’s User Interface – Socke
文字や背景にピュアブラックを使ってはいけない理由
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を
ユーザーが許可したくなるPush通知を考える｜sadakoa｜note
初めましての方もこんにちは、さだこえ (@sadako_a_ ) と申します。 DeNAに新卒で入社後、現在は株式会社FOLIOのデジタルプロダクトデザイナーとして、オンライン証券のUIデザインに従事しながら、スタートアップのデザイン支援を副業で行っています。 今記事では、主にアプリの機能として欠かせないPush通知に焦点を当て、記事を執筆します。 Push通知とはご存知の通りPush通知とは、アプリやwebサービスで何か変更や更新があった場合にお知らせをする機能です。一般的にこの業界で言われるPush通知は、Apple Push Notificationを指していることが多いと思われます。 その理由の1つとして、AndroidはPush通知に関してユーザーの許可を取る必要が無いからです。（ダウンロードする際にオプトインされるため、許可率は100%になる。） iOSやWeb Browser
人気のゲームアプリに見る、スマホゲームに欠かせない超基本のUIまとめ | SEKAI LAB TIMES（セカイラボタイムス）
国内だけでも毎月何十本も新作が発表されているスマホゲームアプリ。実は数々の有名タイトルを始め、各ゲームにおいて多く採用されている基本操作やUIを、3つのゲームアプリを例に紹介します。 メニュー一覧は画面下 ゲームアプリ内のホームやキャラクター選択、ガチャ、設定などの大まかなカテゴリ分けされたメニューは、画面下に1列で配置されることがほとんど。メニューをタップ操作した際に、場所が画面下部以外だと、画面を手で遮る範囲が出てきてしまいます。 また、片手操作用にメニューを画面右端もしくは左端に設定できるものもありますが、多くのアプリが画面下部に設置している上、並び順も似たような形になっているので、逆に混乱を招いてしまうこともあります。 ユーザーの慣れと、操作性の観点から見て画面下部にするのが妥当です。 キャラクターの詳細はタップして長押しで見ることができる 自分の育てたいキャラクターは、そのキャラ
ログアウトのUXを軽視してはならない
Roxanne はライブチャットやビジネスプロセス自動化を専門とする英国に本拠を置くソフトウェアハウスであるParker Softwareのオンラインコンテンツマネージャです。 ログアウトの体験は、ログインする回数が増えている中で見落とされやすいものです。素晴らしいUXほど、ユーザーを送り出すことよりも招き入れることに重点が置かれているのは当然かもしれません。しかし、重視されていないということは、ユーザーのログアウト体験が疎かになっていることを意味します。 最近、アカウントを作成したときのことを考えてください。そのブランドがWebサイトやアプリの入り口から、スムーズかつ素早くユーザーを迎え入れようと苦心しているのは間違いありません。アカウントを作成してアクセスするプロセスは、とても簡単で夢中になります。しかし、ログアウトに関しても同様に言えるということは、滅多にないでしょう。 ログアウトは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
