キュービック・エクスペリエンスデザインセンター・UIデザイナーの小野です。今回は私がUIデザインを担当した、キュービックのコーポレートサイト制作についてまとめてみたいと思います。

コーポレートサイトは「会社のアイデンティティ(らしさ)を表現できているか」が肝になります。そのような性質のため、デザイナーだけではなかなか作れないもの。社員の巻き込みが重要だと思います。今回は、コーポレートサイト制作においてキュービックらしさを存分に表現するための「社員の巻き込み」にフォーカスしてお話しします。少しでもみなさんの参考になれば幸いです。

キュービックでは元々2〜3年のサイクルでコーポレートサイトのリニューアルが想定されていて、前回のリニューアルは2018年12月でした。2020年末、ちょうどCIを刷新したタイミングだったこともあり、コーポレートサイトを一新することに。

リニューアル前のコーポレートサイト

キュービックの「今」を正しく反映させたコーポレートサイトを作るプロジェクトが始動し、

・UXデザイナーの朝倉

・コーポレートデザイナーの平山

・Webディレクターの須田

・UIデザイナーの私

がコアメンバーとしてアサインされました。

ちなみに私のアサインが決まったのは、キュービックに入社する前、採用面接のタイミングでした(その時にいただいた期待が入社の決め手となりました)。

コーポレートサイトは、社外の人が見てわかりやすいものにするのはもちろん、同時に社内の人が愛着を持てるものにしたいと思っていました。

社員がつい人に勧めたくなるようなサイトを作るために、CDO(Chief Design Officer)篠原の発案で外部のパートナーに頼らず、完全内製でサイトづくりを進めることに。

CDO篠原の発案で完全内製が決定

完全内製にすることで、社内にサイトの制作過程がオープンになりますし、その制作過程に社内の一人ひとりが携わる機会も増え、結果として多くの社員が愛着を持てるコーポレートサイトができあがるだろうと考えたのです。

まず最初に、UXデザイナーの朝倉メインで情報設計を実施。ステークホルダーを洗い出し、インタビューを経てサイトユーザーのペルソナを11種類作成しました。

ステークホルダーへのインタビューを踏まえ、11種類のペルソナを作成

その上で、各ペルソナに近い方々に「どのようなことをコーポレートサイトに期待しているか」をインタビューしました。

その結果、すべてのペルソナから共通して求められているのは、「キュービックがどんな事業を行っている会社なのかわかる情報」であることがわかりました。「いい人が集まっている」「インターンが活躍している」「チーム力が高い」など、組織に関する理解とポジティブなイメージを強く持ってもらえている一方で、肝心の事業についてはあまり理解されておらず、イメージとしても抜け落ちてしまっていたのです。

インタビューを行い、「求められている情報」を分析

また、それらインタビューのなかで少し気になる声もありました。「今のサイト(旧サイト)はキュービックらしくない」というものです。

実は、前回リニューアル時に「これまでのコーポレートサイトはいい人・いい組織色が強すぎる」「会社の成長フェーズを踏まえ、もう少しシャープなイメージにしたい」ということで、組織と人の魅力やあたたかさの主張を控えたデザインに変更した歴史がありました。

残念ながらこのことが裏目に出てしまっていたようで、実態よりも今度はクールすぎる雰囲気のサイトに。キュービックを知っている人ほど「キュービックらしくない」と感じ、違和感を覚えてしまう、という現象を招いていました。

こうした点を、次のコーポレートサイトでは解消していく必要がありました。

続いて行ったのは、11種類のペルソナに優先順位をつけること。「ハイレイヤー転職層」「社外パートナー」の順に置いて、そのペルソナが必要としているものが手に入りやすい情報設計を目指しました。

ペルソナが必要としている情報に優先度をつけて行った情報設計

次に表現を詰めていきます。

UIデザイナーの私がビジュアルを決めていく際、もっとも考えたのは「キュービックらしさとは何か」。その象徴であるCUEBiC WAY(CI)と向き合うことはもちろん、当時の私は入社したてということもあったので、自身のオンボーディングも兼ねて社員50人に対しインタビューを行っていきました。

50人のインタビューで「キュービックらしさ」の言語化を進める

インタビューから抽出された複数のキーワード

こうして、「前進」「愛」「仲間」というキーワードが浮かび上がり、それらをもとにビジュアルテーマを複数作ることにしました。

どの案が通っても作り手の自分が納得できるよう、全ての案とも等しくクオリティを追求しました。その際、プロジェクトメンバーに何度も壁打ちをお願いして、「らしさ」の表現を磨いていきました。

そして、出来上がったのがこちらの2案です。

経営陣の定例MTGでどちらがいいかを話し合ってもらい、最終的にビジュアルテーマ「前進」で進めていくことに。ビジュアルテーマが確定した後もまた、プロジェクトメンバーはじめ社内外のあらゆる人にフィードバックをもらいながら、「らしさ」の表現を磨き続けました。

プロジェクトメンバーや社員に壁打ちをしてもらいビジュアルを磨きこむ一連のプロセスの中で、私が常に意識していたのは、「具体物を相手に見せながら」話すこと。こうすることで、私の中のイメージと相手の中のイメージとのズレを小さくし、建設的な議論を促すことができます。社歴の浅い私は、言葉を介することで生まれるイメージの乖離が特に大きくなりそうだったので、この方法がとても有効でした。

ビジュアルのレビューに社員を巻き込み

レビューをもらう際は必ず具体物を見せながらコミュニケーションを取る

コーポレートデザイナーの平山がメインに担当したライティングも「らしさ」にとことんこだわりました。同時に、「わかりやすさ」の担保も意識しました。「らしさ」だけを追求すると内輪的な表現になってしまいますし、「わかりやすさ」だけを追求すると誰の言葉かわからない平易な表現にしかなりません。

推敲を重ねる際は常にその2つの観点を意識し、社内外の方々に意見をもらいながら進めていきました。

特に「らしさ」を表すことが重要なワードは社員から広く意見をもらい、

キュービックらしさを表すワード選びは社員から意見を回収

わかりやすい表現を担保するために、書いた文章は全て編集チームからレビューをもらって揉んでいきました。

編集チームからのレビューで「わかりやすさ」を担保

さて、コーポレートサイトにはこんなメンバー紹介ページがあります。

このページの作成にあたっては、性格特性のワークショップも開催しました。社員がワクワクするような機会を用意して、サイトの完成が待ち遠しいと思える体験をつくる。こうしたコミュニケーションのデザインも私たちの重要な仕事のひとつでした。

メンバー紹介ページの作成にあたり、社員を積極的に巻き込む

内製で行われた写真撮影もワクワクする機会のひとつ

レビューや投票、ワークショップなどで社員を巻き込む際には

・「why」 ・・・なぜそうするのか

・「how 」・・・どうやるのか

・「what」・・・何をするのか

を伝えるようにいつも意識していました。

これら3つを伝えることで、社員はどのように関わればいいのかがわかり、より当事者意識を持ちやすくなりました。

そのおかげか、よくありがちな「オーダーする側 / される側」の構図にならず、多くの社員が能動的にサイトづくりに参画できたように思います。

結果として、社員から盛んにサイトのシェアなどが起こっていて「社員が愛着を持てるサイト」になったと実感しています。

プロセスを振り返って思うのは、「完全内製」で進める意思決定をしてよかったということです。

サイト完成時には、全体に大々的に周知を行い

コーポレートサイトの見どころを定期的に紹介

ワークショップの開催や写真撮影など、大変なことも多かったですが、それでも社員を中心に多くの人を丁寧に巻き込んで進められました。その制作プロセスが、「キュービックらしい表現」につながり、結果として社外の方にやさしく、社内のみんなから愛されるサイトが出来上がったと思います。

これからコーポレートサイトをリニューアルされる予定のある方は、「完全内製」という選択肢も検討してみてはいかがでしょうか。

最後になりますが、今回のコーポレートサイトづくりに関して、私だけではないコアメンバー全員が話している記事があります。この記事を読んで、興味を持っていただけた方がいらっしゃいましたら、ぜひこちらもあわせて読んでみてください!

このデザイン組織をもっと知る