マガジンのカバー画像

UIデザインのはなし

113
本
実際に実務で参考にできそうな、UIデザイナーさんのお役立ち記事をまとめています。
運営しているクリエイター
oyuuuhan

#UXデザイン

全てのUIデザインに必要な５つの状態（実例と共に） - The five UI states

授業ではあまり習わないですが、UIデザインの実務において常に考えなければならないフレームワークの一つにThe five UI statesがあります。雑に説明するとUIは以下の５つの状態になる可能性があることを踏まえて、それぞれに対してデザインを作っておくというコンセプトです。 • 何も登録されていない状態 (Blank state) • ロードしている状態 (Loading state) • 不完全な状態 (Partial state) • エラーが起きている (Error

TK - UXデザイナ…

手戻りがゼロに！？ 情報整理を変えた独自UIフロー

こんにちは！UIデザイナーの大竹（@satocalog）です。最近では、UXリサーチ周りやワークショップ設計をゴニョゴニョしています。 今年Chatworkでは、新しいUIデザインフローが作成されました。そのきっかけについては、以下の記事で紹介しています。 今回は、独自UIフロー【MONDRIAN】の前半（要件〜構造）について紹介していきます。 この前半フローのおかげで私は作業の手戻りが無くなったので、かなりの推し部分です。 デザイン設計に入る前の徹底的なウォームアップ

Chatwork De…

スタートアップに一人目UIデザイナーがジョインして最初にやったこと

お久しぶりです、フリーランスでUIデザイナーをしているmintoです。 現在HANOWAという医療人材向けのマッチングプラットフォームのUIデザインをしているのですが、右肩上がりで成長中のプロダクトで一人目のUIデザイナーがどのように立ち振る舞ったのかご紹介させてください。 そもそもHANOWAとは？HANOWAとは、歯科衛生士等の歯科医療人材と歯科医院のマッチングサービスです。サービスの詳細や経緯は代表の新井さんのnoteを見ていただけると理解できると思いますが、歯科衛

minto🍀｜Desi…

新人デザイナーの毎日のインプット～日本語編～

はじめまして！UXDC デザイナーのひらのです。 2022年1 月〜UXDC所属になりました。これまでは社内SEとしてシステム開発に携わってきたので、開発経験も活かしてより良いプロダクトをデザインしていきたいと思います！よろしくお願いします。 さて、こちらのnoteをご覧になっているデザイナーの皆さん、デザインに興味がある皆さん、普段情報収集にどのようなサイトをご覧になっていますか？ 私はなんとなく「UX UI まとめ」で検索してヒットしたサイトを見ています。また、雑誌

電通総研 UXデザイン…

新機能のUIUX制作過程

SansanのPC画面のUIUXデザインを担当している八木下です。先日、『スマート署名取り込み』という新機能がリリースされました🎉 これはメールのやりとりをしている差出人情報等を、メール本文から自動的に識別＆情報抽出し、Sansan上にデータ蓄積することができる機能です。 いま、Sansanが力を入れている機能で、2021年の夏には、先行してテレビCMも放映されました📺✨ 今回は、この機能の開発過程で私がどういうデザイン案を検討し、どう意思決定をしていったのか、お蔵入り

yagishitar

"新機能のUI、お願いします”ーそんな時使えるデザインの3ステップ

こんにちはカイクンです。BONOというUIとUXデザインのコミュニティサービスを運営してます。 UIデザインを始めたい方向けに「どういう流れで現場のデザイナーは、UIを考えているのか」という流れを書いてみました🙋‍♂️ 既存のサービスに機能を付けるユースケースを題材に書いています。 これが全てではなく完全に個人的な考えではありますが、これをベースにして現場で使ったりアップデートしたりしていただけると嬉しいです。 具体的な作業の様子はこちら↓の動画で閲覧することができます

カイクン🤘

🗂️ Design Materials：デザインシステム・チェックリスト。デザインシステムの計画、構築、および拡張に役立てよう！

今回はデザインシステムの計画、構築、および拡張に役立つオープンソースのチェックリストをご紹介します。 他の言語と同様に、デザイン言語は、プロダクトデザインへのアプローチを通じて視聴者とコミュニケーションをとるための系統的な方法です。 これは、一貫したカスタマーエクスペリエンスの基礎です。 デザイン言語 他の言語と同様に、デザイン言語は、プロダクトデザインへのアプローチを通じて視聴者とコミュニケーションをとるための系統的な方法です。 これは、一貫したカスタマーエクスペ

noko

ソフトウェアと人との距離を近づける、ことばづかいや画面デザイン事例まとめ

「UXライティング」について勉強したり、その意識で記事を書いたりするうちに、他のサービスの中でも「使う人のことが考えられている」「このオンボーディングは参考になりそう」というものをたくさん見つけるようになりました。 それらをスクショしてまとめていた資料（Notionページ）を、社内にシェアしたところ、思ったより反応がよかったので、この機会にまとめてみることにしました。 ・・・ 1. Twitter▼ プロフィール文の作成を促すモーダルでの一言。「あまり難しく考えず、楽し

平野太一

UIデザイン時にやってしまいがちな18の誤ち

WebデベロッパーのVictor氏による下記のツイートから始まるスレッドが大変参考になる内容だと感じたので、ご本人に許諾を得て日本語で紹介させていただくことにしました。 私は今年100以上のユーザーインターフェースをレビューしました。あなたのUI/UXデザインをより良くするための、下記に示す18個の良くある誤ちを回避しましょう。 本記事で使用する画像はすべてVictor氏のツイートから拝借しています。なお翻訳には一部私の意訳が入っていることをご了承ください。 1. 薄い

Mikio Kiura…

５選 - 無料でUI/UXデザインが学べる英語圏ブログ

みなさん英語圏のデザイン業界のブログって読んでますか？私は積極的に英語圏のUI/UXブログで情報収集するようにしています。理由は情報量の数が圧倒的に多いと感じているからです。世界の約78億人の住民のうち、13.5億人が英語を話します。ただし、大多数は英語を母国語としない人です。そのため英語を母国語としない人々も英語で記事を書いていることが多く見受けられます。なので拾える情報量が日本語よりも何倍も多いのです。 ここでは皆さんに私のオススメのとてもタメになる英語圏のブログサイト

Hitomi Brem…

Atomic Design と Figma の組み合わせでデザインが便利になる｜デザインシステムの作り方

スマートキャンプデザインブログ、デザイナー/エンジニアのhaguriです。 ユーザー体験の統一化のために大切な「デザインシステムの作り方」について紹介します。（スマートキャンプでもまだまだ模索中......） スマートキャンプでは、インサイドセールスに特化したCRM「Biscuet（ビスケット）」という新サービスを発表をしました。 まだ開発中のサービスですが、このBiscuet（ビスケット）のデザインシステムの考え方を紹介していきます。 上記のランディングページ（LP

スマートキャンプ　デザ…

デザインにおけるオブジェクト指向についてちょっとだけ知る

最近、デザイナーの間でも「オブジェクト指向」という言葉をよく見聞きするようになりました。 ちょっと難しそうなこの言葉は、実は誰にとっても身近な体験を左右しうる考え方のことなんだというのを少しだけみなさんに知ってもらえたらいいなと思っています。 ということで、コンビニのサラダチキンくらいの気軽さでオブジェクト指向について紹介してみたいと思います。 ※とりあえず今は「デザインにオブジェクト指向を取り入れるとなんか良いらしい」ということだけ把握しておいてください。詳細は追って

Miyu Honda

「よいデザイン」の再現性を高めるプロセスの可視化

こんにちは、Ubie Discoveryでデザイナーをしている吉井です。 早いものでUbieにジョインして半年ほど。 デザイナーとしても色んなことに取り組んできました。ここのところの関心ごとはDesign Opsで、最近はなんでも標準化・言語化していきたいマンです。 今日はそんななか、チーム開発においてデザインを円滑に進めていくために工夫してみたことをご紹介したいと思います。 組織によって異なる最良のデザインプロセス UbieではtoC・toB双方のプロダクト開発を行

hrtk441

主観と客観を切り替える鍛錬

突然ですが、ここに一つのプロダクトがあるとします。 そのプロダクトを見つめる視線には様々な種類があります。 そのプロダクトを利用しているユーザーの視点、利用していないが存在は知っているという人の視点、それをつくるデザイナーの視点、プロダクトを運営している会社経営者の視点… もしあなたがデザイナーであれば、デザイナーの視点だけが唯一自分で体感できる「主観」で、それ以外はすべて「客観」となります。 主観と客観のスイッチング プロダクトデザイナーはユーザーの期待通りに

Miwa Kurami…