【課題】Webサイト制作(デザインカンプ、コーディング)

OVERVIEW

SHElikes PROデザイナーコース5回目の実践課題。架空クライアントの要件書をもとにワイヤーフレーム、デザインカンプを作成、HTML・CSSを活用し、実装、レスポンシブ対応まで行いました。

YEAR 2025

制作時間:デザインカンプ 10時間

     コーディング  30時間

制作範囲:PC版・SP版ワイヤーフレーム、ムードボード、PC版・SP版デザインカンプ、コーディング(レスポンシブ)

使用ツール:Adobe XD、Photoshop、Visual Studio Code


成果物

  • サイトURL

デザインカンプ


  • ムードボード


課題内容

  • クライアント

TSUTSUMU株式会社

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

  • 依頼内容

採用強化のための採用サイト(LP)の制作

  • 提供情報

・必要セクション情報(キービジュアル、私たちについて、働く環境、事業について、募集職種、メンバー紹介、エントリー、フッター)

・ロゴ画像

  • ターゲット

・転職希望の方(性別問わず)

・報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方

・各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人

  • 目的

・採用サイトを通じてエントリーをしてもらうこと(採用強化のためできるだけたくさんの応募が来てほしいが、エントリーがあれば誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい)


情報設計


デザインの工夫


学んだこと

実際にコーディングをすることで、デザインの時点で、ある程度コーディングを意識しながら作成することの重要性を実感しました。また、採用サイトとして必要な要素やデザインの方向性が、同じ企業でもコーポレートサイトとは異なることを学びました。


意識したポイント

コーディングは初めてでしたが、様々なサイトを参考にし、手をたくさん動かして試行錯誤しながら形にしました。そうすることでだんだんとコーディングの仕組みがわかるようになり、完成させることが出来ました。








WEBSITE