こんにちは。企画デザイン部の大島です。
2025年、始まりましたね。(遅)
本年もよろしくお願いいたします。

不定期でお届けしている Web制作ドキュメンタリー『サイト制作秘話』。
第8弾となる今回は、診断コンテンツの制作事例をご紹介します!

「新年始まって2か月経つけど、まだ仕事モードに切り替えられへん…」
「年末年始も休みなしで働いて、長期休暇取れてへん…」
「家事育児で疲れが中々取れへん…」
というあなたに!ぜひ体験いただきたいコンテンツです!(つまりみんな)

この記事を読んだ後は、ぜひ診断してみてくださいね。
読む前にやってみたいって方はこちらから>

 

目次

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

 

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

■お客様のご紹介

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

今回は、ナチュラル&オーガニックコスメを販売する「Cosme Kitchen(コスメキッチン)」のオンラインショップ内で展開する診断コンテンツの作成をご依頼いただきました。

 

■案件について

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

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

 

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

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

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

そしてそんな「つら…」な不調を抱えるのは、多くの人が知るあの童話キャラクター!?
そんな、見た目にも楽しい、オリジナルコンテンツとなります。

気になってきたら、こちらからお試しあれ>

ということで、ここからは各セクションの担当者にインタビュー形式で案件を振り返っていただこうと思います。

■企画・ロジック作成

大島:まずは企画を担当した三村さん。今回は診断コンテンツのロジック作成から担当したとのことで!

三村:はい、初の診断ロジック案件だったので、何をどうやって考えるかというところから、古川さんに何度も相談させていただきつつなんとかできました!
古川さん、その節はどうも有難うございました!

企画案は当初ベタなものしか思いつけなかったのですが、谷口さんが童話と絡める案に発展してくださったおかげで、ユーザーに刺さるコンテンツになったと思います!

大島:童話は多くの人が知っていますもんね。「#つら童話診断」というネーミングもおもしろいですよね!

三村:面白そうなコンセプトが決まったからには、コンテンツタイトルやリードテキストもちょっと捻りたいなと思ったので、セルフコンペして何案か考えたもの中から一案、しれっとこのタイトルを忍ばせたら採用いただけたので嬉しかったです。

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

 

大島:三村さん考案のネーミングだったんですね!

三村:そうなんです。若い人はしんどいことをなんて言うのか?など、そこそこ時間かけて調べながら、ネガティブになりすぎないよう意識しながら考えました。
リードテキストは映画のタイトルから着想を得てまして、お客様からもその部分にリアクションいただけので、その晩はおいしいお酒が飲めました。

短納期の案件ではありましたが、お客様も含めプロジェクトメンバーみんなが面白がりながら作っていたので、非常にスムーズかつ熱量の高い案件になったと思います!

 

■企画コンセプト

大島:続いては、童話と絡める案を生んだ、クリエイティブディレクターの谷口さんにも聞いてみましょう。
谷口さん、今回のアイデアはどのようにして生まれたのでしょうか?

谷口:アイデアは猫とともにやってきました。

大島:と言いますと?

谷口:ぼくのアイデアの源泉はいつも猫なんです。
具体的にいうと居間で猫を膝にのせて青パパイヤ酵素のカカオバーを食べていると(ぼくはいつも商品キャンペーン企画に入る際は常にその商品を常用します)数日悩まされていた胃もたれがきれいさっぱり解消していることに気づいたんですね。もちろん個人の感想ですが。ぼくは胃が弱いのでなんていうかそれは何日かぶりのとてもすてきな体験だったわけです。

大島:なるほど。

谷口:そこからすぐに桃太郎をもじった『胃もたろう』というチャーミングなキャラクターが誕生し、あとは童話の主人公の名前を調べまくってたちまち『しんどレラ』、『ユル地蔵』などのバリエーションを作っていき、童話モチーフでだれもが知るキャラクターの名前にひとひねりツイストを加えたオリジナルの診断コンテンツというざっくりとしたコンセプトを構築しました。その辺りの発想の展開はぼくが非常に得意とする部分です。

大島:最終的にはボツになりましたが『ユル地蔵』がここで日の目を見てうれしいです…!

谷口:新たに立ち上がった新部署「企画デザイン部」の実質的な初案件だったのでどうしても成功させたかったです。イラスト・デザインだけでなくコンセプトやロジック、ライティングまで一括してすべて内製できたのでとてもいい実績になったと思っています。時に爆笑しつつ、チームメンバーでワイワイ楽しみながら作れたので学園祭の実行委員のころを思い出しました。ぼくのクリエイティブの原点です。

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

 

3.イラスト/デザイン

■イラスト

大島:お次はイラストを担当した、サラさんに聞いてみましょう。
サラさん、今回のイラストについて、こだわったポイントはどこでしょうか?

サラ:今回はいわゆる「ヘタウマ」路線のタッチで描いたのですが、線の太さやデフォルメ具合、配色など、少し変えるだけでも印象が大きく変わるので、色々なスタイルを試してみました。
ポーズ考案の時は、描きながら一人でクスクス笑っていました。

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


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

 

大島:その他、印象に残っていることなどありますか?

サラ:「眠れぬ姫」の周りにある雑貨や服装は試行錯誤しました。
服装は“眠り”を連想させるパジャマか、“姫”を連想させるドレスか、結構悩みましたね。
結局ドレスっぽいのパジャマ、というところに着地しました。

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

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

 

また、今回のイラストは全体の配色にもこだわったのだとか。

サラ:はい。コスメキッチンの雰囲気に合う配色であることに加え、サイト内の他コンテンツのイラストとの差別化を図るため、ベースカラーは統一しつつ、各キャラクターにキーカラーを取り入れた案を考えました。
最終的にお客様がその配色案を気に入ってくださったので嬉しかったです。

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

 

大島:今回、私もサラさんと一緒にメインビジュアルの構成を一緒に考えさせてもらったのですが、メインビジュアルのキャラクターは、診断結果にはいないキャラクターなんですよ。
それぞれのキャラクターに由来した疲労を想像して描いているので、ぜひその点にも着目してみてください!

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

■デザイン

大島:お次は、ページデザインを担当した大田さん!今回の案件、どのように取り組まれましたか?

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

手書きのタイトルロゴ

 

大島:タイトルや全体の線からゆるさが伝わってきますね。ゆるかわいい。
デザインにおいて、こだわった部分などあれば教えてください。

大田:今回のような面白い案件は手書きでラフを書いていくとアイデアが出やすかったりします。なので今回は最初にiPadでざっくりラフを書いて作成していきました。

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

涙マーク、じつは結果ページではパパイヤの形になってるんですよ。これを思いついたときはiPadに向かってニヤニヤしてました。リモート勤務だったので誰も笑ってくれませんでした。寂しいですね。

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

大田:初ニヤありがとうございます。とても楽しくデザインできたので、ぜひほかの案件でもこんな遊び心を取り入れたいですね!

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

 

さりげない青パパイヤ

 

4.ディレクション

■ディレクション

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

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

社内もアイデア出しからイラストまで、メンバー全員が制作を楽しんでいたのが伝わってきて、すごくワクワクした案件でした!

大島:ありがとうございます。社内でも企画アイデアやイラストが共有された際は盛り上がりましたよね!

 

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

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

■お客様からの声

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

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

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

6.おわりに

いかがでしたでしょうか?
弊社では、Webページの制作以外に、コンテンツ造成にも力を入れていますので
ぜひ集客や認知拡大に繋がるコンテンツ造成をご検討中の方は、一度ご相談くださいね!

ではまた!

「つら童話診断」を受けてみる>

他の診断コンテンツの実績を見てみる>

診断コンテンツについてのご相談はこちらから>

お問い合わせ