採用サイトLP制作・実装(課題)|いましかない一瞬一瞬によりそえるように
SHElikes MULTI CREATOR COURSEの課題にて、ベビー用品会社の採用サイトLP制作に取組みました。クライアントからの要件書を元に、適切な配置提案も加えたPCとSPのデザインカンプの制作から実装まで取り組みました。※架空のクライアント
|制作概要|
制作期間:約5週間
(情報設計:10h、デザイン制作:20h、コーディング:70h)
1.ペルソナの深掘り、背景の考察
2.ペルソナに合わせたムードボードの作成、情報設計
3.WFを手書きで大まかに構成
4 .WFより詳細に作成し、情報設計を練る
5.同様の参考採用サイトをもとにデザインの方向性を考察
6.ビジュアルデザイン等、詳細な仕様決め
7.PC・SP版デザインカンプの制作
8.デザインのブラッシュアップ
9.マークアップ設計図を作成し、実装
10.レスポンシブ対応
11. jQueryでのアニメーション対応
12.サーバーにアップロード
【使用ソフト】Photoshop / VScode
【使用言語】HTML / CSS / jQuery
|目次|
1.要件定義
2.制作LP
3.工夫した点(情報設計)
4.工夫した点(ビジュアルデザイン)
5.制作を通して学んだこと
1.要件定義
2.制作LP
制作したサイトはこちらです。
3.工夫した点(情報設計)
依頼内容を踏まえ、ターゲットのペルソナとユーザーストーリーを深掘りしました。
▼ペルソナの深掘り
・クライアントからの要望に報酬面よりもカルチャーフィットする人材、また今後の事業展開としてモノの販売から、ファミリーに向けたサービスの展開をして事業拡大していく方針があることから、よりその環境に近しい人材にフォーカスして設定しました
▼ユーザーストーリー
・まずは企業の世界観を表現し(ハード面)、「ここで働きたい!!」という気持ちを高め、次に現実的にどんな環境で条件でワークライフバランスが取れるのか(ソフト面)を表現することで、エントリーまでの動機づけをスムーズに行える情報設計にしました
4.工夫した点(ビジュアルデザイン)
▼未来に向けた事業内容を【幸福、安定=六角形】で表現
・六角形の意味合いが【幸福・調和・安定】というところから、企業の未来に向けた展望と、事業の安定さとリンクさせて各セクションに配置しました。
・六角形の図形に透過させてガーゼの質感を配置し、ベビー用品事業のイメージ、優しさ、柔らかさを表現しました
▼メッセージ性を表現
・上記のようにメッセージ性のある文章において、縦書きにしフォントを明朝体を選択しより深く心に響くように工夫しました
5.制作を通して学んだこと
今回、LP制作をデザインからコーディングまで一通り経験することで、デザインカンプを作成する時点でコーディングを意識したデザインにすることが必要だと学びました。目的を達成するためのデザインですが、デザインによっては実装に時間がかかり過ぎてしまったり、高度な知識が必要になってくるので、目的達成の手助けをしながらも実装時間も考慮した生産性の高いデザインをすることが重要だと感じました。