UIデザインのはなし｜oyuuuhan

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デザインの観察、分解

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

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

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

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

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

『スタディサプリ』のプロダクトを横断したデザインシステムを作る（デザイントークン編）

こんにちは。スタディサプリEnglishのデザインを担当している小鹿です。この記事では、スタディサプリの複数プロダクトを横断したデザインシステムの構築について、お話をしたいと思います。デザインシステムをつくる目的スタディサプリでは数多くのプロダクトを展開しています。 ※『スタディサプリ』は日本の小中高生及び社会人を対象としたオンライン学習サービスです。動画学習をはじめ、コーチング、ライブ授業、英語特化学習など、学生の環境や目的に応じて最高の「伴走者」となり得るサービ

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

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

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

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

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

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

UIデザインのはなし

記事一覧