NEWPEACEのWebサイトはどう生まれたのか？スタジオディテイルズの妥協なきクリエイティブと対話に迫る

創業以来、スタートアップを中心にビジョン開発やブランディングの支援をしてきたNEWPEACE。2023年4月には、継続的な支援として新たに「コミュニティマネジメント」を開始することになりました。

それに伴い、同社のリブランディングに並走したのがグッドパッチとスタジオディテイルズ。グループで一丸となって、約9カ月にわたるプロジェクトを駆け抜けました。

本記事では、プロジェクトの後半にあたるWebサイトのリニューアルデザインを中心に、リリースされるまでの軌跡に迫ります（プロジェクト前半の記事はこちら）。リリース直後にSNSで大きな反響を呼び絶賛されたデザインはどのように生まれたのか？　4人のプロジェクトメンバーに話を聞きました。

話し手：
NEWPEACE アートディレクター YOPPYさん
スタジオディテイルズ ディレクター 湖内慶吾
スタジオディテイルズ アートディレクター 小猿啓太
スタジオディテイルズ エンジニアチームリーダー 岩崎航也

クリエイティブと開発、両軸の強みを持つスタジオディテイルズへの期待

──まず、スタジオディテイルズの皆さんにお伺いします。クリエイティブの企業として有名なNEWPEACEのリブランディングという、本プロジェクトをどのように捉えられていましたか？

スタジオディテイルズ（以下SD） 小猿：
同業種、同業界なので、NEWPEACEさんのことはよく存じ上げていました。当然、業界からの注目度も高くなるので、楽しみな反面、プレッシャーは大きかったですね。

SD 湖内：
そうですね。楽しみであるのと同時に、期待を超えることの難しさも感じていました。グッドパッチと共同でプロジェクトをやるのも初めてだったので、なおさらです。

NEWPEACE YOPPYさん：
NEWPEACEはプロジェクトでWebのディレクションをすることはあるのですが、デザイン会社ではありません。自分たちだけではできないからこそ、クリエイティブと開発の両軸の強みを持つスタジオディテイルズへの期待がありました。デジタル領域のプロということで、とても頼もしかったですね。

NEWPEACE アートディレクター YOPPYさん

──YOPPYさんは、アートディレクターとしてプロジェクトに初期から参加されていますが、プロジェクト開始時の課題はどこにあったのでしょう？

NEWPEACE YOPPYさん：
「コミュニティマネジメント」というサービスを立ち上げるにあたって、当時はNEWPEACEの未来の姿が、まだ誰も見えていない状態でした。このサイトリニューアルは、会社にとって大きな転換点と言えます。私だけでなく、他のメンバーや経営陣を含め、「今後、NEWPEACEをどうしていきたいか」という根っこの部分を把握しなければ、ディレクションは難しいと感じていました。

私は創業期からのメンバーですが、これまでのNEWPEACEらしさを保ちつつ、どこに着地させたら新たなNEWPEACEらしさを感じてもらえるか？　というところをディレクションするのが、社内のアートディレクターとしての私の役目でした。

──なるほど。自社のことを自分たちで定義し、打ち出す難しさについてはグッドパッチの土屋も言及していましたね。グッドパッチからスタジオディテイルズにバトンが渡されたのが2023年8月末だったと伺っています。何から手をつけられたのですか？

SD 湖内：
今回はWebサイトのリニューアルがメインとなるプロジェクトでしたが、NEWPEACEの新たなビジョンを定義する議論を引き継ぎ、YOPPYさんも触れた「新たなNEWPEACE像」と「既存のNEWPEACEらしさ」を改めて探るところからスタートしました。

二人三脚で「NEWPEACEらしさ」を再定義、上流から共創するプロセス

──NEWPEACEらしさを検討する中で、実際にどんなキーワードが出たのですか？

NEWPEACE YOPPYさん：
コミュニティビジネスという新たな領域をアピールするにあたって、最初のころは「Z世代」「デジタル」「コミュニティテック」といったワードを挙げていました。

しかし、その結果、提案いただいたものはとてもカッコいいんですけど、静的な印象に違和感が残って。そこから改めてNEWPEACEらしさを考えたときに「パッション」や「遊び」といったキーワードが出てきたんです。その要素をどうデザインに落とし込んでいくかが焦点になりました。

イラストの線の軌跡ひとつとっても、「なんか硬い」印象だとNEWPEACEらしくない。ダイナミックさや躍動感が大切だということが見えてきました。

SD 湖内：
キービジュアルに留まらず、ビジネスモデルなどを解説する図版も同じトーン＆マナーでそろえるという点が難しかったですね。通常、図版は情報を分かりやすく見せるため、シンプルなデザインで作ることが多いので。あんなにたくさん図版をリテイクしたのは初めてでした（笑）。

──それは……。非常にご苦労されたのが伝わってきます。

SD 湖内：
コミュニティそのものに決まった形がないため、「コミュニティビジネス」に対する唯一の正解がないというのも大きな要因でしたね。通常、弊社がクライアントの「らしさ」を定義する際は、ヒアリングとディスカッションを行って提案することが多いのですが、正解がない中で「NEWPEACEらしさ」にたどり着くためには十分な議論と時間が必要でした。

スタジオディテイルズ ディレクター 湖内慶吾

──確かに「コミュニティ」という言葉や、存在自体は古くから人間社会にあるだけに、新規性やNEWPEACEらしさを出すのは難しそうですね。

SD 湖内：
そうなんです。だからこそ、これまでコミュニティというものが人々や社会の中でどのように認知されてきたのかを踏まえた上で、NEWPEACEさんが今後提供していく「コミュニティ」の目指すあり方を整理し、その上で、潜在顧客はどこにいるどんな人たちで、どんなニーズを持っているのか。NEWPEACEが社会へ提供する本質的な価値は何なのかを、チームで膝を突き合わせてディスカッションしました。

その結果、当初から大前提として掲げていた「コーポレート表現ではなく、マーケの入り口として機能させる」ということにも、コミットし切れたのではないかと思います。

──「ここにコミュニティマネジメントを任せよう」と思わせるデザインが求められたと。YOPPYさんはここまでの過程をどう感じられていましたか？

NEWPEACE YOPPYさん：
これから走り出す新しい事業のイメージをゼロから作っていくのは難しかったですね。そこからスタジオディテイルズさんに伴走いただいてありがたかったです。自分たちだけではできなかったと思います。

SD 湖内 ：
プロジェクト開始から「NEWPEACEらしさ」を掴み切るまでの間、どうしても僕らが感覚を少し外してしまうシーンがあったと思います。そこをCEOの高木さんにもアイデアをいただいたり、YOPPYさんに伴走いただいたことで、8カ月ほどかけて、現場の皆さんが拠りどころとなるようなビジョンにたどり着くことができました。

──YOPPYさんとスタジオディテイルズ、どちらもがアートディレクターとしてプロジェクトに関わるというのは珍しいケースですよね。

SD 湖内：
はい。プロジェクト開始前は船頭が多い状況に対して少し不安もありましたが、YOPPYさんが受発注の垣根を取り払った、率直なコミュニケーションをとってくださったことで、常に本音で議論ができ、プロジェクトの精度とスピードの向上につながったと思います。

NEWPEACE YOPPYさん：
ディテイルズさんもやりづらいかなとは思っていました（笑）。ただ、私としてはとにかくお互いにいいと思うポイントに着地したい、という思いを持って、同じチームのメンバーとして二人三脚でやってきた感覚が強いですね。

「カルチャー感」が突破口に──キービジュアル誕生でプロジェクトが大きく前進

──ここからはWebサイトで最も目を惹く存在である、キービジュアルについて伺っていきます。小猿さんがイラストのデザインを担当されていますが、キービジュアルはどのように決まっていったのでしょう？

SD 小猿：
全部で5案ほど、テイストの違うデザインを提案しました。その中に現在のキービジュアルの源流になるようなイラストデザイン案があったのですが「方向性としては合っているが、トーン＆マナーがNEWPEACEらしくない」というフィードバックをいただいて。

NEWPEACE YOPPYさん：
どれもカッコいいと思ったのですが、その時点では、Webサイトで伝えるべき会社の提供価値が決まっていなかったため、どういったビジュアルがふさわしいか、決める基準がなかったんです。なので、先行して他のデザイン要素を決めて「NEWPEACEらしさ」がより見えてきたタイミングで、再度キービジュアルの検討に入りました。

SD 小猿：
ムードボードで目指す方向性は絞られつつあったのですが、イラストのトーンひとつとっても、NEWPEACEらしいかどうか、意見が大きく分かれる状況でした。最終的には、何度も形に起こしながらイメージをすり合わせて決まりましたね。

スタジオディテイルズ アートディレクター 小猿啓太

──NEWPEACEらしいトーン＆マナーとは、具体的にどんなものですか？

NEWPEACE YOPPYさん：
最初に提案いただいたデザインは、色調が黄色と黒でした。以前のNEWPEACEはまさに黄色と黒がロゴカラーだったのですが、それでは印象としてあまり変わらない。現在のロゴにリニューアルした際、サブカラーとしてピンク・赤・緑・水色・青・グレーが加わったので「ブランドカラーを全色使いたい」とご相談したんです。これだけの色数を使ってデザインしていただくのは、大変だっただろうなと思います。

初期のデザイン案

デザインの最終案。ピンク・赤・緑・水色・青など、各ブランドカラーが取り入れられたものとなった

SD 小猿：
YOPPYさんがビジュアライズの参考として、あるサムネイルを送ってくださったのを覚えていますか？

NEWPEACE  YOPPYさん：
最終案が出る直前に共有したものですよね。「NEWPEACEが体現しているのはこんな雰囲気なんじゃないか」と感じた弊社ブログ記事のサムネイルで、「ストリート感」や「カルチャー感」をまとったものでした。そこにNEWPEACEらしさのエッセンスがあることに気がついたんです。

──そのイメージとキーワードがブレークスルーのきっかけに？

SD 小猿：
そうです。当初の案ではキーワードとして「プロフェッショナル感」「コミュニティテック」「Z世代」などが挙がっていたため、ストリート感やカルチャー感といったカジュアルさを強く意識していませんでした。

今までのNEWPEACEさんが築いてきた「らしさ」を資産として、きちんと残すことを改めて考えたとき、YOPPYさんがおっしゃった要素を入れないと大きな乖離が起きてしまうと気付き、最終案に取り入れたんです。NEWPEACEらしさで譲れない部分を考え抜き、共有いただいたことで、最後のピースをはめることができたと思います。

SD 湖内：
最初にリブランディングの方向性を議論していたころは、テックに寄せすぎてSaaS企業のような印象になってしまったり、逆にカルチャーに寄せすぎると、出版社のように見えてしまったりという違和感がありました。未来のNEWPEACEらしさを見据えたときに「コミュニティテックカンパニー」に「カルチャー感」をまとわせる組み合わせが、バシッとハマりました。

NEWPEACE YOPPYさん：
最終案のイラストを見たときは「これだ！」としっくりきました。グッときたポイントがいくつかあるのですが、キービジュアルの中にある、文字を背負ったイラストで使用されているフォントがNEWPEACEのCI（コーポレート・アイデンティティ）フォントなんです。それをイラストと合わせていただいたことで、よりNEWPEACEらしい表現になりました。

資料のテンプレートも刷新　キービジュアルが会社の世界観を表すアセットに

──今回のプロジェクトでは、すべてのイラストを小猿さんご自身で手掛けられたんですよね。

SD 小猿：
通常はクライアントが伝えたい言葉や、まとわせたい印象に対して、トーンが合うイラストレーターさんのアサインを提案するケースが多いのですが、今回の場合、イラストレーターの個性でNEWPEACEらしさを描き切るのは難しいと判断しまして。

──外部のイラストレーターさんに依頼する場合、それまでに決まった方向性などを言葉で伝え、ディレクションする難しさもありそうです。

SD 小猿：
優秀なイラストレーターであるほど、その方の個性が強く反映されると考えたときに、NEWPEACEさんは多様性を大切にされている企業なので、イラストによってイメージが規定されすぎるのを避けたいと考えました。その上でNEWPEACEらしさを表現し切るため、繊細なバランスを大切にするために、今回は外注せずに自ら作りながら調整を重ねていくやり方が一番良いと考え、インナーでやり切ることを決めました。

NEWPEACE YOPPYさん：
小猿さんに描いていただけて本当に良かったです！決めた方向性にばっちりハマっているだけでなく、他のページを含むWebサイト全体を、キービジュアルを基準に統一された世界観で表現してくださったことに感謝しています。

見ていただくと分かるんですが、キービジュアルのモーションが横に流れて変化するようになっているんです。本当にたくさんのポーズのイラストを描いていただいたおかげで、それぞれパーツごとに切り出して、クライアントの報告資料などに使えるアセットとしても活用しています。

本当に使いやすいですし、扉ページなどにイラストを挟むことで、Webサイトと同様のNEWPEACEらしさが感じられるようになるのでありがたいです。

報告資料や会社説明資料などにも、キービジュアルのイラストを使用しているという

SD 小猿：
うれしいです。今見せていただいた資料も、以前と比べて全体的に柔らかい印象になっていますね。従来のトーン＆マナーの体裁とは違う印象を受けました。

NEWPEACE YOPPYさん：
せっかくこんなにNEWPEACEらしさが表現されたWebサイトを作っていただいたので、資料のテンプレートやブログのサムネイルなど、他のデザインに関してもなるべくWebサイトの世界観に合わせていきたいと思い、公開後半年ほどかけて一新しました。

SD 湖内：
頻繁にアップデートされているにもかかわらず、記事などのサムネイルのアートワークなども全体のトーン＆マナーを崩さないように作り続けていただいてうれしい限りです。こんなに使い倒してもらえるのか、と驚きました。

高度な実装技術を駆使して、複雑なアニメーションと軽さを両立

──キービジュアルのアニメーションの話も出ましたが、エンジニアの岩崎さんが実装を担当されたんですよね。これだけ滑らかに動くようにするのは、大変だったんじゃないですか？

SD 岩崎：
そうですね。ページ全体を見渡してもさまざまなイラストの要素がありましたし、アニメーションの量も通常と比べてかなり多かったので、実装するやりがいを感じていました。どのようにしたら、イラストの賑やかでポジティブな雰囲気をアニメーションで表現できるかを意識しながら実装していきました。

スタジオディテイルズ エンジニアチームリーダー 岩崎航也

──アニメーションの動きの一つ一つはどのように決めていったのでしょう？

SD 岩崎：
基本的にはデザイナーから「こういう感じにしたい」と指示をもらうことが多いですが、実装の過程で気付いたことがあれば、僕から提案することもありますね。今回で言うと、例えばキービジュアルの動画部分です。

当初は「1回スクロールしたら、次のセクションに移動する」というシンプルな動きを依頼されていたのですが、それだと、エンジニアとしてはスクロール操作したときの気持ち良さや連動感がなくなることが気がかりでした。「こうしたらいいんじゃないか」と思うものを、作りながら小猿さんたちに見てもらって、スピードなどの調整を重ねて最終的に現在の形に着地しています。

──なるほど。これだけアニメーションがあると、表示スピードなどの動作も気になります。

SD 湖内：
そこは細かな調整を重ねました。デバイスやブラウザごとに何度も動きを確認しながら「まだちょっと重い」「若干カクつく」など、気になる点をとにかくつぶしていきました。

SD 小猿：
NEWPEACE COOの村上さんからいただいた、印象に残っている一言があります。ミーティングでキービジュアルの動画を見て「本来、こういう演出過多なサイトは嫌いだけど、これは演出が多いのに、一切動作のストレスがなくそのバランスを実現しているのがすごい」と。あれは本当に嬉しかったですね。

SD 岩崎：
キービジュアルのアニメーションは調整が最も難航しました。エンジニアとして、単に派手な動きを実装するだけではなく、いかに軽くするかをひたすら突き詰めて実装しているので、そこが形にできてよかったですね。

──キービジュアルのほかに、実装が特に難しかったところはありますか？

SD 岩崎：
ページ遷移の見せ方が特殊で、前のページがある状態で次のページが重なってくるという、同時に2ページが存在する動きになっています。単純に1ページ消した後に、次のページを表示させる方が実装は簡単なんですが、前ページの位置やスクロールの位置を残したまま、はけさせるという形をしています。遷移の際にパフォーマンス面でストレスがあると良くないので、あくまで軽快に見えるように動き方を工夫しました。

SD 湖内：
派手なものではないけれど、技術的にかなり高度なことをしているんです。ページ遷移中にテキストが崩れてしまうなどのバグがリリースの3日前くらいまで直らず、かなり焦りましたが、岩崎が調整を重ねて何とか修正してくれました。

──YOPPYさんは、実際に動く状態のイラストを初めて見たときはどんな印象を持たれましたか？

NEWPEACE YOPPYさん：
とにかく感動しましたね。具体的にどこがどう動くのかまではデザイン段階では知らなかったので、実物を見て「ここも動くんだ！」というサプライズがありました。しかも、ただ動くだけじゃなくて、例えば文字の一つ一つが行進しているように見えたりして、本当に命が吹き込まれたような感じがしました。

他にも、ページ右下の問い合わせアイコンをマウスオーバーするたびに違うイラストが出てくる仕掛けになっています。スタジオディテイルズさんは、驚きや楽しさを作るのがうまいなと思いましたね。

SD 湖内：
僕が個人的に一番好きなのは、会社概要ページのメンバーのセクションです。もともとは静止画の写真だったのですが、小猿が「Zoomで会議をしているような動画を挿入したら、コミュニティテックカンパニーの雰囲気が出るのでは」とアイデアを出し、岩崎に相談して実現させました。面白くないですか？

NEWPEACEは、皆さんキャラクターが魅力的ですごく素敵な方ばかりなので、その人柄をしっかり伝えるために、1人ずつお時間をいただいて順番に動画を撮影したのも楽しい思い出です。

SD 岩崎：
大量の動画を同時に再生して、パフォーマンス面は大丈夫か？と心配が先に来ましたが（笑）、きちんとデータを圧縮すれば、問題ないことが検証で分かって実現できました。

SNSでも発揮された細部へのこだわり。一切の妥協がないモノづくりに感銘

──サイトリニューアル後、社内のメンバーの反応はいかがでしたか？

NEWPEACE YOPPYさん：
実はプロジェクトメンバー以外は、社内の人間にも公開の直前まで見せていなかったので、全社会議で初めて披露した際は、みんな「すごい！」「かわいい！」とテンションが上がっていました。

このWebサイトの公開後に入社したメンバーも多いですが、このサイトで会社概要を見て興味を持ったという人ばかり。Webサイトをリニューアルした威力を感じています。

NEWPEACEのトップページ

──採用にも好影響があったのですね。社外からの反応にはどんなものがありましたか？

NEWPEACE YOPPYさん：
クライアントからも「サイトを見たよ」と声を掛けてくださったり、ビジョンに共鳴してくださったり、目指したかった世界観がちゃんと伝わっている実感があります。当初から最重要課題に挙げていた「ビジネスの入り口として機能させる」という役割もしっかり果たしていますね。

──公開時には、SNSでも大きな反響がありましたね。

NEWPEACE YOPPYさん：
スタジオディテイルズさんの魅力的な発信のおかげです。制作陣一人ひとりのコメントをツリーにして投稿されていたのを見たとき、「そこまでやるのか」と細部へのこだわりを感じました。Webサイトで見てほしいポイントも動画でまとめられており、おかげで広く拡散されたと思います。評判が良くて感謝しています。

──プロジェクトを通して、スタジオディテイルズの特にどういったところに価値を感じていただきましたか？

NEWPEACE YOPPYさん：
やはり、一切妥協がないところですね。関わってくださった方全員が満足以上のものを作ってくれました。こちらのこだわりがあるポイントにおいてリテイクを重ねる中で「妥協してこの案で行きましょう」と言われることもあり得た状況だったと思っています。それでも諦めずに、より良いものを作るために一緒に議論してくださった。妥協を1ミリも感じなかったところが本当に素晴らしいです。

だからこそ、このWebサイトが公開して1年が経ちますが1つも粗がない。今見ても素晴らしいものだと思えます。

SD 湖内：
そう言っていただけて本当にうれしいです。冒頭にも触れましたが、受発注の垣根を取り払って、お互いプロとしてこのプロジェクトの北極星を最後まで追いかけ切れたこと、全員がそこにコミットできたということに尽きますね。本当に幸せなプロジェクトでした。約1年、毎日たくさんのやりとりをしたので、プロジェクト終了後は寂しさでNEWPEACEさんロスを感じるほどで（笑）。

NEWPEACE YOPPYさん：
素晴らしいクオリティのWebサイトを作っていただいたので、ここからは自分たちでコンテンツをアップデートしていかなければいけません。更新は大変ですが、最新の状態を保ちつつ、これからも「NEWPEACEらしさ」を表すブランドの拠りどころになるような場所として、大事にしていきたいです。

スタジオディテイルズについて

デジタル・ブランディングファーム「スタジオディテイルズ」では、今回のようなリブランディングプロジェクト以外にも、ブランド戦略と幅広いクリエイティブ制作を通して、クライアントのビジョンと世界観を明確にし、ブランド価値を向上させるブランディング支援の案件を多数手掛けています。詳しくはこちらからどうぞ。