【課題】(採用サイト)LPデザイン制作・実装

OVERVIEW

Shelikes マルチクリエイターコースLP制作課題において、架空会社TSUTSUMUの採用サイトであるLPデザインの制作と実装を行いました。 【使用ツール】Photoshop 【使用技術】HTML/CSS/jQuery

YEAR 2023 - 2023

本ページの構成

  • デザインカンプ(PCとSP)並びに実装サイト
  • 課題の概要
  • 課題への取り組み
  • 制作時にこだわった点

デザインカンプ(PCとSP)並びに実装サイト

ユーザストーリに基づき作成したデザインカンプと実際のサイトが下記です。

課題の概要

課題について与えられた要件は下記の通りです。

●要件:架空の会社TSUTSUMUが採用を強化することになり、採用サイトを作成することになった

●ターゲット:報酬面よりTSUMUTSUMUが作っていきたい世界に強く共感する転職希望の方

●目的:LPを通してエントリーをしてもらうこと

課題への取り組み

まず上記の与えられた課題から下記のペルソナを設定しました。

■ペルソナ

上記を踏まえた上でペルソナに沿ったユーザーストーリーを作成しました。

■ユーザストーリー

制作・実装時にこだわった点

優しい雰囲気を出すしかけ

 ・配色:ペルソナは女性だが、サイトの雰囲気は男女ともにターゲットにしたかったため、中性的な配色を選択するようにしました。

 ・写真:TSUTSUMUの世界観では「これからはあかちゃんだけでなくママやパパ、おじいちゃんおばあちゃんまで家族みんながやさしく幸せに暮らせるような世界を創り出していくことがわたしたちの使命だと考えています。」とのことであったため、 子供だけでなく、家族も映っている写真を出すことで、優しく幸せ暮らす世界観を伝えるようにしました。

 ・形:ボタンの角、写真の切り抜きはなるべく丸みを出すことで柔らかな印象を伝えるように世界観を統一するようにしました。

最後がクライマックスになるようなデザイン

・ユーザストーリー作成に当たってのワイヤーフレームの作成→デザインカンプでは

多数の採用サイトや子供用の製品サイトを参考にしました。サイトを見た時のユーザの感情は記載の通りであるが、見進めていくにあたり最後がクライマックスであることを選出すため、コンテンツ毎に背景の色は変更しつつも、後半については白色を間に挟むことでアクセントを追加しました。

~~~~~~~~~~~~~~~~~~~~~~~~