マガジンのカバー画像

UIデザインのはなし

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

#デザイン

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

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

TK - UXデザイナ…

デザインシステムを始めるときの流れと考慮すること

こんにちは。StockmarkのProduct Designer 駒ヶ嶺です。 以前、デザインシステムを始めた経緯と進め方を紹介しましたが、実際にデザインシステムを始めようとした時に対して情報に過不足があるように感じ始めました。 そこで今回は今ならどのような考え方を持って進めるかということも踏まえ、デザインシステムの運用を開始するにはどうしたら良いか、また運用を開始した後のことについても紹介していこうと思います。 デザインシステムの目的を明確にするこの記事に興味を持った

駒ヶ嶺 亮一

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

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

Shino | Sof…

『こういうのを試してみたい。』を実現させていった時の話

こんにちは、クックパッドのデザイナーの上野です。入社して1年4ヶ月経ちました。 クックパッドの料理を楽しみにするモノのつくり手と料理のつくり手が集うプラットフォーム「Komerco（コメルコ）」でデザイナーとして、事業をつくっています。 今回は、Komercoチームでの改善施策の時の話しを少ししたいと思います。 目次 『こういうのを試してみたいんだよね。』施策、爆誕。それは突然に。デジタルプロダクトの改善をしている人たちなら一度は経験があるとは思います。事業責任者（こ

Mayumi Ueno

ロジカルかつコンパクトに！UI設計のためのワークフロー

こんにちは。ChatworkのUIデザイナーかねこです。最近では新しい機能やエキスパートレビューによる改善をメインに取り組んでいます。 今回はUIデザイナーの設計フローをHCDプロセスに準えてフォーマット化する試み「MONDRIAN」についての第三弾です。これまでの記事をまだご覧になっていない場合は、ぜひ読んでみて下さいね！ この記事では【MONDRIAN】の後半部分（骨格と表層）の内容についてご紹介します。 画面要素の重要度を元に、最小限のワイヤーフレームをステップ４

Chatwork De…

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

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

Chatwork De…

検索結果の絞り込み・並び替えUIの観察

先日、検索結果の絞り込みUIの検討をするために事例を調べたところ、意外にもアプリによって様々な違いがありました。面白いテーマなため観点ごとに違いを整理し、メリット・デメリットや設計意図を考察しました。注目した観点は以下の7つの点です。 これらの観点をもとに以下の条件で12のアプリを調査しました。 1. 絞り込み・並び替えボタンの配置 まずは、絞り込み・並び替えボタンの配置場所について。ボタンの配置場所は大別するとこの２種類です。 それぞれの事例をみていきます。 A.

鈴木慎吾 / TSUM…

デザインの観察、分解

わたしはデザイナーとして活動しはじめてから約 20 年間、やり方を変えながらほそぼそとデザインの観察と分解を続けています。きっかけは広告のデザインをしていたときで、先輩が作った広告を対象にして「なんでこうしているのか」を掴みたいと考えていたのだったなと憶えています。とにかく引き出しを増やしたかったんですね。もっと知見を増やして引き出せるようにしたいのは今も同じです。 現在は、アプリやウェブサービス、ゲームや映像作品など、さまざまなものに対象を広げて観察、分解しています。毎回

上ノ郷谷 太一

異業種から転職してきた私の、業務のためのインプット術３選

はじめまして！おかむらといいます。昨年9月に、マネーフォワードにUIデザイナーとしてジョインしました。今は福岡拠点で、クラウド経費とクラウド債務支払の開発を担当しています。 今回は、異業界から転職してきた私が、取り組んできた３つのインプット方法をお話しさせてください。 チャレンジ！異業界からの転職編 実は私はマネフォに入るまでは、新卒の時からずっとソーシャルゲームのUIデザイナーでした。マネーフォワードに入社するまで、WEBアプリのデザインを行ったことがなく、BtoB向

okamu/マネーフォ…

もう途中のデザイン見せるの抵抗なし！周りを巻き込みながらデザインする心構えと方法

Rettyでリードデザイナーをしてますヤマモトマユミ（@mayya）です。 新しくジョインしたデザイナーの方と働き始めた時に、「途中のデザイン見せるのは抵抗がある・・」「デザインを細かく見せながら作っていく方法に慣れなくて・・」など、コメントをいただくことがあります。 今回は、Rettyでアウトプットドリブンなやり方を数年行ってきた私なりの心構えと具体的方法を書いていきたいと思います。今回の内容が「もう途中のデザイン見せるのに抵抗なくなった！」と思ってもらえるきっかけになる

ヤマモトマユミ / デ…

わたしのUIデザイン制作フロー〜情報設計からビジュアルデザインまで〜

こんにちは、UIデザイナーのマスダです。 この記事では、私のUIデザイン制作フローの紹介と、各段階での勉強に役立つ記事や本などを紹介しています。具体的なUIデザインの手法は紹介していません…！ わたしなりのUIデザインの制作フローを紹介することで、UIデザイナーの仕事が少しでもイメージしやすくなればいいなと思います。これからUIデザイナーを目指そうと思っている方、UIデザイナーになりたての方にとってお役に立てる記事であれば幸いです。 わたしのUIデザイン制作フロー私の場

a-masuda

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

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

Ayumi Imaiz…

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

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

電通総研 UXデザイン…

フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと

フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったと

Pittan