アトラエらしさを世の中に伝えるということ
株式会社アトラエでデザインに関わる仕事をしている @kumi1132 と申します。2013年に入社し、主に広告周りのデザインやLPやプロダクトUIのグロースハック的なことを担当することが多い立ち回りをしています。
2年間の休職を経て2021年5月に復帰しました。
復帰直後に、アトラエ史上最高峰のミッションを任されることになります。
「アトラエという会社を、世の中に発信する。」
コーポレートサイトのリニューアルを進めるミッションを引き受けました。
アトラエは、事業においても組織においても、誇りを持って会社を創っています。その想いを表現する一つとして代表されるコーポレートサイト。
結果として5ヶ月後の2021年10月にコーポレートサイトのリニューアルを終えることができましたが、事業と組織にこだわり続けたアトラエという会社を表現することの難しさを痛感したプロジェクトでした。この5ヶ月間、どんな思考で進めてきたのかを、ここに記録として残しておこうと思います。
企画のはじまりは4年前
振り返れば2017年。「もっとデザイン力を相互的に高めていきたい」という想いのもと「Atrae Design Center（通称ADC） 」という事業横断のデザイナーチームを自発的に発足しました。
直接事業に関わらないような小さな依頼から、決算開示資料のデザインというような大きな依頼までを請負うようなチームです。チームの活動としては、週に一度、デザインの課題、各々がやりたいこと思っていること、気になるデザインのトピックなんかをざっくばらんに話す機会を設けました。そんな中、特に当時全員が課題感を持っていたのが、アトラエのロゴやコーポレートサイトでした。
「もっと、アトラエらしさが詰まったものにできるはず！」
事業のデザイン業務に全力を注ぎながらも、まずはロゴリニューアルに全員が集中し、設立16年目を迎えた2019年に新しいロゴを発表できました。
その時の思いや、プロセスはカッキーが記事にしてくれています！
コーポレートサイトリニューアル企画、再始動
ロゴリニューアル後、ADCはコーポレートサイトのリニューアル計画に着手しましたが、機能、文章の表現 、構成も含めて構想からまとめなくてはならない大掛かりな企画でした。ゼロから小さなプロダクトを創るようなボリュームの企画です。事業を成長させることに120%の力を割きながら、片手間で前進させられるようなものではありませんでした。ADCメンバー全員、どうにもカタチにしていけていない…というジレンマに陥っていました。
それでも何度も挑戦し、書かれたワイヤーフレームは数しれず。
みんなが伝えたかったアトラエの断片が溢れている状態でした。
「この想いを色褪せないまま、リリースさせることがわたしの使命だ。」
そう心に誓って、プロジェクトを再始動させたのでした。
【企画する】理解し、表現を決め、組み立てる
1. 何を目標にするのか
2. コーポレートサイトが持つべき機能
3. コーポレートサイトで伝えるべき内容
まずは企画をするにあたって、上記3点を徹底的に理解することに時間を費やしました。
休職していた2年間で行動指針「Atrae Standard」のアップデートが2度行われたり、メンバーも倍くらいに増えている状態でした。
そこで、アトラエという生命体が、“今”何を伝えようとしているのか、”これまで”どんな時間を過ごしてきたのかを読み解いていきます。
過去のドキュメントや投稿されてきたブログ、取材記事、社内向け資料なんかを片っ端から収集して、とことん読み、メモを取りまくる。
聞きたいことがあったら、声をかけて、コミュニケーションを取りながら理解を深めるということを進めていきます。
コミュニケーションの中で、英訳をもっと世界的に通用するような英語表現にアップデートしたいというリサの想いを知り、英訳監修に本格的に携わってもらうキッカケにもなりました。
【企画する】1. リニューアルの目的を決める
そもそもコーポレートサイトって何の役割をもつものなんだろうか。
1. メンバーの家族や友人が、どんな会社で働いているのかを理解するための場所。
2. お客様、またはお客様になり得る可能性のある人が、アトラエという会社を理解するための場所。
3. 投資家の方々が、アトラエという会社を理解するための場所。
4. 社会で生きていくなかで、アトラエに触れ、アトラエを知りたいと思った人が理解するための場所。
つまり、アトラエという会社を理解するための役割を持っている。
その役割を果たすためには、「アトラエという会社を誰もが理解できること＝パブリックな情報発信源として機能する状態」を目標設定におきました。
この目標が間違っていないかというところの評価としては、調査している上で見つけた課題に対し「目標がそれを解決することができるか」「目標が向かっている方向が間違っていないか」と、答え合わせをして評価しました。
例えば、直近で入社したメンバーから「アトラエをもっと知りたかったけど、コーポレートサイトでは情報が不十分で、他に情報を探すために検索して記事を探した」という話を聞き、問題があるのか考えると「アトラエを理解できないコーポレートサイトであることに問題がある。」と、問題定義できると思います。そこに置いた目標「アトラエという会社を誰もが理解できること」を当てはめると、この問題を解決するべき目標設定ができているなと、自分の中でも腑に落ちるように答えを出していくことができました。
【企画する】2. 持つべき機能を考える
目標は決まったものの、具体的にどんな機能が必要なのかをリストアップ。
更新性の高い情報を必要な人が必要なときに更新することができること。
必要な情報が集結していること。
セキュリティ的に問題がない作りにすること。
大きくはこの3つが必要で、CMS機能を持つことで利便性を高めるということは必須項目でした。
費用や工数、使い勝手などで比較をし、「ヘッドレスCSM」を採用することにしました。WordPressも検討しましたが、脆弱性におけるメンテナンスを定期的に挟まくてはならなかったり、ページ制作にも専門知識が必要になったりと、純粋に手間がかかるため見送りしました。
また、新規/再訪・言語・ブラウザ・OS・クローラーを省いたアクセスログあたりも確認しながら、必要な機能面を考慮していきました。
そして、目標を達成するために「アトラエの情報はコーポレートサイトを見ればつかめるよ」という状態を作らなければなりません。
課題としては、コンテンツ（社長ブログ、採用ブログ、メンバーブログ、カルチャー、デザイナーポートフォリオ、Techブログ、個人のブログ、ツイッター…などなど）がバラバラに散らばっている現状を集約して配置していくことは意識して設計していく必要があると考えました。
【企画する】3. 伝えるべき内容を考える
正直、ここが一番ハードであり、一番時間をかけた部分です。
アトラエにはVisionがあり、それをCultureとBusinessが組み立てているという枠組み、つまり「会社＝組織＋事業」という構成を大前提で構成していきました。ここは社長と一番話をした部分です。
一点課題として組織面での取材がピックアップされる印象が強く、相対的に事業の強みがいまいち伝わっていないという課題を感じており、組織も事業も同じレベルで伝えられるようなコンテンツ創りを意識しました。
グローバルナビゲーションの位置が About Us → Business → Culture なのも、こういった意図があります。
また、About usのページ内には、Vision → Philosophy → Members → CEO Message とコンテンツを構成しています。CEO Messageよりも、Membersが先にあること。この辺は、社長自らの意見でこの並びになりました。アトラエを創っているのはアトラエメンバー全員であり、チームアトラエです。この考え方を大切にしているからこそ、メンバーが1000人になっても全員を掲載したいという思いでいっぱいです！
このような話を粛々としながら、コンテンツの文章をひたすらブラッシュアップし、コンテンツの骨子を作りあげました。
【デザインする】アトラエらしさを表現する
すでにアトラエを表現することについては、ロゴを生みだす過程で十分に話し合ってきたので、その想いをできるだけ継承したいという想いを持って、デザインのテイストを決めていきました。
1. ロゴコンセプトと合わせたデザインに変更することで、コーポレート・アイデンティティ(CI)をきちんと確立させる。
2. People Tech Companyであることを伝えられるようにする。
この2点を意識してデザイナーや社長の意見を聞きながらイメージを固めていきます。
「ロゴのデザインコンセプト(わたしたちがAtraeを引っ張る)」「あくまでもシンプルであること」「アトラエの価値観をミスリードしないイメージ(写真/画像/動画)の利用」「細部にこだわったデザイン(マージン/トーン/ジャンプ率)」このあたりはADCとしても、こだわっていきたいところのひとつであること。
また、そこにPeople Techのイメージを想起させるようなギミックを取り入れたく、ADC内で「People Techってどんなイメージ？」という答えのない議論の時間を設けたりしながら、イメージの発散を進めていきました。
金属なのに柔らかい / 白黒なのに鮮やか / 都会なのに自然豊か / テクノロジーなのにあたたかい / フラットなのに立体的 / 液体なのに硬い...
このような相反する要素が同居してるイメージという、なんとも抽象度の高い話が続いた時期がありました。その中で得たアイディアを、イメージに落としフィードバックをもらう日々。
このフィードバックを経て、きちんとファクトを伝えられることや、リアリティを表現しながらも、文章の読みやすさ、かつあくまでもシンプルであることあたりがアトラエらしさを一番表現出来るという共通認識を改めて確認し、具体的なデザインの落とし込みに進めました。
グローバルナビゲーションを置く位置。
ロゴを置く位置。
メニューの出し方。
モノクロの使い方。
ADCの中で実際に画面を見ながら叩き、最適を探していきました。何度か繰り返していくうちに、コンセプトや表現も少しづつ固まっていき、最後のモックアップは、今回リリースしたページのかたちにだいぶ近い状態です。
一番最初は「アトラエが、引っ張る」というところをどうしてもCIとして持たせたくて、ロゴを背景に敷いたりしてみましたが、「それがなくてもデザインはなりたつのであれば、要らないのではないか」というフィードバックをいただいたり、シンプルを追求仕切ることができたかなと思います。
シンプルを追求すればするほどに「白と黒だけは、ちょっと無機質さが強いのではないか」という話にもなり、最初にコンセプトで考えていた、シンプルだけどカラーもある、という表現に立ち返りました。
わたしたちは、十人十色の個性を持っている。
そんな個人が集まり、同じビジョンに向かえているチーム。
それがアトラエだ。
ここでひとつ自分の中でアイディアが降りてきてくれました。
色を構成するのは光の三原色(RGB)と色の三原色(CMYK)であること。
このニュアンスをうまくギミックとして取り入れていこう。
わたしたちが、集合することで生み出す黒。
わたしたちが、集合することで生み出す白。
シンプルな白と黒に重ねることに意味が生まれ、コンセプトがかなり研ぎ澄まされました。
完成したページでは、Footerにこの表現が使われています。
他にも何箇所か、この表現を使いたい部分を構想しながらもまだ実装できていない部分も多いので、アップデートを楽しみにしていてください！
またちょっとした遊び心で入れたターミナルモチーフの表現ですが、思いのほか使い勝手がよく、だいぶメインデザインとして使われております。
本当は、余力があればこのコンソールっぽい動きを使って、遊び心のこもった仕組みをひっそりと実装しようと考えていましたが、実現ならずでしたので、エンジニアインターンや新卒エンジニアさんが入ってきたら、ちょっとやってみない？と声をかけて一緒に創りたいなぁなんて構想を持っていたりします！
このようなプロセスを経て、長い年月をかけて思い描いていた構想をかたちにすることができた、コーポレートサイト。
企画・デザインだけでなく、文章の校正・英文監修、サーバー環境構築、コーディング、CMSの繋ぎこみ、個人プロフィールの修正や写真撮影など、多くのメンバーの協力を経て完成させることができました。
まだまだやりたかったことがたくさんありますし、アトラエらしさも生き物です。これからも進化しつづけるアトラエのアップデートに追いつきながら「アトラエという会社を誰もが理解できること＝パブリックな情報発信源として機能する状態」を保ち続けていきたいと思います☺
最後にアトラエのこと
株式会社アトラエでは一緒に働く仲間を募集しています✧
興味をおもちのかたは、ぜひこちらのスライドを見てみてくださいね✧
このnoteは、株式会社アトラエ 2021年アドベントカレンダー 4日目の記事でした。明日はアトラエ爆速エンジニアタ タガミショウゴ＠アトラエ さんの記事「ビジネス版マッチングアプリ "Yenta" のWeb版開発を振り返る」です！お楽しみに〜！
Special Thanks to ...
[監修] 新居CEO
[フロントエンド] はっし〜
[フロントエンド助っ人] @msmt_kny
[コンテンツチェック] みなみ & 貴子さん
[英文監修] risafj & Rica
[写真撮影] @_YukiKawakami
[撮影サポート] @msmt_kny & @sk1121
[コンテンツチェックサポート] さくさん & @KawamotoKuppa & @yasuiha
[IRページ監修] ヒデさん & 手島さん
[プライバシーポリシー英文監修進行] ぐっちさん
[リクルートページ監修] @raykaga816
[制作手伝い] うめまるくん
[デザイン・設計・コーディング] @kumi1132
[アドバイザー] ADC (@msmt_kny & taketetsu1982 & kinop & @atrae_hirane & Akane-san & @YuriaMurakami & k5arakaki & @irismaeduse)
[応援] All Atrae members!!!
この記事が気に入ったらサポートをしてみませんか？