【自主制作】採用サイトLP デザインカンプ〜実装
スクールの課題でLPデザインカンプ作成〜実装に取り組みました。 使用ツール:Photoshop, Visual Studio Code/制作時間:約70時間
目次
(1) 制作したデザインカンプ(PC,SP)
(2) 制作要件
(3) 工夫したこと
(4) 制作を通して学んだこと
(1) 制作したデザインカンプ(PC,SP)
実際に実装したサイトはこちらです。
(2) 制作要件
・クライアント詳細(架空)
クライアント名:TSUTSUMU 株式会社
ベビー用品をメインとした事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。
・制作目的
LPを通してエントリーをしてもらうこと
・ターゲット
転職希望者、報酬面よりもTSUTSUMUが作っていきたい世界に強く共感する人
・必要要素
クライアントから渡された資料をもとにWFを作成
・トンマナ
事業内容に合うトンマナを自由に提案
(3) 工夫したこと
①ゴールを意識したレイアウト
制作目的が「カルチャーフィットする人にエントリーをしてもらう」ことだったため、雰囲気を伝えてエントリーしたい(しやすい)と感じるレイアウトを意識し、以下のユーザーストーリーを想定しました。
「カルチャーフィットしている」ターゲットに訴求するには特にカルチャーを伝えるセクションである「メンバー紹介」「事業について」が重要であると考え、これらが目立つように背景色を敷いたりボリュームを多くしたりすることで目に止まりやすく設計しました。
②明確なデザインコンセプトを設定して世界観を演出
「世界をやさしさでつつむ」というコピーから着想し、企業のイメージが存分に伝わるよう「優しく温かい日差しに包み込まれるような」イメージをコンセプトとして設定しました。そのため具体的に工夫した点は以下のとおりです。
・MVの写真の色味を暖色系に加工+手書きコピーで一目でやさしい雰囲気に
*さらに優しい光が親子を包んでいるように見せるために、ライトリークのテクスチャも使用しました。
・あたたかみのある手書きモチーフを各所に使用
*「事業について」セクションのアイコンイラスト(上記オレンジ色の3点)は自身で手書きで制作しました。
・「優しく暖かい光」をイメージしたあしらい
・JQUERYでふわっとした動きをつけた(実装したサイトはこちら)
(4) 制作を通して学んだこと
①メリハリをつけて情報を伝えること
制作するにあたっていくつかの採用サイトを参照し、適切な見せ方や目立たせるべき箇所などを分析しました。多くのサイトは目立たせたい情報を上部に大きく配置する一方で優先順位が低い情報はすっきりと見せていることから、「ユーザーに伝えたい情報を伝達してアクションを起こしてもらう」観点ではメリハリをつけたレイアウトが必要不可欠であると学びました。
②プロジェクトマネジメントの重要性
今回の課題は制作期間がデザインカンプ作成〜実装まで5週間で設定されていたため、どの工程にどれくらいの時間をかけるか計画立てて取り組む必要がありました。工程を細分化して1日単位で割り振り、予想外のトラブルがあることも想定してやや余裕を持ったスケジューリングをすること、計画通りに進まない場合でも臨機応変にその都度調整して立て直す等のプロジェクトマネジメントの重要性を実感しました。