Magic UIUI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
AmazonのUIがダークパターンすぎて酷すぎる
AmazonがEvilに染まっていく… 購入手続きのときに、急にこんな画面が挿入されてきたんだけど、 https://tadaup.jp/55aeed90d.gif こんな絵に書いたようなダークパターンある？？ 「お急ぎ便を無料で利用できます」と書いてあるけど、 小さく「会員は\600円/月で特典使い放題」と書いてある。 つまり、「600円払えば無料だよ」と言っている。つまり、無料ではない。 読解力を測るテストで間違えるような人は、もうこれ読み取れないだろ。 しかも、その下のボタンである。 一見すると、ボタンが2つ並んでいる。 YesとNoのボタンなのかと思いきや、なんと、これはYesとYesである。 「Yes か はい で答えてください」というジョークを素でやっているのが、今のAmazonなのである。 では、Noのボタンはどこにあるのかと、画面中をよく探したら、左側に、普通のテキストの見
Googleマップの新しい外観に元Googleマップデザイナーが苦言
Googleマップは2023年9月頃から新たな外観のテストを実施しており、すでに新たな外観のGoogleマップを使っている人も多いはず。そんなGoogleマップの新外観について、15年前にGoogleマップのデザインに携わったプロダクトデザイナーのエリザベス・ララキ氏が苦言を呈しています。 15 years ago, I helped design Google Maps. I still use it everyday. Last week, the team dramatically changed the map’s visual design. I don’t love it. It feels colder, less accurate and less human. But more importantly, they missed a key opportunity to…
値段の「¥マーク」を小さくしたら購入率が大きく改善された。機能は「体験」で成果が激変する。10周年の「メルカリ」に聞く新機能の開発の裏側。3つの成功施策。｜アプリマーケティング研究所
値段の「¥マーク」を小さくしたら購入率が大きく改善された。機能は「体験」で成果が激変する。10周年の「メルカリ」に聞く新機能の開発の裏側。3つの成功施策。 10周年を迎えた「メルカリ」さんを取材しました。 株式会社メルカリ Product Manager 塚本 佳実さん、UX Design Manager 宮本 麻子さん「メルカリ」について教えてください。塚本： 「メルカリ」は、国内最大手のフリマアプリです。2023年の7月にサービス開始からちょうど10周年を迎えました。 直近のアクティブユーザー（MAU）は2,200万人以上に、四半期のGMV（流通金額）は2,500億円以上に到達しています。 累計だと30億品以上が出品されていて、販売の速度でいうと「1秒間に7.9個の商品が売れている」というデータもあります。 この10年間でのトレンドの変化としては、取引されている「ブランド」にも変化が出
【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita
はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le
なぜ <div> に onClick がダメなのか？
■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか？ ただ、なぜ渡すべきでないのか？ 理解してなかったので今回調べてみました。 サンプルコード 今回動作確認に利用したサンプルリポジトリのコードはReactで書いています。 ■ 結論：<div>にonClickを定義するのがなぜダメなのか？ ユーザーにとって操作性の低いボタンになってしまうから、です！ 要するに UX が悪くなってしまうから！ その理由を解説していきます！ ■ 操作性の低いボタンになってしまう理由 大きく３つあると考えています。 div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ◎ focus を持たないから <div>要素はfocusを持ちません。 なので、tabキーで要素に
「誰一人取り残されない」を高い水準で叶えるために。ウェブサイトのアクセシビリティ検証結果と、その後｜デジタル庁
デジタル庁のアクセシビリティチームです。 私たちは、アクセシビリティ向上のための仕組み作りを行う民間人材の専門チームとなっています。3名で構成されており、そのうち2名は視覚に障害のある当事者です。 前回は、私たちがこれまで行った4つの取組を紹介しました。今回は、デジタル庁ウェブサイトで行ったアクセシビリティ検証結果と、そこから見えてきた課題、解決に向けた方向性などをお伝えできればと思います。 今回は少しだけ技術的な内容や規格の詳細に触れますが、できるだけわかりやすくお伝えしていきます。ぜひご覧になってもらえると嬉しいです。 ウェブアクセシビリティに関する方針策定と公開2021年7月から活動を始めた、アクセシビリティチーム。デジタル庁のウェブサイトでは、アクセシビリティ方針の策定・公開をはじめ、リニューアル時の改善に向けたアドバイス、規格に基づいた試験などを行ってきました。 アクセシビリティ
気温には棒グラフを使わない - データ可視化ミニ講座（７）｜荻原 和樹 / Kazuki OGIWARA
棒グラフと折れ線グラフは似た表現方法です。しばしば交換可能なものとして使われる両者ですが、使うべきポイントには違いもあります。 代表的な例が気温です。気温は棒グラフではなく、折れ線グラフで表現するのが正しいです。 そもそも棒グラフは、棒の長さ（≒ 棒部分の面積）の比率と数値の比率を対応させることで視覚的に数値を比較するものです。したがって、数値が2倍なら棒グラフの長さも2倍になります。棒グラフにおいて、縦軸を省略してはいけないのはそのためです。 しかし、気温において「X倍」に意味はありません。気温が10℃から20℃に上がっても「10℃上がった」とは言いますが「2倍の暑さになった」とは言いませんよね。気温とは、水が凍る温度を0℃、水が沸騰する温度を100℃とする相対的な指標です。気温がマイナスになることはしばしばありますが、これは本当に何かがマイナスになっている、失われているのではなく、水が
父も母も最近のレジが複雑すぎて買い物に行けなくなってしまった→みんなの前で複雑なUIにまごつく怖さ (2ページ目)
harr.(はるる.)(渡部になりたい) @harr_pai コンビニ店員だけど、全然タッチパネルやり方聞いてくれた方がありがたい わかってる風で困ってると、口出して説明していいのか悩むから😂 「わからなくてごめんね」って言われたら「何回でも聞いてくださって大丈夫ですよ！」って言うよ🙃 twitter.com/Riko_Murai/sta… 2023-04-27 08:36:07 村井理子 @Riko_Murai 義母も義父も、コンビニには行けなくなってしまった。カードやポイント、画面操作が必要だから、怖くて行けないらしい。銀行もハードル高いらしく、毎度、予約して（！！）、行員さんに全部やってもらっているらしい。なんかもう、どうしたらいいのだろうな 2023-04-26 16:52:06 ルンルンちゃん @runkibun @Riko_Murai コンビニ勤務ですが時々、高齢の親に付き
『はま寿司』で“回転レールが概念化”したUIが開発されたらしい→爺さん「昔はここに本物の寿司を流してたんじゃ」
ミヤジマ @x_years_ago はま寿司の回転レールが概念化したタッチパネル。 会員情報にお気に入りのネタを登録して、このタッチパネルに好きなネタだけ流せるとか色々面白い体験作れそう。 pic.twitter.com/DZ1IZo3XT8 2023-04-12 12:52:28 ヒラマサ @Hiramasher 近所のはま寿司、リニューアル後は完全タッチパネル式で「回転寿司の風情･･･」って思ってたんだけど、今日来たらこんな設備付いてて、こんな手が有ったかと凄く感心してるとこです('Д') ちなみにコレもタッチパネルで注文できんの、すげえ pic.twitter.com/8G30vBKBND 2023-02-26 14:40:21
Spade&Co. - VISUAL EFFECTS COMPANY
The picture industry of Japan The picture industry of Japan I lead it to the industry to be able to boast of to the world Spade&Co. is a production company that provides high-end VFX production for movies, TV dramas, commercials, and music videos. We are always close to the director, producer, and film crew who are the creators of the film, and our strength is our ability to provide technical advi
UIから「白」が消える日｜ritar
これは designing plus nine Advent Calendar 19日目の記事です。 こんにちは。ritarと申します。 今年の10月頃、YouTubeに大きいデザイン変更がありました。 アイコンの変更、角丸やレイアウトなど全体的に一新されているのですが、中でも自分が仰天したのは「アンビエントモード」という新機能です。 アンビエントモードこのモードをオンにすると、動画の下側のUI領域が、まるで動画部分から光が漏れているかのようにじんわりと色づきます。 これを見たとき自分は度肝を抜かれました。なんたってUIの領域にコンテンツの色が侵食しているのです。 これを踏まえて、最近UIと色について考えたことを、UIデザインの歴史を振り返りながら記していきます。先に要点を言うと、UIはどんどん「無色透明」になっていくと考えます。これは「技術が生活に浸透することによってUIは存在感を減らし
ウェブアクセシビリティ導入ガイドブック｜デジタル庁
デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま
デザインシステム｜デジタル庁
デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。 更新情報2023年12月26日 [バージョン1.4.1]スタイルやコンポーネントの修正・更新を行いました 2023年10月18日 [バージョン1.4.0]スタイルやコンポーネントの追加・修正・更新を行いました 2023年8月31日 [バージョン1.3.4]スタイルやコンポーネントの修正・更新を行いました 2023年7月31日 [バージョン1.3.3]新規コンポーネントを追加、スタイルやアセットなどについて修正と更新を行いました 2023年6月29日 [バージョン1.3.2]コンポーネントを追加、テンプレートやガイドラインの一部修正と更新を行いました 2023年6
デザイナーが集まってタブバーを話し合ってみた | DevelopersIO
今回はタブバーについて対話しました。 これまでの共有会 デザイナーが集まって命名ルールを話し合ってみた デザイナーが集まってインプットUIを話し合ってみた デザイナーが集まってモーダルUIを話し合ってみた デザイナーが集まってログイン画面について話し合ってみた デザイナーが集まってボタンについて話し合ってみた デザイナーが集まってキャンセルボタンを話し合ってみた 情報共有して認識を合わせることが目的のため、「クラスメソッドではこうしてます！」みたいなものではない点はご了承ください。 ※iOSでは「タブバー」、Androidでは「ナビゲーションバー」の名称ですが、この記事ではどちらの場合も「タブバー」と表記します。 タブバーとは アプリ内のさまざまな機能を切り替えるナビゲーションです。どこに何があるのか、アイコンとラベルで示しユーザーを案内します。 時計アプリの例：4つの機能（世界時計、
なにこれ便利すぎる！ WebページのURLを入力すると、編集可能なFigma用に変換できるプラグイン -html.to.design
WebページのURLを入力するだけで、編集可能なFigmaデザインに変換できる無料プラグインを紹介します。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma URLを入力するだけでFigmaに変換 html.to.designの利用方法 html.to.designの使い方 URLを入力するだけでFigmaに変換 html.to.designは、URLを入力するだけでFigmaに変換できる無料のプラグインです。さまざまなWebページを編集可能なFigmaデザインに変換します。 すべてをゼロから作成することなく、別のWebサイトを使用して独自のデザインのインスピレーションを得られます。 既存のWebサイトをリデザイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デスクトップアプリケーションのUIパターン - ウインドウ編（公開版） / UI Patterns of Desktop Applications - Window Layouts
【デザイン】エレベーターの開閉ボタンはよく押し間違えられる「言葉を使用せずに押し間違えを無くす方法を考えよ」
mofu
Loading...
