みなさんこんにちは！2013年度新卒入社の横尾麻衣と申します♪
現在アメーバ統括本部にてゲームのUIデザイナーをしています。
1pixelで記事を執筆させて頂くのは、実は2回目になります！
(以前は、新卒が初めてブログデザインにチャレンジしてみたという記事を書かせて頂きました)
今回は私がデザイン/ディレクションを担当した、株式会社サイバーエージェントのエンジニア・クリエイター向けキャリア採用サイト制作の裏話をお話させて頂きたいと思います。
今回サイトを作るにあたって、お題として出されたテーマは
「サイバーエージェントの世界に向けた新たな挑戦が始まる。
今こそクリエイティブで勝負する時。
世界に通用するサービスを一緒に作る仲間を募集します。」
キーワードとして、以下のイメージを誘発させるようなサイトにしたいというオーダーがありました。
・新しいチャレンジ、挑戦
・世界を震撼させるようなサービスをつくる
・クリエイティブ、技術で勝負する覚悟
・ともに市場をつくる
・勝負どころ
以上をふまえて、構成に沿ってデザインの作成を進めていきます。
事前調査として行った事は
・競合企業の採用サイトを片っ端から見る
(話題になった採用サイトや、純粋に求める人材が似ている競合企業等)
・市場のwebサイトのUIトレンドや気持ちのよいアニメーションを体験し、ひたすら見る
(世界に向けた新たな挑戦をすると唱うからには、サイト自体のクオリティを高める為にワンエッセンスは絶対に必要！と思い、サイトの見せ方はもちろん動きの部分もかなり時間を割いて調査をしました。)
・採用担当人事からのヒアリング
(ここでは面接や社内を見てサイバーエージェントのどんなところが魅力という声が多いのかなど、社外から見た弊社の良いところを重点的にヒアリングしました。)
・キャリア採用で入社した社員からのヒアリング
(実際にサイバーエージェントで働いてみて、他社とは違う特色やココが良かった！といった実際の声を聞きました。)
これらのインプットした情報をアウトプットの材料にしていきます。
私がこのサイトをデザインする上で押し出したいと思ったサイバーエージェントらしさをキーワードに落とし込みました。
・良い意味の派手さ、インパクト
・自由で活気のある社内や人材
・クリエイターが絶対的に活躍し挑戦できる
これらのキーワードを軸として、デザインに取りかかりました。
インを提出しています）
▼動画モック
設定したキーワードから、インパクトを狙って有機的で自由な、曲線の多いデザインにしています。コーポレートカラーの緑をメインカラーに白基調の、比較的ラフでとっつきやすさを意識しています。
コンペ案の提出まではいろいろ全く違うパターンをつくってみたものの、グリッドデザインやかっちりした、いかにも企業サイトっぽいまったく違うデザインもつくってみましたが物足りず、もっと面白く作れるはずだという考えのもと、思い切ってつくってみました。
メインにうねりのある波の動きを入れた理由は、サイバーエージェントは最新のトレンドを追い常に進化していく、形状をもたない液体のような会社だなと個人的に思い、まるで生きているようなサイトにしたいと思いこのデザインにしました。
私は当初からおもしろ枠で自分のコンペ案を出すと決めていたので、一番主張したい波の動きをいかにもやりすぎなデザインで提出しました。一番わからせたいものはやり過ぎくらいやってみて、後々ブラッシュアップの段階に入ったら差し引いて調整すれば良いので、コンペの段階ではやりたいことが明確にわかる「やり過ぎ案」で提出するのが横尾流です。
他とは違った遊んだデザイン案を出せたおかげで、狙い通り私のデザインが採用され、晴れて本制作のステージに進みます。
上の図はサイト制作の全体的なざっくりとした流れになります。
リリースまで約2ヶ月で、デザインfixまでには大体1ヶ月といったスケジュール感でした。
ブラッシュアップ前段階で課題だったのは、さきほどお話した「やり過ぎ案」から、とっつきやすさとインパクトは残しつつ、大切なキャリア採用サイトであるという事と、きちんとしたオフィシャルサイトらしさをプラスしなければいけません。
"きちんとした感"と"抜け感"の調整が難しかったのですが、他の社員のコンペ案から良いところを頂きつつ、ブラッシュアップを繰り返し行いました。
▼コンペ参加者の提出案
▼ブラッシュアップ後のデザイン
▼ブラッシュアップ前と後の比較
ビフォーアフターで比較すると、明るさとインパクトはそのままに、見やすくすっきりとした清潔な印象を与えられたことがわかります。
PCのデザインがfixした段階で、スマホのデザインに移ります。その間コーダーさんと連携を取りつつ実装を進め、アニメーション部分の細かい調整やディテールなど詰めていき、妥協せずリリースまでもっていきます。
今回最も意識した点は、少しでもサイバーエージェントに興味を持ってこのサイトを見てくれた方々に、どのようにサイバーエージェントの雰囲気や良さを伝えられるかを考えました。
コンペ案段階ではサイトトップに社内の風景画像を入れる予定でしたが、画像で全てを伝えるのはむずかしく、動画のほうが社内の雰囲気・設備・仕事風景など伝わりやすいのではと判断し、急遽動画に変更しました。
サイト内で使用した写真に関しても、自由な社風であるという事を伝える為に、人物画像もなるべくラフなスタイルや自然体の笑顔のものを選定しています。
写真を選定するのもデザイナーがやるの？と思う方も居ると思いますが、サイト全体のトーンにあわせた写真をデザイナーが選ぶ事で全体のまとまりや雰囲気を守る事が出来ます。
●工夫した点
意識した点で書いた、写真や動画の撮影に関しても、全てにデザイナーが入るようにしました。
エンジニア・クリエイターらしさを伝えるにはどのような風景を納めるべきか、社内の自然な雰囲気を伝えるにはどのようなシーンが必要かなど、全てにおいて実際にロケハンにいって細かく絵コンテを描き、動きやアングルの指示等あたりをつけた上で、ロケ本番に望みました。ここでは主にディレクション業務になりますが、デザインと平行して撮影を行うことで伝えたい事などを明確にカメラマンさんへ指示ができるので、デザイナーが撮影に入ることはデザインする上でとてもメリットのある事だと思いました。
▼実際にロケに使用した絵コンテ(抜粋)
●使用したツール
今回の採用サイトは、最近話題のsketchを使ってデザインを作成しています。
社内でもsketchを使った開発をしているプロジェクトが増えてきました。
sketchはガツっとモックをつくったり、スピード重視の開発ができる非常に直感的に使えるツールなので、実装段階でフロント周りのやり取りをするときに、書き出しなど非常に簡単にできるので、今回のサイト作成との相性はかなり良かったのではないかと思います。
常に新しいチャレンジをし続けるサイバーエージェントのキャリア採用サイトの作成ということで、ものづくりをする技術者にフォーカスし、弊社の良さを最大限に引き出すデザインが出来たかと思います。
サイト内のコンテンツもとても読み応えがあり、サービスの開発秘話や役員インタビューなど、弊社のものづくりへの本気がお伝え出来ると思います！
今こそテクノロジーとクリエイティブで勝負する時。
世界に向けた新たな挑戦を共にしてくれるエンジニア・クリエイターの皆様、エントリーお待ちしています！
▼画像をクリックでキャリア採用サイトに移動します
現在アメーバ統括本部にてゲームのUIデザイナーをしています。
1pixelで記事を執筆させて頂くのは、実は2回目になります！
(以前は、新卒が初めてブログデザインにチャレンジしてみたという記事を書かせて頂きました)
今回は私がデザイン/ディレクションを担当した、株式会社サイバーエージェントのエンジニア・クリエイター向けキャリア採用サイト制作の裏話をお話させて頂きたいと思います。
はじめに：エンジニア・クリエイター向けキャリア採用サイトについて
株式会社サイバーエージェントでは、テクノロジーとクリエイティブで勝負する今、現在エンジニア・クリエイターの採用を強化しています。今回サイトを作るにあたって、お題として出されたテーマは
「サイバーエージェントの世界に向けた新たな挑戦が始まる。
今こそクリエイティブで勝負する時。
世界に通用するサービスを一緒に作る仲間を募集します。」
キーワードとして、以下のイメージを誘発させるようなサイトにしたいというオーダーがありました。
・新しいチャレンジ、挑戦
・世界を震撼させるようなサービスをつくる
・クリエイティブ、技術で勝負する覚悟
・ともに市場をつくる
・勝負どころ
以上をふまえて、構成に沿ってデザインの作成を進めていきます。
事前調査として行った事は
・競合企業の採用サイトを片っ端から見る
(話題になった採用サイトや、純粋に求める人材が似ている競合企業等)
・市場のwebサイトのUIトレンドや気持ちのよいアニメーションを体験し、ひたすら見る
(世界に向けた新たな挑戦をすると唱うからには、サイト自体のクオリティを高める為にワンエッセンスは絶対に必要！と思い、サイトの見せ方はもちろん動きの部分もかなり時間を割いて調査をしました。)
・採用担当人事からのヒアリング
(ここでは面接や社内を見てサイバーエージェントのどんなところが魅力という声が多いのかなど、社外から見た弊社の良いところを重点的にヒアリングしました。)
・キャリア採用で入社した社員からのヒアリング
(実際にサイバーエージェントで働いてみて、他社とは違う特色やココが良かった！といった実際の声を聞きました。)
これらのインプットした情報をアウトプットの材料にしていきます。
コンセプトの決定
事前調査を経て、コンセプトを決めていきます。私がこのサイトをデザインする上で押し出したいと思ったサイバーエージェントらしさをキーワードに落とし込みました。
・良い意味の派手さ、インパクト
・自由で活気のある社内や人材
・クリエイターが絶対的に活躍し挑戦できる
これらのキーワードを軸として、デザインに取りかかりました。
コンペ案
実際に提出したコンペ案です。（都合上割愛致しますが、実際にはPCとスマホ両方のデザインを提出しています）
▼動画モック
設定したキーワードから、インパクトを狙って有機的で自由な、曲線の多いデザインにしています。コーポレートカラーの緑をメインカラーに白基調の、比較的ラフでとっつきやすさを意識しています。
コンペ案の提出まではいろいろ全く違うパターンをつくってみたものの、グリッドデザインやかっちりした、いかにも企業サイトっぽいまったく違うデザインもつくってみましたが物足りず、もっと面白く作れるはずだという考えのもと、思い切ってつくってみました。
メインにうねりのある波の動きを入れた理由は、サイバーエージェントは最新のトレンドを追い常に進化していく、形状をもたない液体のような会社だなと個人的に思い、まるで生きているようなサイトにしたいと思いこのデザインにしました。
私は当初からおもしろ枠で自分のコンペ案を出すと決めていたので、一番主張したい波の動きをいかにもやりすぎなデザインで提出しました。一番わからせたいものはやり過ぎくらいやってみて、後々ブラッシュアップの段階に入ったら差し引いて調整すれば良いので、コンペの段階ではやりたいことが明確にわかる「やり過ぎ案」で提出するのが横尾流です。
他とは違った遊んだデザイン案を出せたおかげで、狙い通り私のデザインが採用され、晴れて本制作のステージに進みます。
本制作の流れ
上の図はサイト制作の全体的なざっくりとした流れになります。
リリースまで約2ヶ月で、デザインfixまでには大体1ヶ月といったスケジュール感でした。
ブラッシュアップ前段階で課題だったのは、さきほどお話した「やり過ぎ案」から、とっつきやすさとインパクトは残しつつ、大切なキャリア採用サイトであるという事と、きちんとしたオフィシャルサイトらしさをプラスしなければいけません。
"きちんとした感"と"抜け感"の調整が難しかったのですが、他の社員のコンペ案から良いところを頂きつつ、ブラッシュアップを繰り返し行いました。
▼コンペ参加者の提出案
▼ブラッシュアップ後のデザイン
▼ブラッシュアップ前と後の比較
ビフォーアフターで比較すると、明るさとインパクトはそのままに、見やすくすっきりとした清潔な印象を与えられたことがわかります。
PCのデザインがfixした段階で、スマホのデザインに移ります。その間コーダーさんと連携を取りつつ実装を進め、アニメーション部分の細かい調整やディテールなど詰めていき、妥協せずリリースまでもっていきます。
エンジニア・クリエイターにリーチするデザインの工夫
●意識した点今回最も意識した点は、少しでもサイバーエージェントに興味を持ってこのサイトを見てくれた方々に、どのようにサイバーエージェントの雰囲気や良さを伝えられるかを考えました。
コンペ案段階ではサイトトップに社内の風景画像を入れる予定でしたが、画像で全てを伝えるのはむずかしく、動画のほうが社内の雰囲気・設備・仕事風景など伝わりやすいのではと判断し、急遽動画に変更しました。
サイト内で使用した写真に関しても、自由な社風であるという事を伝える為に、人物画像もなるべくラフなスタイルや自然体の笑顔のものを選定しています。
写真を選定するのもデザイナーがやるの？と思う方も居ると思いますが、サイト全体のトーンにあわせた写真をデザイナーが選ぶ事で全体のまとまりや雰囲気を守る事が出来ます。
●工夫した点
意識した点で書いた、写真や動画の撮影に関しても、全てにデザイナーが入るようにしました。
エンジニア・クリエイターらしさを伝えるにはどのような風景を納めるべきか、社内の自然な雰囲気を伝えるにはどのようなシーンが必要かなど、全てにおいて実際にロケハンにいって細かく絵コンテを描き、動きやアングルの指示等あたりをつけた上で、ロケ本番に望みました。ここでは主にディレクション業務になりますが、デザインと平行して撮影を行うことで伝えたい事などを明確にカメラマンさんへ指示ができるので、デザイナーが撮影に入ることはデザインする上でとてもメリットのある事だと思いました。
▼実際にロケに使用した絵コンテ(抜粋)
●使用したツール
今回の採用サイトは、最近話題のsketchを使ってデザインを作成しています。
社内でもsketchを使った開発をしているプロジェクトが増えてきました。
sketchはガツっとモックをつくったり、スピード重視の開発ができる非常に直感的に使えるツールなので、実装段階でフロント周りのやり取りをするときに、書き出しなど非常に簡単にできるので、今回のサイト作成との相性はかなり良かったのではないかと思います。
おわりに
最後までお読み頂きありがとうございます！常に新しいチャレンジをし続けるサイバーエージェントのキャリア採用サイトの作成ということで、ものづくりをする技術者にフォーカスし、弊社の良さを最大限に引き出すデザインが出来たかと思います。
サイト内のコンテンツもとても読み応えがあり、サービスの開発秘話や役員インタビューなど、弊社のものづくりへの本気がお伝え出来ると思います！
今こそテクノロジーとクリエイティブで勝負する時。
世界に向けた新たな挑戦を共にしてくれるエンジニア・クリエイターの皆様、エントリーお待ちしています！
▼画像をクリックでキャリア採用サイトに移動します
