見出し画像

01.サイトレビュー会まとめ（2023年度定期採用｜フェリシモ）

nami@フロントエンドエンジニア

初めまして！本日からnoteデビュー、週７ジム通いのnamiです。

先日、サイトレビュー会というものに参加してお題としてあがったサイトがありまして、その時に発表した内容をここにまとめさせていただきます！

[Webサイト]

・2023年度定期採用｜フェリシモ

[サイトコンセプト]

・「Digろう、フェリシモ」

🔎Digろうって？
サイトの中で説明されているものから抜粋させてもらうと「山ほどある音楽の中からとっておきの曲を見つけること」を「Digる」と呼ぶとのことです。

就活生にとって就職先を探すのって本当に辛いイメージですが好きな音楽を探すのと同じように探すと楽しいよ！って意味が込められています。

[フェリシモの事業概要]

1965年創業の大手通販会社で便利な日用品から一風変わったキャラクターグッズや手習いキットなど幅広くかつ数多くの商品を取り扱っています。また、独自のブランドを展開していたり、社内で多くの部活があり、その中で商品開発などを行なっています。

🔎フェリシモと制作会社MEFILASについて
今回フェリシモさんのサイト、デザイン制作はWEB制作会社MEFILASさんが担当をしています。MEFILASさんは以前にも多くのフェリシモさんのサイトを作っていることもあり、お互い元々の信頼関係が強かったのでないかと思います。

・実績の例

[ターゲット]

・メインターゲットは20〜25歳くらいのZ世代

🔎サブターゲットは社内の人？
今回メインコンテンツに社員さん達のインタビューがあり、他の部署の人がこれを見ることで社内のギャップなど伝わりやすくなり、それが会社全体のモチベーション向上につながるのではないか考察しました。

[デザイン]

・第一印象
エモい、真面目すぎない、ゆったりしている

・フォント
Noto Sans JP、Work Sans、Wire One

Noto Sans JP、Work Sansは可読性 視認性がよく一般的な採用サイトでも使われる書体ですかね。Wire Oneに関しては初めて出会う書体で芸術的な要素があり、読ませる書体というより魅せる書体ではないかって予想したのとFVでパッと現れたときにエモさを感じさせる書体だと感じました。
[Wire One]

・カラー

背景色→#EAEAEA　#FFFFFF
文字色→#292929(メイン)　#FFFFFF　#8D8D8D
その他→#F75C8E(優しめの赤)　赤を基調と知ったグラデーション


背景色はグレー色を基調とし、どことなく今っぽさを感じさせつつレトロ感を感じさせる配色ではないでしょうか。また赤を基調としたグラデーションの部分がすごくノスタルジーを思わせる色っていうか見ていて心地よさを感じる色使いが素敵ですね！

あと赤を基調としている部分でフェリシモさんの求める人材が「情熱的な人」って印象が強く、関連してこの色を選んだのかなと予想しました。

・視線

ゆったりした音楽、FVなどで流れる文字のスピードに合わせてサイト内を「Digる」ことを誘導しているのではないかと考えました。

・音楽配信サービスのUIをオマージュしている(Spotifyを思わせるデザイン)

ぱっと見でこのサイトを見たとき、Webサイトっぽさがあまり感じられずどちらかというとアプリっぽいUIだなと感じるのではないでしょうか。特にスマホ表示によく見かけるハンバーガーメニューがなく、下にメニューが設置されています。

また、スマホ表示で親切だと感じた点があり、ヘッダーが半透明になっていることや下部の再生表示の部分が下スクロールすると消えるようになっていて縦で見たときに全体で見えるようになってるんですよね。

・奥行きの表現

今回のサイトでは奥行き感をいかに見せるか？が肝になってくるのだと感じました。なぜならスライダーを実装する際に横の矢印カーソルがあればスライドさせるのはわかりやすいと思うのですが、今回そのようなカーソルを表示させると一気にWebサイトっぽくなってしまう....じゃあ、奥行き感を出して直感的にスライドできるって分からせる必要があるのかなって。

工夫として境界線をつけることがあげられるかと。例えば、デザイナーを担当されている神杉さんのツイッターで次のことを述べておられました。

また、同じようにPC時のラジオのコンテンツでグラデーションの掛かった枠があると思うですがこの枠を設けることで奥行き感を強めているのかなと思いました。

あと上記のことと合わせてドロップシャドウの使い方が自然で一目で奥行きがわかるので素敵だと感じました。

・一人一人の社員さんのインタビューに合わせてジャケットやフォントを選定している

今回のメインコンテンツでもある社員インタビューの部分ですが社員さんの言葉に合わせてジャッケットを一つ一つ作り込んだとのことで時間をかけて作っているのが伝えわってきました。個人的に素敵だと感じたのは背景に流れるフォントまで一つずつ異なっていて丁寧さが見えるのでインタビューを受けた本人は絶対嬉しいってなるはず！ですね。

[コンテンツ]

・情報量の多さ[重要]

「情報量の多さに気になりませんか？」
というのも文字情報が少なく、たくさんのジャケットが並べられています。このことに関してフェリシモの採用担当のかわきたさんが以下のようなこと言っておられました。

まさにサイトのコンセプトって感じですね。この場合、直感的にDigってもらう工夫がいるのかなって感じました。これが思わずクリックしたくなるような丁寧にジャケットを作り込んだことにも繋がるのですかね。
・音楽
作業用のBGMを選曲したとのことでした。聞いていて心地の良い音楽でゆっくりしたテンポでDigりたくなります。また、レコードがかかってるかのようなノイズがかかっていてエモさを感じさせる工夫をしているのではないかと思いました。

・優先順位

一般の採用サイトだと会社について(about us)、働く環境、職種といったどちらかというと会社自体の説明が高い優先度で最初のコンテンツで挙げられていることが多いのですが、フェリシモさんの採用サイトではFV→社員さんのインタビュー→おすすめのラジオ→採用情報と他に見ない構成になっています。この順番になった理由としてはおそらくこの会社ではどんな人が働いていて、就職した後のことがよりイメージしやすいようなっているのではないかと予想しました。

🔎注目
関連してentryのボタンが目立ってないのも特徴的な部分ではないでしょうか。おそらくすぐに応募してくるっていうよりも「フェリシモのことをちゃんと知って好きになってから応募してね」って意味が含まれているのかと感じました。

・ラジオ

ラジオのコンテンツって珍しいですよね。この部分なのですが2022年度の採用の際に始めたところ好評があり、2023年度でも引き続けているそうなのですが実際に働いている人の話が聞けるって学生としても安心しますよね！

また、音楽のアプリと相性が合っていると感じました。

[実装面]

・ユーザーにとってノンストレスでシームレスなページ遷移

Webサイトっぽさを消してSpotifyのようなアプリに近いように感じさせる中核を担っているのがこのページ遷移の速度です。ページ遷移のアニメーションも余計なことをせずに自然な形にすることによってフワッとした感じで高速に移り変わりユーザーにストレスを感じない動きになっているのが素敵ですね。

🔎ページ遷移の実装について
今回のサイトのページ遷移の実装ではBarba.jsというライブラリが使われています。Barba.jsとは非同期でページ遷移をさせることができるJavaScriptのライブラリのことを指しています。詳しくは公式のサイトから
https://barba.js.org/

・ホバー時のインタラクション（PC）

ジャケットなどのホバー時には再生ボタンのようなものが浮き出る仕様になっています。もしこの部分で一般的なサイトのようにジャケット全体で色が変わるものになっていたら一気にアプリって感じのデザインが崩れていくのかなと感じました。

・イージングの心地良さ

cubic-bezier(0.23, 1, 0.32, 1)のパターンがよく使われていました。徐々に減速するしていき、変化の余韻が残りやすい印象のイージングですね。個人的にもよく使うパターンで何回でも触りたくなるような心地良さが印象的です。

[まとめ]

・コンテンツの優先順位で社員さんのインタビューを上位に持ってくることで会社の雰囲気を直感的に知ることができる。また、サイト内をDigることによってフェリシモさんのことを好きになり、結果として求める人材である「会社に情熱的に働きたい人」の応募も増える。

・Z世代のターゲットが親しみやすくサイト内をDigれるようにサイト全体のを音楽アプリのようなデザインにしている。

・一人一人の社員さんのインタビューをリリックに書き起こしたり、ジャケットを丁寧に作ることによってサイトに訪れた方が魅力的に感じる一方で、社員さん自身の仕事のモチベーションも上がるのではないかと考察する。

[感想]

感覚的に訴えかかるサイトで「エモい」って感じとれる素敵なサイトでした。また、初めサイトに訪れた際に音楽と共のリリックが流れてくるんですけどその言葉の一つ一つが就活で悩んでいる方の気持ちが本当に分かってるからこそ出てくる言葉なんですよね。本当に「人の気持ち、縁」を大切にしているサイトなんだと感じました。

実装面ではより若者に親しみやすい音楽アプリのようにすることへのこだわりが徹底しているのに驚かされました。本当にノンストレスにページ遷移する実装が羨ましくて自分も真似したいですね。

[補足]
サイトレビュー会で際に他の方の分析でフェリシモさんが扱っている商品は女性向けのものが多く、女性の社員が多いイメージがあるので今回のサイトがイメージを払拭させる効果があるのではないか？との意見をもらいました。確かにサイト全体の色合いも中性的だし、ジャケットで男性、女性が偏ることなく配置されているので納得しました。

こちらフェリシモさんが採用に対する思いなど述べられている記事があるのでぜひサイトと一緒にチェックしてみてください！

あ、最後に今回のフェリシモさんのサイトでみなさんのお気に入りのジャケットはありますか？ちなみに自分はというとFAQのジャケットが一番お気に入りです！（こんなカッコいいFAQ見たことない.....）

この記事が気に入ったらサポートをしてみませんか？