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

本

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

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

#デザイン

同じ役割でも違う名前？初心者向けHIGとMaterial DesignのUIパーツまとめ

今回のnoteは、HIG（Human Interface Guidelines）とMaterial DesignのUIパーツについてです！ HIGとMaterial DesignのUIパーツは同じ役割でも名称が異なる場合もあるので、異なる名称、同じ名称に分けてまとめていきたいと思います✍🏻 ※大きく異ならない場合には同じ名称の方に分類します異なる名称🍎iOS→タブバー / 🤖Android→ナビゲーションバーアプリ内の異なる領域間を移動するためのコンポーネントです。

"早く・よりよく・安全に"リリースするためにデザイナーができること | 英語アプリmikanの学習結果画面リニューアル事例

はじめにこんにちは！英語アプリmikanのデザイナーをしているayataki（@ag_ayakan）です🍊 今回は「"早く・よりよく・安全に"リリースするためにデザイナーができること」というテーマで記事を書いてみたいと思います。 2024年5月にmikanの学習結果画面のリニューアルを終えたので、今回はこの事例をもとにご紹介します。残念ながら初期リリースでは思うように数字が上がらず、3回のリベンジ版リリースを経ての着地となったため、超成功事例を紹介する記事ではありません

ファイルが重くなりがちな長期プロジェクトでの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サイトを構成する様々な要素を１つずつ特化して調査をしていきたいと思っています。今回はその「パーツ別デザインまとめ」シリーズ２本目です。 ↑ こちらの記事、たくさんの方に読んでいただけており嬉しいです！パタ

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

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

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

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

"悲劇的な"デザイン

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

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

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

多言語対応UIを作るときのポイントを知っておこう

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今日は、多言語に対応するUIデザインをつくるときのポイントについて書きます。表層的な「UI」だけでなく、掲載コンテンツの内容やローカライズについても言及しています🌐 最後に参考記事も紹介しています！ぜひお楽しみください。はじめに｜多言語対応UIとは？今回扱う「多言語対応UI」とは、単一の言語のみでなく、いくつかの言語に対応しているUIデザインのこと。日本でよく見かけるのは「日本語」「英語」の2つに対応し

【海外記事】デザインをする上で知っておきたい、5つの心理法則とその活用法

こんにちは、RAKSULでデザインインターンをしている川村です。いきなりですが、デザイン心理学という言葉を聞いたことがありますか？デザインは美的な要素だけではなく、ユーザーの心理的なニーズや行動を理解し、魅力的なユーザー体験を創出する点においてとても重要な役割を担っており、デザインと心理学は深くリンクしています … 人がどのようにプロダクトとインタラクトし、彼らの意思決定がどのように影響され、あるいはコントロールされうるかを理解することは、UXデザイナーが取り上げるべき