96f08596385b782f

LP制作(PC/SPデザイン・実装)

OVERVIEW

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

YEAR 2020

✴︎ 制作したLP ✴︎

クライアントの目的は、採用強化のために採用サイトを制作し、それを通してカルチャーフィットする方にエントリーしてもらうことです。事業内容に合うトンマナも提案しました。実装したサイトはこちらです。(11月中にブラッシュアップ完了予定)


✴︎ 工夫したこと ✴︎


1. 目的とターゲットを理解した情報設計

カルチャーマッチした人材を採用することがこのLPのゴールであるため、そのための情報設計を考えました。

コンテンツの順番を決める際に、各コンテンツの目的と効果を書き出した上で優先順位付けをしました。また、詳細なペルソナを立てたことで、ターゲットのペルソナの立場になってリアルなユーザーストーリーを考えることができました。




具体的には、上の図のようにユーザーストーリーを考えました。コンセプト・メンバー紹介・働く環境といった " 共感・魅力付け " のコンテンツを通してターゲットの「働きたい!」という温度を上げ、事業について・募集要項といった " より深く理解 " するコンテンツに進んでもらい、最終的なゴールであるエントリーをしてもらう流れです。


2. 「やさしさでつつむ」という言葉からトンマナを設定

トンマナは「やさしさでつつむ」という温かみのある企業コンセプトから、人の体温を感じるオレンジ色をメインカラーにして設定しました。手書き風の円やクレヨン風のあしらいによって、やさしい雰囲気を出しました。ホバー時のアニメーションも「ふわっ」とやさしく出るようにしています。


3. 調べて書くを繰り返したコーディング

初めてのコーディングだったので、SHElikesのWebデザインコースの動画の復習・Webデザインの本(いちばんよくわかるWebデザインの基本きちんと入門)、Webで検索を繰り返して制作しました。


✴︎ 制作を通して学んだこと ✴︎


1. 実装を意識したデザインを制作する重要性

今回の課題はデザインを制作してそれを実装する必要があるので、実装を意識したデザインを心がけました。事前に参考サイトのデザインを研究して制作したので、htmlとCSSでベースを制作することは比較的スムーズにできました。

ですが、まだまだhtml・CSS・jQueryの理解が浅いこともあり、アニメーション部分は複雑で難しく100%完璧な状態で実装できていません。SHElikesを卒業するまでに完成させる予定なので、引き続きブラッシュアップをしていきます。


2. ペルソナ設定の重要性

LPのターゲットについて理解するために、下記のように詳しくペルソナを立てました。具体的なペルソナを立てたことで、ユーザーストーリーが作りやすくなり、情報設計に納得感が出ました。


今後も実践を通して、デザインと実装のスキルを向上させていきたいと考えています。