【実践課題】Webサイト制作 　-リクルートサイト-

制作情報

・作成時期：2024年12月~2025年1月

・作成期間：1カ月（デザインカンプ 27h　/　コーディング実装  62h）

・使用ツール
　Photoshop　/　VS Code ( HTML / CSS / JavaScript )　/　Cyberduck　/　LOLIPOP

目次

1.デザインカンプ
2.要件定義
3.ユーザーストーリー
4.ワイヤーフレーム
5.制作したLPのコンセプト/ムードボード
6.制作ポイント
7.制作を通して学んだこと

1.デザインカンプ

実装したWebサイトはこちら

2.要件定義

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

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

●目的
・LPを通してエントリーをしてもらうこと
（採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば
誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい）

●ペルソナ

3.ユーザーストーリー

4.ワイヤーフレーム

5.制作したLPのコンセプト/ムードボード

6.制作ポイント

●メインビジュアル
・温かい家族のイメージを伝えるために、様々な家族の笑顔の写真をスライドで表示
・様々な家族の形、両親だけでなく祖父母などたくさんの愛で包まれていることを
　イメージできるような写真を選定

●レイアウト
・画面のスクロールをしないで各セクションの情報が読めるようなレイアウトにした。
・採用サイトなので、流し読みするよりはじっくり内容を読む人が多いと考えた。

●配色
・メインカラー：オレンジ（あたたかい会社のブランドイメージが伝わるように使用）
・ベースカラー：ベージュ（メインカラーのオレンジを引き立てるように使用）
・アクセントカラー：グリーン（信頼感や希望を表現できるように使用）

●フォント
採用サイトなので内容を詳しく見る人が多いと考え、文字のジャンプ率や配色などで読みやすさを意識してデザインしました。

7.制作を通して学んだこと

・コーディングを意識して、文字サイズや余白のルールを決めてデザインしました。
・スライドなどを使用することでもデザインの見せ方を表現することができることと
　実感しました。
・1カ月の制作期間で、スケジュールを立てて計画的に進める事の大切さを学べました。