【課題】採用サイト制作

OVERVIEW

実案件を想定した演習プログラム「SHElikes PRO デザイナー」にて架空のWeb採用サイトの制作(情報設計/ワイヤーフレーム/デザインカンプ/コーディング(レスポンシブを含む)/サーバーアップ)に取り組みました。

YEAR 2025



【制作時間】情報設計~デザインカンプ2週間/コーディング~サーバーアップ3週間

【使用ツール】Figma、Photoshop、VSコード

【目次】
1.制作物

2.制作要件

3.情報設計

  • 要件をもとに考案したペルソナ
  • ページ設計

4.ビジュアルデザイン

  • デザインコンセプト
  • デザインの工夫

5.学んだこと


1.制作物

TSUTSUMU 採用サイト  https://lucky-saiki-5062.girlfriend.jp/

2.制作要件

・クライアント情報

企業名: TSUTSUMU 株式会社 

事業内容: ベビー用品メインの物販、育児サポートコミュニティ、フォトブック事業など 

今後の展望: ママ・パパ、家族向けサービスへのさらなる拡大 

・制作の目的

採用強化: サイトを通してエントリー(応募)を増やすこと 

マッチングの質: 報酬面よりも「TSUTSUMUが作る世界」に共感し、社風(カルチャー)にフィットする人材からの応募を促すこと 

・ターゲット層

転職希望者(性別不問) 

経験者重視: 全くの未経験よりはある程度の経験を重視しつつ、何よりビジョンへの共感を最優先する方 

・デザイン・トンマナ(世界観)

自由提案: 明確なブランド規定がないため、事業内容(家族・幸せ・サポート)に合うトーンを提案する 

ロゴの使用: 指定のロゴを使用。サイトのトンマナに合わせて、今回に限りロゴの配色変更が可能 

3.情報設計

  • 要件をもとに考案したペルソナ


4.ビジュアルデザイン

【デザインのコンセプト】

【デザインの工夫】

  • セクションに曲線を入れて包み込まれている様な表現をしたこと
  • エントリーボタンを追従させることで、クリック率向上、応募につながる様にしたこと
  • メンバー紹介は中心に来た人が大きく、吹き出しが飛び出る様にすることで、興味をもってもらえる様にしたこと
  • エントリーのセクションは実際に働いている人たちを載せることでどんな人が働いているイメージしてもらいやすくしたこと

5.学んだこと

  • 情報設計の重要性と課題解決の視点 :情報設計を徹底することで、クライアント様の抽象的な要望を具体的な形へ落とし込み、課題を解決するサイトが作れることを学びました。

  • 試行錯誤を通じた表現力の向上:制作過程で意図をデザインに落とし込む難しさに直面しましたが、その試行錯誤こそが「ユーザーに届く表現」を模索する貴重な経験となりました 。

  • 「原点回帰」によるデザインの軸の確立 :デザインの細部で迷った時こそ、「何のために、誰に届けるサイトなのか」という設計の原点に立ち返ることの大切さを実感しました 。

  • 次に生かすステップ、根拠のあるデザインの追求 :今後は、単に見栄えを整えるだけでなく、クライアント様のビジョンとユーザーの心を結ぶ「根拠のあるデザイン」を提供できるよう、ロジカルな思考と表現力をさらに磨いていきます 。