マガジンのカバー画像

マネーフォワード・デザイン

393
マネーフォワード所属デザイナーの共同マガジンです。各プロダクトのデザインプロセスや、全社横断のデザイン組織の取り組みについて発信します。デザイナー募集中! ▶応募はこちらから:… もっと読む
運営しているクリエイター

#UI

UIは閲覧画面からつくろう。

ユーザー体験的なものをストーリーで整理し次にUIを作成するとき、閲覧・参照系より先に新規作成のUIから考える、というケースをときどき見かけます。 これ、すごい違和感あります。 ストーリーにおいてユーザーはまず新規作成するので、そのまま新規作成から着手してしまう、といったところでしょうか。 その場合、新規作成の目当てたるオブジェクトの姿が曖昧になりがちです。 そうすると、新規作成画面にしか存在しない特殊なレイアウトやコンポーネントや、特に意図がない冗長なモーダルができあが

アプリ・Webのナビゲーション設計 オススメ文献5つ

自動家計簿・資産管理サービス「マネーフォワード ME」のデザイナーの池内です。アプリ・Webサービスでのナビゲーションの設計についての、おすすめの参考文献をご紹介します。 ナビゲーションとはざっくり言うと、「目的地までの道筋や、その道筋の案内」のことです。自分が手掛けるアプリやWebサービスが「使いづらいな」「わかりづらいな」と思っているUIデザイナーの方の参考になればと思います。 2022年6月1日に開催するミクシィさんとマネーフォワードの共同イベントで、マネーフォワー

OOUIデザインの普及のためにやってきたこと

これはマネフォデザイナーAdvent Calendar2021🎄⛄️ の15日目の記事です。 昨年6月に入社してから、いわゆるOOUIと呼ばれるGUIデザインの原則とプロセスの普及に努めてきました。 これまでやってきた取り組みを紹介します。 自分のプロジェクトで実践まずは自分のプロジェクトで実践します。 リサーチをもとにオブジェクトやビューをモデリングし、UIをデザインします。 さらにPOと書籍「オブジェクト指向UIデザイン」(以下、OOUI本)の読み合わせを行い認識をそ

ウィザード画面の突破率を高めるUIデザイン

自動家計簿・資産管理サービス、マネーフォワード MEのデザイナーの池内です。この記事ではウィザード画面のUIノウハウについて紹介します。 ウィザード画面とは、複数の設定を一方通行な画面遷移を通して行うUI手法のことです。アプリの初回起動時のウォークスルーで利用されることが多いです。 マネーフォワード MEの予算機能の設定画面もウィザード画面を利用しており、ここ最近様々な改善のABテストを行っていました。その改善を通して培ったノウハウをご紹介します。 参考例:マネーフォワ

UIデザインで迷ったら、まず要素を分解してみよう

自動家計簿・資産管理サービス「マネーフォワード ME」のデザイナー池内です。この記事では、「要素の分解」を使ったUIデザインの進め方を紹介します。 UIデザイン時に考えることが多すぎてどこから手を付けたらいいかわからない、なかなかチームの議論がまとまらない時などの参考になさってください。 参考例:マネーフォワード MEのホーム画面予算表示「要素の分解」の例として、先日マネーフォワード MEのAndroid版でリリースした、「ホーム画面に予算を表示する」という機能を参考にプ

[厳選5+1冊]UIデザイナーの骨組みをつくる本

UIデザインを学んでいる方、UIデザイナーを目指している方にぜひ読んでほしい本を個人的にまとめました。 難しめの本もありますが、いずれも本質的な内容です。 早めに読んでおくことで、自分のレベルをグッと上げてくれると思います。 ヒューメイン・インタフェースヒューマン(Human)ではなくヒューメイン(Humane)。 人に優しいインターフェースとは何かについて、「クリックする」「キーをおす」という行為にまで落とし込んで教えてくれます。 UIデザインのモードという概念を理解

わかりやすいアラートメッセージを書くための3つ原則と6つのルール

こんにちは。 クラウド会計Plusのデザインをしているまいまい(@rotr9)です。 会計Plusで使っている「わかりやすいアラートメッセージを書くための3原則と6つのルール」を紹介します。 🙋‍♀️ このnoteはこんな人におすすめ ・プロダクトの開発者 ・プロダクトのデザイナー ・マーケティング担当者 💻 アラートメッセージとはアラートメッセージとは、ユーザーのアクションに対するエラーや、ユーザーのアクションが正しく実行されたことをフィードバックをするための短い文言

いいUIってなんだっけ?

「価値」「ストーリー」「UI」を繋ぐ以前「UIしか見えていないサービスデザインは危ない」という記事を書きました。この記事ではUIデザインを行ううえで「価値」と「ストーリー」の大切さをお伝えしました。 今回は「価値」「ストーリー」「UI」を繋ぐ時の考え方について書きます。このようにUIを位置付けた時に、いいUIとはどんなものでしょうか。 UIには装飾の役割と操作の役割がある UIというと装飾的なイメージを持つ人も多いと思いますが、デザインにはもともと装飾の役割と操作の役割が

UIしか見えていないサービスデザインは危ない

意味のあるサービス作りをする「サービスがクローズする」その裏には事業としての投資をし、様々な開発メンバーがこのサービスはリリースした後に世の中にとても意味のあるサービスになると信じて頑張って開発しています。できればどのサービスもリリース後、大成功を収める結果が得られればいいのですが、ほとんどのサービスは無くなってしまいます。デザイナーの立場からできることは、UIを作るところに留まらず、そもそも「価値」があるのか「ストーリー」はいいのかから考えた方がいいと思います。優秀なUIデ

デザイナーが海外拠点と一緒にサービス作りをするコツ

はじめまして!マネーフォワードでUXデザイナーをしている”ちゅうさん”こと佐藤忠輔です。 私はMoney Forward X本部という、クライアントの金融機関さんと新しいサービスを共創する部署に所属しています。 サービス開発を開発拠点であるMoney Forward Vietnamと一緒に行うことも多く、そんな中で私が感じた楽しく&円滑に開発を進めていくための、4つのポイントを紹介したいと思います。 1.同じ釜の飯を食おう 海外拠点だからリモートで…と思うかもしれませ

銀行の体験を良くしていきたい

マネーフォワード Xでは全ての人のお金の課題を解決することを目指しており、地方創生・地方活性化に向けて「デジタル通帳」という地方銀行様と共につくっているアプリがあります。 「デジタル通帳」は今はまだ通帳の明細を見るくらいしかできていませんが、顧客はもっと便利なプロダクトを求めていますし、地方銀行様もそれに応えたプロダクトを提供したいと考えています。 マネーフォワード Xでは「共創」を大事にしており、本気で提供価値を見直し顧客体験を良くしたいと考える地方銀行様と共に顧客の声

マネーフォワード X について

マネーフォワードではお金の見える化アプリの「マネーフォワードME」やクラウド型会計ソフトの「マネーフォワード クラウド」が有名ですが、他にもたくさんのプロダクトがあり、事業があります。その中でもあまり知られていない「マネーフォワード X」という事業ドメインのご紹介をします。 マネーフォワード4つの事業ドメインマネーフォワードには大きく4つの事業ドメインがあり「マネーフォワード X」はその1つです。ミッションは「パートナーと共に、新たな金融サービスを創出する」です。ここで言う

大量の機能により複雑化したUIをシンプルにするために行っていること【マネーフォワード ME】

マネーフォワードのデザイナーの池内(@KD6JOE)です。私の携わっているマネーフォワード MEというアプリは、サービス開始から7年が経過し、たくさんの機能が追加されてきました。機能の追加はサービスの成長に貢献した一方、UIは複雑化し、新規ユーザーがとっつきにくい要因にもなっています。 この記事では、機能が増え、UIが複雑化したことでどのような問題が起こっているか、どのように対処しようとしているかをお話します。同じ問題に直面しているデザイナーやプロダクトオーナーの方に参考に

マネーフォワードAndroid版の指紋認証デザインプロセス

こんにちは。デザイナーの池内(@KD6JOE)です。マネーフォワードで自動家計簿・資産管理サービスのデザインをしています。 自動家計簿・資産管理サービス「マネーフォワード」について、改善内容やデザインの裏側を、ゆるく発信していこうと思います。 今回は先日リリースしたAndroid版の指紋認証機能についてどういう背景でデザインしたかをまとめました。 Android版のパスコード画面を指紋認証で解除可能にマネーフォワードアプリではアプリ自体にロックをかける機能があります。マ