ベビー用品事業／リクルートLP制作（PC/SPデザイン・実装）

OVERVIEW

SHElikes MULTI CREATOR PROJECTの課題で、ベビー用品事業等を行う企業の採用サイトの制作に取組みました。クライアントからの要件書を元に、PCとSPのデザインカンプを制作し実装を行いました。SP用のレスポンシブ対応もしています。（制作時間：120時間）

■課題概要

【クライアント】

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

【クライアントからの要件】

目的 ▶︎ LPを通して、カルチャーフィットしている人にエントリーをしてもらうこと

ターゲット ▶︎ 転職希望の方。世界観に共感している人、カルチャーフィットしている人

トンマナ ▶︎ 明確に定まっていないため、自由に提案してほしい

■制作したLP

実装したサイトはこちら

■工夫したPOINT

①目的やユーザーストーリーを理解した情報設計

今回のLPのゴールは「カルチャーにフィットする方にLPを通してエントリーしてもらうこと」であるので、ゴールを達成するために必要な情報設計を考えました。

情報設計を考えるうえで、より情報の優先順位を明確にするため、詳細なペルソナを設定。ペルソナを立てる事により、ユーザー視点に立ったユーザーストーリーを考えることができました。

②クライアントであるTSUTSUMUを分析・理解した上でのトンマナへの落とし込み

クライアントのブランドトンマナは未設定であったため、クライアントから提示された必要要素を元に情報を分解・整理し、トンマナへと落とし込む作業を行いました。特に印象的なワードを洗い出し、噛み砕くことでまずはクライアントの企業文化を明確にしました。

クライアントの情報を整理し、特に重きを置いていると感じた３点を企業文化として設定しました。

なかでも、「人と人との繋がりを大切にしている」という点は、３つの事業と、今後は家族向けのサービスの展開も軸にしながら「家族みんながやさしく幸せに暮らせる世界」を創りあげることをミッションとしているクライアントにとって、ミッションを達成するために必要不可欠な要素に感じましたので、ここからイメージを膨らませ、「縁」の意味を感じさせる赤色をメインカラーに配置し、トンマナを設定しました。

また、メインカラーである赤を使用した、「赤い糸＝人との縁」を感じさせるイラストやあしらいを各所に配置する事で、ユーザーにTSUTSUMUの企業理念や企業文化を肌で感じ取ってもらえるよう工夫しました。

イラストは、トンマナに合うものをPhotoshopを使って自作しました。

③スクロールすると、要素がふわりと出てくるアニメーションを実装

「やさしさ」というテーマをより表現するために、スクロール時にふわっとコンテンツをがフェードインする様にjQueryで実装しました。また、ユーザーが分かりやすい様、クリックできるボタンは、マウスホバーすると色が変わるように設定しています。

③社員同士の繫がりの深さを、手書き文字で表現。

人と人との繋がりを大切にしているTSUTSUMUらしさをより表現するために、メンバー紹介の際の各社員からの一言を社員それぞれからの手書き風にすることで、社員を少し近い距離間で感じてもらうと共に、社内間での風通しの良さや、連携が取れている様子を表現しました。

④詳細ボタンの文言を工夫する事で、主体性を持ったユーザー行動を促す。

詳細ボタンに記す文言を「～について知る」と表記する事で、ユーザー自身が主体性をもって、TSUTSUMUのことを知るためにアクションを起こしていることを認知してもらい、ひいてはユーザーのエントリーに繋げます。

■制作を通して学んだこと

1.実装までを意識したデザイン制作を行う事の大切さ。

当初より実装を意識したデザインにはしたものの、実装へと移った際に表現が難しく、デザインを変更したことなどもあったので、実際に実装が可能なデザインかどうかを意識しながらデザインを行う事の大切さを痛感しました。また、今回はLPのデザインから実装までを全て自分で行いましたので、後からの修正も融通が効きますが、グループ単位で一つのWEBサイトを制作している場合は、他のメンバーの迷惑にならないよう、目の前の自分の仕事を行うだけではなく、メンバーの作業も考慮した上での制作が求められると感じました。HTML、CSS、jQueryに関して、基礎知識を身に着ける事ができたので、今後も研鑽を詰み、デザインと実装までの流れをしっかりと理解しているデザイナーになります。

2.クライアント情報を整理、ペルソナを設定することで、情報設計の骨組みをつくることの重要性。

LPだけに留まらず、すべてのデザインで言える事かと思いますが、デザインの目的と、デザインのゴールを明確にするためには、渡された情報をしっかりと読み解き、今回のターゲットを明確にすることが、デザインのブレを防ぐうえで大切なことだと思うので、デザインに入る前に、まずは情報設計をしっかりと練る事を第一に、今後もデザインを行います。