【LP制作】TSUTSUMU
ワイヤーフレームからのLP作成〜コーディングの工程までを学ぶため、オンラインWebスクール架空のクライアントを想定してLP作成をしました。
制作概要
- 制作目的
ワイヤーフレーム作成からデザインカンプ作成、コーディングまでデザインにおける必要なフローを一通り挑戦する。要件書の意図を理解し、目的に沿った情報の優先度付けや適切なレイアウトを考えながらワイヤーフレームを作成する方法を学ぶ。実装を考慮してデザインカンプを作成することを学ぶ。
- クライアント名:TSUTSUMU株式会社
ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。
- ターゲット
・転職希望の方
・報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方
・各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人がターゲット(採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい)
- 制作サイズ
・PC(横幅1440px)
・SP(横幅375px)
Design
- 工夫した点
曲線のイメージ画像とグラデーションのオブジェクトを工夫しました。オレンジと肌色のグラデーションをメインカラーとし、エントリーボタン、「もっと見る」ボタンにつけました。全体的にトンマナを意識してシンプルでまとまりのあるLPに仕上げました。また、ユーザーの動線を考えて、ターゲットに合わせた情報設計を行いました。
- 学んだ点
初めてのワイヤーフレームからのLP作成〜コーディングまでの作成で中々コーディングに入れず苦戦しました。デザインはどこまでも拘ることができるけど、あくまで制作要件に合わせてクライアントの課題を解決する形になっているか、を忠実に守ることを意識することが重要ということを学びました。
また日頃からサイトのデザイン研究を行い、効率よくデザインを作成していく練習をしていくことが必要と感じました。