【課題】Webサイトデザイン・コーディング｜2025.8

＜デザインカンプ（PC/スマホ）＞

サイトの目的・ゴールが達成されるデザインになっているかどうか、終始気を付けて制作しました。制作期間が長くなればなるほど、最初に設定したコンセプトからブレそうになるので、要件定義・ユーザーストーリー・ムードボードと見比べながら進めました。

http://shiho-0222.cutegirl.jp/practice-5/

＜クライアント情報＞

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

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

＜要件＞

ターゲット ：

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

目的：

• サイトを通してエントリーをしてもらうこと

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

トンマナ：

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

＜Webサイトのコンセプト・テーマ＞

TSUTSUMU 株式会社の価値観を伝えられる採用サイト。赤ちゃんだけではなく、ママ・パパ・家族全員を支えたり繋げたりしてサポートする。温かさやみんなの幸せが伝わってくるサイト。

採用サイトとして、きちんと分かりやすく情報を伝えることや、エントリーへの導線も明確にしている。

＜ムードボード＞

＜ユーザーストーリー・ワイヤーフレーム＞

＜工夫した点＞

• 会社の価値観に共感し→具体的な業務内容を知り→自分の働く姿を思い描く、会社が求める人材にフィットするユーザーストーリーからサイト設計を行いました。
• サイトのゴールであるエントリーボタンは共通したアクセントカラーとアニメーションで、誘目性を高めています。
• 追従ヘッダーや、サイトのトップへ戻るボタン、直接下層ページに飛べるフッターナビなど、ユーザーが離脱せずに回遊できるようなUIにしています。

• PCのディスプレイ幅が大きくなっても崩れないよう、実装時に気を付けています。

• スマホではエントリーボタンを右下に固定して追従させることでよりアクセスしやすくなっています。

• 追従ボタンなどが重なった際、他の要素が見にくくならないように実装時のサイズや余白感を調整して、ストレスなくサイトが閲覧できるようにしています。

＜学んだこと＞

• HTML・CSS・jQueryについて、自分で一からWebサイトを作ることが出来る一通りの知識を学びました。また、コーディングで実装した時のサイズ感や動きまで意識したWebサイトデザインが出来るようになりました。
• 特にコーディングについては、今回の課題で学べることは出来るだけ吸収したいと思い、最適なデザインや動きを再現するために、自分で調べたり講師に聞いたりして自分の中に知識を蓄積していきました。
• Photoshopでデザインしていた時と、実際にコーディングした際の印象の違いも制作中に感じられました。ワイヤーフレーム作成→デザインカンプ作成→コーディングの流れの中で、最初に設定した要件定義が満たせるサイトをコーディング中も意識して制作しました。
• 全体を通してデザインカンプ作成以外の全体のサイト制作の流れも意識したアウトプットをする力が身についたと思います。
• ５週間のスケジュール管理や、最初から最後までサイトを作る目的がブレないことを意識するのも、今後のデザイン制作にあたって大切な学びになりました。