DMMのデザイナーの村田です。

主に新規事業のサービスサイトのアートディレクションや、アプリの大規模改善に取り組んでいます。

今回は、コロナ禍でリリースしたオンライン展示会を開催できる新規事業「DMM オンライン展示会」の立ち上げにおいて、デザイン方針を固めて、メンバーを巻き込んで制作物した時のことをまとめたいと思います。

DMMオンライン展示会

新規事業や企画の立ち上げフェーズで、関わってくれるメンバーやデザイナーに対してつくりたいもののイメージや進め方をうまく伝えられず、アウトプットまでに時間がかかってしまうという課題はつきものですが、そのようなシーンを解決できる事例になればと思います。

今回取り組んだ新規事業は、サービスサイトやLP、イラスト、動画、ロゴなどをつくる必要があり、私以外に3人のデザイナーが関わるプロジェクトでした。

私が入ったタイミングで事業のモデルは固まっていたのですが、オンライン展示会というサービスをどのように提供しパッケージ化するかを模索しており、デザインの方向性を固める必要がありました。

また、遠方の事業所に所属していてリモートで関わる方も多かったので、基本的にオンラインで進める必要があり、コミュニケーションを工夫する必要がありました。

今回のプロジェクトでは、まずデザインの方向性を固めつつ、その後手を動かす人がどうつくりやすくなるか?を考えてコミュニケーションしていきました。

デザインの方向性を固めるためにも、まずはサービスのポジショニングから確認していきます。

新規事業のデザインは、闇雲につくり出してもうまくいきません。市場の中で空いているポジションがどこなのかを確認し、サービスの色をつくる必要があると考えました。

この時行ったのは、類似するサービスを温度感で分類し、空いているポジションを確認することです。

事業部からの要望をヒアリングした上で「イメージスケール」というフレームを使って、類似するサービスを「暖かい ⇆ 冷たい」「柔らかい ⇆ 硬い」の4象限のどこに位置しているか分類しながら、市場で空いているポジションを確認していきました。

「イメージスケール」を使って類似サービスが位置していないポジショニングを見極める

「イメージスケール」を使って市場で空いているポジショニングを確認することで、闇雲にパターンを発散せず、事業としても成立するデザインの方向性をパターンとして出すことができます。

事業部へのヒアリングとイメージスケールでの整理を通して、4つの方向性が見えてきたので、それぞれデザインの方向性が想像できるようにムードボードをつくっていきます。

コンセプトや、関連するワード、カラーイメージ、メリットデメリット、雰囲気が近い画像を一箇所にまとめます。

4方向の軸で、事業判断が可能な状態になるように叩き(イメージボード)を作った

これらを事業部の決裁権を持っている人に見せながら、どの方向で進めるかコミュニケーションしていきます。

ムードボードを見ながら話していく中で、サービス全体ではどのような雰囲気を大事にしたいのかが分かってくるので、合意がとれたデザインの雰囲気も後から見返せるようにチャート形式で整理しておきます。

6つの項目で、今回のデザインはどの辺りの雰囲気でつくるのかの基準を可視化しながら合意をとった

今回は、「賑やか」「どちらかというとビジネス」「大人」「ユーモア」「どちらかというと柔らかい」「どちらかというと親しみがある」という基準で進めることが決まりました。

雰囲気についても可視化したことによって、事業部の決裁者にも合意をとった上でデザインの方向性を固めることがスムーズに行えました。

このような可視化を通して、最終的にデザインの方向性が1案にまとまり、その方向性で進めることになりました。

最終的に決定したデザインの方向性案

デザインの方向性をムードボードやチャート形式でつくるだけでは、ビジュアルを作ってもらうデザイナーにとっては情報が足りません。

今回は、関わるデザイナーが多かったこともあり、自分がコミュニケーションしなくても、同じ方向を向いてクリエイティブが自然とつくられるような仕組みを作る必要がありました。  

そのため、固めたデザインの方向性をもとに、イラストやロゴなど、制作物ごとにどんな雰囲気で作って欲しいのか、逆にどんな雰囲気は好ましくないのか?をまとめて、Figma上に残していました。

制作物ごとにどのような雰囲気でつくるかFigma上にまとめておく

ここで意識したいのは、つくる上でハマりそうな落とし穴は先に潰しておくことです。具体のイメージは伝えすぎず、良い方向性と今回マッチしない方向性を視覚化し、事前にすり合わせておくことで、安心して迷わず手を動かすことができるようになります。

例えば、イラストイメージについては、デザインの方向性から考えて「あまりにビジネスっぽさが出すぎるとズレる」「表情が見えないとクールに伝わりすぎてしまう」ということを意識して、今回はマッチしない方向性のイラストも合わせてまとめるようにしました。

イラストの方向性をデザインの方向性をもとに伝えた

また、ロゴについても、他社のロゴと比べてどのような雰囲気にしたいのかをポジショニングを4象限で整理することで、つくる自由度を残しつつ、大きく方向性から外れないように意識した形で共有しています。

ロゴについても、どのような雰囲気にしたいのかを他社のロゴと4章限で比較して伝えた

事業を一から立ち上げるときは基準となるデザインがないので、情報をまとめて制作物ごとに方向を示しておくことで全員迷うことなくつくりやすくなります。

さらに、メンバーが迷わずつくれるようにする目的で、制作物の意思決定プロセスも整理してまとめていました。

制作フローにおいて誰がどのように意思決定するのかを可視化してコミュニケーションを取りやすくした

大きな規模のプロジェクトでは、途中からデザイナーがアサインされたりメンバーが入ったりすることもあるので、そんな時でも「ここさえ見れば自発的に動ける」という場所を用意しておくのが大事だと思います。

チームの誰を巻き込んだら意思決定が進むよ、というのを分かりやすくして、ディレクションをしなくてもメンバーが自分から進めることができるようにしようと思い、意思決定プロセスを可視化しました。

結果として、途中のやり取りでもデザイナーが自分でFigmaをみながらデザインの方向性をキャッチアップして、自分で進めていくことができるようになりました。

メンバーから共有されるデザインも方向性に沿ったものが生まれるように

また、メンバーからもプロジェクトに関わりやすくなったという声をもらっています。

制作フローを可視化したことで、後から入ったメンバーもプロジェクトに関わりやすく

このような仕組みで、コミュニケーションコストを減らしつつも、同じ方向性をむいて制作できる体制を実現しようとしています。

つくるものの全体像やコンセプトを整理したり、メンバー間でコミュニケーションを取りやすくなるようにつくるプロセスを可視化していくことで、みんなが迷わず手を動かしやすくなります。

自分としては、事業に関わる1メンバーとしてみんなを助けるような気持ちで取り組んでいます。情報を取りまとめていくことも、コミュニケーションを円滑にすることも、すべて事業全体のものづくりを進めやすくなることに繋がります。

アサインされたからただ自分の担当している範囲に取り組む、というだけではなく、アサインされたからには事業にどっぷり、広い視野で入っていくのが大切だと思います。

今後も、みんなが制作しやすい体制づくりに取り組んでいきます。

このデザイン組織をもっと知る