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

本

プロダクトデザイン・UI/UX・UXライティングなどの知見をまとめていくマガジンです！noteではプロダクトデザイナーを募集しています→https://open.talentio… もっと読む

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

ファイルが重くなりがちな長期プロジェクトでのFigmaファイル管理

Japan Digital Designの久行です。三菱UFJフィナンシャル・グループの戦略子会社であるJapan Digital Design（以下JDD）でExperience Design Div.（以下XDD）に所属し、体験設計やUI・ビジュアルデザインのリードを担当しています。この記事では、XDDが取り組むプロジェクトの中で発生した困りごとを基に取り組んだFigmaファイル管理の改善活動についてご紹介します。デジタルプロダクト開発でお馴染みのデザインツールであ

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

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

マルチプロダクト戦略における「使いやすさ」の商品価値を確立する

こんにちは、プロダクトデザイン本部ダイレクターのfumiya(@tyoys00)です。社外に向けて記事を発信するのはだいぶお久しぶりになります。皆さま、息災におすごしでしょうか？さて今回は「週間プロデザ by SmartHR」の一本目の記事として社内のプロダクトデザイナーに向けて執筆したドキュメントを公開します。このドキュメントはマルチプロダクト戦略を取る事業においてプロダクトデザイン組織はどのように戦うべきかをアジテーション気味に執筆したものです。マルチプロダ

noteに入って2年経ったデザイナーの話

noteに入社して、はや2年が経ちました。入社してからやっていることは日々目まぐるしく変化しています。変化しすぎて「最近何してるの？」と聞かれた時答えにくくなってきたので、2年間何をしていたのかざっと書き出してみました。最近退職されたさわさんの記事をリスペクトしつつ… 色々なことをやらせてもらえて、毎期刺激的で面白いです。プロダクトデザインここが私の主業務になります。noteのデザイナーは基本的にチームに一人で配属されるので、最初の3ヶ月間のオンボ期間？の後は基本的に

デザインで牽引する、速いプロダクト開発

こんにちは、CAMPFIREデザインマネージャー・リードデザイナーの623（@623px）です。先日、Friends of Figma Tokyoのみなさんにお声がけいただき、こちらのイベントに登壇させていただきました。内容への反響が思ったよりも大きく、当日お話しした内容を一部抜粋し、改めて記事にすることにしました。デザイナーを取り巻く開発体制について課題がある方へ、何かしらのヒントになれば良いなと思います。弊社ではここ2-3年で、プロダクト開発の体制や取り組み方が大

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

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

AIとブランドを作る。UXライティングにAIを活用する方法

今回のテーマは、「どのようにブランドを守りながら、UXライティングでAIを活用しているのか。」というところです。 note社では、社内のさまざまな領域でAIを活用しています。これらAIを活用していますが、AIで全自動で作成してはおらず人とAIが協業しながらやっています。色々この辺り試している中で、個人的に考えているAIとうまく協力するポイントである「できることを分類しておく」ということと「ブランドを守る」の2点について今回はまとめたいと思います。 1 分類して使い

UIの色を変えただけで大量のクレームを頂戴してしまった話

Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ ほんで変わった後がこちら↓↓ ご覧の通り「作業カード」と呼ばれる

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

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サイトブラウジングをしている時に突然現れ作業を中断させる「✖️」ボタンのやたら小さなダイアログ広告削ぎ落と

0→1フェーズにおけるプロダクトデザイナーのビジネスへの貢献方法

ごきげんよう！SmartHRプロダクトデザイナーのこぎそ（@kgsi)です。 SmartHRで2023年前半から開発に携わっていた「キャリア台帳」が、2024年2月8日についにリリースとなりました。「キャリア台帳」は、SmartHRで収集した部署や役職、評価推移、スキルなど、タレントマネジメントに必要な従業員情報をまとめて確認できる機能です。今後タレントマネジメント領域を攻めていくSmartHRとして、欠けていたピースを埋める重要なプロダクトとなります。さて、このプ