「SOMPOビジネスサービス」採用サイト
Credit
- Client
- SOMPOビジネスサービス株式会社
- Type of Business
- 事務サービス業
Overview
事務サービスのプロを目指す人材へアプローチする採用サイト
SOMPOグループの一員として、グループ会社に対して高品質な事務サービスを提供するSOMPOビジネスサービス株式会社さま。
neccoでは、仕事環境や働き方、福利厚生など、採用におけるポイントを分かりやすく伝える採用サイトづくりをお手伝い。情報設計、ウェブデザイン、実装を担当しました。



| ■ | Light Gray | #F7F7F7 | 247/247/247 |
| ■ | Light Pink | #FDF3F3 | 253/243/243 |
| ■ | Light Red | #ED7C7E | 237/124/126 |
| ■ | Red | #BA2D2E | 186/45/46 |
| ■ | Black | #363636 | 54/54/54 |
| ■ | Gray | #E5E5E5 | 229/229/229 |
| ■ | Light Blue | #AFD7DE | 175/215/222 |
Client
SOMPOビジネスサービス株式会社
Team
Creative Direction
Fumito Abe
Direction
Hitomi Natsui
Web Design
Seina Kon / Mari Nagano / Nao Ryujin
Contents Design
Hitomi Natsui
Illustration
Seina Kon / Mari Nagano
Motion Design
Mari Nagano
Web Development
Ayumi Sato / Nami Takagi
Interaction Design
Nami Takagi
Contact
お仕事のご依頼は、お問い合わせからご連絡ください。
Share
Creative Direction
応募時に知っておきたい内容を充実させるコンテンツとデザインに
SOMPOグループの保険契約を中心とした高品質な事務サービスを提供している「SOMPOビジネスサービス」さまの採用サイトをneccoで制作しました。
働く環境や求める人物像、人材育成、キャリアパス、研修メニュー、福利厚生、育児・介護関連といった社内制度など、応募時に知っておきたい内容を充実させるコンテンツ設計、デザインとしています。また、働き方が想像しやすいように社内インタビューなども掲載しました。
事務サービスのプロフェッショナルを募集するにあたり、掲載内容が難しくなりすぎないないように見出しなどのコピー・文章量を調整し、イラストや動くアニメーションなど親しみが増すような仕掛けを取り入れました。応募者の方に少しでも多くの情報が伝わり、どのページからでも採用情報ページへ迷いなく遷移できる設計にしています。
Direction & Contents Design
魅力的な制度や働き方を、
より分かりやすく伝える設計
SOMPOビジネスサービスさまにとって約10年振りとなる今回のリニューアルでは、「メニューや構成を改善し分かりやすくすること」「お客さまにとって更新しやすいサイトにすること」を目指してプロジェクトを進行しました。
お客さまと一緒に課題を洗い出し、構造を整理しながら、メニューやフッター、ページ構成を改善。各ページの内容についても、求職者の方に興味を持ってもらえるような文章やレイアウトを心がけました。
トップページでは、SOMPOビジネスサービスさまの魅力である「福利厚生の充実度」「豊富な休日・休暇制度」を、イラストやLottieアニメーションとともに軽やかに伝えています。
また、どのページにいてもすぐに募集要項を確認できるよう、フッター上に遷移ボタンを配置。求職者の方が知りたい情報にすぐにアクセスできるような導線を目指しました。
Web Design
ライフステージの変化に寄り添う、
柔軟で働きやすい職場環境を伝えるデザイン
SOMPOビジネスサービスさまが掲げる、「ライフステージの変化に合わせて安心して長く働ける職場」という理念が伝わるデザインを目指しました。
ブランドカラーを基調としたあたたかみのあるグラデーションや、さまざまなライフステージの方が笑顔で働く写真、生き生きと動くイラストなどを掛け合わせ、働きやすい職場環境のポジティブなイメージが全体から感じられるようにしています。
これから挑戦したい方の前向きな気持ちを後押しできるよう、細やかに整備された社内制度の内容を図版やアイコンを取り入れながら丁寧にまとめました。
Illustration
就職後の働く姿を想像できる
生き生きとしたイラスト・アイコン
充実した福利厚生・社内制度の魅力がより伝わりやすくなるよう、サイト全体のトーンに合わせてオリジナルアイコンやイラストを作成。
シンプルさのなかに優しさや柔軟さを持たせ、就職を検討しているどのライフステージの方にも親しみを持ってもらいやすく、実際に働くイメージを持てるようなイラストを目指しました。
アニメーションをつけることにより無機質さを抑えて、より生き生きとした印象を感じられるようにしています。
Motion Design
Lottieで表現する軽やかなアニメーション
サイト内のアニメーションにはLottieを使用。イラストのトーンを活かしつつ、軽やかな動きで親しみやすさを表現しています。
イラストやアイコンの意味を補足するような動きを取り入れ、情報が自然と伝わるアニメーションを心がけました。
また、ロゴの円を活かしたあしらいにもさりげない動きを加えることで、全体の動きのバランスを整えています。
Web Development
Astro + Tailwind CSSで高速かつ柔軟な採用サイトを構築
フロントエンドフレームワークにはAstroを、CSSフレームワークにはTailwind CSSを採用しました。Astroの静的サイト生成により表示パフォーマンスを確保しつつ、Tailwind CSSの柔軟性を活かして、採用サイトらしい明るく親しみやすいデザインを表現しています。
アニメーションは、CSSアニメーションとLottieアニメーションを組み合わせています。軽やかでアクティブな印象を大切にしながらも、華美になりすぎないよう調整しました。特にホバーインタラクションは、ふんわりとした動きで知的な印象を演出しています。求職者の方が、落ち着いた気持ちで企業理解を深められるよう、コンテンツへの集中を妨げない程度の控えめな動きを心がけました。
CMSにはmicroCMSを導入し、社員インタビュー記事の追加や、採用情報の募集状況など、頻繁に変更が発生するコンテンツをクライアント自身でスムーズに更新できるように設計しました。採用活動のスピード感に対応できる、柔軟な運用体制を実現しています。