ダイアログとモーダルの違い｜リョウタ
ダイアログとモーダルが同じなのか違うのかが明確に分からないUIデザイナーはいますか？もしそうであれば今ここで違いを確認しておきましょう。 そもそもダイアログとモーダルは並列の関係ではありません。中央に出てくるものはダイアログ、画面下から出てくるものはモーダルと言った見た目や、表示方法、内容の緊急度による違いではないのです。 ダイアログとはダイアログという言葉は「対話」という意味の言葉です。 Webサイトやアプリでは殆どの場合はシステムとユーザーとの対話を指し、ユーザーに情報を提示してユーザーに応答してもらうウィンドウ全般の事を指します。 この事から詳細を押して表示するウィンドウ、画面下から画面を覆うように表示するウィンドウ、エラー時の警告ウィンドウなど全てダイアログという事がわかります。 モーダルとはではモーダルとはなんなのでしょうか？こちらもその言葉の意味を知れば理解が深まります。 モー
エラーメッセージガイドライン
よいエラーメッセージとは、礼儀正しく、正確で、建設的なものであることは、すでに広く知られている。ウェブでは、これに加えて若干の新しいガイドラインが必要となる。すなわち、エラーメッセージをはっきり見やすくしておくこと、問題の解決に必要な手間を減らすこと、さらに、その過程でユーザを教育すること。 by Jakob Nielsen on June 24, 2001 効果的なエラーメッセージのガイドラインは、ここ20年間まったく変わっていない。よいエラーメッセージとは、以下のような条件を満たすものだ。 はっきりと異常の発生を表示すること。最悪のエラーメッセージとは、エラーメッセージの不在である。ユーザがミスをしても、フィードバックがなければ路頭に迷うだけだ。例えば、電子メールには、はっきりした表示を出した方が有益と思われる状況がいくつかある。メッセージを送信したのに、システムに吸い込まれてしまって
Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Less code. More speedSpend less time writing UI code and more time building a great experience for your customers. import * as React from "react"; import { Box, Center, Image, Flex, Badge, Text } from "@chakra-ui/react"; import { MdStar } from "react-icons/md"; export default function Example() { return ( <Center h="100vh"> <Box p="5" maxW="320px" borderWidth="1px"> <Image borderRadius="md" src="h
ビジュアルデザインにおける近接の法則
互いに近くにあるデザイン要素は関連があると認識される。その一方で、間隔をおいて配置された要素は別々のグループに属していると認識される。 Proximity Principle in Visual Design by Aurora Harley on August 2, 2020 日本語版2021年4月2日公開 ゲシュタルトの法則は、人々が世界をどのように視覚的に認識しているのか、具体的には、特定の要素が同じグループに属しているのかどうかをどのように判断するのか、を理解しようとしたゲシュタルト心理学者によって、20世紀前半に発見された。そこには、近接、類同、閉合の法則が含まれていて、そのどれもがデジタルインタフェースのビジュアルデザインにおいて重要だ。その後も、グループ化についての法則（共通領域など）は元のゲシュタルト法則のリストにさらにどんどんと追加されていっている。 UIデザインは近接な
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
GitHub Dark Mode is Too Dark - blog.karenying.com
GitHub Dark Mode is Too DarkIf you hate it too this is why. Using color theory to show why GitHub dark mode is disappointing Shared on Hacker News and Twitter This past week, GitHub released a long-awaited feature — dark mode. Like many devs around the world, I was hype. In 2020, a dark mode toggle for anything remotely related to tech seems like a requirement. So I flipped the switch. My immediat
bosyuの新機能開発における、デザイナーの役割｜ムラキ | Muraki｜note
先日、bosyuというサービスで３つの新機能「メッセージ」「決済」「検索」をリリースしました。いずれもUIデザイナーとして開発に携わった立場から、どんなことを考えて、どんなプロセスを踏んだのかについて、一区切りついたこのタイミングでまとめてみたいと思います。 こんな人は読んだらいいかも：bosyuがどうやって作られているか知りたい人、インハウスのデザイナーを雇おうかなと思っている人、インハウスのデザイナーになってみたいなという人、などそもそもデザイナーは何をしてくれる人なのか世で「デザイン」と一口に言われているものは、実はとても幅が広いです。ロゴの世界ではたった1pxの線幅に命を注ぎ込みますし、印刷の世界では素材にこだわっていくつもサンプルを見比べたりします。世界によって求められる役割は違いますし、デザイナーの数だけ流儀や流派があり、サービスやプロダクトの段階によっても変わってきます。 で
Lookbackを使ってユーザビリティテストをしたらとても良かった話｜hagipen
この記事は PLAID Advent Calendar 10日目のエントリーです。 突然ですが、みなさんのオフィスにユーザビリティテストの設備はありますか？ ユーザビリティテストを行う上で環境づくりは大切な要素のひとつです。 しかしながら、テストを行う専用部屋などの設備が用意できている環境は少ないのではないでしょうか？ 弊社でも専用部屋などの設備はなく（そもそも部屋が存在しない）、「チームでユーザビリティテストにトライしてみよう！」となったものの、実際にどう行うべきか悩みました。 できればチームメンバー全員に参加してほしいけれど、たくさんの人で被験者を囲むのは避けたい。かといって、場所を借りるほどでもない…！ と唸っていたところ、suさんから「Lookbackというサービスがあるよ」と教えてもらい、調べてみることにしました。 🤔Lookbackってなに？ Lookbackは、オンライン上
UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話｜鈴木 健一 / PLAID & Ex.STANDARD
この記事はPLAID Advent Calendar 9日目の記事ですUI改善の前提理解、うまくできていますか？皆さんはこれまで着手してこなかった既存画面のデザイン改善をする時、どのように進めているでしょうか。 自分がプレイドで所属しているreBAISUというチームでは、タタキとして定義したスタイルガイドを旧来の画面に適用しながらUI改善する取り組みをしています。 取り組み方として、改善対象となる画面の仕様を理解しながら課題を見つけ、解決策を検討していく流れになるのですが、この仕様理解が難しいと感じていまして。 なんとか前提理解を促せる方法はないものかと検討した結果、対象画面の構成要素をひとつずつ紐解いていく方法で理解していく「デザインの逆行分析」という方法をとっていました。 デザインの逆行分析とは「リバースエンジニアリング」とも呼ばれる手法で、その考えをデザインでも応用しようというもので
Figmaのオートレイアウトを完全に理解した話｜UI/UXデザイナー うっくん
どーもーUI/UXデザイナーのうっくんです。 ちょっと前にFigmaにオートレイアウトという機能が追加されました。 最初は、「おー、ボタンの長さがテキストに追従して変えられるのかー」としか思ってなかったのですが、実際に使ってみると実はもっと強力な機能でした。 オートレイアウトの基本機能。コンテンツの大きさに応じて、コンテナの大きさが変わる。今までは、いちいち赤い背景の部分もデザイナーがリサイズしなおさないといけなかった。めんどくさいので、プラグインなどを使っている人が多かったこれがとても実用的で、業務効率も上がりそうなので、すでに実戦投入しています。 かなり使いこなせてきたので、そのポイントを以下の３段階に分けてご紹介していきます。 1. 基本機能, 2. 発展系、そして、3. 現時点ではできないこと これを読めば「オートレイアウト完全に理解した」と言えるようになります。Figmaのオート
ユーザーがより「頑張らなくていい」体験を考える
だれもがユーザー体験を楽に感じるものにすることを目指していますが、そう考えることをやめれば、もっと他にできることがあるのではないでしょうか？ ここ数年でユーザー体験のデザインは飛躍的に進歩しました。デジタルの世界におけるビジネスの成功の鍵は、すぐれたカスタマー体験を提供することであることは次第に受け入れられてきています。時間に余裕のないユーザーは使いづらいインタラクションに我慢することは好まず、提供された体験が快適なものでなければサイトを離脱してしまうことを企業は理解しています。 ユーザビリティテストとユーザー調査も盛り上がりを見せています。 Steve Krug氏の著書『Don't Make Me Think』といった書籍は、ユーザーの代弁として綴られた１冊であることから、ユーザー体験の責任を負っている多くのチームへの真言となりました。 もちろんデザイナーの戦いはまだ続いています。クライ
UXArchive - Made by Waldo
Introducing Sessions: the latest product from Waldo!
新卒採用：職種紹介：デザイン系 - UI/UXデザイン｜採用情報｜任天堂
UIとは「ユーザー・インターフェース」の略で、UXは「ユーザー・エクスペリエンス」の略です。 インターフェースは「接点/接触面」、エクスペリエンスは「経験/体験」を意味します。 ゲームにおけるUI/UXデザインとは、「ゲーム」と「遊び手」を仲介する絵や文字の表現を通じて、心地よいゲーム「体験」を作りだすこと、とも言えます。 任天堂におけるUI/UXデザイナーの具体的な制作物は、 ・タイトル画面やメニュー画面 ・ゲーム中の体力ゲージやボタン、マップ、アイコン ・フォントやメッセージ ・勝敗の結果画面（リザルト画面） などとなります。 これらのUIを通じて、お客様にストレスなく心地よいゲームプレイを提供することがUI/UXデザインの主な役割です。 特に、ゲームは娯楽品であって生活必需品ではないため、わかりにくければ簡単に手放されてしまいます。そのうえ、何百万人というプレイヤーがUIを何百回、何
より良い検索フォームのための９つのベストプラクティス
検索ボックスは入力フィールドと送信ボタンの組み合わせです。検索ボックスにデザインは必要ないと考える人もいるかもしれません。たしかに、たった２つの単純な要素でしかありません。しかし、コンテンツが多いサイトでは、検索ボックスは往々にしてもっとも頻繁に使用される要素なのです。 複雑なサイトに遭遇したとき、ユーザーは労力を使わずに素早く最終目的地まで辿り着けるように、すぐに検索ボックスを探します。ですから、検索ボックスのデザインやユーザビリティは重要なのです。 この記事では、ユーザーが目的地に辿り着くための時間を節約するために、検索ボックスをどのように改善できるかを見ていきます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chakra UI - Figma Plugin
Chakra UI Figma Kit | Figma
GitHub - iocave/customize-ui: UI Customization plugin for vscode
色彩センスのいらない配色講座
GitHub’s dark mode is too dark
tomo on Twitter: "「ソフトウェア上でできることを、頑張ってハードウェアでやってしまい非効率に陥る」これが日本のソフトウェア軽視の「モノづくり病」です。左が東芝REGZAのTVリモコンで、右がAmazon fire TV。どっちが勝つかは火を見るより… https://t.co/AzDYygh9Ph"
