マネーフォワードの新しいブランディングについて聞いてきた Part 2：経営の想いをどうデザインに落とし込んだのか

こんにちは！マネーフォワード広報の早川です。

すっかり寒さが身にしみる季節になってきましたね。社内でもちらほらと風邪を引いている人を見かけるようになりました。みなさまも体調を崩されぬようご自愛ください！

さて、計3回にわたってマネーフォワードのブランドプロジェクトを推進したメンバーに聞いてきた話をみなさまにお届けする、このシリーズ。

前回はマネーフォワードのブランドプロジェクトがそもそもどのような課題に基づいて立ち上がることになったのか、といった大枠の話をご紹介しました。

第2弾となる今回は、その「経営の想い」を、具体的にどのようにサービスロゴやアプリアイコンなどのデザインに落とし込んだのかという、ちょっと実務寄りの話を聞いてきました。特にデザイナーの方、必見です！

語り手

PFM本部　UI・UXデザイン部　池内健一（デザイナー）

サービス開発本部　UIテクノロジー部　大嶋茉莉（デザイナー）

クラウド経費本部　開発部　青山玲子（デザイナー）

聞き手

広報部長　柏木彩

ブランドプロジェクトとのそれぞれのかかわり

柏木：本日はよろしくお願いします！まずは今回のブランドプロジェクトとのご自身のかかわり方を教えてください。

（池内）

池内：今回のブランドプロジェクトでは、主にアプリアイコンの変更に携わりました。社内で制作するリソースがなかったためデザイン会社に発注することになったんですが、外注先の選定から、その外注先にどういうデザインをお願いしたいかという概要資料の作成、また候補としてあがってきたアイコンを社内で話し合い調整するといった業務を、主に担当しました。アプリアイコンの最終意思決定は、社長である辻さんやクリエイティブ・ディレクターである潤平さんですが、私たちアプリに関わるデザイナー3人も一緒に議論を交わしました。

柏木：大嶋さんは、今回のプロジェクトにはどのようにかかわったのですか？

（大嶋）

大嶋：主には、「マネーフォワードクラウドシリーズ」のロゴデザインとアプリアイコン変更に携わりました。ロゴの作成から、ブランド案件全般のディレクション業務など幅広く担当しました。

柏木：なるほど。それでは青山さんは何を？

（青山）

青山：私は、主に大嶋さんのサポートや、ロゴ修正時のパターン出しなどですね。これを当て込んだらこのようなデザインに仕上がりますというパターンをひたすら作ったり、グラフィックを決定する際にみなさんにヒアリングしたり、「マネーフォワードクラウドシリーズ」の中で自分が担当している「クラウド経費」や「クラウド会計」について意見を出したり。でも、お二人よりはぜんぜん仕事してないです。。

柏木：すごい自虐的だね。自信持って（笑）！！

一同：（笑）

差し迫るスケジュールでも工夫を凝らした、ロゴ制作のポイント

柏木：そもそもサービスロゴやアプリアイコンの変更について共有されたのは、いつでしたか？

大嶋：たしか8月末くらいでしたね。サービス名称を「マネーフォワードクラウド」へ変更すると決定したあとに、デザイナー陣へ話が下りてきました。ブランドリリースは11月末ということで、あと3ヶ月で新ブランド切り替えを完了しなくてはならない…という事態です。とても時間がないので、最初にやったことは、対応策の優先順位づけですね。一番は、「お客様がサービスに接する際に困らないこと」、また「新しい名称をどのように表現し、短期間でどうやって運用展開していくのか」ということでした。名称を変えるだけでは、新しいブランドイメージは伝わらないですし、変更したロゴがしっかり全サービスに浸透してこそ初めて一体感が醸成されるので、展開運用の基礎固めに集中しました。9月14日あたりから修正案を検討しはじめ、10月1週目までの2週間ほどで修正しました。

（サービスロゴ：上が変更前、下が変更後）

柏木：それはギリギリのスケジュールですね。。サービスロゴの初期の候補案を見せてください。

大嶋：実は、皆さんが知っている「マネーフォワードクラウドシリーズ」のロゴが仕上がるまで、様々な検討を経て、今の形になっています。今回デザイナー陣へ話が降りてくる前に、ブランドチームの方で先行してロゴ案を作っていただいていたんです。しかし、「マネーフォワードクラウドシリーズ」はプロダクト数も多く、Webサービスのほか、家電量販店に並ぶパッケージ版や書籍、ネイティブアプリなど広範囲に展開を考慮しなくてはならず、初期ロゴ案では、その全てをカバーすることが厳しいという現実的な課題にぶつかったんですね。

（初期サービスロゴ案）

柏木：例えば、どのような問題が起こったんですか？

大嶋：初期案は、会社ロゴにサービス名を追加したというものでした。「マネーフォワード」にブランドを集約するというコンセプトは理解できるものの、会社ロゴは丸いシンボル部分と「Money Forward」のテキストに一体感がでるように絶妙に設計されているため、後ろに文章を追加するのを考慮されてないんですね。一見すると「マネーフォワード」ということは伝わるんですが、これが「クラウド会計」というサービスであることが伝わりづらかったんです。一般的に、サービスロゴは「サービス名を瞬時に伝える」という役割があります。サービスが自然と認知できたり、どのようなプロダクトかを誤解なく理解できたり、見た瞬間に何であるかわかること、ですね。それから、「機能性」や「視認性」も満たさなければなりません。Webアプリや印刷物などあらゆる用途で使用できたり、展開しやすい、レイアウトしやすいことも重要ですし、また私たちのサービスは若い方だけはなくご年配の方も利用されますので、視認性の高いデザインであること、などがポイントになってきます。

柏木：この青色を変更した理由は何ですか？

大嶋：初期案は、会社名がサービス名より濃いため、肝心のサービス名が目立たなくなっていました。瞬時に目がとまるのは最も濃いカラーの「Money」部分。このままだとサービスを伝えるためのロゴとしては不十分です。またロゴは、社内のデザイナーだけでなく外部の協力会社さんにもお渡ししたりと、自分たちの手を離れてしまうものでもあります。社内であれば、徹底したガイドラインによってアウトプットを均一化することができても、それをすべてコントロールするには限界があります。そのため、どんな条件下にあってもブランドの持つ印象がブレないように、明快な色で再現しやすく、かつインパクトのある青色をDICカラーという色見本帳から選びました。

柏木：カラーってとてもたくさんあるんですよね。その中から選ぶときに、デザイナーはみなさん意見が一致するものなんですか？

大嶋：実は、一定の基準を設けていました。「視認性を担保するためにコントラスト比が高いもの」で、「競合他社を強く想起させるようなカラーは避ける」などを考慮して、現在の青色に落ち着いた感じですね。

柏木：そういう時に青山さんがサンプルを当てはめていくんですよね。

青山：そうですね。当てはめたものを見て、意見を交わしましたね。

大嶋：色はデザイナー同士の合議で選定しました。「一番それっぽいよね」というカラーを、10人くらいで話し合いましたね。

柏木：紙に印刷してみんなで見るんですか？

大嶋：もちろん紙にも印刷するんですが、社内のプリンターはシアン（やや緑がかった明るい青）が強く出てしまうんですよ。そのため、印刷上でなんとなく確認した後は、カラーチャートを見ながら話し合いました。

柏木：それ以外に、カラー選定のポイントはありますか？

大嶋：ブランドは、ロゴ単体でブランドイメージが伝わるのではく、色々なシーンを通して初めて理解されるものだと思います。徐々に「〇〇っぽい」と覚えてもらえるというか。初期案は4色設計ですが、色数が多くて展開する際に散漫な印象になってしまうんです。そのため、より記号的に利用でき、また面で立ち並んだ際のことを考えて、最終的にこのカラーにしました。

柏木：ちなみにこのグレーの色はどのように決めたんですか？

大嶋：例えば、このロゴを白黒印刷すると、サービス名部分は完璧な黒ではなく少し濃いグレーになります。真っ黒だと、「Moneyforward」のカラーと合わせたときに悪目立ちしてしまうので、スっと読めるように明度の調整を行なっています。モノトーンだけど、薄すぎず濃すぎもしないという、ちょうどいいところを選びました。

柏木：めっちゃおもしろい！誰も知らないところで、いろいろな調整をしてくれていたんですね。

大嶋：実は今回、サービスロゴの字形も変えています。「Money Forward」は「Futura」というフォント、MFクラウドのロゴは「ヒラギノ角ゴシック」という日本語フォントを基礎にして字形が作られていました。この２つの異なる字形をそのままくっ付けるだけでは、相性が悪いため、本質的には、「Money Forward」に合わせたクラウドシリーズの字形を作る必要がありました。しかしまったく別のフォントに変更してしまうと、パッケージ版で購入する方などが「マネーフォワードクラウドシリーズ」であると認識できなくなってしまう危険性があったので、変更前の「MFクラウドシリーズ」の持つ印象は残しつつ、「Money Forward」に馴染むように、細かく全ての字形を作り変えたんです。

柏木：ロゴの頭にある丸いシンボルも、少し小さくしていますよね？

大嶋：その通りです。0.0数ミリの単位で細かく調整しました。

柏木：なんだかとても時間のかかりそうな作業ですね。。

大嶋：かかります。私たちの普段の仕事は、WebAppの情報設計やUI制作などで、純粋なグラフィックデザインからは遠いんです。でもたまたま、私は美大でタイポグラフィを学んでいたり、青山さんも美大出身だったり、自分でフォントを作っちゃうデザイナーもいたりして、バックグラウンドにグラフィックデザインがあるメンバーが社内にいたからできた業務だと思います。もし、私1人だけだったら、字形バランスの判断が難しかったと思います。青山さん、文字組とか学んでおいてよかったって思ったでしょー（笑）

青山：カー二ングやりまくっててよかったです（笑）文字と文字の幅を調整する作業のことですね。

柏木：「これがベストだ！」っていうバランスはどのように判断するんですか？

大嶋：印刷したものを複数人でチェックするしかないですね。2人でちょうど良いバランスを話し合って調整しました。

青山：そのうち目が慣れてきて、何が正しいかがよくわからなくなってきたりしましたが。。

大嶋：人間の目に錯視が起こることを前提に、サービスロゴの字形自体もその錯視を加味した上で、正しく見えるよう計算してつくられているんです。それを変更しようとすると、元々読めていた文字が認識できなくなるということが起こりうるんですね。そのため、フォントを少しだけ修正するのって、実はすごい大変なんですよ。

柏木：「マネーフォワード ME」のオレンジの方のカラーも変更したんでしたっけ？

池内：そうですね。印刷用だけ変えました。

柏木：印刷用って普通用のものと違うんですか？

大嶋：違うんです。この「Money Forward」のオレンジは元々Web用につくられたもので、先ほど説明したシアンという色が入っているんですね。このシアンが入っていると、Web上では問題ないのですが、印刷したときにインクが滲んで色がくすむんです。そのため今回は、シアンを０にして、明るく鮮やかな赤紫色であるマゼンダとイエローだけでオレンジの設定をしました。それから、視覚障がいがある方でも見やすいよう、アクセシビリティにも配慮しています。そうした方々のためにコントラスト比をはっきりさせ、専用のカラーチェックツールを用いた検証もしました。

柏木：これ本当に大変ですね。すごく簡単なことだと誤解していました。。

青山：ちょっとやそっとではできないです。デザイナーの間でも、ロゴの制作ってかなり重い作業だと言われているんですよ。

柏木：ぜんぜん知りませんでした。みなさんのこうした苦労を経て、ロゴができ上がったんですね。これからはもっとロゴを大切にするようにします！

一同：（笑）

アプリアイコンの制作秘話

柏木：池内さんが携わったアプリアイコンの変更フローは、どのような感じだったんですか？

池内：私は普段は、自動家計簿・資産管理サービス「マネーフォワード ME」のアプリのデザインを担当しています。ブランドプロジェクトが立ち上がったという話を聞いて、まずアプリやAppStoreなどにどう影響するか調査しました。これまでは「マネーフォワード」というブランド名がそのままサービス名になっていたんですが、今回「マネーフォワード ME」と、新たに「ME」がつくことになりました。ブランドに対する立ち位置がこれまでと変わったため、マネーフォワードブランドのアイコンそのままをアプリアイコンとして使うわけにはいかないという結論に至りました。ブランド作戦室から当初あがってきたアプリアイコン案もあったのですが、ホーム画面以外の通知や設定アイコン、AppStoreやGoogle Play Storeなどでの見え方が、あまり考慮されていないものでした。そこで、別のアイコン案を作る必要が出てきたのですが、私を含め社内のデザイナーで制作するリソースがなかったため、外部のデザイン会社に発注することとなりました。

柏木：デザイン会社は決まっていたわけではなく、その選定から始めたんですよね？

大嶋：今回は決まっていませんでした。3社ほど検討したのちに、着せ替えキャラクターのChappie（チャッピー）で有名なgroovisionsというデザインスタジオへお願いすることが決まりました。マネーフォワードとしてはお付き合いがなかったのですが、2011年あたりにギンザ・グラフィック・ギャラリー（ggg）で開催されていたgroovisions展がとても印象に残っていて、いつかは仕事をお願いできたらと個人的に思っていたんです。それで、今回アプリアイコンを外部の方にお願いするという話になった際に、真っ先に名前を出してしまいました。

池内：発注するにあたって、既存サービスのコンセプトやターゲット、スケジュールなどをまとめたプロジェクト概要資料を作成して、デザイン会社に制作をお願いしました。同業他社との差別化の意図も伝え、ある程度NGの例示も出しつつ、あとは先方の裁量にお任せしましたね。デザイン会社からアプリアイコン案が上がってきたときは、いきなりハイクオリティな案が16もあってびっくりしました。これはその中の案のひとつです。

柏木：この案もかっこいいですね！でもあんまりマネーフォワードって感じじゃないかも。

池内：私達デザイナーはブランディングでサービス名も変わるので、このくらい攻めてみてもいいかと考えていました。そしてデザイナーとしての意見をまとめて、辻さん潤平さんと話し合ったのですが、お二人の中で現在のマネーフォワードのイメージを残したいという思いが強く、元のイメージを残したアイコンにするという結論になりました。それを踏まえてあらためてデザイン会社に案を作成していただきました。新しい案はどれもグラフィックとしてクオリティが高いだけでなく、元のイメージを残すという点も見事にクリアされた素晴らしいものばかりで、私も一人のデザイナーとして感動しました。

柏木：こんなにたくさんある候補から、どのようにして選定するんですか？

池内：辻さん潤平さんの「現状のデザインから遠くないもの」という要件と、私達社内のデザイナーが新しく別のアプリアイコンを作る時を考えて、「社内で運用しやすいもの」という2つを基準に、最終的にこのグラデーションのアプリアイコンを選定しました。

（アプリアイコン：左が変更前、右が変更後）

大嶋：「マネーフォワード」にブランドを集約していくというコンセプトがありながら、それをどういう表現にしようという議論になったのですが、やはり主力のサービスである家計簿のイメージに利用されていた「M」のシンボルを基準にして、その「M」を中心に他のサービスも展開していこうという方針に決まりました。「マネーフォワードクラウド会計」や「マネーフォワードクラウド経費」といった具体的な形がないサービスブランドについては、「クラウド＝雲」、「経費＝レシート」などのイメージで表現しました。「ICカードリーダー」は、カードという物理の形があるので、そのままカードのモチーフをアイコンに選びました。

柏木：このグラデーションのアイコンも、ロゴと異なるカラーなんですよね？

池内：ブランドカラーをそのまま使うことよりも、ホーム画面やAppStoreなどで他のアプリと並んだときの見栄えを優先してほしいとデザイン会社にお願いして、制作していただきました。

大嶋：実は色彩の相互作用の関係で、まったく同じ色でも、背景の色によってはくすんで見えることもあるため、ホーム画面上で一番映える配色をデザイン会社に指定してもらいました。

柏木：グラデーションのアプリアイコン案は、みなさんが賛成して決まったんですか？

池内：辻さんや潤平さん、私達社内のデザイナー、ブランド作戦室のメンバーで話し合い、満場一致で決まりました！

今だから言える、展開用データ作成の苦労話

柏木：それでは、今回のプロジェクトで一番大変だったことは何ですか？

池内：アプリアイコンのコンセプトについて、辻さんと潤平さんとの認識のすり合わせが途中からになってしまったので、時間がかかっただけでなく、デザイン会社側にも迷惑をかけてしまいました。初めからできていればと反省しました。

青山：私たちは、サービスロゴを制作しているときが一番つらかったですね。

大嶋：そうですね。繊細な仕事を複数人、かつ短期間で進めなくはいけなかったのが大変でした。今回、印刷物、webサイト、WebAPP、iPhone、Androidにロゴを展開したのですが、デザイン案は全て一緒でも、それぞれのデバイス毎に最終データを用意する必要がありました。俗に言う、デザイン案はあるけどデザインデータがない状態。例えば、Photoshopにイラレデータをスマートオブジェクトで配置して拡縮すると、ロゴが劣化する（解像度ベースになる）んです。そうした状況に対応するため、ロゴを綺麗に再現できるよう、中間データのSVGをデザイナーに配布して一括作業を行なったりしました。そしてSVGって扱いが非常に難しいんです！小数点を削ったりすると同じ形を再現できなくなったり…そういうミスが起きないように、作業の段取りを考えたりしてました。本当に気の遠くなるような作業で…しかし、この手の実務はデザイナーしか見えていないので、社内からは「もうデザイン案あるようなので、デザインデータをください」って言われ「いやちょっと待って、まだこれからだから」、っていうやりとりをしていましたね。

柏木：そんなに大変なことをやっていたなんで、まったく知りませんでした。。本当におつかれさまでした！

自らが手がけた制作物に対する想い

柏木：それでは最後の質問です。今回こうした苦労の上につくり上げたサービスロゴやアプリアイコンに対する想いを教えてください。

池内：私も含めてマネーフォワードでサービス開発をしているメンバーは、自分たちのサービスが本当に好きなんです。自分たちも誇りに思えるようなアプリアイコンにしたかったので、ユーザーのみなさんにも私達の気持ちが伝わればいいなと思います。

青山：このサービスロゴの変更に自分がかかわったことを、将来にわたっても自慢したいです。会社から世に出ていくものですので、「きちんとしたものでなきゃ」という使命感のような気持ちです。

大嶋：グラフィックの世界は際限がなく、クオリティを追求しようと思えばどこまでもできてしまいます。しかし実際は、デザイナーだけのこだわりではできないことも、往々にしてあります。例えば、会社側の要請やデータの制限、チームのリソースなどにより、どこかに折り合いをつけなければなりません。そうした制約の中で、事業会社のチームとして何かをつくり上げていく楽しさは、本当に良い経験になったと思います。

柏木：ええ話や。。みなさん、できあがったサービスロゴやアプリアイコンに満足しているようですね！

一同：（強くうなずく）

柏木：それはよかった！本日はお時間をいただきありがとうございました。