事例8:サイバーエージェント

株式会社 サイバーエージェント

2011 年 12 月 1 日の就活解禁に合わせて、自分の未来を描くキャンバスをテーマとする「サイバーエージェントの就職情報サイト 」が公開された。PC 版は Flash、スマホ版は HTML5 と異なる技術を使いながら、それぞれ同様のコンテンツが提供されている。

スマホサイト用の HTML5 アニメーションの作成には、現在 Adobe Labs に公開中の Edge プレビュー 3 が使用された。また、Facebook や Twitter との連携も目を引く点だ。これらの企画や制作はどのように進められたのだろうか。今回は、実際に制作に関わった、アメーバ事業部の奥泉さん、大庭さん、大谷さんの 3 名にお話を伺った。

PC 版(左)と、スマホ版(右)

スマホ版のサイトは、就職活動のツールとして使えるものを目指した

-- 今年の就職情報サイトの企画をする際、どのような点に力を入れようと考えたのでしょうか?

「これまでも、就活生向けの新卒採用情報のサイトは展開してきましたが、今年はこれまで分散していたコンテンツを集約するなど、例年よりも充実した内容になっています。また、これから就職活動をする学生の大半はスマホを重点的に使っているのでは、という考えで、スマホサイトの提供は必須と考えました」(大庭)

「学生さんが就職活動をしているとき、常に PC の前にいる訳ではありません。実際、会社に面接を受けに来る移動の途中でも、何か必要な情報が出てくることはあると思うんですね。そんなとき、例えば、電車の中でスマホでも見ながら面接官と共通の話題を探したりとか、学生さんの役に立つ情報が提供できたらということで、今回はスマホサイトの制作にも力を入れました」(奥泉)

-- PC 版とスマホ版は差別化されているのでしょうか?技術はそれぞれ異なるものが使われているようですが。

「今回のサイトでは、PC 版もスマホ版も同じコンテンツを提供しています。先に PC 版のデザインを行ったのですが、デザイン案に沿って演出をつめる段階で、Flash の採用を決定しました。機能的に、現時点のブラウザの実装では、HTML5 での実現が難しそうだという点と、各ブラウザでの検証の時間がかかりそうだというのが理由です 。スマホ向けサイトは、デザインを見て、社内のノウハウを採用すれば HTML5 でいけると判断しました。iOS も Android も Webkit がベースなので、検証の手間はそれ程かからないですし」(大谷)

「同じ機能でも、違う状況での利用を想定しています。今回のサイトでは社員の仕事内容や社員が一緒に働きたいと感じる人物像などを紹介しており、学生さんは気になった社員を 8 名までお気に入り登録することができます。人物を通して、当社への興味や理解を高めてもらえますし、面接の際に、○○さんのこういう発言に共感したんです、というような会話に繋がるのでは、ということをイメージしました。PC で閲覧したときにお気に入り登録をしておき、スマホで好きなときに確認するという使い方ができるので、学生さんには、スマホ版をツールとしてどんどん活用して欲しいという思いがあります。そのためデザインもツールとして使い易いように気を配りました」(大庭)

-- 具体的にスマホ版のデザインで気をつけた点を教えて頂けますか?

「全体的に、見ることより使うことを意識してデザインしました。操作し易いように、ページ内の情報やサイト構成をなるべくシンプルにするとか、画面上部に固定のナビゲーションを作って、どのページからでも目的のコンテンツに移動できるようにとか。ソーシャルネットワークで URL が人づてに伝わると、サイトの深い階層からの訪問になりがちです。特に、スマホ向けのサイトでは、本当に見たいページに移動できないという声を耳にします。そのため、上の階層に行きたいと思ったときに戻れるような導線をつくることを心がけています」(奥泉)

ソーシャルネットワークサービスとの連携による学生とのコミュニケーション

-- ツールとしての使い易さを追求しても、アプリ化は行わなかったのですね?

「サイトであればブラウザを開けば直ぐに見ることができます。また、コンテンツの公開を管理しやすいというメリットもあります。そのため、サイトとしてできることを追求しようという判断になりました」(大谷)

-- 就職情報サイトが SNS と連携している点が興味深いのですが

「お気に入り社員の登録は Facebook や Twitter と連動しています。また、実際に説明会に参加した学生からのコメントを見ることもできます。これまで人事・採用に関わるソーシャル的な性格を持つサイトを制作したことが無く、心配もあったのですが、実際に SNS の利用が世の中に広がっていることと、SNS を通じて話題になることがあれば面白いだろう、という判断で採用しました。公開後は、心配していたような問題もなく、むしろ、学生や一般の社会人の方から、将来何になりたいかという書き込みを頂いたりして、やってよかったという感想です」(奥泉)

「去年までは、まったくこんな案は出てこなかったです。うちの会社はこうですよ、というのを見せるので終わっていました。来年は、もっとユーザのアクションが反映される、よりツール的な面が強調されたサイトになるかもしれません。スマホ版専用の機能の提供もあるかもしれませんね」(大庭)

Edge を使って HTML5 アニメーションの開発を効率化

-- ところで、アニメーションの実現はサイトにとって重要な項目だったのでしょうか?

「今年の就職情報サイトのコンセプトはキャンバスです。キャンバスは何か新しいものを書く土台なので、それを見ている学生さんに伝えたい。そのために絵の具が飛び散るアニメーションを組みました。絵の具が浮き出る表現の実現に Flash が最適だったので PC 向けには Flash を採用しました。もし PC 向けも HTML5 を使うことが前提だったら、デザインから見直すことになっていたと思います」(大庭)

-- スマホ用のアニメーションは Edge を使って制作されました。実際にツールを使ってみていかがでしたか?

「今回始めて使ったので、最初のデザインの段階では慎重に確認をしながら進めました。Edge を使ったことで、作業の工数は、コードを書く場合の 10 分の 1 で済みました。Edge でつくったアニメーションはページからの独立性が高いので、制作済みの HTML に簡単に埋め込める点も使い易かったです。また、生成されるコードが JavaScript なので、読んで内部構造を理解できる点も便利でした。あと、自分が制作したアニメーションを他の人に引き継ぐとき、コードだとどの箇所で何をしているのかという意図を伝えるのが難しいのですが、Edge であればビジュアル表現を見ながら会話できるのも利点ですね」(大谷)

「自分としては、デザイン素材だけを提供して、後は任せましたが、出来上がったものは、軽いしキレイという印象です。今回ある程度使えるということは分かったので、今後同じような企画があれば積極的に使ってみたいと思います。ただ、アニメーションがどのレベルまで可能なのか、具体的な制限はまだ見えない面もあります。その辺り、もう少し経験を積む必要があると感じています。Edge はまだ開発中とのことなので、今後の更なる拡張に期待しています」(奥泉)

  • アメーバ事業本部
    スマートフォンディビジョン
    アートディレクター
    奥泉 将章

  • アメーバ事業本部
    ピグディビジョン
    インタラクションデザイナー
    大庭 俊介

  • アメーバ事業本部
    ピグディビジョン
    インタラクションデザイナー
    大谷 剛

株式会社 サイバーエージェント

サイバーエージェントはインターネットというフィールドで、「Ameba関連事業」、「インターネットメディア事業」、「インターネット広告事業」、「投資育成事業」の4つの事業を展開。インターネット総合サービス企業として、企業・インターネットユーザーに対し有益なサービスの提供を目指す。
サイバーエージェント