サイト制作秘話シリーズ 第3弾
不定期でお届けしている Web制作ドキュメンタリー『サイト制作秘話』。
今回ご紹介するのは、東京都渋谷区にある株式会社生活の木様の制作事例です。
近年、Web制作業界で激熱の診断コンテンツ。弊社でも生活の木様はじめ、mono株式会社様 THE NOTE BAR ECサイト、株式会社エッチイーシグループ様 香水診断コンテンツを作成いたしました。
これまでは店舗で購入していた商品は、いまやECサイトで購入することが一般的となりました。また購入した商品はSNSにUPすることで拡散され話題となり、商品が認知されていく。消費者の行動の変化に伴って、Web上での「バズらせる」にはどうしたらよいか、積極的な情報発信と話題作りが求められております。自分自身のことを知って、それを周りに見てもらいたい、そんなユーザーの心理にぴったりな診断コンテンツはどのように作られていくのか、お伝えいたします。
目次
1.プロジェクト紹介
2.コンセプト決定・デザインへの展開
3.診断ロジック作成
4.WF作成
5.デザイン
6.コーディング
7.ディレクターのコメント
8.営業からのコメント
9.お客様からの声
10.診断コンテンツをマーケティングに活用！
プロジェクト紹介
お客様について
オーガニックなアロマなどを扱う生活の木様からのご依頼のきっかけは、株式会社エッチイーシグループ様の香水診断コンテンツの実績をご覧いただいたことでした。リブランディングすることで「もっとアロマを若い方にも知ってほしい」、「気軽に試してほしい」という要望から今までのナチュラルな印象を一新した診断サイトを作りたい！という想いで今回弊社にご依頼をいただきました。
仕上がった診断サイトはこちら！
あなたの「ついつい」がわかる【ギルティごはん診断】
生活の木様のイメージとは違った、明るくポップで診断する人がわくわくするような診断サイトにいたしました。
スマートフォンをメインとした設計にしているため、文字の量は少なく完結にし、診断のハードルを下げる仕組みにいたしました。また、診断結果では顔文字を使うことで親しみやすさを持たせています。
表現については、曲線や角丸、そしてオリジナルのキャラクターを使った、親しみやすく興味を引きやすい雰囲気に。
どのようにゼロからイラストを作成したのか？ こうした診断コンテンツが出来上がるまでのストーリーについて、詳しくお伝えしていきます。
案件について
サイトカテゴリ：診断コンテンツ
サイト制作の目的：新ブランドリリースに伴う注目コンテンツとしての作成、Web上での拡散、および新規顧客の店舗への誘因
サイト制作のテーマ：「生活の木」「アロマ」から距離がある、生活の木様が提供するのに意外性があるトピック、メインターゲットが「自分事」化しやすいトピック、間接的に、ユーザーのストレスフルな背景にアプローチできるトピック
ターゲット：20～30代 女性
制作期間：4か月
コンセプト決定・デザインへの展開
コンセプトについて
インパクトのあるものにしたい、とお伺いしたため「明るさ」「面白さ」「わくわく感」をコンセプトにしました。また、イラストに関しては「可愛さ」をコンセプトにいたしました。
診断ロジック作成
診断ロジックの作成は、週次で定例会を行って進めました。
プランナーからのコメント
ロジックは生活の木様と打ち合わせをしながら決定をしました。
生活の木様は、アプリ版で自社で簡易診断をフローチャート式で実施したご経験がありましたが、今回はご依頼いただくにあたり、より根拠の組立を行いたいというご意向もあり、それぞれの回答に対し点数を割り振る加点式を形式を採用しました。ロジックの内容については、生活の木様のアロマの知識を集結させて短納期の中、試行錯誤しながら作成いただきました。おかげで組み合わせは6問×4回答＝4096通りの中から自分にピッタリの回答を導き出してくれ診断ロジックが完成しています！
WF作成
診断ロジックの作成と並行して始まったのが、WF制作です。
※WF（ワイヤーフレーム）：実際の制作に入る前に、サイトの仕様や構成を決める設計図のようなものです。
どのような優先度でコンテンツを配置するか考えながら作成します。
実際に作成したWF
デザイン
次に作成したWFをもとに診断コンテンツのデザインを作成していきます。
キャラクターデザイン
まず始まったのが、キャラクターの制作。今回の診断コンテンツの雰囲気を伝える鍵となるクリエイティブであるため、生活の木様と丁寧にやり取りを重ねながら調整を進めていきました。
イラストレーターからのコメント
案件を伺ったときは「自分自身の食生活を擬人化？どういうこと？」と思いながら制作をスタートしました。聞いてみると、「がっつりかつ丼タイプ」のような食のタイプ別のキャラクターを作成するとのことでした。「かわいい」をテーマにラフ作成をしていたのですが、「かわいい」の概念が人によって様々で、「かわいいってなんだろう」と自問自答の日々でした。生活の木様とも直にお話させていただき、かわいいキャラクターの方向性を再設定することで何とか完成に持っていくことができました。
試行錯誤したイラストラフ
作業の中で、デザイナー、プログラマーとも連絡しあい、ページデザインとの色味の兼ね合いであったり、アニメーションの実装なども相談いたしました。キャラクターだけではなくコンテンツそのものを作成したことが良い経験になりました。席が近かったのは大きな利点です。
コーディング
デザインが決定したあとは、実際のサイト環境で再現していくコーディングの作業に入ります。
コーダーからのコメント
コーディングは、デザイナーからあがってきたサイトデザインに、命を吹き込む作業です。サイトを見ている人がワクワクするよう、随所にアニメーションを施し、動きのあるサイトに仕上げました。
ディレクターのコメント
私自身かわいいものがだいすきで、かわいいものをみつけるとすぐ「かわいい！」と言ってしまうんですが、人それぞれの「かわいい」は本当に奥が深いと思いました。生活の木様とやり取りさせていただく中で、どんどん私の中の「かわいい」が生活の木様の「かわいい」と噛み合い、イラストレーターとも噛み合い、ハイコンテクストな状態になりました。イラストも当初は動かない想定でしたが、イラストレーターのアイディアで動きをつけました。デザインはLINEのデザインをオマージュした吹き出しにすることで親近感を持たせたり、デザイナーからのアイディアで、「よしよしShare」、「ギルティShare」などキャッチーな見出しをつけたりしています。どのコンテンツをスクショしてもかわいくなるよう工夫いたしました。コーディングでは、ページを遷移しない方法で質問を進め、サイト自体も滑らかな動きでとにかく結果ページまでスムーズに行けるように、また表示はふわっと出して柔らかい印象になるように、全工程に拘りを詰め込んでいます。とっても楽しいサイト制作になりました。
営業からのコメント
ご相談を受けた際、とてもワクワクしたことを覚えています。生活の木様の思いを存分に乗せて、他に運用されているサイトとは一味違った新しい一面を落とし込むことができてとてもうれしいです。皆様ぜひ見比べてみてください。「診断コンテンツ」を新たな層、特に若い方へのアプローチとしてとても良い活用をされているかと思います。
お客様からの声
今回、診断コンテンツを制作するにあたり、ブリッジコーポレーション様にご相談したことで、私たちが当初想定していた素直なWeb版の「アロマ診断」の枠を超えて、新規顧客さまとの接点創出という目的に振り切り、弊社としては今までなかった方向性のコンテンツに挑戦することになりました。
しかし「ギルティごはん診断」という、一見アロマと関係のないポップなテーマを思い切って設定した一方で、診断結果ではアロマの専門店として納得感のある香りの提案をしたいという思いも強くありました。
そこで、診断のロジック構築においては、ご担当者さまに細やかなアドバイスをいただきながら、私たちのアロマの知識を総動員して、こだわり尽くしたゴール・質問・選択肢を作ることができたと思います。
途中、何を選んでも配点的に辿り着けないゴールが出きてしまったり、10タイプある診断結果のバリエーションがどうしても決めきれなかったりなど、初めての経験だったこともあり、困ったことも数多くありましたが、都度ご担当者さまから積極的にご意見をいただけたことで、不安なく進めることができました。
また、各タイプに対応したキャラクターのデザインについて、上でもコメントをいただいた通り、弊社がお客さまに見せたい「かわいさ」が暗中模索だった状態に対しても寄り添ってくださり、最終的にお客さまにも社内にも好評な10のキャラクターたちが生まれました！それだけでなく、デザイナーさまの創意工夫でお茶目なアニメーションまでついて、私たちの想像を超えた楽しい診断コンテンツに仕上げていただいたと思います。
今後も完成した診断を、まだアロマに馴染みがないお客さまへの提案の切り口として、継続的に活用していきたいと思います。ありがとうございました。
診断コンテンツをマーケティングに活用！
以上、生活の木様の案件ストーリーをお届けいたしました。
近年は特に診断コンテンツを制作したいというお客様が増えてきており、導入することで様々なマーケティング課題の解決に繋がります。弊社では診断コンテンツのロジック作成からコンセプト設計、クリエイティブ制作まで社内で一貫してブレないものづくりが可能です。診断サイトづくりで迷っている方は、ぜひ一度お問い合わせください。この記事が、診断コンテンツ制作の不安・迷いを払拭するきっかけになれば幸いです。
また、以下の記事では診断コンテンツについて詳しくまとめていますので、併せてご覧ください！
お問い合わせ
