こんにちは、Webディレクターの永井（リコ）です。
LIGではこのたび、再生医療関連事業を手掛けるセルソース株式会社のHRサイトを制作しました。
本プロジェクトのテーマは、「セルソースにまつわるあらゆる情報を集約したHRサイト」を立ち上げること。
「何をどうやって伝えるのか？」を戦略的に設計することが、プロジェクトを成功させる上で重要なポイントとなりました。
そのため今回のご支援では、HRサイトの目指すべきところを定める「ワークショップ」や「ペルソナ・カスタマージャーニーマップ作成」、サイトのユーザー動線を設計する「サイトエコシステム」の作成、といった戦略設計のサポートも実施しました。
また、サイト制作後には運用サポートとして、「Googleアナリティクス4」の勉強会を実施し、戦略設計から運用までトータルでご支援いたしました。
今回は、Webディレクターの岡部、デザイナーの花澤とともに、セルソース様を訪問。プロジェクトの所感や成果などについてお伺いしました。
これからHRサイトの制作を検討している方はぜひご一読ください。
※セルソース様の公式noteでも本プロジェクトについて取り上げていただきました。こちらもぜひ合わせてお読みください！
→セルソースHRサイトを公開。「未来を変える」仲間を求めて。
→採用サイトを共に作り上げた「戦友」。LIG社メンバーから見たセルソースとは。
目次
※本記事の取材は、2024年2月20日におこなわれました。
「組織の成長に追いつくため」。新規でHRサイト制作を決断
永井：今回のプロジェクトでは、HRサイトの制作だけでなく、ワークショップやGoogleアナリティクス4（GA4）の勉強会など盛りだくさんのプロジェクトでしたね。
まずは、HRサイトを新たに制作することになったキッカケから教えてください。
▲セルソース株式会社 マーケティング部 プロジェクト推進チーム 土崎てるみさん
土崎：一番の理由は、採用の間口を広げることです。当社は組織の拡大期にあって、積極的に採用を進めていく必要がありました。幸いなことに、リファラルを中心に採用を進めることができていましたが、組織の成長に対してそれだけでは追いつかなくなってきていました。
そこで新たにHRサイトを立ち上げることにしたんです。
永井：2019年に上場をして、事業もどんどん拡大している企業ならではのお悩みですね。具体的にはどういった方々を求めているのですか。
土崎：当社はベンチャー企業のなかでも、かなり早い速度で業務を回しています。そこで「セルソースのスピードについていくことができる」「自分で課題を見つけて解決していける」人材を求めています。
永井：そういう方たちの興味を引くサイトが必要だったのですね。何社か候補はあったと思いますが、ありがたいことに弊社をパートナーに選んでいただけたのはなぜでしょうか？
土崎：最終的にLIGさんにご依頼した決め手のひとつは、プロジェクトマネジャー（PM）を務めていただいた、のぼるさんのコミュニケーション力ですね。私たちが求めることに対する理解力や提案力、そしてそのスピード感が、私はもちろん他のプロジェクトメンバーから見てもドンピシャだったんです。
あとは、LIGさんのお見積もりです。項目の粒度や金額感がクリアで、非常に納得感がありました。お見積もりを通して、そのパートナーさんのプロジェクトへの理解度もかなり見えると思っています。LIGさんはそこの解像度がちょうどピッタリでしたね。
永井：Web制作はお見積もりの項目はどうしても細かくなってしまうので、できるだけクリアにわかりやすくお伝えできるように心がけています。そこをご評価いただけてとても嬉しいです！
ワークショップで相互理解。事業や思考がわかりスムーズにサイト制作へ
永井：ワークショップはヒアリング時に土崎様からご相談いただきましたね。
土崎：このプロジェクトを進める上で、このワークショップは絶対にやるべきと思っていました。
というのも、弊社は中途採用の社員が多く、会社のことを知っているようで実はふんわりとしているメンバーも少なくないと思っていました。かくいう私も、当時は入社1年目。ワークショップを開催すれば、会社を深く知ることができるし、メンバーの相互理解も進むと考えました。
何かを作り出すためのワークショップというよりは、セルソースの採用における本質的な課題は何か、事業や会社全体の強みは何かをブレストして、新しい共通認識を持つ仕掛けとしても開催したいと思っていました。
そして、弊社メンバーだけが参加するのではなく、LIGさんにも相談させてもらったのは、社外の第三者がいることで漠然とした課題感などが言語化されると思ったからです。
永井：入社早々に課題を見出し、解決のためにイベント開催を提案されるなんて、抜群の行動力をお持ちですね。実際に、ワークショップを開催してみていかがでしたか？
土崎：狙い通り、参加者に共通認識を持ってもらうという目的は、達成できたと思います。LIGさんのデザイナーさんにも参加していただいたことで、その後のサイト制作で議論の食い違いを防ぐことにもつながりましたね。
▲LIGデザイナー 花澤
花澤：私はデザイナーとしてプロジェクトにジョインしていましたが、ワークショップを開催するにあたって、当日の進行やワークテーマ、アウトプットを落とし込む手順など一連の設計も担当しました。
当日は、お互いが求めている回答を引き出せるか、プレッシャーも大きかったですが、ワークショップのおかげでサイトデザインを考えるうえでの指針のようなものができたので、開催してよかったですね。
岡部：土崎様がおっしゃったように、ワークショップは社内のみなさんの認識を揃えるきっかけになりましたし、LIG側も御社の事業はもちろん、みなさんの特性や思考を把握するいい機会になりました。
新規事業に対してチャレンジ精神と高い熱量を持てる方をお探しの一方で、上場企業への安定さを求めて入社検討される方もいる。そのギャップを埋め合わせるための方法を議論できたことは、その後のコンテンツづくりでとても役に立ちましたね。
永井：各実施の中で印象に残っていることはありますか？
土崎：サイト制作全体の中でも、カスタマージャーニーマップが一番時間がかかりましたよね。でもそこをがっちり固めておいたことで目線のズレを修正できたし、その後の手戻りもおさえられたと思います。
▲LIG Webディレクター岡部
岡部：カスタマージャーニーマップづくりではフィードバックをたくさんいただけたことで、施策案出しやHRMOSやnoteなどの外部サイトへの導線設計など、ロジカルに考えることができました。
そのおかげで、その後つくったワイヤフレームも、初校の提案から大きなズレもなく、スムーズに進むことができましたね。
「脳のメモリを無駄に使わせないUI・UX」と「こだわった44個のアイコン」
永井：今度はサイトデザインのこだわりや方針について聞かせてください。
土崎：一番こだわったのは、サイトの内容をスッと理解してもらえる、ストレスのないデザインです。LIGさんに依頼する前からいろんなサイトを見て、HR戦略部とデザイン戦略部で議論を進めていました。そして最終的に言語化したのが「脳のメモリを無駄に使わせないUI・UX」でした。
アニメーションを使うなど、いろんな仕掛けで独自性を追求することはできたと思います。でもそれよりも、サイトの中身を集中して読んでもらえるようにしたかったんです。
岡部：最初は「脳のメモリを使わせない」をどう共通認識を持って進めたら良いのか悩みましたが、土崎様をはじめ皆さまから、 「これはメモリを使ってる！」「これはメモリを使ってない！」と、いろんなサイトを参考としてご教示いただいたので、解像度はかなり上がりましたね。
永井：気に入っていただいている「脳のメモリを使わない」箇所はありますか？
土崎：トップページ下部に設置した、採用情報のところですね。「すべて」「新卒採用」「キャリア採用」の３つのボタンがあって、選択した採用分類で募集している職種だけが出現するんです。
土崎：その切り替えのアニメーションが抜群で、HRサイトで一番大事なコンバージョンの直前部分で脳のメモリを使わないUI・UXが実現できました。
岡部：ありがとうございます！ ここはエンジニアと何度も協議して開発したので、気に入っていただけてうれしいです。
永井：デザイン面で、苦労したところはありますか。
土崎：それはやっぱり「セルソース思考22、行動規範」のアイコンですね（笑）。
花澤：そうですね（笑）。22の行動規範をアイコンで表現したのですが、それぞれ「ノーマル思考」と「セルソース思考」を伝えたいので、合計44個のアイコンをつくりました。
各アイコンに違いを出しつつ、説明文がなくても絵だけである程度の内容が理解できるようにしなければならない。頭をひねってラフをつくり、ご意見をいただいてブラッシュアップを繰り返して、完成までにかなりの時間を費やしたと思います。
▲試行錯誤したアイコンのラフ
土崎：弊社には、メンバーの意思決定の基準となる明確な行動規範があります。それを求職者にきちんと理解してもらい、納得したうえで応募してもらわなければ入社しても早期離職につながりかねない。だからHRサイトでは、この行動規範を全力で伝えるコンテンツが必須だったんです。
岡部：私たちもその思いを受けて、ディティールまで一切手を抜かずにつくりましたね。中でも特に「08.常識」はかなり議論した記憶があります。
土崎：インド発祥の寓話「群盲象を評す」をアイコンで表現しました。象の足を触って、その太さや質感から「木だ！」と思い込むのがノーマル思考。「木かもしれない。でも象かもしれない」と考えるのがセルソース思考、ということを上手に表現できたと思っています。
▲セルソース思考 「08.常識」のラフ
花澤：そうですね。このアイコンにたどり着くまでかなり試行錯誤しました……。
しかも、44個すべてが完成して「完成した！」と思ったら、「11.リスク管理」のセルソース思考のアイコンで人の脚が少しだけ穴に落ちてしまっていて、それだけ修正しました。この修正以外は一発OKだったので、あれは悔しかった……。
土崎：（笑）。アイコン制作が一番時間を費やしましたね。PMだったのぼるさんからも「スケジュールがマズイです……」とご相談いただきました。とても思い出深いです（笑）。
グラデーションで人の変化を表現。細部までデザインを突き詰めた
永井：約半年の制作を経て、サイト公開に至りました。LIGメンバーから、サイトで特にこだわったところを教えてください。
岡部：僕は「経営理念&パーパス」のページですね。土崎様から「上場企業として一定の社会的認知度はあるけれど、会社の思いや事業内容がきちんと伝わっていない」という課題を聞いていました。
御社は上場会社ながら、ベンチャーマインドを大事にしているので、それをこのページでしっかり表現したかったんです。脳のメモリを使わずにすむよう、スクロールしただけで直感的に御社の思いが求職者に伝わるザインを追求し、それが実現できたと自負しています。
土崎：本当に直感的に理解できるようになっていると思います。特に「HSF経営」などを説明した丸のデザインがとってもわかりやすいですよね！
▲セルソース独自の経営手法「HSF経営」
花澤：私は二つあって、一つは色味です。デザインツールは「Figma」を使ったのですが、指定された色味を再現しようとしても、Figmaのグラデーション表現の仕様上、どうしても求めているものと異なってしまい、リテイクが続きました。
そこでIllustratorでつくったものをFigmaに配置するやり方を変えたところ、色味のズレがなくなったんです。グラデーションのカラーにきちんと意味があるので、求める色味を出せてホッとしました。
もう一つは図版です。今回、あまり先例のない図版の使い方をしたため、デザイナーとして別の目線が必要でした。たとえば「成長サイクル」の図は、循環しながら上昇していく様子を矢印とグラデーションで表現しています。これをつくるのはなかなか苦労しました。
▲「目標を達成するための成長サイクル」
土崎：色味の部分は、弊社も強いこだわりがありました。そもそも弊社は、インハウスでデザイナー・アートディレクターがいて、ほとんどのデザイン制作は社内で完結しています。
当時、HRサイトの制作時期と同じ時期にコーポレートカラー、コーポーレートロゴを刷新するプロジェクトが社内で進行していて、カラー、ロゴ、グラデーションの角度などはすべて弊社のアートディレクターが設計していました。
刷新したコーポレートデザインが自分たちの手を離れていくというのは、HRサイトが初めての経験だったので、どの程度口出しをするべきなのか、アートディレクターと2人で悩みましたね。ですが今は「全員ですごくいいものが作れて、めちゃくちゃやりやすいプロジェクトだったね」と言ってくれています。社内でも成功事例と認識されているんですよ。
永井：そこまで言っていただけるなんて……。よければ土崎様のお気に入りの部分も教えてください。
土崎：うーん、全部ですね！（笑）。本当に一つひとつこだわって作ったので、思い入れも強いんです。でも実は、もともとやりたかったことがあったんです。それがページをスクロールすると、背後のグラデーションがふんわりと変わるという仕掛けです。
土崎：今回LIGさんには「仕切り線は使わずに、グラデーションで表現してほしい」とお願いしていました。
HRサイトのメインコピーは「未来を変えよう」です。人はいきなり変わることはなく、少しずつ変化していきます。それをグラデーションで表現したかったんですが、LIGさんは要望を見事にくみ取り、デザインに落とし込んでくれました。
「HRサイトのクオリティ」が求める人の基準に。応募者からの反応に変化
▲LIGディレクター 永井
永井：サイト制作後には、「Googleアナリティクス4（GA4）」の勉強会もサポートさせていただきました。実施の背景を教えてください。
土崎：これまでGoogleアナリティクス（GA）については、社内でも知識レベルに大きな差がありました。GAではなく「note」のアナリティクスを見ていて、多少理解している人もいれば、触ったことがない人もいてバラバラでした。
ちょうどGA4に移行するタイミングだったので、このままではみんな混乱すると思っていて。そこでWeb運用にも強いLIGさんにお願いすることにしました。
永井：勉強会は、一番最初のお見積もりのタイミングでご要望いただいていましたね。実際に開催してみていかがでしたか？
土崎：とても良かったです！ 私たちや人事担当者だけでなく、社内で興味がある人は誰でも参加できるようにしたので、マーケチームなどGA4について知りたい人たちも集まってきました。
勉強会は全2回やっていただいて、1回目は勉強会開催前にLIGさんが作っていただいた資料を事前に勉強して、そこでわからなかったところをヒアリングいただく回、2回目はそれらに回答しながらGA4についてご説明いただく回でした。
そこまでしつこくやる人もあまりいないと思いますが……（笑）、本当に熱量が高い勉強会を実施できて満足です。
永井：そのようなご感想をいただいて嬉しいです！ HRサイト公開後、応募者の質には何か変化はありましたか？
土崎：私が関与しているクリエイティブ人材の採用では、明らかに変わりましたね。まず求職者からHRサイトに対して「デザインにすごく力を入れていますね」「作り込んでいますね」と言っていただけるようになりました。
このサイトは採用の一つの基準にもなっていて、求職者には「このデザイン以上のクオリティを求める人と仕事がしたい」というメッセージを送っているつもりです。
永井：御社にとって胸を張って提示できるサイトになっていると聞いて、私たちも自信を持てました。今後はどのようにサイトを運用していかれますか？
土崎：これから先、社会や人が当たり前のように変化していくなかで、弊社も弊社の課題感も当たり前に変わっていくでしょう。まさにHRサイトで表現したグラデーションです。
このHRサイトは、デザイン面でも運用面でも、満足度が非常に高く、今のセルソースを100%表現できているので、現時点では手を入れるつもりはありません。
ただ、今後大きな変化に直面したとき、そのときのセルソースを嘘偽りなく表現するために、このHRサイトはためらわずに変えていけるものだと思っています。
永井：会社のあり方や課題感が変わったときにはきちんとそれに合わせてサイトを変えていくというのは、私もそうあるべきだと思います。今の御社の姿、想いを的確に表現できたことを誇りに思います。
では、最後にHRサイトの制作を考えている企業にメッセージをお願いします。
土崎：サイト制作の際は、ぜひ最初にワークショップをしてほしいですね。
求める人材像を明確にしたり、合意形成をしたりするのは会議でもできるかもしれません。でも、ワークショップで第三者の人に入ってもらうことで、あらためて言語化できるし、議論によりちゃんとコンセンサスを取ることができる。
特定の成果物というより、その時間を共有すること、共通認識を持つことが大事だと思います。
LIGさんはワークショップの構成からサイト制作、社内勉強会まで全力で最高のクオリティでやり切ってくれました。弊社にとって非常に意味のあるプロジェクトでした。
永井：私たちにとってもここまでこだわって制作したこと、ワークショップや勉強会などトータルで担当できたことは大きな学びになりました。本日はありがとうございました！
さいごに
LIGではHRサイトの新規制作、既存サイトのリニューアルを行っています。
オウンドメディアや他社メディア運用の知見を生かし、目的に合ったサイトを構築します。ワークショップや勉強会など、サイト制作以外のイベント開催も対応可能ですので、どうぞお気軽にお問い合わせください！
セルソースの採用エントリーはこちら！
HRサイトを通してセルソースさんのビジネスや想いに共感した！ 一緒に働きたい！ という方は、ぜひこちらよりエントリーしてみてくださいね！！
それではまた！
