n2p blog

キャンペーンやSNSの
"ためになる"情報を
執筆しています。

採用サイト事例紹介 GLADD(現la belle vie)様

GLADD様(現la bellevie様) のデザインができるまでwebサイトの制作の裏側をご紹介します。

GLADD様(現la bellevie様)は会員数230万以上、取り扱いブランドは4,000を越える国内No.1規模のフラッシュセールサイトです。GLADDではウェアやバッグ、シューズ、ジュエリーなどのファッションアイテム全般から、コスメやキッチンウェア、スイーツなどの食料品、さらにはエンターテインメントやレストランなどの体験まで、ライフスタイル全般におけるアイテムを展開しています。取扱う商材の幅広さ、そして“親しみやすさ”にこだわってアプローチしていることが強みの会社です。

※現在はlabellvie様に名称が変更されております。

【打ち合わせ】

①用件定義

初回のお打ち合わせでは、GLADD様のご要望やデザインの方向性をヒアリングいたしました。

【要望】

現状GLADDサービスサイトと同じトンマナで明確な切り分けなく設置されている採用ページを独立したサイトに作り変えたい。

【サイトの目的】

しっかりと設計された採用サイトを作ることで、会社の事業内容、経営理念(ミッション/ビジョン/バリュー)を明確に発信し、GLADDの経理理念を共有できる優秀な人材の採用率を上げる。

【課題】

GLADDのサービスサイトとの明確な切り分けがなく位置づけが曖昧でターゲットに適切な誘導ができない

  • 会社の事業内容、経営理念(ミッション/ビジョン/バリュー)が伝わらない
  • 応募フォームがないので一定の情報量で応募してもらうことができない
  • 会社の雰囲気、カッコよさ、魅力を伝えるトンマナやビジュアルが一切ないので応募CVを上げられない
  • 求人の分類が分かりづらい

今回GLADD様は弊社でwebサイトを制作後ご自身の会社で運用をしていくので以下の様なリクエストをいただきました。

【リクエスト】 

納品後GLADD様でも実装できる形式で納品してほしい。

【納品物】

  1. 社内エンジニアがソースを保守できるよう設計&実装したソースコード一式。
  2. デザインデータを一式(画面のデータ及びパーツに使われる元のイラストや写真データも)
  3. 動画撮影、写真撮影をしていただいた元のデータ及び加工後の編集可能データ。

ヒアリング内容をもとに弊社ディレクターとデザイナーでブレストを行い、

コンセプトから競合調査、デザインの方向性を決めていきます。

GLADD様の独自性を引き出す為に「FASHION×IT×ベンチャーを意識したサイト

」の方向性で進むことに決定いたしました。

【弊社からの提案】

弊社内で方向性が決まった後はクライアント様に提案をいたします。

弊社で行ったご提案対象範囲は以下です。

  • サイトの企画・設計
  • アートディレクション
  • UI/UXデザイン
  • コーディング 
  • 開発実装 
  • 動画企画・コンセプト設定 
  • 動画撮影 
  • 素材撮影 
  • ディレクション

その他にもコンテンツ内容の提案をし、意見をすり合わせていきます。

【コンテンツ内容】

<採用ページ>

トップページに当たります。開いた時にGLADDの魅力やかっこよさがイメージとして伝わるようなビジュアルメインのページを想定。

<COMPANY/PJ>

<HISTORY>

<VISION/COOインタビュー>

<募集職種>

<応募フォーム>

<制度・環境>

<NEWS>

<プレス>

<採用ブログ>

<コンテンツ>

この際に、スケジュールやお見積もりを提出し、これからの流れをクライアント様と一緒に確認していきます。

クライアント様から正式に依頼を受けた後は本格的にデザイン作業に移ります。

【デザイン】

トップページ制作から

1ワイヤーフレーム作成

2デザイン設計

3デザイン制作

を行います。

今回、デザインを担当した弊社デザイナーに話を聞きました。

【写真でこだわった点】

  • メンズも扱うので、被写体は女性多めだが、写真はメンズ的なノイズと彩度が強めの雰囲気にした。
  • 憧れとして、シチュエーションはオフィスだが多少演出気味にしてもらった
  • →今なら社員の人に推しの映えスポットをスナップしてもらってから絵コンテを書く
  • 特にバックオフィスやロジスティックは演出多めにしてる
  • →この演出に第三者視点がはいることが、採用ブランディングで大事だと思う(自社だと気付かない魅力とカッコつけきれない照れがあるため)
  • 複数のカメラマンが担当したので、フィルタで濃いめに上書きした
  • →今なら機材をヒアリングして雰囲気を統一、こちらでrawデータから現像するけど当時は知らなかった ので知ってる中で工夫した

【デザインでこだわった点】

・デザイン的には写真が主役になるように、何度も見るサイトではないので遷移少なめのLPスタイルでレイアウトパターンもブロックごとに変えてケレン味を意識した

・採用サイトは、写真と言葉による演出が大事。

GLADD様はアパレルが主軸なので、写真の雰囲気にはこだわったとお話ししてくださいました。

【コーディング】

デザインが決まったとはコーディング作業に移ります。

今回は外部のエンジニアさんにお願いをし、コーディングをしていただきました。

【まとめ】

今回はGLADD様の採用サイト制作の流れをご紹介いたしました。独立した採用ページを作りたいというリクエストをもとに弊社の方で制作・実装させて頂きました。n2pはデジタルとクリエイティブで「伝わる」を作ることで、ユーザーに価値ある情報と体験を提供します。webサイト制作のご依頼やご相談がございましたら、お気軽にお問い合わせください。

  • Aha! レシートキャンペーン
  • BirdCallカスタムストーリークイズ診断
  • BirdCallカスタムストーリー