プロダクトデザイン知見まとめ

OOUI研修を行いました！

こんにちは！リクルートプロダクトデザイン室デザインマネジメントユニットで、『Airレジオーダー』のデザインディレクターをしている新井です。私が所属しているデザインマネジメント5部（SaaS）（以下SaaSデザマネ部）では、スキルアップのために、研修を年に1回行っています。先日、デザインコンサルタントをされているソシオメディア株式会社の上野さん、藤井さんを講師にお招きして「オブジェクト指向UI研修」（以下OOUI研修）を実施したので、その内容をレポートします！ Sa

デザインのクオリティを上げる、たった一つのコツ

良いデザインを抽象化してから具体化する僕は3年前からデザインのメンターを始めました。今では、累計で150人以上の未経験者さんやジュニアのデザイナーさんをサポートしています。実際に、課題を続けていくことでデザインスキルが格段に向上し、有名な制作会社に転職した方も多くいます。また、3年や2年以上ずっと契約してくださる方もいます。この課題は模写からオリジナル化することをベースに、いまのトレンドを学びデザインスキルを上げながら、ポートフォリオを作れる仕組みになっています。その学習

「アイコン」で伝えられる情報の限界に挑め

🧑‍💼「お気に入りのアイコンを作ってください！」私「まかせな！」 🧑‍💼「ランキングのアイコンを作ってください！」私「まかせな！」 🧑‍💼「人間プレイヤー3人 VS コンピュータープレイヤー1人のアイコンを作ってください！」私「（え？）ま…まかせな！！」 🧑‍💼「『AボタンとBボタンを交互に連打』のアイコンを作ってください！」 🧑‍💼「『全プレイヤーのアイテムをシャッフルして再分配』のアイコンを作ってください！」 🧑‍💼「『オンラインモードで待機しているユーザーが

QA工数を意識したUIデザインをしよう。あなたのデザインはエンジニア泣かせかもしれない。

こんにちは。Sun*のバナです。 UIデザイナーとして、さまざまなクライアントさんのプロダクト開発のご支援をさせていただいています。先日、とあるプロジェクトで「自分が作成したデザインの品質テストを体験する」という貴重な機会に恵まれました。そこで学んだ教訓と反省について書きたいと思います。この記事はこんな方におすすめです。 QAについて具体的なイメージがわかないデザイナーの方 QAコストを抑えるためのデザインのポイントを知りたい方自分のデザインの実装にどのくらい

TOPページの課題を掘り下げてデザイン改善した話

こんにちは！UIUXデザインチームの井上です。東京ガスには2023年10月に経験者採用で入社しました。現在はmyTOKYOGASのコンテンツ運用や、ほかサービスのUIUXデザイン業務を担当しています。今回は、ビジネスメンバーが実施しようとした課題解決の方法について、デザイナーとして踏み込んで改善した話をご紹介したいと思います。今回の課題myTOKYOGASでは毎月のガスや電気の使用量や料金を確認できるほか、クイズに回答したり、各機能を利用することで「パッチョポイント」

WWDC24のデザイン関連セッション

今年のWWDCから各セッションの動画がYouTubeで視聴できるようになりました。日本語字幕を確認できたり、読み上げソフトで日本語音声で視聴できたりします。手軽に視聴できるようになったので、いつもよりたくさんのセッションを視聴することができました。主にデザインに関連するセッションで気になったものをまとめていきます。ラインナップは以下の通りです。 visionOSやApp Intentのセッションはまだ未視聴のため、紹介していませんが、今後視聴の上で追加するかもしれ

日付の書式｜UIデザインポリシー整理

リーガルテックAI SaaSスタートアップ、MNTSQのプロダクトデザイナーのクボスケです。私たちは、レバレッジの効くデザインの仕組みづくりを目指しています。この記事は、MNTSQとしてのUIデザインの基準や方針を決めていく「UIデザインポリシー整理」というプロジェクトのなかで行なわれたディスカッションをもとにまとめたものです。このプロジェクトの主旨や運営については、初回の記事でも述べていますので、ぜひご覧ください。それでは、今回のトピックは「日付の書式」です。

iOSとAndroidの"Divider"の線幅の違いと各社の対応

アプリやWebサイトをデザインする際に、情報をまとまりごとに線で区切ることがあります。リストの各項目を区切ったり、コンテンツをセクションごとに区切ったりする場合です。この区切り線は"Divider"と呼ばれます。このDividerの線幅について、国内外のサービス各社の対応を調べてみました。 iOSとAndroidのDividerの線幅の違いiOSアプリのリストはSwiftUIで以下のように実装できます。 var body: some View { List { Se

「CTAボタン」のUIを集めてみた｜パーツ別デザインまとめ

こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。今回は、LPにおいてCV（コンバージョン）に大きく影響を与えるUIパーツ「CTAボタン」周りのデザインをパターン別に集めてみました。はじめに前回の記事で予告をした通り、今後、LPやWebサイトを構成する様々な要素を１つずつ特化して調査をしていきたいと思っています。今回はその「パーツ別デザインまとめ」シリーズ２本目です。 ↑ こちらの記事、たくさんの方に読んでいただけており嬉しいです！パタ

ニュースの盛り上がりをどう見せるか？——機能「ヤフトピ注目度メーター」制作の舞台裏

Yahoo!ニュースでは、Yahoo!ニューストピックス（「ヤフトピ」）への注目度を可視化する新機能「ヤフトピ注目度メーター」を1月29日から導入しました（スマートフォンのウェブ版のみ）。「ヤフトピ注目度メーター」は「ヤフトピ」の上部に表示されており、その瞬間の注目度を「低、通常、高」の3段階で、横長のメーター形式で表現しています。現在のデザインに至るまで、言葉選びや「注目度」の表現方法、色彩など、数々の試行錯誤があったと、デザイナーの岡由香理、広垣友里絵は話します。他社事

鮮魚バイヤー向けおすすめ提案のアプリデザイン

こんにちは！株式会社ウーオでUI/UXデザイナーをしている久保坂（@misaaa09）です。先日水産流通マーケットプレイス「UUUO」でユーザーに合った商品提案を行う「オススメ提案機能」をリリースしました。約6ヶ月で構想からリリースまでを行い、その中で様々のメンバーを巻き込みながら進めたプロジェクトでした。今日は具体的な開発フローの紹介とともに、周囲を巻き込みながらデザインしていくうえで工夫しているポイントをお伝えしたいと思います。 💬開発の背景始まりは主要機能の

「料金比較表」のUIを集めてみた｜パーツ別デザインまとめ

こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです🌿 今回はLPやサービスサイトでよく見かける「料金比較表」のUIパーツに特化してデザインを集めてみました。 LPや特定のサービスサイトは構成要素が比較的パターン化されています。「この要素・セクションのデザインどうしよう」となった時用に、要素ごとにデザインのパターンのストックを持っておきたい。そんな皆さまに参考にしていただけると嬉しいです！はじめに今回は、集めた料金比較表のデザインをこちらのサ

「ボタンっぽい見出し」と「見出しっぽいボタン」問題

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、最近気になっている「わかりづらさを感じるUI」について書こうと思います。よろしければお付き合いください✍ 前提：UIとは？UIは「ユーザーインターフェイス」の略。interfaceは「接点」や「境界面」という意味の英単語であり、UIとはコンピュータ（機械）とユーザー（人間）を繋ぐ接点です。スマホであれば指先、パソコンであればマウスなどを介して、人間は機械と意思の疎通を図ります。 UIは、何よりも「

"悲劇的な"デザイン

こんにちは。アル株式会社でCCOをやっている@ottieeです。今日はデザインのネガティブな面について書いてみようと思います。「デザインがユーザーの感情や行動にネガティブな作用をすることもある」ということは感覚的にも経験的にも、ほとんどの人がわかっていること事だと思います。たとえば… 商品をカートに入れると標準でメルマガを受け取る設定になっているECサイトブラウジングをしている時に突然現れ作業を中断させる「✖️」ボタンのやたら小さなダイアログ広告削ぎ落と

フォローしませんか？

#UIデザイン