「FELISSIMO RECRUITING 2021」リクルートサイトのつくりかた
Webサイトの制作方法を実例でご紹介する「Webサイトのつくりかた」シリーズの第三弾！ということで、今回は「FELISSIMO RECRUITING 2021」リクルートサイトのつくりかたをご紹介します。
01.概要
フェリシモは1965年創業の大手通販会社です。商品のほとんどがフェリシモオリジナルで、便利な日用品から一風変わったキャラクターグッズや手習いキットなど幅広くかつ数多くの商品を取り扱っています。ユニークな商品で度々SNSを盛り上げているのでご存じの方も多いかと思います。
そんなフェリシモから今回はリクルートサイト制作のご依頼を頂きました！
🖥 概要
目的：10年後もフェリシモで働いてくれる就活生のエントリー獲得
ターゲット：好きなものに10年以上情熱を注げる新卒就活生
サイトタイプ：リクルートサイト
制作期間：3ヶ月
URL : http://www.felissimo-job.com/recruit2021/
👨💻 クレジット
クライアント：FELISSIMO
プロダクション：MEFILAS
ディレクション：原田 大地
プランニング：原田 大地
アートディレクション：福本 雅博
デザイン：福本 雅博
テクニカルディレクション：堤 大洋（フリーランス）
プログラミング：堤 大洋（フリーランス）
イラスト：林田 秀一（フリーランス）
02.はじまり
弊社では長年フェリシモの案件を担当してきました。これまでのやり取りを通し、「依頼内容がフワッとしている相談でもMEFILASだと安心して相談ができる」という評価からぜひリクルートサイトも…ということでこの度ご依頼頂きました！
いや〜…光栄です！
初回のお打ち合わせは先方の担当者さまとフェリシモ案件に数多く携わってきたディレクターの原田の二人で行いました。そのときは主に弊社にご依頼いただいた経緯や、コンセプト、ターゲットなどの話をしました。
ちなみにそのときにいただいたオーダーはというと…
✋ オーダー
・企画、撮影のディレクションを含めたリクルートサイトの制作
・コンセプトは10YEARS（10年先の未来のことを考えて共に仕事ができる人）
・男性にも刺さる企業イメージの発信
・押し売り感のないコンセプトを重視したシンプルな構成
といったものでした。
03.企画
ご提示頂いたオーダーを踏まえ、早速企画に取り掛かります！
今回のリクルートサイトのコンセプトとなっている「10YEARS」。まずはこのコンセプトをどんなコンテンツで表現するのかを考えました。
ターゲットは就職を控えた学生。自分自身が学生だった頃、10年先の未来を想像したことがあっただろうか…そんな風にターゲットの目線になってみて、このコンテンツには何が必要なのかを思案していきます。
👨💻 ディレクター：原田
自分自身が10年先のことを想像するのが難しいので、学生ならもっと難しいだろうと思いました。そこで、先の10年ではなく、今働いているフェリシモ社員の10年前から現在と、この先10年の目標を知ることで、少しはフェリシモで働く10年を想像しやすくなるのではないかと考えました。学生が自分の10年後をイメージしやすくなるようなコンテンツを提案しました。
10年先をイメージできるように…と色々考えた結果、シンプルに勤続10年以上の社員さんにインタビューを行うことが決まりました。また、サイトの掲載内容を決めていく中で、人物イメージは写真ではなくイラストを採用することも決まりました。
ちなみに今回なぜ写真ではなくイラストを起用したのかというと、個性豊かな先輩社員の方々を表現するにはイラストの方が映えるだろうという点と、ディレクターの原田が抱いていた従来のリクルートサイトに対する考えが反映されています。
その考えとは一体…？
👨💻 ディレクター：原田
僕がひねくれものなのでリクルートサイトには社員の写真を使うのが当たり前のようになっているが、本当に必要なのかを改めて考えました。
その結果、今回のサイトでは撮影が難しい10年前と10年後のスタッフの比較や建設前の新オフィスなど、未来や過去のモノをイラストなら表現できないかと考えてました。
当初より担当者さまとはリクルートサイトにおけるデファクトスタンダード（事実上の標準）を壊したいと話していたので、今回のイラスト案も従来の形を変えるひとつの要素となりました。他にも、企業情報や事業紹介はコーポレートやLINEで見せるなど、とにかくコンセプトがぶっ刺さるコンテンツを考えていきました。
そんな当案件にて重要な役割を担うイラストですが、イラストレーターさんの選定には少しばかり苦労があったようで…。
👨💻 ディレクター：原田
フェリシモは可愛らしい柔らかいイメージがありますが、今回は男女ともに刺さるトーンかつ、フェリシモの雰囲気を壊さず…といういつもと別の切り口でイラストを探しました。
フェリシモらしさはありつつユニセックスなイラスト…しかも今回もう一つサイトのテーマとして「情熱（パッション）」というキーワードが課せられており、それを引き立てることのできるイラストである必要もありました。
魔法部のときもそうでしたが、イラストの選定には何かと苦労することが多いです。しかしサイトの大事な顔となる要素でもあるので、当然一切の妥協はせず根気よくリサーチを続けました。
そして今回もSNSやPinterestで参考画像を集めていたところ、某ファッションメディアサイトで使用されているイラストで「正に！」というものを発見！その後作者が判明し、連絡を取ることができました。それが今回担当頂いたイラストレーターの林田秀一さんです。
林田さんは、シンプルかつユニセックスなテイストのイラストを描かれる方です。社員さんを撮影した写真とそれぞれの雰囲気をお伝えし、人柄を感じられるイラストを作成していただきました。
イラストのリサーチと並行して、テーマの「情熱（パッション）」をどう表現するかや、サイトの構成をワイヤーでまとめていきました。
こうしてFELISSIMO RECRUITING 2021のコンテンツやサイトの見せ方など大まかな枠組みが定まっていきました！
04.デザイン
デザインはFELISSIMO RECRUITING 2021のメインテーマ、「情熱（10年前から今まで、今から10年先まで変わらない情熱）」と「未来への期待」の2点の表現を重視して作成しました。
シンプルにこの2点だけをみると、いかにもアツくエネルギーに満ち溢れているパワフルな印象を感じますが、今回はオーダーにあった押し売り感をださないように工夫する必要がありました。その辺りの匙加減をどのように行ったのかを、デザイナーの福本に聞いてみました！
👨💻 デザイナー：福本
1回目に出したデザインは、フェリシモっぽさというか、シンプルで落ち着いた感じで作ってたのですが、先方からもっとパンチのあるデザインにして欲しいと返ってきました。
初期のデザイン案
初稿では全体のデザインを落ち着かせることで暑苦しさを出さないようにしていたそうです。ですが「もっと！！！」と先方からの指摘があったとのこと。それを踏まえて配色をがらりと思い切ってパンチのあるパッションピンクに変更。それにより全体がエネルギッシュな印象に！
シンプルながら差し色の効果でよりパッションを感じられます！モノトーンで描かれたイラストの効果もあり、キーカラーのパッションピンクがより引き立てられています。
「情熱」と「未来への期待」を表す工夫は他にも…
その① 勢いのある手書き文字やギザギザアニメーション
高揚感、躍動感を演出。内に秘めた情熱と変わらぬ情熱を表現。
その② シームレスなページ遷移
切れ間の無いページ遷移でこれからも続く未来への期待感を演出。
その③ 先輩社員一覧画面と詳細画面で異なるイラストを用意
詳細画面の先輩社員のイラストは遊び心のあるカラーイラストを用意し過去未来と情熱の有様を表現。
などなど…様々な要素が盛り込まれています！
その① 勢いのある手書き文字やギザギザアニメーション
→ 企画段階で既に決まっていた「情熱（パッション）」の具現化。そのときはまだなんとな〜くのイメージでしかありませんでした。直接的に「情熱（パッション）」を伝える為にはどんな形が相応しいのか…当初はハートであったり炎であったり、それはもうありとあらゆるパターンを検討したそうです。（何気に一番悩んだ部分だったとか…）
グルグルした動きだと悩んでいるようなモヤモヤした印象になるのでボツになったそうです🌀
形・動き共に試行錯誤を重ね完成したのがサイトのロゴとして使用している躍動感のあるこちらの円となりました！
ギザギザとしたエッジの効いた円が出来上がりました。スタイリッシュでありながらエネルギーを感じる印象ですね！ポイントになっているギザギザの動きはディレクター原田がIllustratorで何十パターンも作ったそうです。
そして林田さんのイラストと合わせたデザインがこちら。
モノトーン調のイラストとのコントラストがよりテーマを引き立てていますね！ギザギザ円は人物の心臓の位置に置いてそれぞれの鼓動に見立て「内に秘めた情熱」を表現しました。
その③ 先輩社員一覧画面と詳細画面で異なるイラストを用意
→先輩社員のbefore・afterが印象的なこの遊び心のあるカラーイラストはどういうところから着想を得たのでしょうか？
👨💻 ディレクター：原田
当初は今と10年後のイメージの具現化や、SFチックにぶっ飛んだものにしようと思ったのですが、今回は「情熱」がキーワードとなっているので、FELISSIMO社員の「好き＝情熱」をイラストにしようと考えました。
「好き＝情熱」というのはなんともフェリシモらしい着想です！
と言うのもフェリシモには「フェリシモ猫部」や「魔法部」といった部活があり、それぞれがテーマに特化した部活動を行っており、部活発信の商品も数多く発売しています。好きが高じて形になる…「好き=情熱」は正に「フェリシモらしさ」そのもの！
フェリシモ猫部リーダーの松本さん。猫愛があふれ返っていますね！
👨💻 デザイナー：福本
個人的にbefore・afterは「変身」を表現できたらと考えていました。フェリシモという会社で情熱をもって仕事をすることで、誰しもが主役なれるヒーローになれることを伝えられればと。beforeと同様にモノクロで考えてましたが、イラストレーターの林田さんが付けてくれていたカラーがとても良く、また変身した後の自分自身や世界（観）が変わることが表現できるかと思い、カラーイラストにしました。
beforeからafter（変身部分）の遷移を途切れることなくシームレスにプログラムすることにより、一連の流れ（ストーリー）を乱すこと無く見られるようになっています。
「変身」という表現が上手くハマったおかげで、フェリシモのカラーや先輩社員の個性が伝わる楽しいコンテンツになりました。
言葉だけでは伝えづらいアニメーションのプログラミングを依頼する際は事前にサンプルを作って共有したそうです。
実装依頼時に伝えやすくする為に制作したアニメーションのサンプル動画。
05.プログラミング
プログラミングはいつもお世話になっているフリーランスの堤大洋さんに依頼しました。堤さんは、アニメーションのあるサイト制作を得意とされているので、今回の見どころであるシームレスな演出部分でお力添えいただきました。
👨💻 ディレクター：原田
10年途切れることのない情熱を表現しているので、ページ遷移時も切れないように、シームレスな動きにこだわりました。動きのイメージはAfterEffectやGifでラフを作り、認識のズレがないようにすり合わせしました。
👨💻 デザイナー：福本
オーダー通りの気持ちよさのあるアニメーションに仕上げていただいただけでなく、遷移アニメーションに工夫も加えてくださり、動きがさらに良くなりました。
after（詳細）ページから左上部ロゴクリックでbefore（社員一覧画面）に戻る際のアニメーション。堤さんオリジナルの演出で更に切れ間のない流動的な仕上がりに！
堤さんに、こだわった点や苦労した点をお伺いしてみました。
👨💻 エンジニア：堤大洋さん
社員さんページに遷移する際、また戻る際になるべく違和感の無いようなアニメーションづくりに力入れました。画面サイズやスクロール位置、社員さんのイラストの位置、など様々な場合において、違和感なく画面遷移させるのが結構苦労しました。
限りなく自然かつ心地よく見せる為最後の最後まで微調整を繰り返したアニメーションとなっておりますので、ぜひ注目してご覧ください！
06.公開
こうしてクライアントとパートナー共に作り上げたリクルートサイトが公開されました！
💬 担当者さまからのコメント
当初私たちの中にあったのは「このページを通じて伝えたい思い」まででしたが、MEFILAS原田さまディレクションのもとクリエイティブとエンジニアリングを最大出力いただくことができ、想像を超えるページに仕上げてくださいました！多くの方からページを評価していただき、採用シーズン以降も企業ブランディングのひとつになっています。ほんとうにありがとうございました！
公開後はSNSで話題になったり、Web Designingやブレーンに掲載して頂きました！また、ご依頼時に参考として挙げて頂くことが多く、それだけご評価頂けているようでとても嬉しいです！
肝心のリクルートサイト効果によるフェリシモ採用の目標達成についてですが、リクルート総数が昨年対比で150％！（す、すごい…！）女性の応募の多いフェリシモですが今年は男性応募が昨年対比155%！（ウワーッ！！！👏 ）担当者さまからも喜びの声を頂きました！
07.まとめ
今回は「FELISSIMO RECRUITING 2021」の制作を通してリクルートサイトのつくりかたをご紹介しました。
「FELISSIMO RECRUITING 2021」では、応募者の数ではなく「10years」というコンセプトに共感した方からの応募の獲得が目的でしたので、一般的なリクルートサイトの形に囚われずに、コンセプトの伝え方に注力しました。
目的に応じて、当たり前を疑うことは「良いWebサイト」をつくる上で大切であると私たちは考えています。
また今回の実績をご評価いただき、引き続き「FELISSIMO 2022 RECRUITING」も弊社で制作させていただきましたので、興味のある方はぜひご覧ください。
MEFILASでは、クリエイティブでユーザーの心を動かし、目的を達成するWebサイトを制作しています。
■ お仕事のご依頼やご相談
Web制作のご依頼やご相談がございましたら、お気軽にお問い合わせください。
https://mefilas.com/contact/works.php
■ 採用応募
MEFILASのメンバーとともにクリエイティブなWeb制作に挑戦したい方を募集しています。
https://mefilas.com/recruit/
■ パートナー募集
Web制作をサポートいただけるパートナーを募集しております。
https://forms.gle/krviW8sjUysj97T39
この記事が気に入ったらサポートをしてみませんか？