【架空制作】採用サイトデザイン制作・実装

完成サイトURL：https://test-z.chowder.jp/she-tsutsumu/recruit/

• 使用ツール：Figma、Photoshop、VS code
• 案件制作期間：5週間
• デザイン制作時間：約2週間
• コーディング実装期間：約3週間

目次

① 制作要件
② 戦略的なストーリー設計（ワイヤーフレーム設計）
③ デザイン制作ポイント
④ コーディング実装の工夫
⑤ 制作から得られた学びと応用

① 制作要件

▼クライアントの情報

▼制作要件

▼指定サイズ

• PC：1440px
• SP：375px

② 戦略的なストーリー設計（ワイヤーフレーム設計）

与えられたターゲットと採用目的から、以下の分析と情報設計を行いました。

【ペルソナ】

Aさん (30代後半、女性、現職Webマーケター、子育て中)

• 心理：現在の会社で成果は出しているが、より社会貢献性の高い、特に子育て関連のサービスに携わりたいという願望がある。

• ニーズ：リモートワークや時短勤務など、柔軟な働き方ができる環境を求めている。

【サイト構成の流れ】

応募者が迷うことなくスムーズに情報を得て、最終的な応募へと繋がるよう設計しました。

共感（ファーストビュー、バリュー）
↓
理解（事業内容、社員紹介）
↓
納得（制度）
↓
行動（職種一覧、応募フロー）

【ユーザーストーリーの設計】

ターゲットであるAさんが、サイト訪問から応募に至るまで段階的に企業への共感を深め、「ここで働きたい」という強い気持ちで応募に至るプロセスを目指しました。

▼サイト訪問・ファーストビュー：

「幸せが溢れる世界を作る」というキャッチコピーに心を掴まれ、「私もこういうサービスに携わりたい」と感情的な動機が生まれる。

▼バリュー（ビジョン・ミッション）：

会社の根幹にある「想い」に触れ、「単なるビジネスではなく、真に社会に貢献しようとしているのだな」と共感度がさらに高まる。

▼事業内容：

「子育て中の私にとって身近なサービスだ。自分の経験が活かせそう」と、サービスユーザーとしての視点と、ビジネスパーソンとしての視点が結びつき、期待感が生まれる。

▼社員インタビュー：

ロールモデルとなる社員を見つけ、「この人たち、本当にサービスを愛している。自分もこのチームの一員になりたい」という帰属意識が芽生える。

▼制度紹介：

「柔軟な働き方を推奨している！子育て中でも働きやすそう」と、働くイメージが具体化し、自分のライフスタイルや価値観と照らし合わせ、カルチャーフィットを確信する。

▼募集職種：

職種詳細から「私の経験があれば、きっとこんな貢献ができる」と、自己実現への確信を得て、応募への意欲が高まる。

▼採用の流れ・エントリーフォーム：

応募ステップを確認し、スムーズにエントリーフォームへ進む。

※工夫したところ
クライアントの「カルチャーフィットする方に応募してほしい」というご希望に基づき、ミスマッチによる応募を減らすため、選考フローに「カジュアル面談」のステップを提案しました。

③ デザイン制作のポイント

完成したサイトはこちら：https://test-z.chowder.jp/she-tsutsumu/recruit/

【ムードボードとコンセプト】

デザインの方向性を決めるムードボードを作成し、Webサイトのコンセプトを決定しました。コンテンツのみならず、ビジュアル要素を使って「この会社の雰囲気」「ここで働く人の特徴」を伝えることで、「カルチャーフィット」を最大限に引き出すデザインを目指しました。

【全体配色とトーン＆マナー】

クライアントのビジョン「世界をやさしさでつつむ」に基づき、ベンチャー企業のスピード感やPOPさを抑え、清潔感と誠実さを表現しました。

• やさしさを表現する淡いピンクをベースに、アクセントカラーとして責任感と誠実さが伝わる温かみのある赤と青を採用。

• ピンク × 赤 × 青の組み合わせで、赤ちゃん × お母さん × お父さんを連想させ、クライアントの事業内容を視覚的に表現することを意図しました。

• 企業カルチャ及びブランド世界観に繋がるため、流体シェイプや曲線を使って「温かみ」と「優しさ」を表現しました。

【ファーストビュー】

1. CTA導線最適化

リクルートサイトの最終目標である「応募」への導線を最適化しました。最重要アクションである「応募する」ボタンをヘッダーの最右端にアクセントカラーで配置し、SP版では最もタップしやすい画面の右下に固定しました。

また、メインビジュアルとコピーの直下に、「ビジョン・ミッション」「募集要項・選考情報」といったエントリーの動機付けとなる主要コンテンツへのリンクを配置。ユーザーが感情的な訴求を受けた直後に、理性的な情報へスムーズにアクセスできるよう設計しました。

2. メインビジュアルのデザイン表現

異なる家族のシーンをスライダーでループさせ、企業の事業領域の広さと、多様な幸せに貢献しているというメッセージを伝えます。円弧状の柔らかなラインで区切り、重なりを持たせて配置することで、優しい温もりと奥行きを演出し、配色と合わせ、清潔感と信頼性を両立させました。

3. ナビゲーション整理

ユーザーがサイト内を迷わず回遊できるよう、ナビゲーションを「会社・事業を知る」「人を知る」「環境を知る」「仕事を知る」に分類し、求職者が求める情報カテゴリで整理することで、ユーザビリティを向上させました。

4. 最新採用情報の追加

採用活動の状況が一目でわかるよう、最新情報をファーストビューに表示しました。

④ コーディング実装の工夫

▼セカンドビュー以降のヘッダーと追従ボタン

• メインビジュアルのピンク背景から白背景へ切り替わる際、ヘッダーの背景色を変化させ、視覚的な連続性を確保しました。

• SP版では、ヘッダーに配置できない「応募する」CTAボタンを、セカンドビュー以降画面右下に追従固定させることで、常にアクションを促す導線を確保しました。

▼ボタンのユーザービリティ設計

• PCではすべてのボタンやリンクにホバー効果を追加し、インタラクティブ性を高めました。

• モバイル環境での誤操作防止のため、ボタンの高さを48px以上に調整し、ボタン同士の余白を広げました。

▼CSSアニメーションによる世界観の統一

スクロール時ふわっと出現するエフェクトや、CSSで実装した流体シェイプのアニメーションにより、Webサイトの動きをデザインの世界観に統一し、完成度を高めることができました。

CSSアニメーション使用箇所：https://test-z.chowder.jp/she-tsutsumu/recruit/#environment

▼構造整理とSEO対策

• 遷移先のダミーページを作成し、ディレクトリ内の構造整理を行い、<a>タグに相対パスを記述しました。

• メタ情報、ファビコン、OGP画像を設置し、HTML内のタグ構造を整理するなど、SEO対策を意識した実装を行いました。

⑤ 制作から得られた学びと応用

要件定義からサーバーアップまで、一通りの作業を経験し、Webサイト制作に関わる一連のプロセスと役割を深く理解しました。

• スケジュール管理と精度向上
  納期厳守のために、スケジュール管理の重要性を実感しました。工程を細かく分解し、各プロセスの工数を算出することで、全体スケジュールの精度を高める手法を習得しました。

• デザインと実装の連携
  コーディングをスムーズに行うために、デザイン段階でコンポーネントの構造やクラス名を意識するなど、実装を見越したデザイン設計の重要性を学びました。