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

本

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

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

わくわくの追求 -Yahoo!検索　観光モジュールのリニューアル-

初めまして。私たちヤフー検索デザイン部は、検索結果に表示される独自の回答モジュールのUI/UXを担当し、検索ユーザーの課題解決と目的達成を支援する役割を担っています。突然ですが、皆さんは旅行やお出かけの際、場所や予定を決めるときに悩んだり面倒に感じることはありませんか？旅行は本来わくわくするものですが、計画の煩わしさでその楽しみが損なわれるのは残念ですよね。そこで、ヤフー検索観光プロジェクトでは、こうした煩わしさや悩みを解消し、ユーザーニーズを満たすために観光モジュ

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

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

同じ役割でも違う名前？初心者向け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】

こんにちは、ほぼフルタイムのフリーランスとして株式会社mikanでデザイナーをしています、三上蒼太(@sota_mikami)です。英語アプリmikanは、もうすぐ10歳になる長寿アプリです。アプリ自体はシンプルさを保ち続けていますが、多くの実験が積み重ねられてきた歴史があります。ただその歴史ゆえに古い画面のデザインデータが一部なかったり、設計意図や当時の背景がわからず評価の難しい画面があったりと、デザインデータと意図を管理するための標準化が一つの重要な課題となっていま

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

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

ファイルが重くなりがちな長期プロジェクトでの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をどう変えたのかを明示しておきます。変える前がこちら↓↓ ほんで変わった後がこちら↓↓ ご覧の通り「作業カード」と呼ばれる