マガジンのカバー画像

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デザイナ…

[厳選5+1冊]UIデザイナーの骨組みをつくる本

UIデザインを学んでいる方、UIデザイナーを目指している方にぜひ読んでほしい本を個人的にまとめました。 難しめの本もありますが、いずれも本質的な内容です。 早めに読んでおくことで、自分のレベルをグッと上げてくれると思います。 ヒューメイン・インタフェースヒューマン（Human）ではなくヒューメイン（Humane）。 人に優しいインターフェースとは何かについて、「クリックする」「キーをおす」という行為にまで落とし込んで教えてくれます。 UIデザインのモードという概念を理解

Shino | Sof…

デザインシステムを改善！Figma のコンポーネントライブラリの整理でやったこと 7 点

家計簿サービス Zaim のデザイナーの今泉です。 今回はデザインシステムの一部、コンポーネントライブラリをリファクタリングした事例をご紹介します。 デザインシステムとはデザインシステムとは、良いデザインを『効率的』かつ『一貫性』をもって提供するための仕組みです。コンポーネントライブラリはデザインシステムの一部で、画面のデザインやボタン、リストなどの UI パーツの集まりです。 Zaim のデザインは Figma で作成し、コンポーネントライブラリも Figma 上で管

Ayumi Imaiz…

新規登録 UI まとめてみた

シンプルだけど難しい「新規登録」のデザイン。 派手さはないけど、地道な工夫の繰り返し。 新規登録って大事 新規登録は離脱を抑えるデザインが重要です。 せっかくダウンロードしてくれたユーザーがサービス利用前に離脱してしまうともったいないので。 本記事では新規登録の UI パターンや事例をまとめてみました。新規登録をデザインする際は、この記事を参考にデザインしてみてください。少しでもお役に立てばうれしいです。 新規登録のポイント ① 最も負担の少ないタイミング ② 最小の操

あき - 良いもの作っ…

DailyUI 001 signUp - 登録しやすい新規登録とは

アウトプット！アウトプット！アウトプット！ DailyUI 001 登録しやすい新規登録を考えてみました。 目次 はじめに ・何を作ったか ・意識したこと 具体的な工夫点 ・遷移をひとつにする ・入力操作をアシストする ・過度な装飾を避け、シンプルに見せる ・わかりやすいフィードバックを示す ・文字を読みやすくする ・少しボタンを多くする 悩んだところ 片手操作をどうするか おわりに ・まとめ ・おわりのおわりに はじめに 何を作ったか タスク管理アプリの新規登

あき - 良いもの作っ…

実務未経験から選ばれるUIUXデザイナーになるための考え方＆スキル

こんにちは！jampiiiです！ 今回は、自身の実経験をもとに【未経験からUIUXデザイナー】になるために行ってたこと、身につけた考え方、実務を通してこんな人と働きたいと日々感じるような現場の生の声について書いていきたいと思います！ この記事では、 UIUXデザイナーとして求められる最低限の思考の枠組みとスキルを自分の中に築くこと を目標にしています。 本記事はこんな方におすすめ ・社会人で全然関係ない業界だけど、クリエイティブ業界に転職したい ・学生時代はまったく

J（ジェイ）｜プロダク…

アプリのアップデート100本ノックから学ぶUI改善のヒント

はじめまして。HR業界でアプリマーケティングをしている宮﨑といいます。 ・アプリのアップデート前後のUI変化 ・Push通知など気になったGrowth施策 こうしたものを「#アプリノック」としてTwitterで毎日投稿しています。 https://twitter.com/yositune12345 noteでは10月の1ヵ月間で100本のノックをする中で感じた「〇〇できたら、ユーザー体験が良くできそう！」というトピックスを投稿します。 どうやってるのか？ ①Pla

宮﨑 晃

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

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

Miwa Kurami…

ABテストでわかる、サービス改善はかなりの確率で失敗する事実

自動家計簿・資産管理サービス「マネーフォワード ME」のデザイナー池内です。 現在、「マネーフォワード ME」の開発チームでは多くの施策でABテストを行っています。そして、よかれと思ったサービス改善はかなりの確率で失敗します。この記事ではその現実と、ABテストの有効性について解説します。 サービス改善はかなりの確率で失敗するマネーフォワード MEの最近のABテストで成功した例、失敗した例をそれぞれあげます。 成功した例 ・会員登録直後のウォークスルーでプレミアム機能を紹

池内健一

UXリサーチで気をつけたい7つの認知バイアス | UI/UX Journal Vol.18

2ヶ月ほど前から、Google UX Design CertificateというGoogleが提供しているUXデザインのオンラインコースを受講しています（コースについては以下のnoteにまとめています）。 2ヶ月ほど続けてみて、学ぶことがとても多いのですが、その中でもとくに「Identify types of bias in UX research（UXリサーチにおけるバイアスを認識する）」というトピックが気になったので、復習を兼ねて&少し深ぼってまとめてみたいと思います。

Sakino Tomi…

独学・総合大学出身の学生がUI/UXデザイナー新卒就活で勝ち抜くポートフォリオ作りのコツ【チェックシート付き】

デザイナー就活生の皆さん、就活してますか？ きっとこの記事をご覧いただいたということは「就活でポートフォリオを作らなきゃだけど、何も分からん...。」、「ポートフォリオを作ってみたけど、なんかイマイチ...。」とお困りのことだと思います。 僕は21卒として、非美大芸大出身の総合大学出身・デザインは独学でしたが、UI/UXデザイナーの就活をし無事デザイナーとして新卒入社することができました。 でも当時、ポートフォリオを作ろうとしてはじめに思いました。「作り方を調べても、結局ぼ

たまい

いいUIってなんだっけ？

「価値」「ストーリー」「UI」を繋ぐ以前「UIしか見えていないサービスデザインは危ない」という記事を書きました。この記事ではUIデザインを行ううえで「価値」と「ストーリー」の大切さをお伝えしました。 今回は「価値」「ストーリー」「UI」を繋ぐ時の考え方について書きます。このようにUIを位置付けた時に、いいUIとはどんなものでしょうか。 UIには装飾の役割と操作の役割がある UIというと装飾的なイメージを持つ人も多いと思いますが、デザインにはもともと装飾の役割と操作の役割が

Nice🙈/ マネーフ…

Instagramのデジタルウェルビーイングを考えるUIデザイン | UI/UX Weekly vol.14

以前、「ユーザーを騙す、4つのダークパターン」というテーマでnoteを書きました。 ダークパターンとは、ユーザーが意図しない選択肢に故意に誘導するユーザーインターフェースのことを指します。 それらの多くは、ユーザーに想定外の料金を支払わせる、会員費を支払わせ続ける等、金銭的な面で企業側の利益を最優先に設計されたものが多いです。それらは誰が見ても「悪いもの」であり、ほとんどの場合それらをどう改善するべきかが明確になっています。 一方で、 「毎朝毎晩、ユーザーにアプリを使って

Sakino Tomi…

Bad な UI を改善する 「UI Stack」 って知ってます？

突然ですが、「UI Stack」ってご存知ですか？ アメリカのプロダクトデザイナー Scott Hurff さんが3年ほど前に世に出した考え方で、考慮すべき UI の5つの側面を示したものです。 当時「これは使える！」と思って社内向けに作った勉強会資料を見つけて、今でもやっぱりすごく大事だと思ったので、備忘録的に書いておきます。 ちなみに元記事はこちら。（英語です） UI Stack とは？Stackとは、1つの画面が持つ（複数の）側面、状態、ステータスのようなもの。

nr