「ダークパターンレポート2023」を公表。ECサイトやアプリでの購入経験者799人への意識調査
「ダークパターンレポート2023」を公表。ECサイトやアプリでの購入経験者799人への意識調査 4割強がダークパターン被害を経験。7割強が、ECサイト等の運営企業に対応を求める 企業や行政と伴走し活動を支えるデザイン会社の株式会社コンセント（本社：東京都渋谷区 代表：長谷川敦士 以下、コンセント）は、消費者をだますウェブサイトやアプリのユーザーインターフェースである「ダークパターン」について、全国18歳から69歳までのECサイトやアプリでの購入経験者799人を対象に、見たりひっかかったりした経験やその際に取った行動、認知・理解度などの実態を調査し、「ダークパターンレポート2023」としてとりまとめました。 調査の実施背景 ダークパターンの問題を顕在化し、個人・企業・行政で取り組める社会に ダークパターンとは「消費者の自主性や意思決定や選択を覆したり損なわせたりする選択アーキテクチャを、主に
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
「システムの画面」と「利用者の認知」のギャップを意識する - ヴェルク - IT起業の記録
boardというSaaSの開発の中で、画面上の文言・配置・全体の流れ等をどのように考えて作っているか、という話です。 一般的なUIの話ではなく、サポートの経験から「認知とのギャップ」という視点で考えてたりするので、それについて書きたいと思います。 人は自分の知識・経験から物事を理解しようとする 人が新しいものを触る際、これまでの知識や経験などと照らし合わせながら物事を理解する傾向があるものだと思っています。 そのため、何か新しいものに触れる際、これまで似たような経験をしたことがあったり、知識があったりするものはスムーズ理解できます。逆に、それが少なかったり似たものがなければ、理解のハードルが高くなると思っています。 そのため、初めてシステムを触る際に、これまでの知識・経験とのギャップが小さければ小さいほど、スムーズに理解できる可能性が高くなります。 boardの画面を考える際、想定ユーザー
UIデザイナーは読んでおかないと後悔する良書！ 大規模サイト・アプリのUI/UXを作り込むテクニックや裏側まで詳しく解説 -銀行とデザイン
3人のWebデザイナーがインハウスデザイナーとして、三井住友銀行のスマホアプリやWebサイトのリニューアルを通してデザインによるDXをどのように浸透させたのか、その経験が惜しみなく明かされた良書を紹介します。 「銀行」は自分とは関係ないやと思った人は間違いです。スマホアプリやWebサイトのUI/UXをユーザー目線で使いやすく洗練されたデザインにするテクニックなども詳しくていねいに解説されており、UIデザインの学びがたくさんあります。 一読するだけでなく、何度も繰り返し読みたくなる優れたデザインの解説書です。 3人の経歴は、金澤氏はフリーのWebデザイナーを経て制作会社に入社、金子氏は知人とWeb企画・制作、堀氏は企業でUIデザインを担当、そして三井住友銀行のインハウスデザイナーとしてUI/UXデザインを担当しています。 デザインの必要性や重要性を社内からどのように理解してもらったのか、スマ
製品に「新しい顔」が必要になるとき: 主要画面のスクラップ&ビルド - LegalOn Technologies Engineering Blog
こんにちは。LegalForce COO 川戸（@kawato_takashi）です。 今日は「画面を作り直すこと」のケーススタディをご紹介します。 事前にリサーチをしても、実際に使われ始めるまでは、本当は製品が何に使われるのか、よく分っていないことが多いです。ユーザーのフィードバックをもとに機能を継ぎ足した結果、元の設計の限界に気付くことはしばしばです。 また設計は生まれた瞬間から老い始めます。たとえば最近ではアクセシビリティやOOUIなど、着手時には目配りできていなかったことが「できて当然」になっていく、といったことも発生します。 機能追加を伴わない再設計は、どうしても優先順位が低くなりがちです。しかし技術的負債と同様に、設計的な負債も、設計と実装の速度を削いでいきます。 何より、それでは真の意味でユーザーが使いやすい製品に辿り着きません。 こうした背景からLegalForceでは製品
「全ての住所フォームがこうなってほしい」 SIerが公開した“使いやすい入力欄”の作り方が話題 ソースコードも掲載
「郵便番号を入れる枠はひとまとまりに」「郵便番号を基にした住所の自動入力を搭載する」といった、使いやすい住所入力フォームを作る知見をまとめたブログ記事が話題だ。「はてなブックマーク」で1000ユーザー以上がブックマークした他、Twitterでも「参考になる」「全ての住所フォームがこうなってほしい」などの反応を集めている。 ブログでは、入力の煩雑さから離脱してしまうユーザーを減らすためにすべきことを大きく4つに分ける。 「郵便番号の枠はひとまとまりに」「郵便番号を入れたら即座に、もしくはユーザーがボタンを押したら住所を自動入力する」に加え「Webブラウザが備える住所の自動入力機能に対応・最適化する」「入力欄は『都道府県』『市区町村』『町名以下』の3欄を基本とし、『建物』欄はオプションとする」といった機能が必要と紹介。それぞれの実装に当たっての注意点などを説明している。 これらの機能を搭載した
2022年、Webデザインの新しいトレンド「クレイモーフィズム」のスタイルをさまざまな要素に適用できるCSS
クレイモーフィズムはWebデザインの新しいトレンドの一つで、クレイ粘土みたいなもこもこの質感にシャドウを加えてフラットなデザインに奥行きを与えます。メタバースなどの影響でデザインやイラストにも3Dの人気が高まり、最近ローンチしたスタートアップでも使用しているのを見かけます。 クレイモーフィズムのスタイルをさまざまな要素に適用できるCSSを紹介します。 clay.css clay.css -GitHub 「クレイモーフィズム」とは clay.cssの特徴 clay.cssのデモ clay.cssの使い方 「クレイモーフィズム」とは 「クレイモーフィズム（Claymorphism）」は、UIデザインのフレッシュで新しいコンセプトです。呼び名はMichał Malewicz氏によって作られたもので、デザイナーはUIデザインへのこのアプローチの可能性を探求することに興奮しています。 メタバースやN
「1枚のシート」でエンジニアとデザイナーのストレスが激減した話 - Qiita
「考慮もれ」「手戻り」をなくしたい モチベーションクラウドシリーズのデザイナーです。 フロントエンドエンジニアのみなさんは、画面デザインを見て「どう実装するんだ？」とストレスを感じたことはないですか？ 例えば... 👨💻 フロントエンド「Emptyのときはどうするんだろう？最初から考慮してほしいな...（ストレス）」 👩🎨 デザイナー「この状態も考えないといけないのか。確認するだけで1日終わるな...（ストレス）」 →お互いにとって、よくない！！！！！ こうした状態を受けて、お互いにとってストレスなく開発するために、デザイナーとフロントエンドで制作プロセスを改善しました。 今回は、プロセス改善のステップや導入してみて効果的だったツール（シート）についてお伝えします。 【まず初めに】 「UI Stack（状態デザイン）」の必要性の周知 UI Stackとは、UIの考慮すべき5つの
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
【保存用】 あんまり知られてない？UIでパーツ・コンポーネントの名前 10選｜Hitomi Bremmer UI UX
こんにちは！ヒトミです😀 以前の記事で、Googleマテリアルデザインのサイトを読むべき！とお伝えしたので、今回は私が個人的に「え、これってそんな名前で、そういうふうに使うんだー」ってなったコンポーネントを紹介します🍺 名前がわかってると、デザインレビューの時にデザインの意図を明確に伝えやすいです。デザインを本職にしていない人がデザインレビューに入ってきたときに、「このパーツ使った方がいいんじゃない？」っていう新しいアイディアの提案がよくあります。それがいいアイディアなのかそうじゃないのか、説明できるようにするためにも、名前と意図と機能を理解していると同僚とのコミュニケーションにすごい役に立ちます！ 今回の記事は、デザインについて少しでもすでに理解がある人に向けて書きました。まだまだ経験が浅い人も、あーこういう風にコンポーネントって選ぶんだなーくらいに思っていただけると、デザインする際
Facebook、モバイルアプリでニュースフィードを新着順（逆時系列）に表示できる「フィードフィルターバー」を追加
米Facebookは3月31日（現地時間）、Androidアプリの新しいユーザーインタフェース「フィードフィルターバー」を発表した。iOSアプリにも数週間中に追加するとしている。 フィードフィルターバーは、ホーム画面、ニュースフィードの新着順表示、数カ月前に利用可能になった「お気に入り」の3つの表示方法をタブで切り替えるバーだ。 Webアプリで新着順に表示するには、上部の家のアイコンをクリックし、左側に表示されるメニューで［もっと見る］→［最新情報］を選択する必要があり、「最終的にはデフォルト設定（最も人気のある投稿とFacebookが判断したものを表示する）に戻る」が、Androidアプリではフィードフィルターバーのタブを切り替えることでいつでも新着順に投稿を見られるようになる。 同社はまた、公開設定の投稿にコメントを付けられる相手を調整できるようにしたことも発表した。これまでは公開設定
実際に見るより近くで見られる。作品のわずかな歪みまで確認できるオンラインギャラリー
実際に見るより近くで見られる。作品のわずかな歪みまで確認できるオンラインギャラリー2021.02.26 11:00Sponsored by パナソニック株式会社｢Game Changer Catapult｣ ヤマダユウス型 オンラインを代替ではなく、利点に変える。 コロナ禍の影響もあり、ネットでの買い物体験はどんどん一般化してきています。一方で、｢コレはネットじゃなくて実物を見て買いたい｣というモノもありますよね。僕は古着が好きなのですが、 古着は実物を見てみないと質感とかがわからないじゃないですか？ あと、お店の雰囲気も大事にしたい。 ECサイトは手軽に多くの商品がチェックできるものの、質感レベルまで確認するのは難しい。そこで登場したのが、未来の｢カデン｣を生み出すためのパナソニックの社内プロジェクト｢Game Changer Catapult（ゲームチェンジャー・カタパルト）｣が主催す
やめてほしいUIアニメーション
最近はクオリティの高いアプリも増え、UIの見せ方も工夫されて昔より質の高いアプリが増えましたが、低コストで開発していくとUIアニメーションは後回しにされがちですよね。 開発時間や人員の問題、UIアニメーションをやる人がいないから自分がやった人など、UIアニメーションの優先順位が低いため、手探りでやっている方も多いと思います。 今回の記事では今出ているアプリに対してあれはダメだ！と言いたいわけではなく、リリースされているアプリを触って、自分が作るときはここは気をつけようと思ったり、これはアニメーションいいなとか、実際体感して勉強していけるため、その経験が業界全体を徐々にクオリティアップしていくため、結果は惜しいアニメーションだとしても挑戦した結果でもあると思うため大事なことだと思っています。 前置きはここまでにして、今回はアニメーションの中で、あれ？と思ってしまう、そんな「これはやめてほしい
UIとしてのスプラッシュ画面 | UXデザイン会社Standardのブログ
アプリケーションを起動した時に表示される画面をスプラッシュ（Splash）画面、またはローンチスクリーン（Launch Screen）と呼びます。アプリケーションにおいては、ユーザーが操作することのできない数少ない画面でもあります。 iOSではこのスプラッシュ画面はストア申請時に必須であり、使用するアプリケーションの向きや、対応デバイスのサイズに適しているものを提供する必要があります。個人的感覚ではありますが、いつもアプリケーションのビジュアルデザインや、アイコンのデザインが完了した後に即興で作られるということが多いのではないでしょうか。しかし、適当にスプラッシュ画面を作成するのではなく、サービスの性質や通信の有無などを考慮してデザインする必要があります。 ここで一旦、AppleのHuman Interface Guidelineを見てみましょう。 起動画像は、アプリケーションが起動するま
人はなぜ「分かりやすいデザイン」でも失敗するのか｜Tsutomu Sogitani
これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか？ 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター（26歳）は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同
Webデザイン入門者向け「UI・UX」って何？UXを向上させるには？ - paiza times
上原です。 paiza(ギノ)に入社して3ヶ月くらいのWebデザイナーです。 今回は、Web制作の現場でよく聞く「UIとUX」って一体何なのか、どういう関係性なのか、またUXを考えるのは誰の仕事なのか…などといった話を書きたいと思います。 デザイン初心者の方、これからデザインを学びたい方、UIとかUXってよく聞くけど何なのか実はよくわかってない方、そんなのはデザイナーが考えることだから関係ないと思っている方にとって少しでも参考になればと思います。 UIとUXの関係性について UI（User Interface）とは 人とデバイスをつなぐ役割をする機能のこと。 ＝ユーザーの操作を助ける要素。 UX（User Experience）とは プロダクトやサービスなどの利用を通じて、ユーザーが得る経験のこと。 ＝サービスを通じて得られる感覚、感情も含むすべての経験 たとえば、このpaizaのトップペ
「Google Play ストア」がデザイン変更 タブが下に移動し、ゲームとアプリを完全分離
米Googleは8月21日（現地時間）、「Google Playストア」アプリのビジュアルデザインを“完全に刷新した”と発表した。ユーザーがアプリ、ゲーム、その他のデジタルコンテンツを発見しやすくすることに重点を置いたという。 「マテリアルデザイン」に沿ったデザインで、全体的に白っぽくなった他、ナビゲーションバーの位置が画面上部から下部に移動し、ナビゲーションバーの左端が「ホーム」から「ゲーム」に変わり、「ホーム」は「アプリ」に変わった。 従来は「ホーム」にゲームアプリも登場していたが、ゲームとアプリが完全に分離し、探しやすくなった。さらに、アプリごとのページに大きな「インストール」ボタンが目立つ位置に配置された。 これまでナビゲーションバーにあった「音楽」タブはナビゲーションバーからは消え、画面左上の［≡］の下の方に「音楽を探す」という項目に変わった。これをタップすると「Google P
スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説
スマホでボタンをどこに配置するとユーザーは操作がしやすいのか？ 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか？ タスクを素早く完了することで、より満足のいくエ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
Doctor App designs, themes, templates and downloadable graphic elements on Dribbble