ユーザーにとって、より分かりやすく使いやすいプロダクトを設計するためには、ユーザー心理に寄り添ったUI UXデザインが必要です。 「良いUI UXデザインとは？」を考える上で指針となる、心理学などをベースとした法則・ルールがあるのをご存じでしょうか？ この記事ではその中から、特に押さえておくべき19の法則・ルールをピックアップ。 デザインへの生かし方と一緒に解説します。 UIデザイン、UXデザインとは？ 本題となる法則・ルールを紹介する前に、そもそもUIデザイン・UXデザインとは何か、を押さえておきましょう。 UIデザインとは？ 「UIデザイン（ユーザーインターフェースデザイン）」とは、ユーザーがプロダクトをスムーズに使えるように、ユーザーとサービスの接点（UI）をデザインすることです。 UIとは、例えばサイトの見た目から、文字、画像・動画やアニメーション、ボタンなどの機能、入力フォームに

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き

English version of this article is available here はじめに こんにちは、CTO室 IDサービス開発部のyamato(@8ma10s)です。 マネーフォワード IDという、当社サービス向けのIdPを開発しています。 今回このマネーフォワード IDにおいて、パスワードを使わずに、生体認証などを利用してログインできる「パスワードレスログイン」という機能をリリースしました。 また、今回のリリースでは、既にいくつかの他社サービスで導入されているような通常のパスワードレスログインUIではなく、「Passkey autofill」という、ブラウザの自動補完を利用する新しいタイプのパスワードレスログインUI を（恐らく日本のサービスで初めて。エンドユーザーの目に触れるサービスという意味では、おそらく世界でも初めて）導入しています。 私達がどういった過程で、

はじめに 個人開発もエンジニア自体の歴も浅いSEです。 就業先がJavaをメインで使う企業なのですが、個人的にフロントエンドまわりが好きです。 元々、興味本位でデザインの本だったりUXに関する本とかを読んでいたりするのですが、 その結論の際にたどり着いたのが、 「理論とか決まってるなら、それをよしなにやってくれるor参考にできるツールとかサイト探せばよくね」 という結論になりました。なんと怠惰な思考でしょうか。 そんなわけで、こちらではデザインに限らず、色々開発に便利なツールを紹介させていただきます。 （有名なのが多いかもしれませんが、ご容赦ください、結局有名なものに行き着くのです） レイアウト関係 1. Awwwards おしゃれなwebサイトが集まっているサイトです。 ここまで個人開発でお洒落にできたらいいなと思いますが、自分はアニメーションを考えるときや、 作りたいフロント側のデザイ

27. 27 代替テキスト決定ツリー 参考：https://www.w3.org/WAI/tutorials/images/decision-tree/ 文字がある リンク／ボタン 意味がある 隣接するテキストと重複 装飾画像 機能を示すグラフィックと文字 文字画像 alt = ”” alt = “日本全体の店舗マップ” alt = “北海道” alt = “電話番号” alt = “イラスト：年老いた灰色の猫” alt = “イラスト：猫の不安そうな眼差し” alt = “星二つ” alt = ”” alt = ”” alt = “ホーム” alt = “印刷” alt = “ホーム” alt = “ホーム” 隣接するテキストと重複 印象や感情を伝える画像 ページデザインの一部 alt = ”” 隣接するテキストの補足 テキストで説明されていない内容 シンプルなグラフィック／写真 シンプ

この記事は先日リリースした個人開発アプリ『3 Good Things!』を作る中でUI/UXについて考え、 講師もやっているWebデザイナーさんを含む周囲の意見を聞いてそれを改善していった過程についてをまとめた記事です この記事で紹介するユーザー心理はこちら👇 基本スクロールとタップしかしたくない 開いて即何をすれば良いか分からないとサヨナラ 少しでも「難しそう/面倒くさそう」と思わせたら負け 信用できないアプリに個人情報は渡せない 「徒労感」は絶対にNG 期待した通りの動作で動かないとストレス 「使ってて」嬉しい・キモチイイが欲しい 他者のとの繋がりで持続するモチベーション 最終イメージ 👇アプリの紹介/使用技術等についてはこちら⚛️ このアプリはポジティブ心理学の創設者セリグマン教授が提唱し、長年の実験で効果が実証されている “Three Good Things”メソッドを使い、毎

Googleが発表した、WebページUX指標「コアウェブバイタル」には、「LCP」「FID」「CLS」の3つの指標があります。詳しくは Web担当者フォーラムの【重要】コアウェブバイタルとは？ グーグルのUX指標LCP/FID/CLSの意味や基準値をわかりやすく解説【SEO情報まとめ】に書かれています。 この中のCLS（Cumulative Layout Shift）とは「累積レイアウト変更」の意味で、視覚要素の安定性を示す指標です。例えば画像を読み込む際、その画像サイズが指定されていなく、画像の次にはテキストが書かれていたとします。この場合、テキストの方が軽いため先に読み込まれます。まずテキストが読み込まれ、その間に画像が読み込まれますが、ブラウザは画像サイズが分かりません。読み込みながら「あ、この画像は500 x 500の画像だったのか」と理解し、テキストの上に縦横500の余白を作り、

prefers-reduced-motionと Angular Animations ng-japan OnAir vol.38 @lacolaco

Firefox では、 reduce の要求は以下の場合に尊重されます。 GTK/GNOME では、 GNOME Tweaks > General タブ (バージョンによっては Appearance タブ) > Animations がオフになっている場合。 他にも、 gtk-enable-animations = false を GTK 3 configuration file の [Settings] に追加する方法もあります。 Windows 10: 設定 > 簡単操作 > ディスプレイ > アニメーションを表示する Windows 7: コントロールパネル > コンピューターの簡単操作センター > コンピューターでの作業に集中しやすくします > 必要のないアニメーションは無効にします (可能な場合) macOS: システム設定 > アクセシビリティ > 表示 > 動きの抑制 iOS

Webアプリケーションが広く使われるようになり、さもローカルアプリケーションと同じように操作できるようになっています。しかし、デスクトップの操作に近づけば近づくほど、ちょっとした操作性の違いに違和感を感じるようになります。 今回はドラッグして選択する操作をサポートするSelecto.jsを紹介します。この操作、デスクトップでは当たり前なのでWebでもできるようになると便利でしょう。 Selecto.jsの使い方 下にあるタイルが選択された状態です。 マウスでドラッグして選択できます。 キーボードとの組み合わせで複数回の選択もできます。 選択してドラッグ移動といった使い方もできます。 Selecto.jsが使われそうなのはExplorerやFinderといったファイル管理を提供する場合でしょう。同様に複数のファイルやオブジェクトをまとめて選択させたり、それを移動したりするのにSelecto.

はじめに スマホアプリのエンジニアとして、UIデザインについて知っておきたいことをまとめておきます。 自分用のリンク集のような意味合いが強いですがお役に立てば幸いです。 公式資料 一度は目を通しておきたい基本的で重要なドキュメントです。 Apple Human Interface Guidelines 現在は英語版しかないようです Apple Design Resources デザインツール用のテンプレートファイルなどがあります Google Material Design こちらも現在は英語版しかなさそう Android のマテリアル デザイン デベロッパー向けのガイド 知っておきたい概念 エンジニアとしてここまで把握しておく必要はないかもしれませんが、デザイナーさんはこの辺りを踏まえてデザインを行っているはずです。 UXの5段階モデル UXデザインにおける5段階モデルとは？ UXの5段

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

FRONTEND CONFERENCE 2019 での発表資料です。 https://2019.kfug.jp/session/jimboyoshihide 当日の質疑応答の内容はブログにまとめています。 https://jmblog.jp/posts/2019-11-03/frontend-…

こんにちは、クックパッドでUXエンジニアをしている重田です。 Cookpad DESIGN MAGAZINEの一記事として、最近行った「おいしいたべかた学習ドリル - たべドリ -」のリニューアルプロセスを紹介します。 新規事業における難題たべドリはクックパッドの新規事業です。新規事業では往々にして正解がわからない、解き方もわからないような難題に取り組みます。 たべドリは「自分の感覚で料理ができることの楽しさを一人でも多くの人に伝えたい」という想いでデザイン・開発しているサービスです。ただ、それを実現するための切り口は多様なため、正解がわからず苦労していました。 ・料理教室のようにスキルを身につけるといいのでは ・食材の活かし方を学ぶといいのでは ・献立の組み立て方を学ぶといいのでは ・料理を小さく分解して捉えられるといいのではリニューアル前は、シンプルな調理でも十分おいしい旬の食材を中心

「UXってよく聞くけど、UX改善のために一体何をすればいいの？」 Webデザイナーの方や最近Web担当者になった方の中には、このように思っている方も多いのではないでしょうか。 UXとはユーザー体験のことですが、確かにユーザー体験という言葉自体が抽象的で、何をすればいいかわからないかもしれません。 UXを考えることは、ユーザー視点でプロダクトに触れることに他なりません。 デザイナーやエンジニア、マーケターなど、それぞれに専門の仕事があるでしょうが、一旦自分の役割から離れて、１ユーザーとして自身のプロダクトに触ってみることで、UX上の問題点を発見し、さらなる改善につながる施策を打てることがあります。 今回は、ユーザー視点でUX改善を考えるための*「ヒューリスティックマークアップ」*と呼ばれる手法についてご紹介します。 この方法を行うのはUXデザイナーである必要はなく、職種を横断して身につけてお

下の図のフォークを見て、それがサラダ用なのか、メイン用なのか見分けるのは簡単ではありません。形状も用途も同じものだからです。両方とも食べ物を突き刺すための、尖った部分をもつ道具ですが、それぞれコースの異なる料理用にデザインされています。 用途は同じでも異なる目的に設計されている Webデザインの世界でも、スイッチとチェックボックスを扱う際に、フォークと同様の混乱が起こります。どちらを使用するべきか、あまり大きく考えていないデザイナーの方が多いですが、適当に使用すると、ユーザーを混乱させてしまいます。フォークの例のように、異なるコンテキスト（文脈）に対して、UIを使い分ける必要があります。 スイッチとチェックボックスは、ともに設定を適用する際に使われますが、ユーザーが期待する適用のタイミングがそれぞれ違います。 正しい条件下においてUIを使い分けることにより、直感的にどうするべきか見分けられ