サイトリニューアルで採用増　サイバーエージェントが問い続けた「CAらしさ」のゴール（2/3）

コンセプト定義の重要性

水野可奈子氏（以下、水野）：今回のコーポレートサイトのクリエイティブコンセプトを「Static & Dynamic」という定義でご説明させていただきました。

どのようなことかというと、サイバーエージェントはいつの時代もブレない普遍的な価値を持っている会社だということ。その上に、常に時代の潮流をつかんで、ユーザーに寄り添い、カルチャーに根づいていく要素と組み合わさって、1つの調和を生み出して、絶え間なく動いて、時に大胆に動いて、1つの枠に囚われることがなく、時にはみ出す姿もあるんですけれども、その姿さえも個性的で美しいというイメージを抱かせていただきました。

佐藤洋介氏（以下、佐藤）：僕は最後の言葉が好きなんです。「時にはみ出す姿さえ、個性的で美しい」。僕の抱えているサイバーエージェントのサービスにも、そのようなものが活きているなと思っていて、この一文は非常にきれいに収まったなと思います。

安成蓉子氏（以下、安成）：この言葉を作り上げるまでのプロセスが非常に重要ですね。

佐藤：ここまでで2ヶ月。

安成：ここに時間をかけるからこそ、その後がスムーズに動いていくんですね。

渡邉靖彦氏（以下、渡邉）：なかなかリニューアルでもない限りやらないじゃないですか。重要なのにやれないんですよね。

安成：ここまでみんなで向き合って時間をかけて、というのはなかなかできないですよね。これがイメージボードのもとになっていくと。

水野：そうですね。この後、いよいよそのイメージボードの制作に入っていきます。このイメージボードが何なのかというと、初めて見る方たちは「どのように捉えるといいのか難しい」とよく言われます。こちらは例えば、希釈する前の麺つゆのようなものです。

安成：エッセンスが詰まっていると。

水野：肉じゃがも作れるし、蕎麦もうまいといった、（エッセンスが）一番ギュッと詰まったものですね。

今回はこれがWebサイトに落とし込まれていますけれども、グラフィックツールや店舗デザインに落とし込まれていくケースもありますし、本当にここでは「アウトプットが何なのか」ということではなく、純粋にこの新しいブランドのイメージ、コーポレートのイメージが何なのかを追求していく1枚のグラフィックなんです。

安成：実際、Webサイト以外にも、今回できあがったイメージボードをもとにいろいろと発想されているとうかがいました。

佐藤：そうですね。ちょうど20周年と言ったんですけど、実は今、社誌を作っていて、そちらのデザインをすべて内製して作っているんですけど、内部のデザイナーに向けて「今のサイバーエージェントはこういうイメージだから」ということを、このイメージボードを使って説明しています。

安成：さっそく見せていただきたいです。

水野：さっそく3回にわたる私たちの戦いを。

佐藤：まず1回目です。

水野：こちらはまず「ALWAYS FRESH」という文字が目に入ってくると思うのですが、この「FRESH」という単語も……。

佐藤：これもヒップホップ用語なのだそうです。半年に1回スローガンがあるんですけど、いつぞやのスローガンが「FRESH」でした。

安成：それがもとになっているんですね。

佐藤：そうですね。

水野：こちらの意味は確か、「今までに見たことがない」。

佐藤：「見たことがない」もそうだし、「それをやることが新しい」「それはFRESHだね」といった言葉が社内で流行ったんです。「そのアイディアFRESHだね」という使い方までありました。社長の藤田が毎回、社内に流行る、浸透するスローガンを半年に1回ほど作るのですが、「この半年はこれで行こう」という感じで、この前のスローガンは確か「暗闇の中でジャンプ」です。

安成：日本語を使うときもあるんですね。

佐藤：ありますあります。「低姿勢」みたいなときもありました。

安成：深いですね。

かつてのブランドイメージを削ぎ落とす

安成：おもしろかったのは、これが全部NGだったんですね。「どれもすてきだな」と第三者から見ると思ったのですが。

水野：初めて見る方にご説明しますと、この「ALWAYS FRESH」という書体は、「Cyber Agent Sans」というオリジナルのフォントをもとに使わせていただきました。周りの緑色と形がどうしても、私たちの中にまだアメーバの……。

佐藤：昔のブランディングがまだ残ってるなという。

水野：でも、この曲線もいい加減な曲線ではなく、CとAのロゴの曲線の一部を使っているんですけれども、この緑が違いました。

佐藤：違ったわけではないんですけどね。

安成：緑色や要素が多すぎるということですか？

佐藤：パッと見たときにニュアンスが重なっているところも多く、水野さんが言っていたように、（イメージボードは）麺つゆみたいなものになるので、大枠のイメージ・デザインを作っているときに原点に立ち返る役割で言うと、もう少し洗練された感じが欲しいねという話で1回目を終えてます。

水野：2回目に行って大丈夫ですか？

佐藤：はい。

水野：「これは違いました」というやつです。

佐藤：要素を削ってもらったんです。

水野：この4つになって、緑が減ったのが見てとれると思います。そして、右と左に大きく2パターン分かれていると思うのですが、このあたりからサイトに入れていったときのことを想定し始めています。右側の後ろに引かれているグラフィックは各サービスです。サイバーエージェントさんで扱っているいろいろなサービスの画像が、トーンを抑えて敷かれています。

実際のサービスページに行くと、こういった画像ももちろん入ってきますので、そのあたりの想定をさせていただいています。これで「もっとシンプルに」ということをおっしゃられていました。

佐藤：これでも要素が多いんです。今やっていただいて細かいんですけど、右側に『ガールフレンド（仮）』といううちのゲームのアプリ（の画像があり）、下の水たまりに「FRESH!」と書いてあるんですけど、たぶんこれもまだアメーバを引きずっていらっしゃるんです。

水野：完全にアメーバですよね。

佐藤：そのアメーバの泉の中にビジュアルが収まっている。そういう表現から離れたいなというのがあって、もう少し観念化したいというのが2回目です。イメージ自体は近づいてきていました。

水野：でも、こう出していくことで、緑をもっと減らしたいと思う自分に気づく部分もありましたか？

佐藤：僕ですか？

水野：はい。こんなに「そっか、アメーバを引きずってるのはちょっと違うんだな」という違和感が、だんだん明確になっていくというか。

佐藤：そうですね。この1回目・2回目ぐらいで我々も意識をし始めました。

水野：これは同じやつ、さっきの拡大です。

佐藤：一番下に「21世紀を代表する会社を作る（To Create the 21th Century’s Leading Company）」というビジョンが載っているんですけど、後ろのイメージが透けていたり、書体のところに背景が入ったり、「このレイヤーな感じはすごくいいな」という話をしていました。

安成：なるほど。徐々に近づいていく。

水野：徐々に近づいて、もうひと踏んばりという。

渡邉：実際、今のサイトにもエッセンスが採用されています。

サイバーエージェントらしくないものは徹底的に取り除く

水野：いよいよ3回目です。見ていただくとわかるとおり、よりシンプルになってきて、削ぎ落とされてきています。このあたりの議論を思い出すと、ムダなもの・取れるものはとにかく全部取っていくというかたちで、「サイバーエージェントらしくないものは1つも残さない」というところまで来ていたかなと思います。

佐藤：わがままにオーダーをしたということはあって、「削げるものは削ぎたいし、もっとシンプルにしてほしい、だけどリッチにも見せたい」と。そういうところで写真の使い方、書体の付けた感じを入れていってもらいました。これが拡大版です。

水野：これは2パターンあったのかな？

佐藤：そうですね。

安成：この下の丸みたいなところが、実際のWebサイトにおけるボタンで使われていたりするんですか？

水野：そうですね。「機能美」もイメージザッピングのときに出てきていて、美しいデザインというだけではなく、Webサイトなので、動かしたり、インタラクションも想定して、触って使うものとしても美しいものということになってきて、ボタンの形状をここで全部入れていっています。

山下陽司郎氏（以下、山下）：右上のポコッとしているところも、実はインタラクションを表しています。

安成：ちょっと出てますね。

山下：シンプルにはしますが、あくまで個性的には見せたいというところで、インタラクションやアクセントとしてこのようなイメージで入れています。

安成：この後はマイクロインタラクション、どのようなところをこだわっていったかもお話しいただくんですけれども、そういったもののエッセンスも、このイメージボードにすでに詰まっているということなんですね。

水野：そうですね。動きを頭の中でイメージして作っているということです。

安成：実際にそのイメージボードで出てきたものを、どのようにWebサイトに落としていったかも、簡単に教えていただければと思います。

水野：先ほど、ブランドパーソナリティを作っていたと思うんですけれども、今度はブランドパーソナリティをサイトのパーソナリティに落とし込んでいくのが弊社独自のやり方なんです。ブランドを人に例えるのと同じように、Webサイトも人に例えたらどのような構造になるのかというところです。

そこに齟齬が起きないように考えていくというプロセスなんですけれども、今回、本当におもしろかったのは、スマホ版も重要ですので、スマホのナビゲーションのインタラクションも含めて、マイクロインタラクションに挑戦していこうというお話が初めからありました。

海外のサイトも国内のサイトも、インタラクションをがんばっているサイトを見ながら、「こういう感じ」というイメージを共有しました。

最近のWebサイトでは多くなってきていると思いますが、ボタンを横にスライドしたときに跳ね返ってきたり、画像が出てくるときに少しボワッと拡大したり、そのような動きがたくさんついていると思います。

あの動きのスピード感、跳ね返りのタイミング、それも動きというより感触に近い部分になってくるのかなと思いますが、そのようなものにも「全体的にサイバーエージェントらしいのかどうか」の考察が、今回入っています。

どのページにもサイバーエージェントらしさが表現されている

水野：このあたりのことを専門用語で「イージング」といいます。もっとすんなり出るもの、1方向だけで表示・拡大して終わるものもあれば、1回拡大して少し引っ込むといったものやもっと強烈にバウンスさせる動きなど、いろいろなイージングを作ることができます。

その違いだけで、Webサイトの表情ががらりと変わってきます。ですから、ここを適当に作ってしまうと一生懸命やっていた「ブランドイメージを確立させる」ということが乱れてきてしまいますので、今回はこのあたりの機能にこだわって作りました。

佐藤：アンティーさんと話をして、どこを切り取ってもサイバーエージェントっぽい見た目にはしたいし、印象を与えたいですよね。先ほど一番最初にあったコーポレートや企業情報、採用情報など分類は分かれますが、どこのページを見たときにも共通して、先ほどのイメージボードのような「サイバーエージェントらしさ」は表現したいということに取り組んでいます。

水野：今言っていた「イージング」というのが、実はこの「謎の波線」なんです。これがその動きを表していて、いろいろなパターンがあります。

今回はオリジナルの「イージング」を作ろうということで、「CA easeOut」「CA easeInOut」「CA easeOutBack」という3種類の動きを「各ボタンにはこれ」「ナビゲーションにはこれ」と割り当てていきました。

大きいものを動かすのと小さいものを動かすのとでは、やはりぜんぜん見た目が変わってきますので、この3つをそれぞれ使い分けているというお話です。

安成：おもしろいですね。実際にマイクロインタラクションの動きを確定していくには動作を作ってみて、「こんな感じ」「やっぱりちょっと違う」と感覚的に判断していくということでしょうか？

水野：モックアップを作らせていただいて、ある程度の方針まではいろんなサンプリングして、最初からモックアップを全部作っていくと工数が膨大になってしまうので、なるべく既存のものでやっていきます。

佐藤：参考サイトみたいなものを見せていただいて、「このへんの矢印はこの感じがいい」といったようなことでしょうか。

渡邉：「バウンスの感じはこれがいい」という感じですね。サービスのサイトですと「かわいらしさ」を出すために丸みを少々強めにするといったことはしますが、コーポレートサイトなので、清潔さやわかりやすさを重視して、ほんの少し変えるといった微調整をしていただいた印象があります。

サイトの表示速度にはこだわりをもって設計した

安成：ではもう少し話を進めて、CMSの構築と運用について聞いていきたいと思います。

今回のサイトリニューアルを通して、動画が増えたり、写真が大きくなったり、コンテンツが非常にリッチになったなと思いますが、その分サイトはやはり重くなったのではないでしょうか。

第1部でも、反応が遅くならないように速さにこだわったという話がありましたが、そこはサイバーエージェントさん側でも重視されていたのでしょうか？

渡邉：そうですね。サイトのスピードを上げるということが第1目標でしたので、先ほどの1部でも紹介していただいたり、一番上に出していただいたとおり、そこに重点的に取り組んでいました。ページによって違いがあったので、遅いページを全部ピックアップしていきましたね。

実際トップページに関しては、実数で言うとそんなに差はなく、多少速くなったかなくらいなんです。ただ、先ほどおっしゃっていただいたように、コンテンツとしては大きな画像を使ったり、下に行くとムービーが出てきたり、重いコンテンツを使ってリッチに見せても前と変わらないくらいのスピードが出ているので、実質は速くなっていると言ってもいいのかなと思います。

安成：実際にコーポレートサイトで速さを意識している会社さんは増えてきているんですか？　加藤さん。

加藤健太氏（以下、加藤）：増えてきていると思います。SEOや海外向けにサイトを作るといった理由での増加なのですが、海外向けに対しては、ネットワークの速度をとくに気にされる方が多いので、CDNを使ったり、画像のサイズを自動的にリサイズしたり、といったことへのニーズは増えています。

安成：打ち合わせの際に佐藤さんが、「サイトではサイバーエージェントらしいものだけ残した」とおっしゃっていて、コンテンツに関しても「サイバーエージェントらしくないものは、思い切って削ぎ落としていった」と聞いて。それはすごいなと……。

佐藤：らしくないと言うと、誤解があるんですけれどね。

安成：「サイバーエージェントさんとして、見せたいものをメインで残した」という感じでしょうか。

佐藤：そうですね。そもそもコーポレートサイトの役割は、これまでもずっとサイトを運営してもらっている渡邉や山下と一緒に話をするのですが、彼らがコーポレートサイトについては一番詳しいんです。「このページが見られていない」「運用に一番手間がかかる」といったところに工数をかけるよりも、1個ずつでもクオリティーにこだわっていきたいですね。

「質より量」という時代が終わってきているので、我々もさらに効率良く運用したいのですが、「本当にこれいるのかな？」と更新がうまくいかなくなるんです。先ほどの1部でディバータさんから「サービスのページを削った」というお話がありましたが、サービスが一番多くて200ほどあったときは、出るたびにサイトに載せていると、クローズしたタイミングなどの連携が取れなかったり、リリースしたけれど載っていないということになっていました。

ひとつ立ち返ると、「本当に載せる必要があるのか」「リリースで出すだけで十分じゃないか」「ページで出すほどじゃないよね」という話も出ました。そうして原点に立ち返れば、コーポレートサイトとしては「必要ない／表示していなくても良いコンテンツ」の取捨選択はけっこうできるかなという感じです。

山下：基本的には、その時点の経営戦略に沿ってサイトは作っています。前回のリニューアルのときは、逆にスマートフォンサービスをどんどん作っている時期だったので網羅性を重視していたんです。今回は注力しているサービスを重点的に見せるために削る判断をしています

安成：そのあたりの合意を社内で得るのは、あまり難しくなかったですか？

山下：簡単ではありませんが、直属のマネージャーもそこの部分には理解があって「大胆に削ったほうがいい」と。またそれぞれが考えて決断できるカルチャーがあるので比較的進めやすかったです。

「クリエイティブで勝負する」覚悟が伝わった

安成：時間も迫ってきましたので、実際にリニューアルをしてから4、5ヶ月くらい経ったと思いますが、どういった変化・効果を感じていらっしゃるのかというところも、教えていただけたらと思います。佐藤さんからは、クリエイターの採用が増えた実感があるとお聞きしております。

佐藤：最近、弊社は中途も新卒も採用数が増えています。やはりコーポレートサイトを見て応募して来ていただいているので、その印象は非常に重要です。

僕はクリエイターの採用を担当する中で大体「サイバーエージェントにどういうイメージがあるか」を聞くようにしています。

そのときに返ってくるのが、昨日もありましたが、中途の方でサイバーエージェントのサイトを見た方が「中途採用の募集ページすらサイバーエージェントっぽくデザインされている」とけっこう評価いただいている声ですね。そういう「クリエイティブで勝負する」覚悟を見ていただいている感じは、実感としてはあります。

安成：山下さんと渡邉さんも、今回のリニューアルにおいて、「採用に効くような改変をしていきたい」という思いは強く持たれていたのでしょうか？

渡邉：そうですね。採用だけにというわけではありませんでしたが、今回「CyberAgent Way」というコンテンツを企業情報や採用情報と同じ並びに1つ、メニューとして作りました。「サイバーエージェントらしさ」というか、サイバーエージェントが積極的に行っている施策やカルチャー等を、全部取りまとめたコンテンツです。

見ていただくと、「サイバーエージェントってこういう会社なんだな」というのが、ひと目でわかるコンテンツになっているんですね。

そこを見るだけでも、採用で興味を持っていただいている方がわかりやすいという部分もあります。投資家の方からは、ESGという項目を重視して投資されている方も増えてきていますので、会社の持続性は今後も重視されていると思います。それを全面に打ち出していこうという意味で、徐々に採用や投資にもつながってきている実感があります。

山下：今回やりたかったことで、フロント構築もグラフィックもしっかり見せるというところと、CMSの構造を整理して効率化を図ることも重視していました。

RCMSさんを使ったリニューアルは2回目ですが、我々もどう設計したらいいのか、テンプレにしたほうが合理化ができるところと、逆にやりすぎると効率が下がるところもわかってきました。フロント側と裏側をうまく設計できたことで、コンテンツを作る時間も削減できましたし、その分、僕なんかは動画制作に注力できるようになりました。

リニューアル後の運用を楽にするための工夫点

安成：運用が楽になったとおっしゃっていたのが印象的でしたね。今回はフロントのUIを変えられたと思いますが、ディバータさんでサイバーエージェントさんの実際のリニューアル後の運用が楽になるように特別にされたことはありますか？「とくにカスタマイズなくできましたよ」といったことなど。

加藤：今回も基本的には標準機能の範囲で提供させていただいていて、CDN連携のところは今回サイバーエージェントさんに提供するときに、うちでよく「共有開発」と言うんですけれども、標準機能に取り込ませてもらう代わりに安く提供することで、使いやすい機能をサイバーエージェントさんに提供しながら、うちもその機能を自分たちの機能としてリリースするんですね。

そういうことをやっているので、CDNのところはもうたぶん何も意識されずに更新できているだろうなといったところはあると思います。あとは4年前からだと、RCMSのバージョンアップが早いのでで、4年分あるとできることも増えているのではないかなという感じではあります。

渡邉：本来であれば、CMSを使い続けるメリットというのは、裏側を変えずにリニューアルできるというところなんですが、今回は裏側を全部変えて、今後の数年のために運用しやすい作りに、全部プラットフォーム設計を変えて共通化しました。データ項目もそろえて全ページに共通するもの、一部のページに共通するものの割り振りをやったので、その分、加藤さんには全部データを移行していただくという作業を行っていただきまして（笑）、申し訳ないです。

加藤：そのデータ項目の設計は考えていただいたんですけど、裏側は項目ごとにデータが分かれているので、ちゃんとやればプログラムでうまくデータ移行ができるようになっています。うちの場合一番がんばったのはその部分と、CMSとデザインを連動させる組み込み作業ですね。

渡邉：本当にプラットフォーム設計からやったおかげで、それ以降の新しいコンテンツの開発も圧倒的に時間が短くなって、今までだと2ヶ月くらいかからないと新しいコンテンツ作れなかったのが2週間くらいで、さらに自分たちだけでできるようになったというメリットがあります。

安成：ああ、それは大きいですね。それこそ山下さんも、「動画を作るのにその分注力できた」とおっしゃっていましたものね。

山下：そうですね。Webの知識がない人でも簡単に更新できるようにはなったので、そこは非常に大きいです。

小さなタスクの積み重ねで、新しいことができない状況になりがちなので、新しいことに注力できる状態になれたのはリニューアルの成果としては大きいです。

安成：わかりました、ありがとうございます。