【自主制作】採用サイトのLPデザイン・実装

①制作依頼内容

◾️クライアント情報

・クライアント名：TSUTSUMU 株式会社

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

◾️ターゲット

・転職希望者。

・報酬面よりもTSUTSUMUが作っていきたい世界に強く共感する人。

・各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人がターゲット。

◾️目的

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

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

◾️トンマナ

・明確なブランドトンマナがまだ決まっていないので、事業内容にあうトンマナをデザイナーからご提案する。

◾️納品物

・デザインカンプ

　└ 元データ（PSD/Ai）

　└ 書き出しデータ（PNG）

・コーディングファイル（html/css/jsなど）

◾️素材

・ロゴ（AIデータ）の提供有。

※トンマナに合わせた色味の変更可。

◾️サイズ

・PC：横幅1440px

・SP：横幅375px

◾️必要セクション

①キービジュアル　②私たちについて　③働く環境　④事業について

⑤募集職種　⑥メンバー紹介　⑦エントリー　⑧フッター

※順番は必要に応じて変更可。

※更に具体的な内容はいただいた資料を参照した。

③制作過程と工夫した点

◾️ペルソナ設定

目的とターゲットの両方にカルチャーフィットする人材を求める旨が書いてある事から、ペルソナは「『家族の支援』を通した他者貢献に強い使命感を持つ人物」に設定しました。

その中でも、クライアントが現段階では母親を対象とした事業を多く手掛けていることから、特に子育て経験者で、母親の苦労やニーズをよく理解している女性が相応しいと考えてペルソナを設定しました。

◾️情報設計・ユーザーストリー

クライアントが求めるターゲットの人物像が「カルチャーフィットする人材」であり、それを踏まえてペルソナを「『家族の支援』を通した他者貢献に強い使命感を持つ人物」に設定したことをから、情報設計・ユーザーストーリーは、ターゲットのTSUTSUMUへの共感と理解を深め、応募への気持ちが高まる構成になるよう、以下の順に設定しました。

１. メインビジュアル（＝企業の雰囲気と欲しい人物像を端的に伝える）

ターゲット：「『同じ使命を胸に』かぁ。写真の表情がみんなイキイキしてる。ここはみんなが同じ方向に向かって頑張ってそうでいいな。でも『使命』って具体的になんだろう？」

２. 企業理念（＝使命とは何か？）

ターゲット：「『世界をやさしさでつつむ』が使命なんだね。家族の幸せのためにいろんな事業を展開している会社なんだな。家族の幸せの実現って、当事者だけでは大変なこともあるもんね。ほんとそうなんだよ…。」

３. 事業について（＝具体的な実績）

ターゲット：「そんな使命を胸に、楽しいものから助かるものまで『家族の幸せ』のために多角的なアプローチをしてきたんだな。これからもいろんな視点からの事業の展開をしていきそう。」

４.メンバー紹介（＝メンバーの雰囲気と欲しい人物像を具体的に伝える）

ターゲット：「直接お客さんと接しない人たちまでみんな、『家族の幸せ』の実現を胸に働いてるんだ！ここなら同じ考えの人達に囲まれて働けて良いかも…。」

５. 働く環境（＝企業理念の一貫性と働きやすさアピール）

ターゲット：「どれも子供がいる女性にはありがたい制度だ！幸せな家庭の維持の大変さを一番分かってる『お母さん』が働きやすいってすごく良い！お客さんだけじゃなく、従業員家族の幸せの実現にも協力的みたい。理念が社内外に一貫してるな。」

６. 募集職種（＝具体的な募集について）

ターゲット ：「今はこの職種か…UI/UXデザイナーも募集されてる！」

７. CTA（＝最後のひと押し）

ターゲット：「ここでなら、本気で『世の中の全ての家族の幸せ』のために全力を出せるかも！応募してみよう！」

◾️その他、セクション毎の内容の変更点

⚫︎キービジュアルにキャッチコピーを挿入

LPの冒頭でより強くターゲットを惹きつけるために、キービジュアルの中心に「それぞれの場所で、それぞれの得意で、同じ使命を胸に。」というキャッチコピーを入れました。

「働く環境」セクションの「多種多様な働きかたに合わせて個人がバリューを発揮できるような働き方のサポートを多数用意しております。」や、「メンバー紹介」セクションの「それぞれの得意に合わせて活躍できる場が様々あります。」という記載と、「世界をやさしさでつつむ」という企業理念を組み合わせて短く言い表しました。

⚫︎メンバー紹介に各社員へのインタビュー記事に飛べるリンクを挿入

依頼書の時点では、メンバー紹介は写真、名前、職種のみでしたが、インタビュー記事に遷移できるリンクを付け加えました。

実際に働く社員が企業理念に共感し、やりがいを持って働いている姿を伝える事で、ターゲットが企業への共感をより強める効果を狙いました。

また、インタビュー内容への興味を引きつつ、インタビューを読まなくても社員の前向きさややる気が伝わるよう、サムネイルにキャッチコピーを付けました。

⚫︎エントリーセクションにターゲットへと呼びかけるコピーを挿入

一通り企業への共感を高めてもらった最後のエントリーセクションに、もう一押しの要素として「家族みんながやさしく幸せに暮らせる。そんな世界を、一緒に創り出して行きませんか？」と呼びかけるコピーを入れました。

⚫︎ボタンの文言をより分かりやすいものに変更クライアントからいただいた依頼書には、各セクションの詳細に飛ぶボタンの文言は全て「もっとみる」になっていましたが、例えばメンバー紹介セクションなら「他のメンバーも見る」にするなど、より分かりやすく言い換えました。

◾️ムードボード

＃優しさ　＃穏やかさ　＃家族の間に障害や危険がない状態 ＝ TSUTSUMUが目指す世界

＃他者への貢献　＃使命感　＃同じ目的に基づく団結 ＝ 働く人の人物像

◾️ビジュアルデザイン

コーポレートサイトではなく採用サイトなので、TSUTSUMUが作りたい世界の「優しく暖かなイメージ」だけではなく、求める人材の人物像として設定した「家族の幸せを応援したい』という他者貢献の心と強い使命感をもった人」の両方をビジュアルデザインに落とし込みたいと考えました。

⚫︎配色

ベースカラー：メインカラー：アクセントカラーを白：グレー：赤・オレンジ・黄とした。

メインカラーとアクセントカラーは、TSUTSUMUの温かく優しい世界観を表現するために、主に生成り素材のグレーと、暖色系の水彩テクスチャとして使用しました。

ベースカラーに関しては、TSUTSUMUの皆様の使命感の力強い優しさをイメージし、あえて白だけは柔らかいオフホワイトなどではなく、パワーのある純白を選びましだ。

⚫︎あしらい

全体としては柔らかい雰囲気になるように、ふんわりした丸や曲線のオブジェクト、水彩のテクスチャ、生成りの背景素材など柔らかく温かみのある素材を使用した。

⚫︎キービジュアル

　曲線や水彩テクスチャ、暖色の色使いで「優しさと温かみ」の表現を踏襲しました。

　働き方はバラバラでも一様に明るい顔のメンバーの写真が、それぞれの目線が中心から放射状に外に向かうようにする事で、別の場所にいても同じ物を見ている様に見える演出をしました。

それにより、みんなが同じ理念を胸に全ての家族の幸せを目指して、やりがいを感じながら働いている様に見える効果を狙いました。

④制作物

◾️テーマ：「世界をやさしさでつつむ」という理念に共感する人材の応募を促すデザイン

⑤今回の制作で学んだ事

◾️要件定義からLP制作までの流れ

クライアントの課題解決を重視してデザインカンプを考えたのですが、実際に自分でコーディングしてみることで、CSSでどう実装するかという視点もとても大切だということがより深く理解できました。

また、あしらいのレパートリーは、PC版とSP版セットで、レスポンシブデザインの視点で変更が少なくて済むデザインのものを増やしていくのが良いという学びを得ました。