【プロジェクト裏話】Nグループオフィシャルサイトリニューアル。Z世代向けページづくりの成功のカギとは？

こんにちは！
PANORAMA Inc. 広報担当です。

PANORAMAの制作内容をご紹介するプロジェクト裏話シリーズの第9弾。
今回は、「Nグループ」さまのコーポレートサイトリニューアルプロジェクトについてご紹介いたします！

制作メンバーに、プロジェクトのスタートからサイト制作の方向性策定に始まり、ページのUIの裏側にある目に見えぬ苦労やプロジェクトの総括を詳細に伺ってきました。

Works Information

◎Client
株式会社N Group

◎Website
https://www.n-grp.net/

◎Date
2024.12.24

◎Job
Web Planning / Design / Development

TikTok LIVE提携パートナーであり、ライバーとして活動するクリエイターのマネジメント、新人発掘・企画・プロデュースなどを行う総合エンターテインメント事業会社。専属ライバーを3000人以上抱え、総売り上げは100億円を超える業界大手。

2024年にNグループの認知拡大や、ライバー志願者による所属応募の拡充を目的として「Nグループオフィシャルサイト」リニューアルを、PANORAMAで担当させていただきました。

◎Credit

○具体的な施策について

１．キーワードは、期待感と信頼感

―――まず本プロジェクトは、どんな背景でどのような課題意識からスタートしたのでしょうか？

青柳：Nグループの前身の会社のコーポレートサイトがあり、そのサイトをリニューアルするという案件でお話を伺いました。
当時のサイトは、もちろん社名や事業内容の説明はありましたが、ライバー事務所を運営していることや、そもそもどういう会社かというのが伝わりづらい状態になってしまっているという第一印象を受けました。

蕪木：リニューアル前のサイトは、ライバー志願者が見ても応募しようという気持ちを想起できない状態で、ライバーへのアプローチは社長自らがSNSなどのDMでスカウトを行うことが多かったそう。
まずは事業概要を一目でわかるよう簡略にまとめること、そして事務所に所属したいと志願するライバーの応募をサイト経由で増やすということが大きな課題でした。

期待感と信頼感を与えるサイトを目指し上記ポイントを元に、TOPページのワイヤーフレームへ落とし込んでいきました。

中尾：デザイン着手時の初めのアクションとしては、“Nグループに入りたい”と直感で思ってもらうデザインが必要だと考え、デザインコンセプトを作っていきました。
具体的には3つのデザイン要素があります。

まず1つ目は“なんだか楽しそう！”という感覚的な側面。
比較的若い層をターゲットとしているため、ぱっと見た印象で“なんだか楽しげ！”と感じてもらえる雰囲気を作っています。

2つ目は、“人気な事務所だから！”という期待と安心感。
例えば、有名なインフルエンサーや芸能人が所属していると、入りたい思えたり、安心感のある事務所だという印象に繋がる。
そういった人感を出すことで、期待や信頼、憧れを感じてもらえるように作っています。

3つ目が、“この事務所なら！”と思わせる信頼感。
多くは一般人から事務所所属のタレントになるということが初めての経験となるため、情報を分かりやすく、実績のあるメジャーな企業であることが伝わるように、洗練されたトーン作りを行っています。

「期待感と信頼感」という抽象に対し、マインドマップでキーワードを抽出したり、競合サイトの分析や若い層をターゲットとしたビジュアルのリサーチなどを経て、具体的なデザインに落とし込んでいく作業を行いました。

蕪木：実際にNグループ様とも、「こういう雰囲気にしていこう」という話を密にしていました。実際にご相談をいただいてからこの詳細な提案までは、１か月くらいの急ピッチで進行していたと思います。

２．細部にこだわったポップな世界観

―――“なんだか楽しそう”という感覚的な期待感を与えるために、具体的にはどのようなことを行ったのでしょうか？

中尾：アニメーションや色味など複数の要素がありますが、「楽しくお仕事できそう！」という期待や将来像を想像してもらう、情緒的な部分にアプローチしています。
その表現のために“思わずパケ買いして揃えたくなるような、カラフルで楽しいポップな世界”を演出しました。
反面、多色使いをすると幼い雰囲気になってしまうので、そういったバランスも考え抜きました。

アニメーションは、ボタン等のマウスオンやページ遷移のトランジションなど、ポップな雰囲気を演出するためにイージングの値にもこだわっています。
それと実は、ページ遷移やリロードする度にアクセントカラーが変化するといった演出も仕込んでいます。このあたり含め奥井さんと細かく調整をしました。

奥井：すごくシンプルな動き方ですが、実は手がかかっています！
具体的な動き方まで、詳細な指示を中尾さんがくれたので進めやすかったです。

―――たしかに、ページをスクロールするごとに、ボタンや背景など常に視界でなにかが動いているというのが、ポップで楽しい雰囲気を感じます。それでも子供っぽくなりすぎないのは、色味の統一感があるからなのですね。

３．双方にメリットをもたらした巧みなストックフォト使い

――――もう一方のテーマである「信頼感」のほうはどんなふうに表現していますか？

蕪木：信頼感という点では、所属人数の多さや業界での規模など、実績の数字を分かりやすくまとめるページを作成。
「Nグループにはこんなに仲間が増えてます！」「この事務所であれば所属してやっていけそう！」という印象を与え、不安な気持ちを払拭できるようにしています。

齊藤：Tiktokのライバー事務所としては売上が世界一であることなど、数字を可視化することは競合他社との差別化という意味でも重要。
Nグループ様ならではの強みだったので、そこを強く打ち出しました。

中尾：情報を分かりやすく伝えることにプラスして、先述の通りパッと見て安心感・信頼感という印象を与えるために"人感"を出す事も大事にしました。
そしてキービジュアルに出ている方々は実際にはNグループに所属しているライバーさんではなく、ストックフォトを使っていたりします。

―――――えっ、それは全く予想できませんでした。てっきり所属のライバーの方かと…！

青柳：効果ばっちりじゃないですか～！

（一同：笑）

齊藤：長い目で見た時のサイトの運用面を鑑みて、実際の所属ライバーではなく所属ライバーのようにみえる写真素材を使い、ブランドの世界観に合うようデザインの調整を加えてTOPページを作りました。
そのおかげで制作面でも享受があり、かなりスケジュールが短縮されましたし、安心して長く使っていただけるサイトにできました。
Nグループ様にも弊社にも双方に取って良い判断でした。

４．目指すべき理想と現実のギャップを埋める

―――「期待感と信頼感」というテーマのもと、作るべきサイトのイメージが固まってからは、制作フェーズは順調に進みましたか？

蕪木：タイトなスケジュールのプロジェクトでした。
叶えたいことをスケジュールに落としていくうえで、一部の要素はチームで話し合い、優先順位を見直しながら進めました。

奥井：設計の視点では、作りたいイメージに合わせて僕のほうから工数やかかる時間を提示して、どこを叶えることを優先するかをメンバーと一緒に決めていきました。

中尾：奥井さんとの作業で苦戦したのは、デバイスごとの最適化。
プロジェクトスタート時はスマートフォン用サイトを作るというプロジェクトだったのでデザイン期間や構築の工期も短めでした。

ただ、ターゲット層向けにスマホデザインを作り込むのと同じくらい、実績もある会社としてのメジャー感・信頼感を出すには、PCサイト側もスマホページとは違うデザインできちんと最適化すべきだと判断。
PCでの閲覧体験としての心地よさも、しっかりと担保する方向に舵を切りました。

奥井：構築期間が1ヶ月半程度しかない中、ページ数は多くないけれど全体的に演出が入ってるサイトなので手数が多く、どこまで対応しきれるかが問題でした。
結果、PCとスマホ両方でうまく機能するパーツを中尾さんが考えてくれて、最小限の労力でそれぞれのアウトプットを実現できました。
 
中尾：同じパーツの積み方を変えたりすることで、工数を減らせました。
写真が使えないなら別のなにかで代用する、時間が足りないなら注力する部分を決めて極力工数を少なくする。
そんなふうに現実のリソースで理想にどこまで近づけられるかを考えていきました。その結果、双方が満足のいく形に仕上げられたと思います。

―――――ページを見る限りではPCもスマホも最適化されていて、急ピッチで仕上げられていたことに驚きました。そういわれてみると、PCページでは両側にスペースがあるように見えます。右側はちょうどその余白に「LINEで相談」のアニメーションがはまっていますね

５．“ワクワク”すると人はボタンを押したくなる？

―――完成したサイトでは、PCもスマホも「LINEで相談」というページ右側のボタンが視認性高く配置されているのが印象的です。問い合わせフォームからの応募ではなく、LINEに限定しているのが現代らしく、若い方には心のハードルが下がるだろうなという印象を受けます。

青柳：この5つの動物の絵文字が毎回かわりつつ顔出すみたいなボタンのことですね。
スクロールしてもずっと付いてくるので、とても目立っていますよね。

蕪木：LINEに応募窓口を絞ったのは、クライアントのご意向でした。
ターゲットはZ世代としていたため、今回は割り切って問い合わせフォームは作らずに、すべてLINEで完結させようと定め、最終目的に向かって逆算した形のデザインが可能でした。

中尾：この問い合わせボタンは、今回のサイトの肝です。
「サイトからの応募を増やす」というゴールに対し、注目を集めて問い合わせの動線としてもしっかり機能し、楽しげな印象にも繋がっているはず。

奥井：ここの動き方は、中尾さんが特にこだわっていた印象です。
5キャラクターの順番や変わる速度、出入りする動きなど、細かくすり合わせて実装しました。
一見シンプルですが、今回のプロジェクトで一番苦戦した部分でもありました。

――――問い合わせフォームは潔く辞め、LINEで応募のボタンをページの肝として据えること、それがこのページのキーポイントなんですね。

６．ひとつひとつのコピーにも魂を

――――ここまでお話を伺って、カジュアルでポップな側面と信頼感を与える効果、絶妙なバランスを保っているというのが印象的です。そのほかにも注力ポイントはありますか？

中尾：アニメーションのほか、そもそもボタンを押したくなるようにするという意味では、ことばの力も大きかったと思います。
うまく導線になるボタンにするために、齊藤さんが活躍してくれました。

齊藤：TOPページのボタンたちは最初「もっと見る！」「もっと知る！」「もっと読む！」みたいなシンプルなものだったんです。
でもビックリマーク（！）をつけすぎて、“ちょっと幼稚に見える”とNグループ様から指摘されてしまって…。（苦笑）

蕪木：それで齊藤さんが代案をたくさん持ってきてくれて、みんなで出し合ってすべて作り変えたんです。
結果とてもいい効果のあるボタンになったと思います！

齊藤：ボタン以外に見出しなども、比較的若いユーザー層に刺さるワードにすることを意識しつつ、ライトになりすぎないような塩梅を見つけて提案しました。

青柳：プロジェクトメンバーで唯一のTiktok世代であり、唯一の女性なので頼りにしていましたよ。

中尾：小さなボタンひとつとっても、ことばや動きが大事。
動きの部分は奥井さんが、ことばは齊藤さんが最後までこだわり抜いてくれました。

○プロジェクトを振り返って

――――プロデューサーとしてチームを俯瞰してきた青柳さんの目線で、今回のプロジェクトはいかがでしたか？

青柳：かなりタイトなスケジュールの中で、このバランスで仕上げるのはすごく難しい。
もともとのご要望に対して、リソースが足りていなかった中で、自分たちでどうできるかというラインをそれぞれが尽き詰めていってくれた感じがあります。

リニューアル前のサイトには全然情報がなかったし、その状況からディレクター陣がコンテンツとして打ち出せるものをクライアントから引き出し、そしてその引き出した分だけ増えた内容をデザイナーとエンジニアが実現できる形を探りながらまとめる。

どこまでやるか、やりたいけど可能か、みたいなところの瀬戸際で、やり切ってくれたことに感謝しています。

蕪木：リニューアルしたサイトが完成したとき、クライアントが「こんな変わるんだ」とすごく驚いた顔をされてたんですね。
その表情が印象的で、1年前のことですがその瞬間のことがすごく脳裏に浮かびます。
あの顔を見た時にやり切れてよかったなって思いました。

――――サイトを見てくれる皆さんには、このぴょこんと出てくるLINE相談フォームの動物たちに注目してもらいたいですね。ブタにペガサスに、ヒヨコ…、見るたびに皆さんの顔を思いだしそうです。

中尾：とにかくここからの応募がもっともっと増えてくれたら嬉しいです！どんどんクリックしてほしいですね。ぜひよろしくお願いします。

本年最後のnote記事、「Nグループオフィシャルサイト」のリニューアルプロジェクトについて、メンバーによる座談会を通して制作の裏側をお届けしました。
本年も弊社note記事をご覧いただき、ありがとうございました！

また、プロジェクトなどでPANORAMAと関わっていただいたクライアントのみなさま、パートナーのみなさま、改めてありがとうございました。大変お世話になりました。

2026年もモノづくりへの想いを大切に、皆様の景色を変えられるクリエイティブを提供できるよう努めて参ります。
それでは皆様、良いお年をお迎えください。

▼他のプロジェクト裏話はこちら