Get in depth look into the Figma files of designers at top companies like Perplexity AI, Bezi, Lottie Files and more
Sneak Peek
Get in depth look into the Figma files of designers at top companies like Perplexity AI, Bezi, Lottie Files and more
インジケーター、バリデーション、通知： 適切な伝達手段の選択
システムの状態の伝達手段：インジケーター、バリデーション、通知 インジケーター インジケーターは、（コンテンツであれ、ユーザーインタフェースの一部であれ）ページ要素を目立たせて、注意を要する特別な何かがあることをユーザーに知らせる方法である。多くの場合、インジケーターはその要素が表わすアイテムに何らかの変更があったことを示す。 後述するように、インジケーターはバリデーションエラーや通知を知らせるために頻繁に用いられるが、単独での利用も可能である。インジケーターとは、動的な性質を持つ特定のコンテンツやUI要素にユーザーの注意を引くことを目的とした視覚的な手がかりである（見た目がいつも同じであれば、どんなに派手にデザインされていても、それはインジケーターではない）。 インジケーターを実装する方法は少なくとも3つある： 常にではないが、多くの場合、インジケーターはアイコンとして実装される。容易に
コンセント独自のUX設計手法 OOUXデザインプロセス｜CONCENTではたらく人たち
この記事は2022年7月29日のひらくデザイン記事を一部変更して転載しています。 皆さんは新しいサービス企画を実現するためのデジタルプロダクトをつくるときに、どのようなことから着手し始めますか？ いざ検討を進めると、次のような課題に遭遇することはないでしょうか。 「新サービスのコンセプトは決まったが、どうすればデジタルプロダクトで実現できるのかイメージが湧かない」 「開発会社から機能要件を決めてほしいと言われるが、どうやって決めればよいかわからない」 「必要になりそうな機能はなんとなくわかるが、本当に必要かどうか判断できない」 これらの課題は、デジタルプロダクトで実現したいこと（要求）と実際にデジタルプロダクトをつくる上で必要なこと（要件）との間に、大きな隔たりがあることから生じています。 コンセントではその隔たりを埋めるために、ユーザー視点を取り入れた独自のUX/UI設計プロセスとしてオ
LCHは、UIにベストなカラースペース｜hirotoarakawa
Linearのリニューアル記事がすごく良かった。 A design reset (part I) How we redesigned the Linear UI (part Ⅱ) その記事の中で「LCHカラースペース」について書かれていた。知らなかったので調べてみると、以下の記事を見つけた。 この記事の内容を抜粋しながら、自分用に簡易なメモとしてまとめる。 LCHとは？LCHは簡単に言うと、異なる色相でも同じコントラストに見えるように構成されたカラースペース。 1976年に国際照明委員会 (International Commission on Illumination, CIE) によって最初に定義された色空間であるため、CIELAB とも呼ばれている。 LCH は、Lightness（明度）、Chroma（彩度）、Hue（色相）の略。 HSL と LCH の違いLightness（明度
「ダークパターン」とは？7つの類型を解説／企業30社 独自アンケート - クローズアップ現代 取材ノート - NHK みんなでプラス
うそのカウントダウンタイマーや、在庫が少ない、需要が高いなどの表示。 画像では、カウントダウンタイマーや「今だけ」の表示で焦らせて「今買わなければ」という気持ちに追い込んでいます。 今回私たちは、企業の間ではダークパターンがどのように認識されていて、どのような対策を取っているのか、現状を把握するために独自にアンケート調査を行いました。 調査は、武蔵野美術大学の長谷川敦士教授の監修のもとで行い、ダークパターンが使用されることの多い6つのジャンル（ネットショッピング、旅行予約サービス、飲食店予約サービス、動画配信サービス、音楽配信サービス、電子コミック配信サービス）について、利用者の多い5つのサービス、あわせて30のサービスを対象にしました（利用者数については、ニールセンとICT総研の調査を元にしています）。このうち、16のサービスの運営企業から回答がありました（回答率は53％）。 回答した企
タップ成功率を可視化するUXツール「Tappy」公開｜LINEヤフーDesign 公式note
こんにちは、LINEヤフーDesign公式note編集部のGOです。 この記事では、LINEヤフー研究所が開発し2024年1月に社外公開されたタップ成功率可視化ツール「Tappy」について、その担当者にインタビューした内容をお届けします。 個人的に利用したところ、「タップ成功率の可視化」というものがいかにデザイナーにとって有用であるのか、使うほどに実感したため、すぐに記事化を打診。担当者にご快諾いただき、晴れて記事化の運びとなりました。 Tappyがなぜユーザーメリットにつながるのか、そしてデザイナーにとっても価値があるのか。ぜひ、インタビュー内容をご覧ください。 LINEヤフー研究所についてLINEヤフー研究所（Yahoo! JAPAN研究所とLINEのメンバーが合流して2023年10月に設立。データサイエンス統括本部配下。）では、社内のプロジェクトやチームにとどまらず、大学や研究機関な
Scroll Fading 101
Summary: Whether scroll fading is more distracting than usable depends on the following factors: its persistence, responsiveness, and how sparingly it is applied to elements on the page. When used right, this design pattern can improve brand perception, optimize page loading, and make content more digestible. Introduction Scroll fade is a new design pattern. It refers to an animation that is trigg
指示したUIをAIがTailwindベースで実装してくれるv0が凄い
v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です！ Tailwindが好きな人にはたまらないコンポーネント集ですね！ shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。 下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ
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…
ヒューリスティック評価を実施する方法
プロダクトを体系的にレビューし、ユーザビリティと体験に関する潜在的な問題を見つける方法をステップごとに説明する。ヒューリスティック評価のテンプレートを無料でダウンロードしよう。 How to Conduct a Heuristic Evaluation by Kate Moran and Kelley Gordon on June 25, 2023 日本語版2023年11月15日公開 ヒューリスティック評価は、ユーザーインタフェースのデザインに関する問題を特定するための手法である。評価者は、システムを利用しやすくするための一連のガイドライン（これをヒューリスティックスという）に照らしてデザインを評価する。（このツールが開発された経緯や理由について、さらに詳しくは、ヤコブ・ニールセンによる1994年の記事「The Theory Behind Heuristic Evaluations」（ヒュ
フローティングビューとモードの設計｜usagimaru
このアーティクルでは、いわゆる「モーダル（ビュー）」と呼ばれるUI表現パターンと、実際のモード設計の区別の仕方を簡単に解説します。まず結論として、モーダル、モードレス問わず、画面の中で手前にポップアップしてくるようなビュー表現全般を「フローティングビュー（Floating view）」と呼ぶこととします。ポップアップしてくるビュー表現には、通常のウインドウ、モーダルダイアログ、ポップオーバー、バナー、トーストなどさまざまなものがありますが、これらを総じてフローティングビューと分類して考えてみましょう。 このフローティングビューという呼び方は私が便宜上名付けたパターン名なので、まだあまり一般的ではないかもしれません。HIGなどの有名なUIデザインガイドラインにもそのような記載は無いと思います。しかし「ウインドウ」「ビュー」「シート」「モーダル」「ダイアログ」などの既存のよく知られた分類方法で
5 Formatting Techniques for Long-Form Content
Summary: Techniques like summaries, bullet points, callouts, bolding, and helpful visuals improve comprehension and engagement with content exceeding 1,000 words. On the web, users are often looking for specific information. For this reason, they do not read every word on the page. Instead, they scan: they fixate their attention on summaries, bullet points, visuals, and bolded text, aiming to quic
Cookie Permissions 101
Topics: Design Patterns,Analytics & Metrics,privacy,data,security,personalization,integration Design Patterns Design Patterns, Analytics & Metrics With the increase in regulation around data protection, companies must give users more control over data privacy by providing options for cookie permissions. The question becomes how to effectively give users clear and simple choices without confusing o
『はじめよう！ 要件定義』（とそのシリーズ）を読んで、はじめよう！UIデザイン｜金 成奎
『はじめよう！ 要件定義 ～ビギナーからベテランまで』はそのタイトル通り、ソフトウェア開発に携わるエンジニアやPM向けに、要件定義の進め方について優しく解説してくれる書籍です。かわいいイラストと平易な文章がとっつきやすく、するすると読めてしまいますが、要件定義って何をどうやったらいいの？とお悩みの方に対して、まずはこれだけやっておくべき基礎知識を得ることができる、とてもわかりやすい内容になっています。 そしてそして、ここからが本noteの主な趣旨ですが、この3部作はデザイナー目線で読み解くと、極めて明瞭で本質的で実践的な、ユーザー体験設計とUI設計の進め方について学べるデザイン教則本と言えるのです。 以下、その理由と、本シリーズを使ってUIデザインを進めていく方法を実例を踏まえて解説していきます。 要件定義とはUI・機能・データを決めることいきなり『はじめよう！ 要件定義 』のキモ・コンセ
ボトムシート：定義とUXガイドライン
ボトムシートとは、モバイルアプリでよく用いられるユーザーインタフェースのパターンで、画面の下部領域にコンテキストに合った詳細やコントロールを提供するためのものである。 Bottom Sheets: Definition and UX Guidelines by Page Laubheimer on June 11, 2023 日本語版2023年11月1日公開 モバイルデバイスで、コンテキストに応じたコントロールを目立たせてアクセスしやすくすることは容易ではない。小さな画面では、情報やコントロールは関連性が生じるまで非表示にしておかなければならない場合もあるからだ。 ボトムシートは部分的なオーバーレイの一種で、特にモバイルデバイスに適しており、一時的に重要な情報の閲覧しやすさと消しやすさを同時に実現する。 定義：ボトムシートとは、モバイルデバイスの画面の下端に配置され、詳細情報やアクションを
Spotifyのプロダクト戦略をUIの変化から読み解く｜鈴木慎吾 / TSUMIKI INC.
Spotifyのタブバー、いままで5つだったタブが3つになってた。消えたのはBrowseとRadio。BrowseはSearchに統合され、Radioの機能はたぶん消えた。こういうアップデートって勇気がいるが、結果使いやすくなったと思う。 pic.twitter.com/vf1ncj0qjh — 鈴木慎吾 / TSUMIKI INC. (@shingo2000) October 19, 2018 長く使われ続けているサービスでは、新しい機能がどんどん追加されていきます。新しいユーザーを増やしたり、現在のユーザーを引きつけ続けることが主な理由で、Spotifyにも様々な機能が追加されています。それにも関わらず主要なナビゲーションのタブを減らすのは勇気のいる選択だと思いました。プロダクト開発に関わっていると実感しますが、何かを付け加えることよりも何かを削ることのほうがずっと難しいのです。このU
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デジタル庁デザインシステムβ版
Magic UI
Galileo AI
Draft UI
