『みてね』のビジュアルガイドラインができるまで。その背景とプロセスを聞いた
こんにちは。
MIXI デザイン本部 デザイナーリレーショングループです。
『家族アルバム みてね』（以下、『みてね』）では、誰もが『みてね』に関するデザインを高品質に、効率的に行えるように、また一貫性のあるユーザー体験を提供するために、デザインコンセプトやロゴ、カラー、写真に関するガイドライン、各種 UI コンポーネントを取りまとめたデザインシステムを運用しています。
デザインシステムのなかでもビジュアルガイドラインの策定を主導したのが、ビジュアルデザインチームの4名です。
今回は、チームを代表してプロダクトデザイナーの松本さんに、ビジュアルデザインの指針を定義するに至った背景や、デザインコンセプトの策定に向けた取り組み、工夫した点などについて詳しくお話を伺いました。
松本美優（まつもと みゆう） みてね事業部 プロダクトデザイナー
2018年10月にプロダクトデザイナーとして新卒入社。
当初より希望していた『家族アルバム みてね』の事業部に配属され、プロダクトデザイン業務全般を手掛ける。
2021年、イラストやグラフィック表現における課題を解決すべく「イラストガイドライン」を制作。デザイン業務にとどまらず、『みてね』のブランディングにも大きく貢献。
『みてね』らしいクリエイティブとは何か？
——『みてね』は今年で9周年を迎えますが、このタイミングでビジュアルデザインについて議論することになった経緯を教えてください。
以前から『みてね』にはデザイン原則が存在していましたが、その表現がやや抽象的であり、共通のイメージや「らしさ」を想起させる点に課題がありました。
また、サービスの成長に伴ってデザイナーの数が増えたことで、新しく加わったメンバーや外部パートナーが「らしさ」の理解に戸惑う場面も少なくなく、誰もが『みてね』らしいクリエイティブを制作できる環境を整える必要があると感じていました。
そのような背景から、「『みてね』らしいクリエイティブとは何か？」を改めて考え始めたのがきっかけです。
——どのような流れでビジュアルガイドラインを策定していったのでしょうか？
まずは、私を含めた『みてね』のデザイナー4名でビジュアルデザインチームを結成し、「『みてね』とはどのような存在なのか？」というテーマから議論を始めました。
そのまま4人で全てを決定することも可能でしたが、現場の全員と一緒に作り上げ、浸透させていきたいという強い思いがあったため、ビジュアルデザインワークショップと題して全員参加型の「パーソナリティを考えるワークショップ」や「デザインコンセプト浸透ワークショップ」を企画しました。
『みてね』に関わるデザイナーが一堂に会し、楽しみながらビジュアルデザインを検討していけるようにと考えたのです。
『みてね』のブランドパーソナリティを言語化してデザインコンセプトに落とし込む
——1つ目の「パーソナリティを考えるワークショップ」の目的と内容について教えてください。
このワークショップのネーミングは「パーソナリティを考える」としていますが、実際の目的は考えたパーソナリティをデザインコンセプトに落とし込むことにありました。ワークショップの実施やビジュアルデザインチームでの議論を繰り返しながら、丁寧にこのプロセスを進めてきました。
まずは、ブランドやブランドパーソナリティに精通した方を講師として招き、勉強会を行いました。参加メンバーの知識量には差があったため、「なぜブランドパーソナリティが重要なのか？」といった基本的な考え方を学び、全員の理解を深めることを目指しました。
その後、メンバーを数チームに分けて「『みてね』のデザイナーが考えるブランドパーソナリティとは？」について話し合う時間を設けました。
実際に話し合ってみると、多くのキーワードが飛び出し、とても興味深いディスカッションが展開されました。
『みてね』は、優しさや明るさ、人当たりの良さなどが特徴的ですが、これらをいくつかのカテゴリーに分類し、「その言葉はどこから生まれたのか？」「『みてね』のどの部分から感じ取れるのか？」を掘り下げて議論しました。
例えば、「わかりやすさ」というキーワードに対しては、『みてね』が提供する絞り込まれた情報量や、考えなくても理解しやすい点などを具体的にイメージしていきました。
最終的には「シンプル」「心地よい」「思いやり」「心あたためる」という4つの軸を定め、それぞれの軸に基づいて各チームでブレストを行い、『みてね』のブランドパーソナリティを言語化していきました。
さらに、この4つの軸に対して「ムードボード」を制作しました。
それぞれの軸に適した雰囲気を表現する写真を用い、視覚的に理解しやすいように工夫しました。
最終的に、コピーとムードボードを組み合わせたものがデザインコンセプトとして完成しました。
言葉だけでは受け取り方に個人差が生じることもありますが、視覚的な情報を追加することで、共通認識が持ちやすくなったのではないかと考えています。
——ワークショップ参加者からは、どのような感想が寄せられましたか？
事後のアンケートでは、「パーソナリティとは何かが理解できた」「とても勉強になった」「こういった考えるきっかけがあるのは良い」といったコメントが寄せられました。全体的に高い満足度が示されており、非常に良い結果になったと感じています。
また、みてね事業部ではリモートワークが主流の中で、ワークショップが直接顔を合わせる機会となったことも良かった点です。
これまで、デザイナー全員が一緒に何かを考える場があまりなかったので、新しい刺激を受ける貴重な時間になったのではないかと思います。
「デザインコンセプト浸透ワークショップ」で浸透＆理解を深める
——2つ目の「デザインコンセプト浸透ワークショップ」の目的と内容を教えてください。
デザインコンセプトが完成したとはいえ、それをそのままデザインチームに共有するだけでは、真に浸透することは難しいと感じました。
そこで、「デザインコンセプト浸透ワークショップ」を開催し、理解を深めるだけでなく、実際の業務でどのように活用すれば良いのかを具体的な事例を通じて伝えることにしました。自分が担当する業務において、どのように『みてね』らしさを取り入れるかを考える機会にしたいと考えたのです。
具体的な内容としては、チームに分かれて、『みてね』の公式サイトをデザインコンセプトと照らし合わせながら改善点を洗い出していくというものでした。
チームごとに「シンプル」、「心地よい」、「思いやり」、「心をあたためる」の中から1つのテーマが与えられ、その視点でアイデアを出せるように工夫しました。
改善点は付箋に書き出していったのですが、多くの意見が出ました。
例えば、「シンプル」を担当したチームからは、「ここは文字量が多いので、もう少し減らせないか」「機能の見せ方が分かりにくいので、工夫が必要ではないか」といった意見が挙がりました。
——改善点が多く出るように工夫したポイントはありますか？
いきなりアイデアを出してくださいと言っても難しいかもしれないと思い、改善点を考える上での4つの軸ごとの「ヒント」を用意しました。
例えば、「シンプル」の場合は「情報が明瞭に整理されているか」「ユーザーが必要な情報をストレスなく見つけられるか」といった視点を提示しました。
このように具体的な観点を示すことで、参加者が取り組みやすくなり、多くの改善アイデアが生まれたのではないかと思います。
デザインコンセプトをもとに、ビジュアルガイドライン作成に着手
——さらに、ビジュアルデザインガイドラインも作成していますが、その目的は何ですか？
「らしさ」の一貫性を保つためには、ベースカラーやサブカラー、フォント、アイコンやロゴなどの共通ルールが必要不可欠です。
一方で、それらのルールを使いどのようなビジュアル表現をすべきかについてはデザイナーの経験や感覚に依存する部分が大きく、曖昧な認識に基づいて作業が進められることが多々ありました。
そこでデザインコンセプトを明確にし、ビジュアルデザインガイドラインを定めることで、表現のばらつきや一貫性の欠如を防ぎたいと考えました。
——具体的には、どのような取り組みを行ったのですか？
まず着手したのは、「写真」に関するガイドラインの制作です。
『みてね』では、家族アルバムというサービスの特性上、お子様の写真を多く使用していますが、その写真選択基準が曖昧であることが課題となっていました。
そこで、使用する写真の基準を明確にするため、アジア圏や欧米圏などのエリアごとに適した写真の定義や、人物の表情、服装、ポーズの定義を推奨事項と禁止事項として具体的に設定しました。これにより、デザイナーが迷わず写真を選択できるようにガイドラインを整理しました。
このガイドラインは、『みてね』に関わる社員や外部パートナー、広報担当者などがアクセスできるデザインシステムに追加・公開されました。これにより、誰もが迷わず、効率的かつ高品質な『みてね』らしいビジュアルデザインを一貫して実現できる体制を整えることができました。
さらに、現在進行中のプロジェクトとして、「カラー」と「グラフィックエレメント」の検討を行っています。
ビジュアルデザインチームを中心に、「ブランドカラーとは何か？」「『みてね』らしいグラフィックエレメントとは何か？」というテーマでブレストを進めています。
さらに浸透を図り、『みてね』のブランディングにつなげていきたい
——デザインコンセプトの策定とビジュアルガイドラインの作成によって、どのような変化を感じていますか？
少しずつ浸透している実感があります。
外部パートナーがデザインコンセプトを参考にしたり、ガイドラインを見ながら写真選定を行ったりするケースが増えてきており、それを耳にするたびに嬉しく感じています。
——振り返ってみて、今回の取り組みで重要だったポイントは何ですか？
ビジュアルデザインチームとしては、まずは小さな取り組みから始め、少しずつ広げていくことを優先しました。課題を改善するためにも、一歩一歩着実に進めることを大切にしたのです。
一連の取り組みはブランディングに関わるため、本来であれば事業責任者を含めた部門全体で丁寧に進めるべきだという考え方もあるかもしれません。しかし、今回はビジュアルデザインという枠組みにフォーカスし、まずは『みてね』に関わるデザイナーとの共通認識を築くことに注力しました。
これからデザインコンセプトの策定やデザインガイドの作成を検討している方は、まずは小さな一歩から始めることを意識すると、取り組みやすいかもしれません。
——最後に、今後の展望について教えてください。
まだ全てが完成したわけではないため、今後もさらなるアップデートを進め、公式の場で『みてね』らしいビジュアルがますます使われる状態を目指したいと考えています。
これからは、さらにその浸透を図り、『みてね』のブランディング強化につなげていきたいと思います。
MIXIで働きたい！そんな仲間を募集しています
MIXIではコミュニケーションを一緒につくる仲間を募集しています。
くわしくはリクルートページをご確認ください。