【3社連動企画】toBプロダクトをいかにエモーショナルに表現するか。 CREATIVE SURVEYサイトリニューアル解説：クリエイティブ編
こんにちは、シフトブレイン広報の坂です。
今回、シフトブレインは『CREATIVE SURVEY』のサービスサイトリニューアルに携わりました。
クリエイティブサーベイ株式会社が運営する『CREATIVE SURVEY』は、国産の良質な法人向けアンケート・コミュニケーション・プラットフォームとして、多数の企業で導入事例がある注目のサービスです。
本リニューアルでは、戦略設計とコンテンツ制作を株式会社ベイジ、デザインと開発をシフトブレインが担当し、社をまたいで協業するプロジェクトとなりました。
本記事は、クライアントであるクリエイティブサーベイ社と代表の田口さん、制作に関わった2社がそれぞれの視点からプロジェクトを紐解いていく3社連動企画の1つです。
【3社連動企画】CREATIVE SURVEYサイトリニューアル解説
●クライアント編（クリエイティブサーベイ）
●戦略設計編（baigie）
●代表編（クリエイティブサーベイ代表 田口さん）
シフトブレインではプロジェクトチームから3名を招いて、どのようなプロセスを経てデザイン制作を進めていったのか、デザインの視点からインタビューを行いました。
プロジェクトメンバーのご紹介
工藤 翔太さん（クリエイティブサーベイ株式会社）
本プロジェクトのディレクター。制作レビューや進行のほか、知見やスキルを生かした体験の設計、デザインへのフィードバックを担当。
左：藤吉 匡（SHIFTBRAIN Inc.）
本プロジェクトのアートディレクター。
サイトリニューアル、カンファレンス映像、パンフレットを担当。
右：道合 幸希（SHIFTBRAIN Inc.）
本プロジェクトでは、Webデザインとモーションデザインを担当。
プロダクトを高める3つの目的
——今回のリニューアルにはどのような目的がありましたか？
工藤さん：大きく3つの目的があり、1番の目的は認知拡大とブランディング強化でした。その次に、広告流入によるコンバージョンの強化。サイトを通してプロダクトの理解をより深めることができれば、コンバージョンも多くなり質も高くなるという狙いがありました。 そして最後は、質の高いコンテンツを拡充していくこと。それらにより継続的なインバウンドマーケティングの成果を向上するという目的がありました。
藤吉：今回はベイジさんと協業での制作だったので、プロジェクトの前半はベイジさんのフレームワークに沿ってヒアリングが行われました。シフトブレインも同席させてもらい、プロダクトへの理解を深めていくところからはじまりました。
前半の戦略設計については『BtoBサイトの戦略とコンテンツはどう考える？ CREATIVE SURVEYサイトリニューアル解説：戦略設計編』でご紹介いただいています。
道合：大枠の戦略設計はベイジさんが担当されていたので、デザインに関わる部分だけを抽出してシフトブレインが担当した流れになります。
藤吉：僕たちが本格的にプロジェクトに参加したのは後半からですね。まずはビジュアルに関係する部分や企業としてのクリエイティブサーベイのキャラクターをシフトブレインのフレームワーク『ブランドDNA』に置き換えていきました。『ブランドDNA』とは、将来を見据えた強度のあるブランド体験を提供し続けるために、重要となる3つのDNAです。デザインに関わる部分に関しては、シフトブレインでいつも使用しているものを一部移植し進めていきました。
——『ブランドDNA』はどのように定めていきましたか？
藤吉：今回は目的のコアを探っていきました。具体的には、僕たちがプロダクトの素敵だなと感じた点を『ベネフィット』として細かくピックアップしていきます。CREATIVE SURVEYの場合は「志・ミッションサービスまわり」と「カルチャーや人」の2つにわけて分析を進めました。
藤吉：これらの『ベネフィット』をもとに、3つの『ブランドDNA』を抽出しました。
CX：顧客体験へのこだわり、相互理解
PROFESSIONAL：ビジネスドリブン、生産的・スピード感（+Salesforceとの連携）
TRUST：安心感・信頼感・実績、そして堅牢性
この『ブランドDNA』から、さらにCREATIVE SURVEYの人格を定義しています。その定義した人格を表現するためのデザイン原則として導き出したものが、以下の3つのキーワードです。
TACTFUL：気がきいている・抜かりがない・愛嬌がある・心地よさの探求
CLARITY：明瞭性・洗練感・デザインや情報の整合性
AUTHENTIC：安定感・信頼感・丁寧さ・折り目正しさ
藤吉 ：これらのキーワードをもとに言葉のニュアンスをすり合わせながら、デザイントーンを定めるムードボードを作成していく流れです。それに加えて、今回はデザインの要素としてコアの部分であるタイポグラフィやアイコンなどのラフスケッチも先に作っていきました。
工藤さん：当時はベイジさんが戦略フェーズでワイヤーフレームを引いていた時期ですが、詳細が決まらない部分も多々あり、「3社のだれがいつ決めるのだろう」と不明瞭なまま進んでいる印象がありました。3社初めての取り組みだったこともあって、各社それぞれが方向が見えていないまま進んでいたんですよね。
シフトブレインさんがこのブランドDNAで「私たちはこう思います」と道しるべを示してくれたことによって、プロジェクトが1歩大きく進みました。そのタイミングで3社で腹を割って話し合い、そこからはそれぞれが1歩踏み込んだ関わり方をするようになったんです。最終的には戦略フェーズからデザインにうまくバトンを渡せたんじゃないかなと思います。
3社代表の鼎談『いろいろ裏話・CREATIVE SURVEYサイトリニューアル解説：代表編』にて、各社代表視点でのプロジェクト進行の様子が語られています。
クリエイティブによるビジョンの視覚化
——デザイン制作はどのように考え進めていきましたか？
藤吉：今回はtoBの商材なので、サイトを訪れるユーザーは『自分の仕事のためにサイトを見る』というテンションだと想定されます。そのテンションに合わせて、いかにエモーショナルなデザインにするかを考えたところ、何かを大きく足すよりかはアイコンや小さいモーションなどのマイクロイタラクションにこだわり、全体のクオリティを上げる方向性にしました。道合くんとは初期の頃からマイクロインタラクションを考えて、動きを交えた提案をしていましたね。
道合：最初の段階から動きも一緒に提案したことによって、ちょっとしたニュアンスやイメージのすり合わせができたので良かったです。
工藤さん：提案でマイクロアニメーションを見せてもらった時に、私から「可愛すぎる印象がある」という話をさせてもらいました。うちの顧客はエンタープライズ領域の企業の方々が多いので、可愛すぎるのは印象として正解なんだろうか？と感じてたんです。再度、その点も考慮した表現を検討していただき、方向性を定めてもらいました。また、色に関してもそのあたりの議論からより最適な表現ルールの見直しをしていただきました。
藤吉：そうですね。サブカラーや彩度はぎゅっと抑えましょうという話になり、色数はもうこれ以上絞れないぐらい絞りました。ほとんどをベースカラーとキーカラーだけで制作しています。
藤吉 ：プロダクトの2種の色（オレンジと青）は最初から決まっていて、CIにもオレンジが使われいています。デザインではプロダクトの2色を面で見せていくように意識して制作にあたりました。
——トップページやプロダクトページで表示されるアニメーションが印象的ですが、どのようにして生まれたのですか？
藤吉：最初から提案を進めていたアイコンを少し太い線で描いて、一部を拡大したような線で何かを表現しようとは決めていました。でも、形については何がいいのかわからなくて、後回しにさせてもらってたんですよね。
工藤さん：初めは軽やかに弧を描く線のビジュアルを提案していただきましたね。それが、クリエイティブサーベイを表現する手段として、とてもいい着地点で社内評価も高かったです。
藤吉：そのタイミングでサイト制作と並行して、カンファレンス出展用の映像も制作することになりました。その過程で生まれたラフが今のアニメーションのベースになっています。映像のアニメーションを検討している時に、工藤さんがCREATIVE SURVEYを抽象化して描かれたラフ図でした。
工藤さん：もともとイメージボードの参考資料に太線で描かれたイラストがあったのですが、それがロゴとの親和性や自社プロダクトの「しっかりした感。だけど、自由度が高くカスタマイズできる」といったちょうど良いバランスの表現に合いそうで、印象に残っていたんです。そこに先ほどのメインビジュアルの提案をもらって、どちらも映像で使えるのではないかと思いました。
CREATIVE SURVEYは「ビジネスと顧客、人と人をつなぐ No.1 アンケート・コミュニケーション・プラットフォームになる」というビジョンを掲げています。当時、私自身がクリエイティブサーベイにジョインして日が浅かったこともあり「アンケート・コミュニケーション・プラットフォームって何だろう？」とずっと考えていました。
それを映像で表現しようとした際に、色々な動きや曲線の中に人やコミュニケーション、アンケートを抽象的に表した点が動いていたりする......など色々なアイデアが膨らんで、描いてみたのがこのラフ図でした。最初のシフトブレインさんの提案に、要素を追加して完成した表現になります。
この線の一部を拡大した図がビジュアルのベースとなりました。
工藤さん：さらに、動画制作を担当していただいた方々にこのラフ図を見せたところ、最終的に世界地図にまで落とし込んでくれました。これもとてもいいアイデアでした。
映像制作は株式会社ナナメが担当。
工藤さん：当初はカンファレンス用の製品紹介動画でしたが完成度が高かったため、今は製品を紹介するレギュラーの動画として扱っています。途中にこの映像制作がはさまったことで、製品理解が深まり、サイト制作の方もかなりピントが合った感じがしましたね。
方向性やイメージをすり合わせるための工夫
——関わる会社や人が多いプロジェクトでしたが、デザインを進める上で印象に残ったことはありますか？
道合：今回はデザイン提案時にサイトの余白感を確認するため、スタンダードなもの、余白多めのもの、その中間のバランス型で、松竹梅のレイアウト案を提案しました。いつものシフトブレインの感じで進めると、余白の多さにびっくりされるかもしれないという懸念があったためです。個人的にいつもと違う進め方ができたことが印象に残っています。
工藤さん：結果的に1番違和感のなかったバランス型のレイアウト案にすんなり決まりましたね。逆に、このタイミングでレイアウトに明朝体が使われていることが気になってお伝えした覚えがあります。
道合：プロダクトがビジネス寄りだったので、最初はシンプルでかっちりとした分かりやすいレイアウトを目指していたんです。誠実な印象をファーストビューで伝えるために、明朝体はポイントで使う予定でした。ですが、デザインを進めて全体を俯瞰してみた時にやはり少し堅すぎる印象があって。途中、柔らかい雰囲気を出すためのディレクションを藤吉さんが加えてくれました。太い曲線と親和性があるゴシックに変更したんです。モーションとの親和性も考えて英語の書体も追加したりで、方向転換もありましたね。
工藤さん：フォントやデザインのトンマナに関しては私の他にも様々な意見がありましたが、1度提案していただいたものに対してそれらを伝えるのが色々と決まった後になってしまったこともありました。それでも本当に最適なものはなんだろうかと、そのタイミングでも諦めず検討してもらえたので、最終のアウトプットはCREATIVE SURVEYらしさが出たものになったと思います。
工藤さん：サイトや映像制作でプロダクトの機能を紹介するイラストやアニメーションをいくつか作ってもらいましたが、かなりイメージがしやすくわかりやすいものでした。というのも、これまでのCREATIVE SURVEYでは、実際のプロダクトのスクリーンショットを使うしかアイデアがなくて。それだと画面を縮小して掲載しているだけで、文字も読み取れず意味がわからなくて伝わらないのではと思っていました。
それを抽象的かつわかりやすいイラストにして、軽くアニメーションでの演出もつけてもらって......スクリーンショットを使うよりも、断然に分かりやすく伝わりやすくなった点にすごく感動しました。どのように作られたのかを伺いたいです。
道合：最初の戦略フェーズで、クリエイティブサーベイの皆さんからリファレンスのサイトや競合にあたるサイトをいただきましたが、自分の方でもSaas系の企業サイトをリサーチしていました。
同時に工藤さんとベイジの佐々木さんとも、どういう絵を見せたらいいのか議論してすり合わせていって.......自分も旧サイトのようなスクリーンショットの画面は堅い印象だし、内容もあまり入ってこないなと感じていました。そもそも、実際のアンケート画面を載せたとしてもアンケート自体がカスタマイズできるのに、固定の画面を載せていいのかなっていう疑問もあって。だったら、少し抽象化したイラストに落とし込みたいなと思って今のものに行き着いたんです。
ただ、商材が少々複雑なのでしっかり理解しないとデザインに落とし込めなくて、作るのは結構苦労しました。工藤さんにもご協力いただきながら、佐々木さんにも客観的な視点でコメントをいただいて......自分の中ではみなさんのフィードバックを受けて、どんどん良くなっていった印象があります。
工藤さん：私たちにとってもCREATIVE SURVEYというアンケートツールは、表現するのがすごく難しい商材でした。 そこをイメージしやすい形にしてもらえたのは本当によかったです。
誰から見ても身近に感じるプロダクトへ
——サイトリニューアル後の社内の反響はいかがでしたか？
工藤さん：プロジェクトとしては今後の対策やコンテンツの拡充などサイトを成長させていく課題は残っていますが、それでも大きく確かなインパクトを持ってブランドイメージのアップデートが完遂できたのかなと思っています。ベイジさんにも導線整理をしっかり行っていただき、コンバージョンを最大化させる基盤が完成したので、社内からは期待の声が上がってきています。
反響として1番衝撃を受けたのは、社内向けにサイトリニューアルのリリースをアナウンスした時にマーケティング以外のセールスや採用チームからも意見やフィードバックがきたことですね。
具体的な意見の一例をお話すると、採用チームからはグロナビに採用情報を追加してほしいと言われました（笑）。マーケティング的な観点では、採用情報が目立つ位置にくるのは回遊導線がずれてしまうので、さすがに断ったんですけど......。他の採用メンバーからも同じような要望がきていました。今までそんなに興味がなさそうだったところからも声が上がるのは、今回のリニューアルによって「よりサイトを活用していきたい」「自分たちの武器にしていきたい」といった意欲が溢れてきてたのかなと思います。社内のメンバーが自分ごととして捉えてくれたのはとても嬉しい反響でした。
カンファレンス出展用の映像も、イベント内でCREATIVE SURVEYの立ち位置や存在感をアピールできたと思います。それによりノベルティなどに対しても、もっとこうした方がいいよねといった意見が社内からどんどん出てきています。
今回のサイトと製品紹介動画によって作られたCREATIVE SURVEYの世界観やブランディング。それらを通じて、社員が自信や誇りを持つことによって社内のモチベーションも高くなったんだと思います。
他にもビジョンの『ビジネスと顧客、人と人をつなぐ No.1 アンケート・コミュニケーション・プラットフォームになる』の輪郭がよりシャープになったと感じています。今まで理解をしてはいたけど説明することが難しかった部分が、サイト上でテキストやイメージになって表現されたことで社員の理解もより深まり、明確になりました。
サイトリニューアルの反響や成果は『【3社連動企画】強力タッグでのCREATIVE SURVEYサイトリニューアル解説：クライアント編』でも詳しく語られています。
——最後に今回のサイトリニューアル全体についての感想をお聞かせください。
道合：今回は特殊な座組みだったので、最初は少し不安な部分もありました。ですが、PMがコミュニケーションの場を頻繁に作ってくれて細かくすり合わせをしながら進められたので、最終的にはいいものが作れたと思っています。途中にデザインディレクションの変更がありつつも良い方向に持っていけましたし、自分の強みだったマイクロインタラクションや小さいアニメーションも生かせたので、とてもいい経験になりました。
藤吉：同じく途中でディレクション変更がありましたが、その時にイメージしたところにしっかりと着地できたのがよかったです。モーションの細かい詰めがあってこその着地なので、エンジニアの力も大きかったと思います。
CREATIVE SURVEYはプロダクト自体にとてもポテンシャルがあるツールですが、一方で伝えることが難しかった部分がありました。今回はそれをほどよく揉みほぐすことができたのではと思っています。
工藤さん：おふたりを含めてご協力いただいた皆さんに、感謝の気持ちでいっぱいです。細かな問題や意見にも諦めずに挑んでくれる姿勢や、こだわるべきポイントには必然性を共に理解しようと歩み寄ってくれたところ、言葉に表現できない部分を一緒に頭を抱え考えて提案してくれたところなど、とても感謝しています。また、クライアントの立場としてはもちろん、クリエイティブに携わる1人としてシフトブレインさんとタッグを組みプロジェクトを遂行できたことに達成感を感じています。
これからもCREATIVE SURVEYはさらに進化するためにアップデートや運用を行っていきますが、様々な施策で今回作成したブランドアセットをフル活用していきたいです。CREATIVE SURVEYがアンケートを超えた可能性を持つコミュニケーションプラットフォームというツールであることを、もっともっと世の中のたくさんの人に知ってもらいたいと思っています。
▼関連記事もあわせてご覧ください！
【3社連動企画】CREATIVE SURVEYサイトリニューアル解説
●クライアント編（クリエイティブサーベイ）
●戦略設計編（baigie）
●代表編（クリエイティブサーベイ代表 田口さん）
▼ 採用情報
シフトブレインでは、新しい仲間を募集しています。全社フルリモートのため、全国からのご応募をいただけます。募集の詳細は、Wantedlyにてご覧ください！
▼ SHIFTBRAIN GOODS STORE
Interview,Text: SAKA Mihoko