架空LPデザイン制作・実装(採用サイト)
SHElikes MULTI CREATOR PROJECTの課題で、ベビー用品事業等を行う企業の採用サイトの制作に取組みました。クライアントからの要件書を元に、PCとSPのデザインカンプを制作し実装を行いました。SP用のレスポンシブ対応もしています。(所要時間:120時間)
【サイトURL】http://keen-aso-0025.staba.jp/
【所要時間】合計約120時間
【使用ツール】Photoshop / Atom
目次
①要件
②制作したLP
③制作を通して学んだこと
④工夫したこと
①要件
・クライアント情報
<クライアント名:TSUTSUMU株式会社>
ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や、家族みんなを幸せにするフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。
・ターゲット
転職希望の方
報酬面よりもTSUTSUMUの世界観に強く共感できる方
未経験よりは経験を重視したいが、それよりもカルチャーフィットしている方
・目的
LPを通してエントリーしてもらうこと(採用強化のためできるだけたくさんの応募が来てほしいが、エントリーがあれば誰でも良いわけではなく、カルチャーフィットする方に応募してもらいたい)
・トンマナ
明確なブランドトンマナが決まっていないため、事業内容にあうトンマナを自由に提案してほしい
・ペルソナとユーザーストーリー
②制作したLP
③制作を通して学んだこと
・LPデザイン制作〜実装までの一連の流れ
クライアントの依頼を元に、ペルソナやトンマナ等の情報設計・デザイン制作・サーバーアップまで、一通りできるようになるまでに、一ヶ月以上の時間を要しましたが、色々なサイトを参考にしたり、コーディングに行き詰まった時に、webや参考書を見て、コードのパターンだけでなく、仕組みを理解するようにしたりする過程で、サイト実装における基礎知識が身についたと思います。ですが実際に実装していくと、余白がズレたりうまく反映されないことも多く、次回制作する際は、もっと設計する時点で丁寧にコード名や余白の取り方を確認してから取り掛かりたいと思いました。
・実装を意識したデザインを制作する重要性
まずコーディングに取り掛かる前にマークアップ設計図を制作することで、スムーズにコードが書けることに気付きました。
④工夫したこと
・要件に合わせた情報設計
ペルソナからユーザーストーリーを設定し、ブランドのトンマナに合わせて、ムードボードを作成する過程で、自分の中に要件を落とし込み、ブランドイメージを保つために、クライアントのこだわりを意識しながら情報設計していくことを心がけました。