【実践課題】LP制作（デザイン〜コーディング）

◾️制作時間の内約

• デザイン：２週間（要件定義、情報設計、ペルソナ、ムードボード作成、ワイヤーフレーム作成、デザインカンプ作成まで）
• コーディング：３週間（マークアップ、HTML、CSS、javascript、レスポンシブ対応のコーディング、サーバーアップロードまで）

【目次】

①制作物

②課題内容

③ユーザーストーリー

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

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

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

①制作したLP

実際のサイト

②課題内容

▼内容

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

・クライアント情報

クライアント名：TSUTSUMU株式会社

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

・ターゲット

転職希望の方

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

・目的

＝LPを通してエントリーをしてもらうこと

※エントリーがあれば誰でもいいわけではなく、カルチェーフィットする方に応募してもらいたい

・トンマナ

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

▼設定したペルソナ

③ユーザーストーリー

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

▼ムードボード

ベビー用品の会社なので、可愛らしい印象になりがちですが、あくまで企業サイトではなく採用サイトなので、会社の世界観は表現しつつも可愛らしくなりすぎないデザイン・あしらいを意識しました。

▼配色

採用サイトなので、前向きに感じられるような明るいオレンジをメインカラーに設定。またベビー用品会社なので女性社員が多い印象がありますが、男性のエントリーも希望されることも想定し、グリーンを入れることで性別の差を減らせると思い配色を選定しました。

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

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

今回初めてコーディングによる実装とサーバーアップロードまで行い、PC、SPのデザインカンプ作成の時点でもう少しコーディングのことを考えて、作成していれば目的達成にかなっておりかつ効率的なデザインにできたと感じました。今後これをチームで行うと考えた際に、コーディングのことであったり先のことを考えて、取り組むことの大切さを学びました。