安心して成長できる環境を届ける、京樽の社員研修制度LP

Concept

プロフェッショナルで、やわらかい。京樽らしい研修サイト

まず、京樽の研修に参加する人の多くが新卒採用であることから、研修期間を“共に成長する時間”として「仲間との絆を深める」というコンセプトでキービジュアルを作成しました。

そしてサイト全体では京樽の新人研修が調理研修・店舗研修・接客研修・卒業検定・配属店研修の5本柱から成り立っていることから、その丁寧な研修制度が伝わるWebサイトを目指しました。

研修制度紹介パートでは、最初に概要をシンプルに示し、その後に研修スケジュール、さらに各フェーズの詳細説明が続く構成としました。分かりやすさも重視し、説明部分には動画も取り入れています。さらに、「先輩の声はこちら」のボタンから体験談へとつなげ、実際に働く人々のリアルなエピソードを掲載しています。

サイト全体のカラーは京樽様のブランドカラーである「緑」をベースに構成しています。京樽様の「プロフェッショナルさ」と「安心して成長できる環境があること」をもとに、プロフェッショナルでありながらも、堅すぎずポップさもある、親しみやすい雰囲気に仕上げました。

提案時には、「フォーマル ↔ カジュアル」「スタイリッシュ ↔ キュート」「男性的 ↔ 女性的」「冷たい ↔ 暖かい」といったトーンの軸をグラフ化し、数値的にわかりやすく可視化することで、企業側との認識を丁寧にすり合わせながら制作を進めました。

Design

分かりやすく親しみやすい研修コンテンツの設計

デザインにおいては、寿司店としての研修内容が真っすぐ伝わるよう、余分な要素は加えず、「寿司をつくる」という本質をシンプルに表現しています。

サイト全体の背景には「京樽」をアルファベット表記した「KYOTARU」を配置。より「京樽」という名前が印象に残りやすいようにしています。

ファーストビューでは、企業の核となる「寿司」が伝わるように、寿司をかたどったものの中に働く人が見えるかたちにし、京樽らしさ、ブランドらしさを演出しました。

一度に複数の採用ページを訪れているであろう就活生が読むことを想定し、本ページでは写真を多用し、文字は大きめに配置。フォントは丸みのある書体を採用し、読みやすく、若い人にも親しみやすい柔らかい印象に仕上げました。

また、研修完了までの3ヶ月間が、「必要なことがしっかりと学べる期間である」「着実にステップアップできる」ことが認識できる一方で、長すぎず、飽きずに最後まで読み切れるようなレイアウトに仕上げています。3ヶ月間の研修内容をスクロールしながらたどるかたちを採用し、最後には「研修完了！」という分かりやすいゴールを設定しました。

Implement

見た目も機能も充実した採用サイトへ

ボタンにはホバー時に軽く沈むアニメーションを付け、「つい押したくなる」感覚を演出することで、操作性と楽しさを両立させました。また、「続きを読む」のモーダルを開くと、右側のスクロールバーが寿司の形になっており、京樽らしさをさりげなく表現しています。

ページ自体を長くしすぎず、必要な人が必要な情報にアクセスできるよう、動画とテキストのバランスにもこだわっています。例えば、各研修制度の説明では、最初に動画を配置し、さらに情報を知りたい人が文章を読み進めていけるかたちにしました。先輩社員の声においても、文章量による抵抗感を与えず、必要な情報はすべて網羅されるよう、詳細は「続きを見る」を押すことで全文が表示されるモーダル形式を採用しています。

「研修スケジュール」はお寿司のメニュー表のような形式で整理し、「調理研修」「店舗研修」など各研修内容にアンカーリンクを設置することで、各項目にスムーズにアクセスできるようにしました。これにより研修の全体像が一目で理解できるようにしています。

色使いはフラットで統一感を持たせつつ、アニメーションで強弱をつけることで、見た目の楽しさとわかりやすさを両立させています。