Web制作ドキュメンタリー『サイト制作秘話』-マッシュビューティーラボ編-

こんにちは。企画デザイン部の大島ですわ。
2025年、始まりましたなあ。（遅すぎるやんけ）
本年もよろしゅうお願い頼んます。

不定期でお届けしとる Web制作ドキュメンタリー『サイト制作秘話』。
今回は、診断コンテンツの制作事例を紹介しまっさ！

「長期休み明けから2か月経ってまうけど、まだ仕事モードに切り替えられへん…」
「年末年始も休みなしで働いとったから長期休暇取れてへんわ…」
「家事育児で疲れが中々取れへんやんけ…」
っちゅうジブンに！ぜひ体験してほしいコンテンツやで！（つまりジブンら全員ちゅうことや）

この記事を読んだ後は、ぜひ診断してみいや～。
読む前にやったろって方はこっからしてみい＞

目次

1.本プロジェクトについて
2.企画・コンセプト
3.イラスト／デザイン
4.ディレクション
5.お客様からの声（株式会社マッシュビューティーラボ様）
6.おわりに

1.本プロジェクトについて

お客様のご紹介

依頼してくれはったんは、株式会社マッシュビューティーラボはん。
ナチュラルなライフスタイルをこれから楽しみたいちゅう人にも、オーガニックに精通した人にも、
やさしさとこだわりにあふれた商品・サービスを提供しとんねや。

今回は、ナチュラル＆オーガニックコスメを販売しとる「Cosme Kitchen（コスメキッチン）」のオンラインショップ内で展開する診断コンテンツの作成を依頼してくれはったんや～。

案件について

カテゴリー：診断コンテンツ
診断コンテンツ制作の目的：「青パパイヤ酵素」シリーズの商品訴求
ターゲット：20代半ばから40代の身体のバランスや健康に気ィ使ってとるレディ
制作期間：1か月

制作チームメンバー
クライアントはん：株式会社マッシュビューティーラボ
プランナーはん：三村龍
営業はん：下川万季
ディレクターはん：K
デザイナーはん：サラ・ガバガン、大田真梨子
クリエイティブディレクターはん：谷口 正樹

2.企画・ロジック構築・コンセプト

今回の目的は「青パパイヤ酵素」シリーズの商品訴求でしてん。
シリーズ内の「青パパイヤ酵素 顆粒タイプ」は、「Cosme Kitchen BEST COSME」の2024年下半期最優秀賞ちゅう賞を受賞した人気商品ちゅうことで、もっと商品の魅力が伝わるようなコンテンツを制作したゆうわけや。

そんで生まれた診断コンテンツが「つら童話診断」！
あんさんが抱える「つらァ…」な身体の不調を診断して、お悩みに沿った製品を紹介するゆうもの。

そしてそんな「つらァ…」な不調を抱えるんは、ぎょうさんの人が知るあの童話キャラクター！？
そんな、見た目にもめっちゃ楽しい、オリジナルコンテンツやねん。

気になってきたんちゃう？こっから試してみい～＞

ちゅうことで、こっからは各セクションの担当者にインタビュー形式で案件を振り返ってもらうで～。

企画・ロジック作成

大島：まずは企画を担当した三村はん。今回は診断コンテンツのロジック作成から担当したっちゅうことで！えらい大変やったんちゃいますの？

三村：せやで～、初の診断ロジック案件やったから、何をどうやって考えるかっちゅうところから、古川はんに何べんも相談させてもろて、なんとかできたっちゅう訳や！
古川はん、その節はおおきにありがとうございました！

企画案は当初ベタなもんしか思いけんかったんやけど、谷口さんが童話と絡める案に発展してくださったさかいに、ユーザーにごっつ刺さるコンテンツになったと思うねん！

大島：童話はぎょうさんの人が知ってますもんね。「#つら童話診断」というネーミングもめっちゃおもろいですよね！

三村：おもろそうなコンセプトが決まったからには、コンテンツタイトルやリードテキストもちょっと捻りたいなあ思って、セルフコンペして何案か考えたもの中から一案、しれっとこのタイトルを忍ばせたったら採用してもらえてん！めっちゃ嬉しかったわ。

コンテンツタイトルが決まった瞬間

大島：三村はん考案のネーミングやったんですね！

三村：せやねん。若い人らはしんどいことをなんて言うんやろ？て、そこそこ時間かけて調べてやな、ネガティブになりすぎんよう意識しながら考えてん。
リードテキストは映画のタイトルから着想を得ててな、お客さんからもその部分に嬉しいリアクションもらえて、その晩はものごっつ美味いお酒が飲めたっちゅうもんや。

短納期の案件やったけど、お客さんも含めプロジェクトメンバーみんながおもろがりながら作っとったさかい、めっちゃスムーズかつ熱量の高い案件になったと思うで～！

企画コンセプト

大島：ほな次は、日本昔話をダジャレにした、クリエイティブディレクターの谷口はんに聞いてみましょか！谷口はん、このアイデア、一体どんな風にして生まれたんですか？

谷口：アイデア？それはな、猫と一緒にやってきたんや。

大島：えっ？猫と一緒てどないいうことですか？

谷口：ワイのアイデアの元っちゅうか551の肉まんは、いつも猫やねん。ほら、ある日のことやけどな、居間で猫を膝にのせながら、青パパイヤ酵素入りのカカオバー食うてたんや。ワイ、こう見えてキャンペーン企画に入るときは、だいたい扱う商品を自分でよう使うようにしてんねん。ほんでな、何日も悩まされとった胃もたれがスッキリ解消してもうたんや！もちろんこれ、あくまでワイの個人的な感想やけどな。

大島：胃もたれ…からアイデアにどうつながるっちゅうんです？

谷口：そこや！その瞬間にな、フッと思いついたんが『胃もたろう』っちゅうキャラクターやねん。あの桃太郎をもじった、ちょっとユルいキャラや！ほんでそこから童話の主人公の名前調べまくって、『しんどレラ』とか『ユル地蔵』みたいなキャラが次々に生まれてきたんや。

大島：『ユル地蔵』…なんか親しみやすいですけど、めっちゃ脱力しますね。

谷口：せやろ！そうやって童話モチーフの誰でも知っとるキャラに一捻り加えたオリジナル診断コンテンツを作る、っちゅうざっくりしたコンセプトができてな。こういう発想のジャンプ力はワイ、ちょっと自信あるねん。

大島：せっかくの『ユル地蔵』、最終的にボツになったんは残念やけど、ここで話題になれてよかったですね！

谷口：いやホンマやで。これな、新部署『企画デザイン部』が立ち上がって最初の案件やったんや。どうしても成功させたかったけど、結果的にはええ実績になったわ。イラストやデザインだけやのうて、コンセプトやロジック、文章作成までぜ～んぶうちとこで出来たんやもん。こんなん、なかなかないで！チームメンバーみんなでゲラゲラ笑いながら作業してな、まるで学園祭の実行委員やっとった頃を思い出したわ。これがワイのクリエイティブの原点や。

大島：なんかめっちゃ青春ですね。『胃もたろう』に乾杯したい気分やわ！

診断結果のキャラクター案

3.イラスト／デザイン

イラスト

大島：お次はイラストを担当した、サラはんに聞いてみましょか。
サラはん、今回のイラストについて、こだわったっちゅうポイントはどこやろか？

サラ：今回はいわゆる「ヘタウマ」っちゅう路線のタッチで描いたんやけど、線の太さやデフォルメ具合、配色なんかも、ちょい変えるだけでも印象がめっちゃ変わるから、色々なスタイルを試してみてん。
ポーズ考案の時なんかは、描いてたら楽しくなってもうて一人でクスクス笑っとったわ～。

大島：生まれたキャラクター、もれなくみんな辛そうですもんね。笑
4つのタッチ、どれも素敵で社内でも「かわいいやん～！」のコメントが飛び交ってましたね。

最初に提出したイラストラフ

大島：他にも、印象に残ってるっちゅうことはありますか？

サラ：「眠れぬ姫」の周りにある雑貨や服装にはえらい試行錯誤したで～。
服装は“眠り”を連想させるパジャマがええんか、“お姫さん”を連想させるドレスがええんか、まあまあ悩んだでなあ。
結局ドレスっぽいパジャマ、ちゅうとこに着地したんやけどな。

大島：眠れぬ姫、めちゃめちゃ質の良い睡眠をとるためにばり環境整えてますもんね。（アロマディフューザーとかハーブティーとか）
ドレスっぽいパジャマも、きっと綿かシルク素材なんやろな～て、想像が膨らみますわ。

対策頑張ってる「眠れぬ姫」

大島：あと、今回のイラストは全体の配色にもこだわったって聞きましたで。

サラ：せやねん。コスメキッチンの雰囲気に合う配色っちゅうのに加えて、サイト内の他コンテンツのイラストとの差別化も大事にせなあかんから、ベースカラーは統一しつつ、各キャラクターにキーカラーを取り入れた案を考えた訳や。
最終的にお客さんがその配色案を気に入ってくださったんは、めっちゃ嬉しかったでな。

キーカラーを取り入れた配色

大島：今回、うちもサラはんと一緒にメインビジュアルの構成を一緒に考えさせてもろたんですが、メインビジュアルのキャラクターは、診断結果にはおらへんキャラクターなんですわ。
それぞれのキャラクターに由来した疲労を想像して描いてるさかいに、ぜひその点もチェックしてみてや～！

各キャラクターの抱える“疲れ”を表したっちゅうメインビジュアル

デザイン

大島：ほなお次は、ページデザインを担当した大田はん！今回の案件、どのように取り組まれはったんですか？

大田：デザインはサラはんがMV用イラストを作成してくれてたさかいに、そっから色を抽出したりなんやして全体の構成を決めていったんや～！
イメージは童話ちゅうこともあり、古い絵本やったりアンティークなあしらいをモチーフにしたんやけど、イラストや題材がゆるいっちゅうんで全体的に角丸やったり手書きっぽい線でデザインしていってん。

手書きのタイトルロゴ

大島：ほんまにタイトルや全体の線からゆるさが伝わってきますね～。ゆるかわやん。
デザインにおいて、ここはこだわったっちゅうとこあれば教えてください。

大田：今回のようなおもろい案件は手書きでラフを書いてくとアイデアが出やすかったりすんねん。せやから今回は最初にiPadでやな、ざっくりラフを書いて作成していった訳や。

こだわりポイントっちゅうんは、本を開いたようなあしらいとその下にある涙マークやな！
あしらいの下に涙マークを置くとやな、涙がこぼれてるようにもみえるっちゅう、童話×つらいの、ダブルミーニングなデザインなんやわ。めっちゃ細かいんやけどごっつ気に入ってるポイントやねん。

ほんでなほんでな、涙マーク、実は結果ページではパパイヤの形になってんねん！粋やろ～。これ思いついたときはiPadに向かってニヤニヤしたっちゅうもんや。リモート勤務やったさかいに、誰～も笑ってくれへんくて、えらい寂しかったわ。笑

大島：ダブルミーニング…！まさにつら童話ですやん…！
ほんで隠れミッキーならぬ隠れパパイヤて…！確かに最後の結果ページにいくボタンの部分だけがパパイヤの形になってますやん！
気付いた時、うちもニヤつきましたわ。2025年初ニヤですわ。

大田：初ニヤありがとうございます～。めっちゃ楽しくデザインできたさかいに、ほかの案件でもこないな遊び心を取り入れたいいうもんやね！

こだわりのダブルミーニングあしらい

さりげない青パパイヤ

4.ディレクション

ディレクション

大島：ほな最後に、本案件のディレクター（制作進行）を務めた、Kはんにも話を伺いましょか。
Kはん、今回の案件で印象に残ってるっちゅうことなど教えてください！

K：よう利用してるコスメキッチンはんの診断コンテンツ制作ちゅうことで、もう始まりからワックワクしてましてん！
短納期ではあったんやけど、弊社からのアイデアを受け入れてもろて、確認作業もすぐにしてもらったり、ようけ協力をいただいたおかげで、進行に関してはもんまにめっちゃスムーズに進みましてん。
あと、チャットでのやり取りやったんやけど、デザインも何度もお客さんから「かわいい！」いうて褒めてもろて、ものごっつ嬉しかったです！

社内もアイデア出しからイラストまで、メンバーみんなが制作を楽しんでたっちゅうんが伝わってきてな、ごっつワクワクした案件やったわ！

大島：ありがとうございます！社内でも企画アイデアやイラストが共有された時はほんまに盛り上がりましたよね！

5.お客様からの声（株式会社マッシュビューティーラボ様）

ご依頼いただいたマッシュビューティーラボのはんからもコメントをいただきました。

お客様からの声

ブリッジコーポレーションの皆様、素敵なサイトを作成いただきありがとうございました。
限られた期間での相談でしたが、実現に向けて親身になってくださり、共に進行できたこと、クオリティの高い診断コンテンツが公開できたことを大変嬉しく思います。

アイデアが固まっていない段階で会話の中で出た“童話”という言葉から、かわいいイラストやキャッチーなネーミングが次々に生まれ、世界観を広げてくださり、楽しくお打ち合わせさせていただいておりました。
細部までユーモアあふれるこだわりを感じられ、大満足の診断コンテンツとなりました。制作に携わってくださったみなさまのセンスに脱帽です！

最終的にお客様だけでなく、社員同士の会話の中で「しんどれら」と出てくるほど、社内でもとても愛されるコンテンツとなっています。
長く愛されるコンテンツとなるよう、たくさん活用させていただきます！ありがとうございました！

6.おわりに

いかがでしたやろか？
大阪に拠点をもつ弊社では、Webページの制作以外に、コンテンツ造成にもごっつ力を入れてますんで、集客や認知拡大に繋がるコンテンツ造成を検討してるっちゅう方は、ぜひ一度！気軽に！いつでも！ご相談くださいね！

ほなまた！

「つら童話診断」を受けてみてや～＞

他の診断コンテンツの実績を見てみたいっちゅう人はこっちやで＞