【実践課題】LP制作(デザイン~コーディング)

OVERVIEW

■SHElikes MULTI CREATOR COURSEの課題 ■架空のクライアントからの要件書を元に要件定義、情報設計、ワイヤーフレーム・デザインカンプの作成、コーディング、サーバーアップロードまで ■使用ツール:Photoshop、VScode ■制作時間:5週間

YEAR 2024

■制作時間の内訳
・デザイン:2週間(要件定義、情報設計、ペルソナ、ムードボード作成、ワイヤーフレーム作成、デザインカンプ作成まで)
・コーディング:3週間(マークアップ、HTML、CSS、javascript、レスポンシブ対応のコーディング、サーバーアップロードまで)

【目次】
①制作物
②課題内容
③情報設計、ユーザーストーリーの検討
④ムードボード、配色の決定
⑤デザインでこだわった点・工夫した点
⑥制作を通じて学んだこと 

①制作したLP


②課題内容

▼内容
クライアントからの要件書を元に、情報設計、ワイヤーフレーム作成からデザインカンプ作成、実装、サーバーアップまでを一通り行う。

・クライアント情報
 クライアント名:TSUTSUMU株式会社
 ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが
 幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・
 パパ、家族向けのサービスも展開していく予定をしている。

・ ターゲット
 転職希望の方
 報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方
 未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人

・目的
 =LPを通してエントリーをしてもらうこと
 ※エントリーがあれば誰でもいいわけではなく、カルチャーフィットする方に応募して
  もらいたい

・トンマナ
 明確なブランドトンマナがまだ決まっていないので、事業内容にあうトンマナを自由に
 提案してほしい。

▼設定したペルソナ


③情報設計、ユーザーストーリーの検討


④ムードボード、配色の決定


⑤デザインでこだわった点・工夫した点


⑥制作を通じて学んだこと

▼情報設計、目的を持ったデザイン
クライアントの目的である「カルチャーフィットする人にエントリーしてもらうこと」について考察することで、スムーズに目的達成のためのユーザーストーリーの検討ができました。また、そのユーザーストーリーをセクション順や内容の重要度で差をつけたデザイン、写真選定などに落とし込んでいったため、よりクライアントの目的に沿ったLPにできたと思います。

▼コーディングを意識したデザイン
今回初めてコーディングによる実装とサーバーアップロードまで行いました。PCとSPのレスポンシブを制作する際に、もしデザイン時点でコーディングを意識できていたらもっと目的達成にかなっていてかつ効率的なデザインにできたと思える箇所が出てきました。同じLPデザインであれば、目的要件を同じレベルで満たしつつコーディングもしやすい方が連携がしやすくクオリティが高いデザインだと感じたため、今後は意図していきます。

WEBSITE