マガジンのカバー画像

UIデザインのはなし

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

#UIデザイン

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

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

TK - UXデザイナ…

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

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

駒ヶ嶺 亮一

ロジカルかつコンパクトに！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 年間、やり方を変えながらほそぼそとデザインの観察と分解を続けています。きっかけは広告のデザインをしていたときで、先輩が作った広告を対象にして「なんでこうしているのか」を掴みたいと考えていたのだったなと憶えています。とにかく引き出しを増やしたかったんですね。もっと知見を増やして引き出せるようにしたいのは今も同じです。 現在は、アプリやウェブサービス、ゲームや映像作品など、さまざまなものに対象を広げて観察、分解しています。毎回

上ノ郷谷 太一

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

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

a-masuda

実装しやすいFigmaファイルの作り方

こんにちは。UIデザイナーのカヒブンです。 UIデザイナーとして、見た目が綺麗、ユーザーの使いやすい画面を設計するだけではなくて、実装のしやすさ・工数も考えた上で設計するのが大事です。今回は実装しやすいデザインデータの作り方ついて話したいと思います。 ここでは、私がFigmaを使う際、実装側の立場に立って考える癖を説明します。 実装しやすいデザインデータ・レイヤーがGroupだらけではない。レイヤーがきちんと整理されている ・ローカルコンポーネントが一ヶ所にまとめてあ

カヒブン

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

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

minto🍀｜Desi…

全画面カンプを作ってる人へ。デザインガイドラインを作ろう！

ゆいです。こんにちは！暑いですがみなさん水分とっていますか？お茶を飲みながら書くので、好きな飲物を飲みつつ読んでください。 今日はこんな方に向けて書きます✍ デザイナー・企画・PM・ディレクターさん - 同じようなページを何ページも作っている・確認している(TT) - すべてのページのデザインカンプを納品物に定義している・されている - 動的に変わる要素（テキストデータ）もデザインカンプですべて作成しチェックしている - デザインガイドラインは受託には関係ないでしょう？ と

ゆい

コラボレーションを加速させる Figma にさらにターボがかかるかもしれない Tips

私が所属している Goodpatch Anywhere はフルリモートのチームなので、メンバー同士は実際には会ったことがない場合がほとんど。でも Figma を使って、実際に隣の席にいる以上に、お互いの作業を共有しながらデザイン制作を進めていきます。 今回はそんなコラボレーションを加速させる Figma にさらにターボがかかるかもしれない Tips を書きたいと思います！ ※記事中の表記は Mac の Figma.app、日本語（JIS）キーボードの場合です。 ※「ターボ

sato.takehi…

新機能のUIUX制作過程

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

yagishitar

デザインとエンジニアリングを「繋ぐ」部分と「切り分ける」部分

これは Qiita Advent Calendar 2021 「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア」の2日目の記事です。 --- 株式会社スペースマーケット所属のデザイナーの中原です。 スペースマーケットというWebサービスの開発に携わっています。 お鍋には必ずウインナーを入れます。 どんな内容？デジタルプロダクトの開発において、デザインとエンジニアリングは密に連携して協業する（シームレス）のが良いとは言うものの、目指すものの違いがあ

fumink7

0→1のフェーズで複数のユーザー体験をつなぐUIデザインを考える

はじめにこんにちは。プレイドでデザイナーをしている木村です。 今回は立ち上げから2年以上関わってきたプロダクトである「KARTE Blocks」のUIデザインをどう検討し変化してきたのかを紹介します。 全くキレイな話ではないですし記事化のために省略している部分も多々ありますが、プロダクトの立ち上げフェーズでユーザー体験と価値を検証しながらUIデザインをされる方のなにか参考になれば幸いです。 また、この記事は「KARTE Blocksリリースの裏側」という連載シリーズの8日目

kim