Ctrlx共同開発のプロセスをたどる──ｍｓｈとグッドパッチが挑戦する共創型デザイン

アイメイクブランド「ラブ・ライナー」やミネラルコスメブランド「タイムシークレット」を展開するｍｓｈ株式会社とグッドパッチは、デザイン共創によって新たなコスメブランド「Ctrlx（コントロールバイ）」を立ち上げました。

「Ctrlx」の第1弾は、悩みや色味に合わせてパーソナライズドされたアイバームとコンシーラーのセット。ｍｓｈ公式オンラインストアをはじめ、楽天市場やAmazon、全国のバラエティショップで好評販売中です。

今回は1本目のインタビューに引き続き、ユーザー体験とそれらを体現するタッチポイントのデザインの詳細を解説します。

これまで主にデジタルプロダクト／サービスのデザインを手掛けてきたグッドパッチが、どのようなアプローチでｍｓｈと共にCtrlxの魅力的な体験をデザインしていったのか。ｍｓｈの中西さん、篠田さん、渡邊さんをお迎えし、「Ctrlx」の体験デザインやビジュアルコンセプトについてお話を伺いました。

話し手：
ｍｓｈ株式会社 執行役員 商品部部長 中西さん
ｍｓｈ株式会社 商品部 企画課 マネージャー 篠田さん
ｍｓｈ株式会社 商品部 企画課 渡邊さん
Goodpatch プロダクトマーケティングマネージャー / UXデザイナー 吉田
Goodpatch アートディレクター 中田
Goodpatch BXデザイナー／コピーライター 豊田

課題から解決への輪郭を与える──体験デザインのアプローチ

──今回、アイバームとコンシーラーを組み合わせたアイテムに至るまでに様々なプロセスがあったかと思いますが、具体的にはどんな取り組みからどのような示唆が得られたのでしょうか？

吉田：
はじめに、グッドパッチ社内で4、5名にインタビューを行いました。クマに悩みを持つ人に「どんな対策を行っているか？」「対策によって悩みは解決しているのか？」などをヒアリングしています。

その結果、「そもそも日常的なケア方法がわからない」といった声が挙がりました。毎日のケアの積み重ねによって改善する期待がある一方で「今この瞬間にクマをどうにかしたい」という発見もあり、長期と短期の双方から課題解決のアプローチが必要であることが分かったんです。

ｍｓｈ篠田さん：
通常の化粧品開発では、市場やトレンドを見ながら企画していくケースが多いです。一般の方の反応を生で見る機会は少ないため、ヒアリングに新鮮さを感じました。アンケート調査を行うことはあるものの、専門的視点だけではなく一般的にはどんな反応を示すんだろう、といった点を知ることができたのは、発見もあり新しかったですね。

──定量的な調査ではなく、インタビューのような定性的な調査は新しい視点だったのですね。他にもインタビューを通じて何か気付きはあったのでしょうか？

吉田：
クマに対し「見た目への悩み」だけでなく、「クマのせいで、本来自分のやりたいメイクやありたい姿が思い通りにならない」という課題が奥底にあることも分かりました。例えば「テクスチャが良くないと、メイクアップ行為が肌に負担をかけている懸念がある」といった定量調査ではなかなか得にくい声もありましたね。

篠田さん：
普段から化粧品開発をしていると、例えば「コンシーラーは使うのが普通」という感覚になりがちですが、そもそも使っていなかったり使用にハードルを感じる人も多い、という実感を得られました。

ユーザーが本当に求めるものを形にする──価値の言語化

──ユーザーインタビューで気付きが得られてから、次のステップとしてどのようなことを行っていったのでしょうか？

吉田：
サンプル試作などプロダクトの機能的な開発に加え、情緒的な価値の言語化を一緒に進めていきました。インタビュー結果を基に「こういうモノが欲しい（Haveニーズ）」「なぜならこういう行動をしたい（Doニーズ）」「その結果、こうありたい（Beニーズ）」という3階層で価値を言語化していくワークを行いました。

その結果「周囲の大事な人からどう思われているか気になる」「どんな時も自分のことを好きでいたい」など、ユーザーのありたい姿が浮き彫りになりました。このありたい姿をベースに訴求ポイントをCMコンテとして想像で書き起こしてみることで、どういった形でユーザーに届けるべきかのアイデアも膨らませていきました。

ｍｓｈ渡邊さん：
ワークショップは純粋に楽しかったです。普段は頭で考えているようなアイデアを言語化することで、具体的に「こうしたい」という方向性が見えてきました。また、自分だけでなく他のメンバーとも意見交換をすることで、目指したい方向が明確になり、皆の目線がそろったと思っています。

篠田さん：
改めてユーザーがどうなっていきたいのかをキーワードにできたため、自分たちにとっても納得感があり、腑に落ちながら商品開発を進めることができたのがよかったポイントですね。

吉田：
「自分の出しきれるベストでいたい」だったり「クマがあることで周囲に心配をかけたくない」のようなキーワードが出てきましたね。また「メイクアップの過程も楽しみたい」「負担を減らして、より健やかな自分でいたい」という声も挙がり、Ctrlxのコンセプトでもある「ショートカットキー」の原型に近づいていきました。また、雑談のような感覚で議論していったことで、共通認識を持って進めていけたらと思っていました。

ｍｓｈ中西さん：
共通認識ができたことで、OEMメーカーや販促担当者など、他メンバーとコラボレーションする場面でも、皆が同じ認識を共有できました。そういった意味でも、このワークは大事だったと思っています。

吉田：
ワークショップを通じて、実際に市場やユーザーの手元に届く際にどのようなコミュニケーションが起きるのかを柔軟に発想してみることで、自由なアイデアを生み出すきっかけが生まれました。アイデアを共有することによってワンチームとしての関係が構築できたことと、抽象化された大きな旗印を設けられたことが最大のポイントです。

中西さん：
チームの議論がスケジュールや収支を意識した話だけに寄ってしまうと、面白いアイデアはなかなか生まれないんですよね。雑談の中で「こんなモノがあったら面白いよね」といったアイデアが出てきて、そういった機会が減ってしまっていることも最近感じていました。そうして「こんな人いるよね」というような示唆にたどりついたり、「もっとこうしたらいいんじゃないか」といった改善のフィードバックができる関係になりましたね。

店頭やアイテムの見せ方をリアルな感覚で調査する

──ワークショップで「ありたい姿」を言語化した結果、ネクストステップはどんなことが決まっていったのでしょうか。

吉田：
サンプルを持ち帰って実際に使用し、テクスチャや色味などを検証していく一方で、店舗に実際に足を運んでリサーチを重ねました。

「どういったシチュエーションでユーザーが化粧品を手に取るのか？」など、化粧品の購入体験などを経て分かったのは、手に取るその瞬間に心が動くこともとても重要だということです。ときめく商品パッケージや汚れがつきにくい箱の形状、読みやすい什器の情報量や余白などの特徴を掴んでいきました。

豊田：
ｍｓｈの皆さんと店舗を巡って、自分たちにはない専門的な見方を話しながら調査できたことが大きかったです。ワークショップで広げた理想と、実際に目に入る什器のサイズ感といった実現可能性を擦り合わせることができました。対面しながら感覚を共有することで、よりリアルな感覚でデザインを考えられたと思っています。

中田：
具体的にパッケージのビジュアルを決める際の判断材料にもなりました。商品が多く並ぶショップなどで、ユーザーの目に留まるためにはどうしたらいいか？の指針として参考にしましたね。

──商品開発において、大変だったことは何でしょうか？

中西さん：
店舗の棚では、「アイバームはスキンケア」「コンシーラーはメイクアップ」それぞれの棚に置かれることが多く、一緒に陳列する発想はあまり生まれない2商品でもあります。そういった意味で、OEMメーカーなどでも前例がないCtrlxはチャレンジングなアイデアになっていると思っています。

篠田さん：
棚や容器など、乗り越えなければいけない壁こそありましたが、ひとつの商品にすることで生まれた良い面もありました。アイバームだけでは訴求しきれない悩みや機能のポイントなど、ユーザーに対して届けたいメッセージの表現の幅が広がったのです。

吉田：
組み合わせのアイデアに加え、肌の色味をブルーベース、イエローベースの2種に分けた上で3種の目元悩みをケアするアイバームをカスタムできるパーソナライズ体験をデザインしたことで、商品に独自性が生まれ、インタビュー時に示唆されていたニーズにより近づけられたと思っています。

また、OEMメーカーや販促担当者など、他メンバーとコラボレーションする場面でも、同じ価値観で認識を共有できました。

ユーザーに届ける世界観を描くブランドデザイン

──コンセプトメイキングの過程では、どのようなことを行っていったのでしょうか？

豊田：
Ctrlxのネーミングや世界観の原点はワークショップで生まれました。「ありたい姿」をさらに噛み砕き、例えば「クマがあることで周囲に心配をかけたくない」ってどういうことだろう？を突き詰めていった結果、ユーザーに届けるためのイメージへとジャンプさせ、ブランドのコンセプトをまとめていきました。

中西さん：
通常の商品開発では、企画を束ねるコンセプトを作った後に根拠となる要素を肉付けしていくのですが、今回はそれと逆で価値を積み上げていくプロセスをたどりました。そのため、形にしていく途中で辻褄が合わなくなったり、違和感を感じることが少なかったです。

豊田：
実はCtrlxに最終決定を下す前に「目元ケアであることを直接的に表現するネーミングの案」も検討していました。そこで、ブランドを情緒的に表すか機能的に表すかで、最終的にコンセプト検証を行いましたよね。

──コンセプト検証では、どのような2案で検証していったのでしょうか？

中田：
ABテストは情緒価値寄りと機能価値寄り、どちらの訴求がユーザーの共感を集めるか、それぞれコンセプトストーリーとパッケージデザインカンプを見ていただき比較しました。機能価値訴求パターンは具体的な成分や悩みを文字でダイレクトに伝えるデザイン、情緒価値訴求は現在のCtrlxの原型となっています。

篠田さん：
普段のプロセスでも、ネーミングを決める際に定量調査を行うようにしています。アイデアがお悩み解決アプローチだったこともあり、より直感的に分かりやすい機能訴求案も視野に入れておきたい意図がありました。結果として、情緒的価値を訴求するCtrlxの反応が想像以上によかったことと、機能価値訴求の場合ブランドとしての幅が広がりづらいことも踏まえ、Ctrlxに決まりました。

中西さん：
店頭でも目を引くのではないかという視点からも、最終的な意思判断としてCtrlxに決めましたね。機能訴求案は悩みを直接的に表現する分、実際には少し埋もれてしまうのではないか？といった議論もありました。

世界観を視覚的にとらえるビジュアルデザイン

──ブランドのビジュアルはどのようにデザインされていったのでしょうか？

中田：
すでにコンセプトやネーミングが形になりつつあったため、私はその世界を視覚的にどうとらえるかを考えました。美容という商品の性質上、機能面だけではなく、お客さまが実際に商品を手に取って使用するシーン、ポーチに入れて持ち歩くシーンなど、使う人の気分が上がる情緒体験が大きな価値となります。そのため、全体的に遊び心を加えたデザインを心掛けました。

現在市場にある競合商品とは違う路線でのビジュアルデザインを試みています。特に今回のような目元の悩みを解決する、マイナスを0にしていくようなアイテムは、ホワイトやベージュ、流行りのくすみカラーをキーとした、存在感が控えめでシンプルな商品が一般的に多いのですが、Ctrlxは意図的にビビッドなカラーリングと一癖あるフォントを採用しました。

篠田さん：
かわいい系統やシンプルなブランドが多いｍｓｈでは、今までにないカラーのブランドに仕上がりました。Ctrlxは目元悩みごとにアイバームを色分けしたり、コンシーラーをイエベとブルベに分けたりと、「色」がひとつのキーワードになっている商品です。

中田：
カラーリングも含めたブランドのトーン&マナーは、3パターン提案しました。候補の中にはフェミニンなもの、ミニマルな方向性もありましたが、店頭に並んだ際に最も映える今回の方向性に決まりましたね。個人的には一番攻めた方向性だったので、ｍｓｈさんの即決には驚きました（笑）。ただ、トーン&マナーが決まってから実際に商品パッケージに落としていく際、印刷の特性を考慮した色選びは少し苦労した面もありました。

篠田さん：
ネオンカラーに近い色味は、店頭陳列時に光に当たり続けると、褪色してしまうリスクもありましたが、耐久テストなどを経て、現在のパッケージのカラーに落ち着きました。

中田：
アイバームは青クマ用・茶クマ用・黒クマ用、コンシーラーはイエベ向け・ブルベ向けと、それぞれの商品の機能が見た目で直感的に伝わるか、という視点からもブラッシュアップを重ねていきました。青は青でもグリーン寄りになりすぎると「ブルベ」感が失われてしまうなど配慮しながら、6商品が並んだ際の全体的なカラーバランスをみて色味の設計をしました。

──ほかに、パッケージデザインでこだわったポイントを教えてください。

中田：
アテンションシールと呼ばれる、商品に貼り付けて訴求したい情報を伝えるツール制作です。キーボードをモチーフにした心を揺さぶるビジュアルデザインを優先したことで、一見すると違うカテゴリの商品ということが分からない状態でした。どの商品が「アイバーム」「コンシーラー」「ケース」であるかを伝えるためにも、アテンションシールをつける必要が生まれました。

小さなシールですが、いかにCtrlxの世界観を尊重しながら商品の特長をユーザーに伝えられるかを考えています。分かりやすさだけを突き詰めていくと、シールだけがブランドのイメージから浮き、悪目立ちして情報が伝わってしまうんです。そこで、パッケージデザインはアテンションシールを含めて成立するように設計しました。

篠田さん：
一般的なアテンションシールは、訴求を増やすために箱の幅と同じサイズで打ち出すため、ブランドの世界観を諦めて表現してしまうことが多いんです。始めに見たときは「訴求しきれるかな」と思いましたが、完成したところアテンションシールも含めて世界観が伝わっているなと感じ、納得感がありましたね。

中田：
訴求ポイントを伝えたいツールだからこそ、文字が大きくなったり、見やすさを重視してブランドを無視してしまいがちですが、雑多なイメージにはしたくなかったため、訴求と情緒のバランスをみながらアイテムごとにシールの形を変えたり色を組み合わせたりなど工夫しています。

中西さん：
シールもいくつかパターンを提案していただきましたね。店頭で馴染んでしまって目を引かなかったり、文字の読みにくさなども考慮した上で、明らかに文字が読みやすく今までになかったビビッドなデザインを採用しています。こういったシールや、パッケージの褪色に関するテストなど、Ctrlxは細かいところも含めてこだわった商品になりました。

直感的に価値を伝えるコミュニケーションデザイン

──今回、Ctrlxの商品だけでなくブランドサイトのデザインも手がけていますよね。

中田：
グッドパッチが全体の構成やデザイン、ディレクションを務め、開発とデザインのサポートは株式会社シーズ広告制作会社さんにご協力いただきました。キービジュアルはモデルの神嶋里花さんの目元にダイアログを載せることで違和感を作り、見た人を気にさせる仕掛けです。

コンセプトのモチーフがショートカットキーということもあり、デジタルの世界をテーマにして、「Ctrlxのアイテムを使用する→目元ケアをする」のメタファーとして「ショートカットキーを押す→“目元ケアをしませんか？”」というダイアログが表示される、というストーリーを背景に描き、ビジュアルを制作しました。

篠田：
キービジュアルはインパクトがありますよね。今回の主役でもある「目元」をあえて隠すことに驚きと感心がありました。

中田：
リップやアイシャドウなどカラーメイクの場合、モデルさんの見た目に分かりやすい変化を見せることができるのですが、今回はアイバームとコンシーラーを表現する点に難しさがありました。そのため、思い切って目元ケアであることが直感的に伝わるイメージにすることをゴールにし、商品以上に目元ケア訴求にフォーカスした経緯があります。

──キーボードのモチーフが、結果として化粧品ではあまり見ないユニークさをさらに押し出している印象がありますね。体験面ではどのような工夫をしていったのでしょうか？

吉田：
UXデザイナー陣でワイヤーフレームを組む中で、カスタム商品だからこそ適切なセットがわかる診断コンテンツを作ることになりました。

Web上でのパーソナルカラー診断を見ると、「金より銀が似合う」など、主観的な判断を仰ぐものが多いのですが、より答えやすさを感じてもらうために、血管の色など客観的な特徴に基づいた質問事項を考えました。また、診断結果からECでの購入がスムーズに行動できることを意識しています。

さらにSNSなどでシェアしやすくするために、商品の購入に強制的な印象を与えない結果のタイプなどを綿密に考えていきました。

篠田さん：
商品が選びにくい可能性もあり、診断コンテンツは商品企画の時点で計画にありましたね。

吉田：
商品購入時も、ただ単品を並べるのではなく、診断結果でおすすめされた商品をセットで購入できるようにする工夫もあります。この点はEC運用に専門的な知見がある株式会社いつもさんに協力していただきながら、楽天市場などへ動線の整備・設計を行っていきました。

豊田：
Ctrlxは、さりげないところに遊び心がたくさん詰まっています。商品パッケージの背面内側に「HOW TO USE」の説明がポップなイラストと共に印刷されていたり、駄洒落のような英語コピーが箱を開いて目に入る場所に記載されていたり。

ブランドサイトでは、アニメーションやキービジュアルのダイアログの裏メッセージなど、実装ギリギリのタイミングまでシーズさんに協力いただきながら、気付く人だけが気付くような細かい仕掛けにこだわって実現していただきました。商品はもちろん、ブランドサイトもぜひチェックしていただきたいなと思います。

吉田：
Ctrlxでしばしば現れる目のイラストやキービジュアルなど、チャーミングな印象を体験そのものにも落とし込みたいと考えていました。ダイアログの裏メッセージには、目元悩みに寄り添うような言葉を添えることで、ブランドとしてのスタンスを示しています。細部にまでこだわっていくことで、ユーザーにとってさらに魅力的な体験を届けることができるのではないかと思っています。

共同開発だからこそできたこと

──最後に、Ctrlxを共同開発してきた中で感じたことや届けたいメッセージがあれば教えてください。

渡邊さん：
改めて、自分からは生まれない発想やアイデアでいい刺激をもらうことができました。また、プロダクトだけでなくパッケージデザインやコピーライティングなどのプロセスを通じて、個人的にも大きな学びを得られました。ワークショップなど今回の経験を、担当している別プロジェクトや今後の商品開発にも活用していけたらと思っています。

篠田さん：
共同開発で一番良かったことは、既存プロセスでは事前に選択肢から外してしまうようなアイデアを「一般的にはこんな商品が欲しいんだな」といった気付きから導くことができた点です。そういった声を大事にしたいと改めて感じました。

デザインへのこだわりはもちろん、商品を作るからには最終的に自分自身が納得のいくところまで粘って、本当により良いものを作っていく姿勢が大切であることも、思い出すことができました。

中西さん：
今回の商品開発では、ものづくりを楽しむという過程が重要であることを改めて実感しました。やらされてしまったり、申し訳ないから意見しないなど、我慢しちゃいけないなと思いましたね（笑）。ワークショップや提案も想像を越えてくるので、どんなものが生まれるのかいつもワクワクしていました。

吉田：
ユーザーが利用前にどのような期待を抱き、利用中にどんなテクスチャを感じ、利用後には何を感じてもらいたいか、の流れを意識してデジタルサービスでは体験設計をしていますが、リアルプロダクトの場合は一瞬で購買の必要性を判断されてしまうという気付きがありました。

デジタルサービスの場合は途中でアップデートできたりするため、コスメ開発には難しさもある反面、面白いと感じました。だからこそ、デザインにこだわりを持ったり、一瞬一瞬の体験を大切にする必要がありましたね。

豊田：
関わるメンバーがそれぞれの価値を発揮でき、一人として欠けることができないプロジェクトだったと思います。皆が意見を表明した上で議論が進み、よりよいものを作っていこうとする動きは、今回のような関係性でしか生まれない経験でした。

中田：
グッドパッチはアプリなどデジタルプロダクトやサービスの共創をさせていただくことが多いですが、今回はコスメ開発の実績や知見があるｍｓｈさんと組むことによって、今までにない商品ができたと思っています。これからお客さまが実際に手にとって、使っていただく様子を想像するとワクワクしますね。

---

グッドパッチは、生活者の日々を彩るサービスの新規立ち上げをはじめ、リリース後の各種分析や検証を通じ、プロダクトのグロースフェーズのサポートも行っています。ご依頼内容が固まっていない状態でも構いませんので、ぜひお気軽にご相談ください。

「Ctrlx（コントロールバイ）」について

現在販売中の「Ctrlx」についての詳細は、こちらよりご覧いただけます。

• 公式サイト
• 公式X
• 公式Instagram