架空LP制作　情報設計/デザイン/コーディング

【制作期間】約4週間（デザインまで:約13日/コーディング:約15日）
【使用ツール/言語】Photoshop/Illustrator/HTML/CSS/jQuery

制作物

【サイトURL】http://soramokumo.hungry.jp/

【デザイン】PC:1440px/SP:375px

課題要件

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

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

【ターゲット】

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

【入れたい要素】
TSUTSUMUのロゴ

要件をもとに作成したペルソナ

制作したムードボード

テーマ「あなたの包み込むやさしさで、一緒に赤ちゃんと家族みんなの笑顔を育もう」

【設定した理由】

TSUTSUMUの大切にしている理念や価値観などから今回テーマを設定しました。

理念として掲げていることはもちろん、あかちゃんや子育てをあたたかい陽だまりの中で、のびのびとできる環境であって欲しいなという企業としての思い。

また求職者の方にとっても未来に向けた成長をやさしく、明るい気持ちでここなら仕事ができそうと思ってもらいたいなという意図で、デザインを考えました。

ユーザーストーリー

【意識したこと】

工夫したことについて

①求める人物像のセクションの追加

今回のクライアントである企業の意向はもちろん、価値観の合う求職者をしっかりとマッチさせたいと考えました。

【求める人物像】というセクションで企業が大切にしている価値観を伝え、より結果につながる採用サイトになるよう工夫しました。

②「エントリー」ボタンの固定

ユーザーにエントリーしてもらうことが目的であったため、「エントリー」ボタンを画面上に必ず表示されるようにしたいと考えました。
PC表示の時はヘッダー部分を固定することで、エントリーボタンが画面上に、SP表示の時は、「エントリー」ボタンが画面の右下に固定して表示されるよう、コーディングを行いました。

③事業内容と働いている人が分かるように写真をスライド表示

今回制作したLPサイトは採用サイトであったため、会社の雰囲気も伝わるようにする必要性があると考えました。

【私たちについて】のセクションの中で、事業の内容と働いている人の様子が分かるように写真を配置し、サイトを見ている求職者に会社全体の雰囲気を掴んでもらえるようにしました。
序盤に「優しさ」「安心感」を感じてもらい、より親近感を感じてもらえるようにしました。

制作を通じて学んだこと

ペルソナをしっかりと深掘りしたことで、よりデザインに反映させるように考えました。特にムードボードの作成から、クライアントのイメージや大切にしている価値観などを深く理解することで、よりデザインカンプの作成にスムーズに取り組むことができたと感じています。深くクライアントやペルソナのことを知ることの大切さを学びました。

デザインカンプを作成する時点でコーディングをすることを想定した方が、スムーズに実装することが出来ると感じました。

またデバイスのサイズが豊富なため、なるべく多くのサイズでも見ることができるようにしたほうがいいということを実感しました。
私自身の私生活においてもPC、タブレット、スマートフォンをシチュエーションによって使い分けているため、使い分けをしているユーザー視点に立ってデザインやコーディングができるようになりたいと強く感じました。

今回、コーディングまでの作業を行い、お仕事する際も想定していないトラブルなどに遭遇することがあるかもしれないので、臨機応変に対応できるようになりたいと思います。