「ダークパターン」大規模調査“不利益被った”半数近くが回答 | NHK
気付かないうちに意図しない判断に誘導される「ダークパターン」と呼ばれるウェブデザインについて、専門家による大規模な調査結果がまとまりました。回答者の半数近くが「不利益を被ったことがある」と回答していて、専門家は、対策を強化する必要があるとしています。 ショッピングサイトで商品を購入する際に、▽定期購入であることが小さく表示されて意図せずに申し込んでしまったり、▽選択肢が「はい」と「あとで回答する」しかなく何度も表示されたりするケースなど、消費者が意図しない判断に誘導されるウェブデザインは「ダークパターン」と呼ばれ、対策の必要性が指摘されています。 こうした中、ウェブデザインのコンサルティングなどを行う企業が「ダークパターン」の実態について大規模調査を行い、このほど結果がまとまりました。 調査はことし8月にアンケート形式で行われ、ウェブサービスの利用者およそ800人から回答を得ました。 その
高齢者向けサービスにおけるUIデザイン｜『高齢者のためのユーザインタフェースデザイン』の書評
現在、本業・副業ともにWEBデザイナーとしてデザイン・コーディングをしているゆるけーです。 本業で携わっているWEBサービスが割と高齢者向けのサービスで、ITリテラシーやUIが今の自分と考え方が異なるよなーと思っているなか、『高齢者のためのユーザインタフェースデザイン』という書籍に出会いました。 高齢者関係なく普通にアクセシビリティの観点でも重要な視点がたくさんあり、とてもいい書籍だったので、ざっくり大事だと思った箇所を抜粋しつつ自分で探した事例等をざっと記事にまとめていきますー。 視覚 高齢者になると視力が低下する傾向があります。ただ、視力の低下＝フォントを大きくするだけではありません。 視力の低下は老眼や光覚の減少などより複雑です。 主な視力の低下の具体例は以下のような点。 老眼：近く・遠くのものの焦点が合わない 周辺視野のぼやけ：画面の端に気づきにくい 中心視野の損失：画面の中央が暗
Figmaの使い方＆便利機能11選。今すぐ使えるショートカットを一挙紹介 - Workship MAGAZINE(ワークシップマガジン)
SketchやAdobe XDと並ぶ人気のUIデザインツール『Figma』。 Figmaには多数の革新的な機能が搭載されていますが、そうした機能や使い方に気づかないままFigmaを使っている方もいるはず。 そこで今回は、基本的な説明から、「もっと早く知っておきたかった！」と思うような便利すぎる機能&使い方までご紹介します。 Figmaは、ブラウザ上で利用できるデザインツールです。数あるデザインツールのなかでも、アプリやWebに特化したものとして、多くのデザイナーや企業が使用しています。 Figmaの大きな特徴は、その「共有しやすさ」。クラウド上にデータを作成するため、複数人で同時編集が可能です。また、特別なツール・アプリを導入する必要がなくブラウザ上で動作するため、クライアントへの共有もURLを送るだけで完了します。 多機能性に加え、こういった優れた共有機能が評判を呼び、いまもっとも注目さ
トグルスイッチの誤用をやめよう
AnthonyはUX Movementの設立者で執筆者です。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。 トグルスイッチを使うべき場合と使うべきでない場合があります。デザイナーが誤った使い方をするとユーザーの混乱とイライラにつながります。使うべきタイミングを知るには、さまざまなタイプのトグルの状態や選択肢について理解する必要があります。 文脈上の状態 vs システムの状態 トグルスイッチとトグルボタンをデザイナーは混同しがちです。両方とも状態を管理しますが、トグルスイッチとトグルボタンには根本的な違いがあります。トグルスイッチはシステムの状態を管理し、トグルボタンは文脈上の状態を管理します。文脈上の状態のトグルはユーザーが見ようとしている現在の画面にのみ影響を及ぼしますが、システムの状態のトグルはアプリ全体に影響を及ぼします。 トグルスイッチを文脈上の状態のために使う
これってだめなの？！ 〜日本人の親切心が仇となるUI設計〜 ｜ CJコラム
これってだめなの？！ 〜日本人の親切心が仇となるUI設計〜 日本人の「おもてなし」の心。それは世界にも誇れるすばらしいものだと思います。 Webサイトを制作するときもに、「より親切に使いやすく」と情報や選択肢を多くすることがあると思います。 ところがその親切心が外国人を混乱させてしまうこともあるようです。 外国人（主に欧米系の外国人）に向けた検索をメインのサービスとしたサイトのデザインをしていた時のこと、 どのページからも検索をできた方がよりユーザーフレンドリーだろうと全ページ共通のヘッダーに検索窓を設置。 そのためメインの検索ページではヘッダーとメインの検索窓と２つの検索窓があることになりました。 日本人スタッフはヘッダーは全ページ共通であることは前提であり検索窓が２つになることをあまり気にせず、 むしろちょっと便利で良いのではないかと思っていました。 ところがネイティブスタッフからこの
最近気になるWebデザイン～水平スクロールを取り入れた個性的なWebサイト～ ｜ CJコラム
最近気になるWebデザイン～水平スクロールを取り入れた個性的なWebサイト～ Webデザインならではの動きに「スクロール」があります。少し前はスクロールは少ない方が良いと言われていたことがありましたが、スマートフォンの普及により、縦のスクロールに対する抵抗は薄れ、今では縦に長いページは一般的になりました。そのおかげでデザインも、限られたスペースにできるだけ詰め込むことを求められることも少なくなり、余白を十分にとった美しく見やすいWebサイトが多く見られるようになっています。 さて、そのスクロールを縦方向ではなく、横に動かすWebデザインが増えてきているように感じます。マウスでの動きは縦方向と同じなのですが、画面が横に、水平方向に動きます。自分が予想していた動きと違う動きをした時の驚きや違和感は結構なインパクトがあります。もちろんこれは、PCで見た場合です。ではスマートフォンの場合はどうなる
全てのデザイナーが知っておくべき10の法則 デザイン会社 ビートラックス: ブログ
デザインを行う際には、感覚ではなく複数のロジックを活用することで、より精度の高いプロダクトを創り出すことができる。 そのプロダクトを人間が利用する場合、ユーザーの視覚や行動心理学などをしっかりと理解し、活用すればデザイナーとしての能力が一段と高まるはず。 今回紹介するのは、複数あるデザインにおける法則のうち、ビートラックスのデザインチームでも頻繁に利用される代表的な10の法則。プロのデザイナーなら、これは押さえておきたい。 デザイナーなら知っておきたいデザインに関する基本の10法則ヤコブの法則ヒックの法則80/20の法則パーキンソンの法則フィッツの法則ミラーの法則テスラーの法則FBMモデルドハティのしきい値3対1の法則ヤコブの法則ユーザービリティーの父であるヤコブ・ニールセンが提唱する法則。一般的なユーザーは、アプリやプロダクト、Webサイトなどに、既存のものと同じような動作体験を望む。
Figmaで色の変数管理をする🎨｜わたなべなつき
こんにちは！コネヒト株式会社デザイナーのなっぴーこと、わたなべなつきです。 コネヒトでは、最近SketchからFigmaに移行しました！まだまだ慣れない点も多く、日々、FigmaでのUI運用を試行錯誤しています。 今回は、そんな日々の試行錯誤の中で発見した、FigmaのLibrary機能を使って、色を変数管理する方法についてしたためてみました🎨 Sketch&Zeplin→Figma移行時の「色」に関する課題弊社ではこれまでSketchでUI制作後、ZeplinにUIデータをimportし、エンジニアさんにZeplinのUIデータを参照していただいていました。 Figma移行に伴い、エンジニアさんから「ZeplinのときはStyleguide機能があって、実装時に共通化する色がわかりやすかったけど、Figmaにはないの？」というご意見があがりました。 Figmaでも色に変数がつけられる！
ユーザー獲得や売り上げにつながる、UI/UXデザインとは？
インターネットやスマートフォンが普及した現代で、自社のビジネスを多くの人に知ってもらう上で欠かせないのがウェブサイトです。伝えたい情報が一つのプラットフォームにまとまった便利なツールではあるものの、見た目や使い勝手によっては情報が伝わりづらく、ユーザー獲得につながりにくいウェブサイトも少なくありません。そこでウェブサイトを訪れた人に伝えるべき情報が届くよう、押さえておきたいのがUIとUXデザインです。 今回は意外と知られていないUI/UXの特徴から、最適なUI/UXデザインを設計する上でビジネスオーナーが準備しておきたい点を解説します。 UI/UXについて パソコンやスマートフォン上でアプリやウェブサイトを利用する際に、「使いにくい」「見にくい」と感じたことはありませんか。こういった弱点をカバーし、ユーザーにとって魅力的かつ使いやすいウェブサイトやアプリケーションをデザインするのがUI/U
“最悪のUI”を体験できるWebサイトをデザイン会社が制作 あまりの使いづらさにストレスがマッハ
まともに入力するのが難しいデザインのWebサイト「User Inyerface」が、海外メディアに取り上げられてジワジワと話題を拡大中です。制作した企業は、直感的な操作では最後までたどりつけない“最悪のUI（ユーザーインタフェース）体験”ができるゲームとして紹介しています。 ゲーム開始で、まず手こずる（画像は「User Inyerface」より） UIはWeb制作などでよく使われる言葉で、人間と機械をつなぐものを意味しています。慣習に従い、直感的に操作できるUIを「良いUI」と呼びますが、「User Inyerface」のコンセプトはその真逆。慣習に逆らっているため、最後のページにたどり着くまでに、いらだちでパソコンをたたき割りそうになってしまいます。 「User Inyerface」を開始すると、画面上部にクッキー利用同意のメッセージが表示されますが、早速分かりづらい。「このサイトはクッ
Mac OS のクローズボタンはなぜ左配置なのか
https://en.wikipedia.org/wiki/Mac_OSMac OS の左と右考察シリーズ。今度のお題はウインドウのクローズボタン。閉じるボタンとも言う。昔は四角かったからクローズボックスとも言われた。Windows では右配置になっているクローズボタンだが、Mac OS を前提になぜ左配置なのかを考察したい。 ウインドウは左上からはじまり、右下に終わる情報の流れの原則に従うと、ウインドウの起点は左上、終点は右下になる。右下には（かつての Mac OS では）サイズボックスと呼ばれるウインドウを拡大縮小するための箱が設置されており、それ＝終点をドラッグすることで起点を固定したままウインドウの大きさを変えられた。ウインドウに収められるコンテンツも左上起点に描画されるので矛盾がない。
✕はなぜ閉じるのシンボルなのか歴史を読み解く｜みーた
先日Cybozu Frontend Monthly #1 にてb4h0_c4tさんの「HTMHell special: close buttons」のお話を聴いていた中で、一つ引っかかるものがあった。 「そもそも✗(バツ)は閉じるって意味じゃないから！」 確かに。 現代、様々なUIを触ってきた中でなぜ ✕ を閉じるものと捉えているのだろうと不思議に思った。 ✕ではなくx(エックス)で表現されることも多々あるようで、こんな名言もある。 ✕とはなんなんだろう ではなぜこのクロスの記号(✕)が閉じるの意味を持ってしまったのか考えてみる。 一旦✕を見て思い出すものを上げてみようと思う。 ・◯と✕(日本の正誤表記) ・✓と✕(海外...主に欧米の正誤表記) ・プレステのコントローラー ・海外ゲームだと決定が✕、キャンセルが◯ ・宝の地図なんかで在り処を記す ・上記のツイートのようにx(エックス)とし
UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話｜鈴木 健一 / PLAID & Ex.STANDARD
この記事はPLAID Advent Calendar 9日目の記事ですUI改善の前提理解、うまくできていますか？皆さんはこれまで着手してこなかった既存画面のデザイン改善をする時、どのように進めているでしょうか。 自分がプレイドで所属しているreBAISUというチームでは、タタキとして定義したスタイルガイドを旧来の画面に適用しながらUI改善する取り組みをしています。 取り組み方として、改善対象となる画面の仕様を理解しながら課題を見つけ、解決策を検討していく流れになるのですが、この仕様理解が難しいと感じていまして。 なんとか前提理解を促せる方法はないものかと検討した結果、対象画面の構成要素をひとつずつ紐解いていく方法で理解していく「デザインの逆行分析」という方法をとっていました。 デザインの逆行分析とは「リバースエンジニアリング」とも呼ばれる手法で、その考えをデザインでも応用しようというもので
三井住友銀行アプリについてお話します。｜SMBC DESIGN
こんにちは！三井住友銀行 デザイナーの堀と申します。 前回の初投稿から、SNSなど多方面でたくさんの反応をいただきありがとうございました。予想以上の反響で銀行内でも話題となり、三井住友銀行のデザイナーの活動が少しでも広がったことにうれしく思います。 その中で「銀行アプリが変わった」とのコメントを多くいただき、自分たちが関わったプロジェクトがお客さまの手元に届いているんだなぁと感動しました。 今回はその「三井住友銀行アプリ」について書いていきたいと思います。 本題に入る前に…、お伝えしたいことがあります。 三井住友銀行初！2019年度グッドデザイン賞を取りました！！（ぱちぱちぱち） デザイナーだけでなく、たくさんの方々のご協力、お客さまの声から作られたアプリなので受賞したときは本当にうれしかったです。 それでは本題です。 アプリリニューアルの背景 様々な理由がありますが、まずはこれです。 キ
キャンセルボタンに色をつけてはいけない理由
キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ
「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた｜Tsutomu Sogitani
大阪の実家に帰った時、リビングのテレビの裏側を見たらAmazonのFire Stick TVが挿してありました。このFire Stick TVをテレビに繋ぐと、Amazonのプライムビデオを観ることができるようになります。 プライムビデオには、Amazonプライムの会員であれば、追加費用を払うことなく楽しめる映画やドラマ、アニメなどが豊富に揃っています。さらに個別に追加金額を払うとほとんどの映像コンテンツを観ることができるという、まさにTSUTAYAキラーなサービスです。 うちのおかんは月に2～3回は映画館に行くほどの映画好きなので、プライムビデオのメインターゲットといえるでしょう。本来ならプライムビデオで映画三昧の毎日を送っていてもいいはずです。 しかしながら、Fire Stick TVを挿しているにもかかわらず、プライムビデオを一度も使っていませんでした。初期設定をした私の弟が一通り使
iOSエンジニア以外にも知ってほしいiOSアプリ用語-UI部品編- #Zaim｜akatsuki174
なぜこの記事を書くのかこんにちは。Zaim で iOS アプリ開発をしている@akatsuki174です。 iOS アプリの話をする時、iOS エンジニアが何気なく使う専門用語があります。名称とモノが結びつくだけでも会話がスムーズになると思うので、「iOS エンジニア以外の人もこれを覚えておくと良いかも！」と思うものをまとめました。部品名だけでなく説明も書いているので、iOS の UI をもっと理解したい方は、こちらも頭に入れておくと良いと思います。 注： ・一部、iOS アプリに限らず Web アプリなどでも使用される用語も載せましたが、基本、iOS アプリの文脈で書いています。 ・重要度は、筆者が勝手に①頻出度合い、②iOS アプリを語る上で知っておいてほしい度合いを判断して割り振ったものです。 ・ほとんどHuman Interface Guidelines（以下 HIG）から情報を引
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「プリウス乗ったけどこのシフトレバーでヤバいミスをしかけた」その理由がUIや工業デザインの教訓になりそうな案件
「WEB屋しか使わない単語だから…」サイトの上にある押すとメニュー出てくる3本線のアイコンは「ハンバーガーメニュー」というらしい
文章レイアウトだけで読む速度が2倍に? 「読書アシスト」の読みやすさの理由
