【課題】Webサイト制作(PC/SP)

OVERVIEW

SHElikes PRO デザイナーコースにて、架空クライアントの依頼内容をもとにWEBサイトを制作しました。ヒアリング内容から課題やターゲットを整理し、情報設計からデザイン制作まで担当。PC版・SP版のデザインを制作しています。(制作期間2週間)

YEAR 2026

制作物


課題要件

◯クライアント情報:TSUTSUMU 株式会社

ベビー用品を中心に、育児をサポートするコミュニティ事業やフォトブック事業を展開。今後はママ・パパを含む家族向けサービスの拡充も予定している。

◯目的

  • 転職希望の方(性別問わず)
  • 報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方
  • 各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャー

フィットしている人がターゲット

◯ターゲット

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

(採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば

誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい)

◯トンマナ

  • 明確なブランドトンマナがまだ決まっていないため、事業内容にあうトンマナ

を自由に提案

◯提供情報

  • 掲載予定コンテンツ(キービジュアル、私たちについて、働く環境、事業について、募集職種、メンバー紹介、エントリー、フッター)
  • ブランドロゴ

ペルソナ

中村 美波(32)

居住地 東京都

家族 夫 1歳の子供

趣味 子供の写真や動画を編集すること

仕事 産休取得前までは企業で専門職として5年以上勤務

(デザインや企画、マーケなどの経験あり)


◯現在の悩み

  • 育休明けに復帰予定だが、今の会社の価値観に違和感を感じている
  • 数字や効率だけでなく、「誰のための仕事か」を大切にしたいと思うようになった
  • キャリアも家族との時間も、どちらも妥協したくない

◯ライフスタイル・価値観

  • 平日は仕事と育児を両立しながら、自分の成長も止めたくない
  • 休日は家族と過ごす時間を大切にしている

  • 社会的意義のある仕事に関心がある

  • 効率よりも“意味”を重視する

◯大切にしていること

  • 家族との時間
  • 自分自身の成長

  • 社会にポジティブな影響を与えること

◯ペルソナに届けたい価値

  • 家族を大切にする文化が根付いていること
  • ビジョンに共感できる仲間と働けること
  • 自分の経験が社会に意味ある形で活かせること

情報設計

ユーザーストーリー

  • ターゲットユーザーが必要な情報へスムーズにたどり着き、離脱せず応募アクションにつながる導線設計を行った。
  • 企業の想いや価値観が伝わるコンテンツ配置を意識し、企業理解と共感を促進する構成とした。

ビジュアルデザイン

◯配色

  • ベースカラーには黄みのある柔らかなベージュを採用し、親しみやすく温かみのある印象を演出した。
  • メインカラーにはオレンジを使用し、企業が大切にする温もりや共感のイメージを表現した。
  • アクセントカラーには信頼感や安心感を与えるグリーンを取り入れ、採用サイトとしての信頼性を高める役割を持たせた。
  • 全体の配色は、性別を問わず幅広い求職者が親しみやすく、共感を得られるバランスを意識して設計した。

◯フォント

  • Noto Sans JPを採用し、採用サイトに適した信頼感と高い視認性を実現した。

  • メンバー紹介にはTA恋心を使用し、社員のコメントであることが直感的に伝わるよう、温かみのある手書き風フォントを採用した。

タイトル

  • 本サイトは、企業の世界観に強く共感してくれたターゲットからのエントリーを目的としているため、「共感」を軸にサイト全体を設計した。
  • 全体を通して、上部では企業の世界観や価値観を伝えながら共感を獲得し、最後に採用サイトとして必要な情報を提示する流れにした。

  • カルチャーフィットする人材をターゲットとしているため、メインビジュアルにはコンセ

プトを補足するコピーを配置した。

理念を伝え、企業への共感を促す

  • 文章量の多いセクションのため、情報が重く見えないよう画像のシェイプには柔らかさを感じるニュアンスモチーフを用いた。
  • FVで提示したコンセプトや世界観を補足する役割を持たせ、企業の価値観がより深く伝わるような構成にした。

共感を生む情報を掲載

  • 企業の世界観に共感したターゲットが、さらに共感を深められる重要なセクションと考え、この位置に配置した。
  • 共感のフックになる文章を掲載することで、「もっと知りたい」と思わせる動線を設計した。
  • CTAには「メンバーのストーリーを見る」という文言を採用し、メンバーの想いや背景への興味を喚起することで、自然なクリックに繋がるよう設計した。

事業内容を理解してもらう

  • 理念と事業内容の繋がりが伝わる構成にすることで、企業の価値観が事業を通してどのように実現されているのかを理解できるよう設計した。

制度や働き方を伝える

  • 働く環境の特徴が一目で理解できるよう、アイコンを用いて視覚的かつ直感的に情報が伝わる構成を設計した。
  • 情報を簡潔に整理することで、ターゲットが入社後の働くイメージを持ちやすくなることを意識した。

応募可能な職種を提示

  • 募集職種は画像ではなくアイコンで表現することで、職種の違いを視覚的にわかりやすく伝えられるようにした。

応募の心理的ハードルを下げる(追加セクション)

  • 応募までのプロセスを明確にすることで、ターゲットの不安を軽減し、最後の行動を後押しできるセクションとして設計した。

エントリー前の不安を解消(追加セクション)

  • ターゲットが感じやすい疑問や不安を解消することで、エントリーへの心理的ハードルを下げ、安心して応募できる導線を意識した。

エントリーを促す

  • エントリーへの最後の後押しとなるセクションとして、応募を促すコピーを配置した。
  • サイト全体で伝えてきた企業の世界観を損なわないよう、柔らかい雰囲気の写真を背景に使用した。その中にエントリーボタンを配置することで、サイトを通して高まった共感を、自然に応募行動へとつなげることを意識して設計した。
  • ロゴを配置することでブランド認知を高め、SNSアイコンを設置することで企業のリアルな発信や雰囲気を知ることができるようにした。
  • メニューには会社情報やお問い合わせを追加し、企業についてさらに詳しく知りたい場合や問い合わせをしたい場合にも対応できるよう設計した。

◯工夫したところ

  • 採用サイトでありながら、企業理念に共感し、カルチャーフィットする方からの応募を目的としているため、採用色を強く出しすぎず、共感を軸にしたサイト設計を意識しました。
  • 企業への理解や共感が自然に深まるよう、セクションの順番にもこだわり、応募前の不安を解消できるコンテンツも追加しています。
  • 全体として柔らかな世界観を表現しつつ、グリーンを取り入れることで採用サイトとしての信頼感を演出し、デザインにメリハリを持たせました。


◯制作を通して学んだこと

今回の制作を通して、情報設計がサイトの成果を左右する重要な要素であることを学びました。企業の想いや価値をユーザーに伝えるためには、見た目のデザインだけでなく、どの情報をどの順番で届けるかを設計することが欠かせません。ワイヤーフレームからデザイン制作まで、一つひとつの要素に意図と根拠を持たせながら設計することで、目的達成につながるデザインを制作できることを学びました。