【自主制作】LP制作：ベビー用品をメイン事業とする企業の採用サイト

【目次】

• 成果物（PC、SP）
• 制作要件（要件定義、ペルソナ、ユーザーストーリー）
• 制作ポイント
• ムードボード
• スタイルガイド
• 課題を通して学んだこと

◾️成果物

【実際のサイト】

◾️要件定義、ペルソナ、ユーザーストーリー

【クライアント情報】

TSUTSUMU株式会社

ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。

【ターゲット】

• 転職希望の方
• 報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方
• 各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人がターゲット

【目的】

LPを通してエントリーをしてもらうこと

(採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい)

【ペルソナ】

【ユーザーストーリー】

◾️制作ポイント

【世界観を伝えるファーストビュー】

• 優しさ・安心感・温もりが伝わる赤ちゃんの写真を使用した。

  安心して眠る姿が「誰もが安心して過ごせる社会をつくる」という企業の想いを表して　　　いる。柔らかなタオルも、ふんわりとした優しさを演出している。

• 実装時に、キャッチコピーにフェードインのアニメーションを使うことでもふんわりとした優しさを表現している。ナビゲーションに関しても、hover時にふわっと色が変化することで優しさを表している。

【情報が伝わりやすい写真選び】

服装や表情、動きが所属や役職をイメージしやすいよう工夫し、各メンバーの人物像が伝わる写真を選定。応募者に「一緒に働く姿」を具体的に想像してもらえるよう、明るく安心感のある印象を意識した。

【UIを意識したレイアウト】

SP版では、サイトの縦長化を防ぐためカルーセル形式を使用。左右クリックで表示を切り替えられることが伝わるよう矢印を配置した。

写真下部にインジケーターを枚数分表示することで、何枚写真が表示されるのか分かるようにしている。

【働いている姿をより想像させるための追加セクション】

メンバー紹介の続きとして、社員のやりがいや想いを伝える動画コンテンツを追加。

実際に話す様子を見せることで、信頼感や共感、企業への期待が高まると考えた。

テキストでは伝わりづらい温度感や雰囲気も、動画なら自然に伝わるため、情報の受け取りやすさにも配慮。

写真は、世代や社歴に偏りが出ないように選定し、さまざまな社員の声が聞けるという印象を与える構成にした。

【アクションを後押しするエントリーセクション】

• エントリー意欲を高めるため、最後に企業からのメッセージを配置。

  「あなたと一緒に活動したい」という想いが伝わるような言葉を添えた。

• エントリーボタンを押すことは最終的にとって欲しい行動のため、ページ内で最も目立つデザインにした。hover時には少し前に出るアニメーションを加え、応募行動を後押しする狙いがある。

【ボタンデザインの差別化】

ボタンの役割を理解した上で、通常時とhover時のデザインを考えた。

“エントリーボタン”は、ユーザーにとって欲しい行動であるエントリーを促すボタンであるため、通常時の状態は最も目立つようアクセントカラーを使用。hover時は、配色が通常と反転するようデザインした。

またPC版では、エントリーセクションのボタンはhover時にやや拡大されボタンを押す行動を促すよう実装した。

逆に各セクション内に配置されている“詳細ページへ遷移するボタン”は、エントリーに直結する本ページより離脱する行動を促してしまうため、あえて目立たせることはせずシンプルな「白背景＋枠線」のデザインした。

【4色のぼかしのあしらい】

サイト全体のイメージである「優しさ」「温かさ」をイメージさせる意図で、はっきりとした正円ではなくぼかしたものを配置。

実装段階では、スクロールにより下から徐々に表示されるフェードインを使用することで、ほわほわと浮かび上がる温かく儚い「赤ちゃんの鼓動」もイメージしている。

4色にすることで、背景が白のセクション内でのアクセントにしており、加えて子供達の個性はみんな違うということも表している。そんな子供たちが幸せに過ごしていける日常を作っていきたいという企業のカルチャーも表している。

【サイト全体の構成】

クライアントの目的である「企業が作っていきたい世界観に共感し、カルチャーフィットした人物」に応募してもらうために、まず企業の世界観を理解してもらい共感してもらった上で、働き方に関してもアピールし、エントリーしてもらうという流れで構成した。

この情報設計をしっかり行うことで、入社後の企業と応募者のミスマッチを減らしたいという狙いがある。

◾️ムードボード

【目指すイメージ】＃温かさ、＃優しさ、＃希望、＃光、＃未来

【コンセプト】子供も大人も、安心して幸せな未来を描ける社会を作り上げていく企業

ベージュ　→　温かさ、優しさ、柔らかさ、ほっとする

ホワイト   →　清潔、無垢、信頼

オレンジ   →　サイト全体の統一感を考慮

採用サイトとしての【信頼感、伝わりやすさ、真面目さ】

ベビー用品を扱う企業としての【優しさ、温かさ、未来をイメージできる明るさ】

を表現している。

◾️スタイルガイド

◾️課題を通して学んだこと

今回の課題を通して、初めて情報設計から実装、サーバーアップまでの一連の流れを実践することができました。LPは情報量も多く、見やすさ、統一感、目的達成のための情報設計など配慮する点が多くとても大変でした。

自ら実装することで、デザインカンプ作成時点で余白やフォントサイズ、反復を考慮しながら制作することの重要さを課題を通して学ぶことができました。

サイト全体を通して、トンマナや画像を揃えることで統一感を出せるよう工夫しました。統一感や、余白やフォントなど各要素のルール化だけを考えると退屈なサイトになってしまい、ユーザーが離脱してしまうということも分かり、セクションごとのレイアウトの変化やアニメーションを効果的にいれることの重要さを学びました。

UIの観点からは、クリックできる要素なのか、画面遷移はするのか、どこに遷移するのかなど要素の効果を考えることで、表現するデザインも考える必要があるということに気づきました。クリックしない部分に関してはボタンに見えるデザインは避ける、目的の行動となるボタンはアクションを後押しできるよ目立たせるなど配慮が必要だと学びました。

実装に関しても、エラーが出た際に原因を突き止める方法、複数回使用するボタン等は使いまわせるようにするなど、今後コーディングをする際にスムーズに進められるポイントを学ぶことができました。

工程が多く、制作期間も長くなるLP制作ですが、制作やサーバーアップ時のトラブルに期限内に対応できるようスケジュール調整も大切だと感じました。今後の制作活動にも活かしていきたいです。