マガジンのカバー画像

UIデザインのはなし

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

#UIデザイナー

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

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

Chatwork De…

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

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

Chatwork De…

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

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

a-masuda

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

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

minto🍀｜Desi…

スタートアップ唯一のデザイナーが、デザインシステムを構築する方法

こんにちは。アルプのデザイナーの大澤（@Tadaki）です。 Taras Savytskyi さんに掲載許可をいただき、「スタートアップ唯一のデザイナーが、デザインシステムを構築する方法」の記事を翻訳させていただきました。 私自身そうなのですが、スタートアップではやることが多岐にわたり、デザインシステムを構築しようにも中々手が回らない状況です。記事では、素早くデザインシステム構築するための知見をまとめた素晴らしい内容となっているのでぜひご覧ください。以下記事内容になります

Tadaki

業務を効率化させるデザインシステムとは？

こんにちは！アルプのデザイナーの大澤 (@Tadaki) です。 先日デジタル庁でデザインシステム勉強会の記事が公開されましたね。活用事例として私が所属するアルプでのデザインシステムについて紹介できればと思います。 アルプではサブスクリプションビジネスを行う企業向けに、今まで手作業や自社開発がスタンダードだった契約や請求の管理を SaaS として提供する Scalebase というプロダクトを開発しています。 Scalebaseの開発では、日々プロダクトチームのメンバー

Tadaki

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

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

Hitomi Brem…

UIデザイン初学者の頃の自分に捧げたい、「勉強するならまずこれを読もう！」と思う読み物7選

はじめまして、ムツミ（@623px）と申します。「CAMPFIRE」という、クラウドファンディング事業の会社のデザイナーをしています。 普段はグロース周りのデザイン施策を担当していて、少し前は仲間集めプラットフォーム「TOMOSHIBI」という新規事業のデザイン全般を担当していました。 --- 最近デザインを勉強している友人にむけて、勉強におすすめの記事や本をまとめる機会があったのですが、UIデザインをはじめたの頃の自分に読んで欲しい…と思うものばかりでした。当時のわたしは

623

大事なのは基礎！HIGを簡単にまとめてみた🍎

ももやんです。今回はAppleのHIG（ヒューマンインタフェースガイドライン）について簡単にまとめます🐻‍❄️ 🌟iOSの３つの大きなテーマiOSのデザインにおける３つの大きなテーマがあります。以下の３つのテーマを意識してアプリをデザインしましょう🔥 ・Clarity（明瞭さ） 読みやすいテキスト、わかりやすいアイコン、控えめな装飾、余白、色、フォント、グラフィックを用いて、重要なコンテンツや機能を明確に表示する。 ・Deference（控えめ） ベゼルやグラデーション

Momoka Saito

UIデザインで迷ったら、まず要素を分解してみよう

自動家計簿・資産管理サービス「マネーフォワード ME」のデザイナー池内です。この記事では、「要素の分解」を使ったUIデザインの進め方を紹介します。 UIデザイン時に考えることが多すぎてどこから手を付けたらいいかわからない、なかなかチームの議論がまとまらない時などの参考になさってください。 参考例：マネーフォワード MEのホーム画面予算表示「要素の分解」の例として、先日マネーフォワード MEのAndroid版でリリースした、「ホーム画面に予算を表示する」という機能を参考にプ

池内健一

UIデザイナー２年目までの失敗と、３年目の今だから分かること

こんにちは！プロダクトデザイン部の大竹（@satocalog）です。 私はChatworkの新機能開発などを主に担当しています。 現在UIデザイナー３年目となり、できる・分かることも増えましたが１〜２年は失敗と反省の毎日でした。今回は、当時の失敗もオープンにして、現在のUI制作フローを紹介していきます！ 現在のUI制作フロー課題確認／情報収集／デザイン案制作／ユーザビリティテスト／改善...このようなでステップで進めています（ざっくり）。 各ステップで担当のプロダクト

Chatwork De…

駆け出しデザイナーがざっくりUIの歴史をまとめてみた📝

ももやんです。今回はUIの歴史について簡単にまとめます🐻 1945~1968年　バッチインタフェース タイプで穴を開けたパンチカードを読み込ませて命令を送るインタフェース。処理に数日かかることもあった、、😲これは知りませんでした！わざわざ穴開けて、読み込ませて処理に数日、、、便利な世の中に感謝しかないですね😭 1960〜1980年代　キャラクターユーザーインタフェース（CUI）またはコマンドラインインタフェース（CLI）テキストをタイピングして命令を実行させるインタフェー

Momoka Saito

無料でUI/UXデザインが学べる英語圏のYoutubeチャンネル

こんにちは。今回の記事ではプロダクトデザイン、UXデザイン、を学んでいる方、さらに英語を勉強中、英語がすでに分かる方向けになります。 私は、仕事中に音楽を聴く代わりに、Youtubeをポッドキャスト代わりにしてUX系の動画を視聴しています。なかなかガッツリビデオを見る時間がないので、仕事中にラジオ感覚で聴いています。コロナパンデミックで会社がホームオフィスを始めたので、誰かが話しているのが聞こえる環境にして自分なりに心地いい環境を作っています。 UI、UXを学習中の方は、

Hitomi Brem…

BtoBプロダクトのUIデザインプロセス

こんにちは、Chat Dealerのプロダクトデザイナーのシマヅです。 サービスのリリースから約3年が経過し、数百社のお客様にご利用いただいています。今回は、プロジェクトメンバーと行うUI検討プロセスについて書きたいと思います。 開発プロセス ウォーターフォール開発で毎月1回のリリースサイクルです。 ミニマムの機能で実装してリリース後に効果検証や顧客ヒアリングを経て機能をアップデートすることもあります。 要件定義はデザイナーが担当することもありますが、基本的にはエンジニア

しまづ