デザイン インタビュー

ペパボデザイナー巡り、ムームードメインをデザインするふたり

デザイン インタビュー

こんにちは。デザイン戦略チームでシニアデザイナーをしている 咲 @satosioです。

デザイナー巡り2回目の連載として、今回はペパボ福岡オフィスで働いているデザイナーに、「ムームードメイン」の大規模リニューアルをどのように行ったのか、プロセスやデザイナーの分業体制についてお話を聞いてきました。

デザイナー巡り過去記事

今回のデザイナーは、このお二人です。

プロフィール

ドメインサービスとは「入り口」になること

2004年にサービスを開始したムームードメインは、2018年8月20日に生まれ変わりました。サイトやロゴなどの見た目はもちろん、サービスとしてどうあるべきか、一からリデザインされています。

リニューアル前 リニューアル後
リニューアル前トップページ リニューアル後トップページ

── いつごろリニューアルをしようという話になったんですか?

よしろーさん:2017年の上期にキックオフがありましたね。

── 最初はよしろーさんがアサインされていて、途中からひさとめさんもジョインしたんですよね。

ひさとめさん:11月に入ったときには、いろんな調査が終わって、ペルソナカスタマージャーニーマップの作成、ミッション・ビジョンが決まってましたね。どういう方向性で行くか決まったタイミングだったかな。

よしろーさん:はるなさん(シニアデザイナー)とディレクター陣、エンジニアやカスタマーサポートの主要メンバーの、全職種が関わって決めましたね。

── ミッション・ビジョンってどうやって決めたんですか?

よしろーさん:事前に、ユーザーさんや市場の調査をしていたので、そこで決めたユーザーストーリーとかペルソナを頭に入れて「ユーザーさん」像がわかっている状態だったんですよね。そこで「では、ムームーはどうあるべきか」っていうのを考えて、ミッション・ビジョンを一人2,3案だして投票を行いました。

ミッションとビジョンを張り出した

── そこで決まったのが以下の、

ミッション 「インターネット上のすべての自己実現の入り口となる」
ビジョン 「わたしたちは、ドメインを簡単・快適に取得できるドメイン総合サービスを提供し、誰もがインターネットで夢を実現できるように導きます」

── ですね。「入り口」っていうのはどういうことを指しているんですか?

話すよしろーさんの写真

よしろーさん:サイトを作る人にとっての、自分が「今からやっていくぞ」という入り口と、サイトに来る人にとっての「見る」ための入り口ができます。あとはロリポップ!とかカラーミーショップなど、ペパボの他サービスにつなげるための入り口という役割ですね。

ひさとめさん:ペルソナとしては美容師さんや制作会社さんですね。自分の事業とかの目標を達成するっていうのが自己実現の入り口になるんじゃないかな。

貼れるロゴ、着られるロゴ

── デザイナーの作業としては、まず何から作り始めたんですか?

ひさとめさん:ロゴですね。

ムームードメインロゴのリニューアルbefore after

── みんなでロゴ案を作って貼ってるissueがありましたね。今回のロゴが採用された決め手はなんだったんですか?

ひさとめさん:モックアップが良かったのかなぁ。ロゴをバナーやTシャツにしたときの、みんなの反応がよかった。

── ロゴをこう使うっていうのがイメージできたと。

ひさとめさん:ちょうどペルソナとして作った人物が男性で、自分たちの世代(30〜40代)で、モックを見たときに「自分はそのステッカーを貼れる」「そのTシャツを着られる」という確信があったんですよね。これがもし10代向けのサービスだったら、自分とかけ離れていてこんなに確信が得られなかったかも。

ロゴ決定のプロセス

── この形はどこからきたんですか?

ひさとめさん:左下から、丸がつながっていく形。元のロゴも全体的に丸みを帯びていたので、それを残しつつデフォルメした感じ。

ロゴ作成のプロセス

── ロゴまではデザイナー全員でやっていたんですね。そこから分業になったんですか?

ひさとめさん:まだ次の段階も、基本的には二人で同じことをやっていたかなぁ。方針とか構成決めのミーティングをして、コア機能になるドメインの検索画面を考えたりとか。ユーザーインタビューも一緒に行ったしね。

ユーザーインタビューでトップページを検証する

── おお〜、ユーザーインタビューに行ったんですか。

ひさとめさん:トップページと検索機能に時間をかけたくて。

よしろーさん:トップページの構成は3,4パターンのデザインモックアップをつくってProttで動くようにしてインタビューに行きましたね。最初は社内にいる2人に聞いて、その後ひさとめさんの友人の美容師さんとディレクターの大学の同級生で制作会社の方、あとはフリーで制作をしている方に聞きました。

モックをみせたひさとめさん

── モックを見せたときの反応はどうでした?

ひさとめさん:好むテイストは想定していた通りだったかな。美容師と制作会社で見た目の好みはバッサリ分かれちゃった。

── どういうふうに分かれたんですか?

ひさとめさん:3パターンのトップページを作ってて、A案は構成案どおり、B案はシンプルに検索フォームをメインにどんと置く形、C案は美容師さんの写真をどんと置いた感じで、

ABC案

ひさとめさん:制作会社さんはB案で、美容師さんはC案。リニューアルしたトップページはB案がベースですね。

── B案をベースにした理由があるんでしょうか。

ひさとめさん:やっぱり写真は、ビジュアルが良くて好まれやすいんだけど、利用者のイメージをつけすぎてしまうのかなと。好まれるで判断するならC案だけど、「使う」で考えていた制作会社さんの意見が参考になりました。

── インタビュワーはどなたが?

よしろーさん:交代制でした。インタビュワーと録画書紀係ですね。ひとりが聞いて、ひとりが観察をする。

── ユーザーインタビューするの初めてだったって言ってましたね。

ひさとめさん:準備をけっこうしましたね。ユーザーインタビュー入門とか、ロリポップ!でやっていたユーザーインタビューのissueを読んで。あとは質問内容に時間をかけました。

よしろーさん:最初に社内向けに行ったのが、社外向けのテストにもなってよかったですね。

認識の違いと決定の難しさ

KPIについて話す2人

── 調査が終わって、実作業が進んできました。その過程で難しかったことってありました?

よしろーさん:やっぱり決めの問題ですかね。みんな職種としてのバックグラウンドが違うから、こうあるべき、みたいなのが各々違う。

ひさとめさん:言葉や決定する項目に対して、それぞれの認識が違ったまま始めちゃったりとか、これでいいんだっけ?というふわっとした感じで決定しちゃったり。

── 決定に自信がもてない感じでしょうか。

ひさとめさん:見た目のデザインや広告とかは、ペルソナとミッション・ビジョンをもとに決定ができるけど、KPIとかって僕らの中の話なので基準がむずかしい。

── そういうの、デザイナーも判断できるようになるべきなんでしょうか?

よしろーさん:なるべきだなーとは思う。でも作業もやっていたから目線も狭くなっちゃってて、数値のことになると頭がふわっとする…

── どういうことをKPIにするんですか?

ひさとめさん:例えば、ミッション・ビジョンに関連するところだと、ペパボのサービスの使用率とかかな。

分業することで妥協がなくなる

── なんというか本当にお二人はナイスコンビでしたよね。自分が任された業務を自信を持って遂行できているからかな。

ひさとめさん:デザインとコーディングを両方やっているときの「コーディングめんどくさそうだからこのデザインやめよう」みたいなストップがかからなくなるのが良かったかも。

よしろーさん:自分一人だったら指摘しないなというところとかあるよね。

ナイスコンビなふたり

ひさとめさん:終盤のクリエイティブチェックも、コーディングまで自分がやってたらチェックに出さない部分があったかも。

よしろーさん:アプリのデザインとかだとデザイナーとエンジニアで完全に分業するだろうけど、Webだとデザインもコーディングも、やろうと思えば自分1人でやれることを、あえて2人で分けたからうまくいったんだと思う。

── 両方の領域をやれることが前提なんですね。やりたくないから分業、できないから分業っていうのは無責任になりそう。

ひさとめさん:よしろーさんが基盤をしっかりやってくれているので、変にちらからないし。

チームでつくるという意識

── 今回のリニューアルで「サービス」をデザインする機会になったと思うんですが、なにかチームで見えたことってありましたか?

よしろーさん:「チームで決めるべきこと」を決めるのって大事だなと。ミッション・ビジョン・KPIとか。大変だったけど、サービスがこうあるべきとか、みんな数値を見ないといけないねとか、それがチームに芽生えたのがよかった。最初から職種ごとの領域が決められているんじゃなくて、その職種じゃないとできないタスクが自然に生まれた。

ひさとめさん:デザイナーも全体をよく見ないといけないなというのがわかった。サービス設計、広告、ビジネス視点、ほぼ全部のミーティングに出て、そのへん全部に関われたのはよかった。

── 普段関わるデザイン面以外にも、サービスに必要なものってたくさんあるんだなって思いました。

ひさとめさん:チームのみんながどういう考えでやってるか、カスタマーサポートからの意見やディレクターからの意見を聞いて、それをデザインに落とし込めたのもよかったですね。

ムームードメインの今後の展望

── 他社のデザイナーさんがTwitterでムーの新しいロゴ良い!言ってましたよ。

ひさとめさん:そういうの聞くとうれしいですね。

よしろーさん:ムームーのリニューアルに対して、おめでとうございますというツイートを何件か見たなぁ。

── リニューアル後、ユーザーの行動に何か変化はありましたか?

ひさとめさん:今まで取られなかったドメインが取得されることが増えましたね。検索しやすくなったことで、今まで埋もれてしまっていたドメインが、目に留まるようになったからじゃないかと。

── 今後の展望というか、まだ残タスクがありそうな気配をissueから察知したのですが、まずは何からしていく予定なんでしょう?

ひさとめさん:いっぱいありすぎて、どこから手をつけていくか…。広告のやりかたとか、Instagramの運用とか、ちゃんとやっていこうっていうの話してますね。

よしろーさん:あとはコントロールパネル。検索のところももっと強化したい。

よしろーさん

── 単純なUI改善でも、さらによくなるところはたくさんありそうですね。

よしろーさん:コントロールパネル改修にも時間がかかってしまいそうなんですが、連携サービスの強化とかもやっていきたいんですよね。

ひさとめさん:決済の動線とか、取得完了までの時間を短くするとか、そこはもう改修の予定が入ってて、その改修後からいろいろ見えてきそうな予感がある。

ふたりが思い描くこれからのデザイナー像

── いきなりですが、今後の人生というか、デザイナーとしてやっていきたいことってなんでしょう。

よしろーさん:デザイナーとしては、コードとか技術的なところを中心に特化していきつつ、サービスや体験をデザインするところを強化していければいいなと思っています。

パソコンで作業するよしろーさん

ひさとめさん:今後のデザイナーとして生き残るためには手を動かすよりかは、サービス全体のことを考えていかないと生きていけないなと。ビジュアルデザインよりもサービスデザイン

── 調査の段階とかサービス設計を考える、いわゆる見た目のデザインに入る前の段階ですね。

ひさとめさん:あとは運用の方法ですね。そこにデザイナーとして関わっていく。全体の設計が事前にデザインできていれば、それに合わせた見た目をつくるだけでよくなる。サポートまわりとか、どうやったらわかりやすいマニュアルになるかとか。

パソコンで作業するひさとめさん

── ムームーを作ったあとの育てる視点ですね。

よしろーさん:今までやってきたものを、そのまま良いものとして見ちゃったりとか、この数値はこうあるべきだみたいな考え方が更新されてなかったりとか、サービスとして数値がマッピングできていなかったりとか。そういうところをちゃんと意識していきたい。

── 今までよりも広い視点が求められていますね。

ひさとめさん:デザイナーは手を動かすだけでは、やりたいことができなくなってしまう。ビジュアル作成やコーディングはAIがやってくれるようになるし、「こうしたい」っていう司令を考えるのがデザイナーになるのかな。

──

以上、ペパボの福岡オフィスで、ムームードメインを支えている2人のデザイナーのインタビューでした。これからのムームードメインにご期待ください!