マガジンのカバー画像

ためになるUIUX記事

40
運営しているクリエイター

記事一覧

デザインレビューのガイドラインを作りました -心得編-

デザインレビューのガイドラインを作りました -心得編-

こんにちは。hacomonoのプロダクトデザイナーのかんちゃんです。

組織に所属しているデザイナーの方であれば、レビューのガイドラインが欲しいと思った経験はありませんか?

この記事は発足して2年弱のデザイン組織でデザインレビューのガイドラインを作成した経緯の記録です。
中小規模のデザインチームでレビューに課題を感じている方々の参考になればと思い、「心得編」「レビュー観点編」「レビューフロー編」

もっとみる
デザインとエンジニアリングの両側面から考えるユーザー体験

デザインとエンジニアリングの両側面から考えるユーザー体験

概要2024年11月14日開催の Spectrum Tokyo Meetup #15 の英語登壇を、日本語でまとめたものです。一部内容や画像修正しています。

デザインとエンジニアリングの橋渡しを担う「デザインテクノロジスト」という職能で、kintoneのデザインシステムの開発運用に携わっています。

その知見を生かして、デザインとエンジニアリングが交わる領域だからこそできる、よりよいユーザー体験

もっとみる
デザイナーが素早く戦力になるために心がけているキャッチアップとアウトプット

デザイナーが素早く戦力になるために心がけているキャッチアップとアウトプット

こんにちは、フリーランスプロダクトデザイナー@ShikiCheriです。今回は参画したプロジェクトの制作事例を紹介しつつ学んだこと、自分が心がけているキャッチアップとアウトプットのコツについてまとめました🎉

インプットフェーズとアウトプットフェーズで心がけたい"誤解を作らない仕組み"そんな状況下、短期間で着実に事業を前進させるために2つのフェーズで意識していることがあります。

参画直前:

もっとみる
FigmaのLayout grid(レイアウトグリッド)を活用する

FigmaのLayout grid(レイアウトグリッド)を活用する

渋谷でデザイナーをしています。福田です。
FigmaのLayout gridを利用してデザインを作成するのが、便利だったので備忘録として記録します。

Responsive layout grid とは
レスポンシブレイアウトグリッドでデザインを作成すると、画面のサイズや向きに左右されることなく、レイアウトを組むことができます。また、レイアウトグリッドのルールを決めてしまえば、そのルールに従ってレ

もっとみる
スマートバンクのデザインレビューの仕組みについて

スマートバンクのデザインレビューの仕組みについて

こんにちは!スマートバンクのプロダクトデザイナーhasegawaです。

現在、スマートバンクではデザイナーがそれぞれのミッションチームにアサインされ、制作を進めるチーム体制をとっています。
各ミッションチームには基本デザイナーが1名が配置されますが、そのデザイナーが一人でデザインを完成させるわけではなく、ミッションチーム外の複数名のデザイナーによるレビューを通じてデザインの質を担保しています。

もっとみる
デザインレビューのガイドラインを作りました -レビューフロー編-

デザインレビューのガイドラインを作りました -レビューフロー編-

こんにちは。hacomonoのプロダクトデザイナーのかんちゃんです。
組織に所属しているデザイナーの方であれば、レビューのガイドラインが欲しいと思った経験はありませんか?
この記事は発足して2年弱のデザイン組織でデザインレビューのガイドラインを作成した経緯の記録の第3弾「レビューフロー編」です💡

中小規模のデザインチームでレビューに課題を感じている方々の参考になればと思い、「心得編」「レビュー

もっとみる
リリースから2年。たどりついた「共創するデザイン」

リリースから2年。たどりついた「共創するデザイン」

こんにちは!メルペイでデザインマネージャーをしているのぶおです。

メルペイデザインチームで2020年実施してきた「共創するデザイン」、つまりデザインチームにおけるフィードバックループの作り方を、5つの項目に分けて紹介します。
デザイナー同士の担当を重ね合わせることで、お互いにフィードバックしやすい状況を作りました。一方通行でフィードバックするのではなく、みんなが、みんなにフィードバックしていく、

もっとみる
コンセント独自のUX設計手法 OOUXデザインプロセス

コンセント独自のUX設計手法 OOUXデザインプロセス

皆さんは新しいサービス企画を実現するためのデジタルプロダクトをつくるときに、どのようなことから着手し始めますか?
いざ検討を進めると、次のような課題に遭遇することはないでしょうか。

これらの課題は、デジタルプロダクトで実現したいこと(要求)と実際にデジタルプロダクトをつくる上で必要なこと(要件)との間に、大きな隔たりがあることから生じています。

コンセントではその隔たりを埋めるために、ユーザー

もっとみる
「便利さ」ではなく、「豊かさ」を生み出すデザインをしたい

「便利さ」ではなく、「豊かさ」を生み出すデザインをしたい

この記事は🎄MIMIGURI Advent Calendar 2023の19日目の記事🎄です。

前回は田幡さんのWHYからは始まらない!? WHEREから始める探究論でした。
noteの執筆頻度が実質年に1本になっているとのことですが、そのエネルギーが存分に込められた壮大な内容で、このまま本にできるのではないかと思うくらい濃密な内容でした。ぜひ読んでみてくださいね!

他の記事はこちらのマガ

もっとみる
実務のためのマイクロインタラクション入門 @ Friends of Figma Shonan

実務のためのマイクロインタラクション入門 @ Friends of Figma Shonan

2023.11.29にFriends of Figma Shonanで発表した内容を紹介します。当日使用したスライドは以下から確認いただけます。

はじめに今回のテーマは「実務のためのマイクロインタラクション」です。

オライリーから出版されている『マイクロインタラクション』では以下のように説明されています。

最小単位のインタラクション

「愛される製品」と「許容範囲の製品」の違いを生む

トリ

もっとみる
UIから「白」が消える日

UIから「白」が消える日

こんにちは。ritarと申します。
今年の10月頃、YouTubeに大きいデザイン変更がありました。

アイコンの変更、角丸やレイアウトなど全体的に一新されているのですが、中でも自分が仰天したのは「アンビエントモード」という新機能です。

このモードをオンにすると、動画の下側のUI領域が、まるで動画部分から光が漏れているかのようにじんわりと色づきます。
これを見たとき自分は度肝を抜かれました。なん

もっとみる
初心者必見!明日から使える、ユーザーインタビューで深掘りをするためのTips大全

初心者必見!明日から使える、ユーザーインタビューで深掘りをするためのTips大全

こんにちは!PdMをしているめーら(@mela_dayo)です。
前回の記事では、リサーチを社内に浸透させるために取り組んだことを説明しました。
今回は実践編として、ユーザーインタビューで的確なヒアリングをするためのTipsをご紹介します。

🦔 🦔 🦔

協力者にありのまま話してもらうためのコツインタビューは協力者のありのままの声を集めることが目的です。そのためには相手と打ち解けることが大

もっとみる
検索 UI まとめてみた

検索 UI まとめてみた

検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。

パターン一覧
1. フリーワード型
2. サジェスト型
3. グループ型
4. あとからフィルター型
5. 条件指定型
6. レコメンド型

フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。

良いところ
シンプル。入力と同時に検索結果を表示できるので、最短で検索対象

もっとみる
デザインと開発の分断を乗り越え、チームでアウトカム検証を回すプロセス

デザインと開発の分断を乗り越え、チームでアウトカム検証を回すプロセス

リーン開発の課題、Sense→Discovery→Deliveryのプロセス分断をどう乗り越えるかリーン的なアウトカム検証には、不確実性が高い段階から「Sense(課題発見)」「Discovery(ソリューション発見)」「Delivery(製品開発)」の3つの仮説検証トラックが存在すると考え、Gaudiyでもこれに近い運用を行なっています。

そして、リーンやアジャイル的な考え方では、これらはプロ

もっとみる