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

本

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

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

#figma

デザインファイルにおける命名規則を策定した話【Figma】

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

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

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

エンジニアが嬉しいアイコンファイルの作り方[Figma]

FigmaでUIデザインをする際に使うアイコンファイルの作り方に関して、エンジニア目線で見た時に「こういう作り方だったら助かる🙏」というポイントをまとめています。アイコンコンポーネントを作成するアイコンはすべてコンポーネント化します。コンポーネント化することで、どんなアイコンが存在するのかがわかりやすくなり、一覧性が高くなります。コンポーネント化しておくことで、デザイン作業時にも、アイコンを変更したい時はアイコンコンポーネントを切り替えるだけでいいですし、Instan

デザイン仕様が伝わるFigmaのデザインの作り方

FigmaでUIデザインをおこし、それを実装する人にハンドオフ（デザインデータを共有する）ときに、どのようなことに気をつけると良いかを書いてみます。多くの方がこの手の「実装者にやさしいデザインデータの作り方」のような記事を書いてくれていると思いますが、この記事ではFigmaに特化した内容となります。 Frame + Auto Layoutで構造的につくる実装を意識したデザインにおいては「構造化」というのは重要なポイントです。下記に並んでいるヘッダーは一見どちらも同じものです

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

2023.11.29にFriends of Figma Shonanで発表した内容を紹介します。当日使用したスライドは以下から確認いただけます。はじめに今回のテーマは「実務のためのマイクロインタラクション」です。オライリーから出版されている『マイクロインタラクション』では以下のように説明されています。最小単位のインタラクション「愛される製品」と「許容範囲の製品」の違いを生むトリガー、ルール、フィードバック、ループとモードの構造を持つマイクロインタラクシ

事業会社の新卒デザイナーが5タイプの現場で価値を発揮するためにしたこと

クックパッド Product Design Leadのよーた（@yotaszk）です。レシピサービス「クックパッド」のユーザー体験に責任を持ち、今年からチームをリードしていましたが、11月30日付でクックパッド株式会社を退職します。このnoteでは、2022年4月に新卒入社、インターンを含めると約3年間で実践した「事業会社の新卒デザイナーが5タイプの現場で価値発揮するための超具体的なコツ」を実例を交えながら紹介します。今日からぜひ真似してみてください！はじめに

アプリのUIをFigmaに移植した話（1/2）

こんにちは、みんなの銀行プロダクトデザイナーの中野です。みんなの銀行ではこの度、デザインツールをAdobe XDからFigmaに全面移行しました。このnoteではその経緯やTipsを2回に分けてご紹介したいと思います。以前、デザインシステムの構築に取り組んでいる話を綴りましたが、今回はその続編のような内容です。 👇筆者の別のnoteを読むデザインツールの移行という一大事デザイナーであれば経験したことのある方は多いかと思いますが、デザインツールの乗り換えってかなり

もう迷わない！Figmaのマスターデータ管理の最適解

参考記事：Figma｜Team, project, and file organization はじめにマスターデータをうまく管理できるFigmaのファイル構造は、長い間、私の大きな悩みの種でした。マスターのデータ更新作業は時間がかかったり、更新タイミングを延ばしてしまったり...「正解はいったい何だろう？」と常に探していました。しかし、その方法は見つからず、まるで手の届かない夢のように思えました… そんな中、Figmaの記事「Team, project, and f

エンジニア直伝！デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法

こんにちは、@ShikiCheriです。現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…！？クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サービスWeb版クックパッドのUIのリニューアルを行いました。またこのプロジェク

60人以上のインタビューから価値と体験を具現化するためにデザイナーが行ったこと

クックパッドデザイナーのよーた（@yotaszk）です。このnoteでは、3ヶ月間で60人以上のユーザーさんにインタビューにご協力いただきながら「クックパッド」アプリトップのリニューアルを含んだ大施策の具現化のためにやっていた、Figma活用術を紹介します！事例：クックパッドアプリの新しいアプリトップとテーマ体験新しいアプリトップとテーマは、ユーザーさんが料理の趣味嗜好ごとにレシピをまとめられる仕組みで、検索だけでは出会いにくいレシピとの「偶然の出会い」を作ります（

デザイナー不在のスタートアップでやったこと

最近エンペイというFintechスタートアップで副業していたので、何をやったかをまとめていく。UIUX関連のプロダクトデザイナーが足りない状態で、どうやってプロダクト開発をしたかの参考になれば幸いです👋 きっかけ元同僚でエンペイCTOをやっている田野さんからのお誘いでした。昨年夏頃に「デザイナーがいなくて困っているから助けて欲しい」といった相談があり、副業という形でお手伝いすることになりました。 Figmaへの移行これまでエンペイでは、Adobe XDでUIデザインを制