架空LP　ベビー用品企業の採用サイト【課題制作】

■制作したもの

URL

■課題概要

〇対応範囲

要件定義：情報整理、３C分析、SWOT分析、SWOTクロス分析

情報設計：市場調査、ペルソナ作成

デザインカンプ制作：ユーザーストーリーに沿ったページ設計

コーディング、サーバーアップ 

〇制作時間

• 情報設計～ワイヤーフレーム：10時間程度
• デザイン：12時間程度
• コーディング：30時間程度
• ブラッシュアップ：10時間程度

■情報設計

〇市場リサーチと設計方針の策定 

今回のサイトの目的を「企業のビジョンと文化に深く共感する人材を惹きつけ、質の高いエントリーを増やすこと」と定義し、まずは中途採用サイトのリサーチを行いました。

近年の採用サイト（特に募集職種が多岐にわたる企業）では、カジュアル面談を導入しているケースが増えています。その背景を調べたところ、職種によって選考フローが異なる場合が多いこと、また求職者の多様化が進む現代において、フローを固定せずまずは対話から始めることが主流になっていることがわかりました。 この流れは今回の企業の採用活動ともマッチすると考えました。主なターゲット層であるママ・パパは時間調整が難しいケースが多く、また募集職種もエンジニア、デザイナー、マーケターと幅広いためです。

そのため、今回のサイト設計ではカジュアル面談を前面に押し出す構成としました。

〇分析工程

次に3C分析・SWOT分析を実施し、SWOTクロス分析によりSO戦略（強み×機会）が最適と判断。


ターゲットインサイトと企業の強みを掛け合わせ、「商品提供+コミュニティ形成」という事業の広がりを通じて「家族の幸せ」を実現するサイト設計方針を策定しました。

〇ペルソナ

３C分析を基にペルソナを作成。メインターゲットをワークライフバランスを模索するママデザイナーとしました。

〇ユーザーストーリーに沿ったページ設計

■デザインコンセプト

〇カラー設計

ペルソナが求める「ワークライフバランス」と「安心感」を伝えるため、「家族の温かさ」と「企業の誠実さ」を融合させた配色を採用しました。

白（新しい命の象徴・清潔感）、ピンク（愛情と優しさ）、水色（爽やかさと信頼性）の3色で、クライアントの温かい世界観を表現。

採用サイトとしての信頼性を確保しつつ、温かみを損なわないバランスを重視し、ベースカラーに白系、テキストカラーに濃いグレーを採用しました。アクセントカラーとしてピンクと水色を使用することで、家族を大切にする温かい環境と、安心して長く働ける企業の誠実さの両方を視覚的に伝える設計を目指しました。

〇デザインの工夫

世界観を一目で伝えるビジュアル選定

ファーストビューには、赤ちゃんとお母さんが地球に優しく手を添えている写真を採用しました。

企業のキャッチコピー「世界をやさしさでつつむ」を視覚的に体現しており、サイトを訪れた瞬間に企業理念と温かな世界観が自然と伝わるよう意図しています。

言葉で説明する前に、ビジュアルで共感を生み出すことを重視しました。

企業理念の視覚化と採用への導線

ビジョンセクションでは、企業の目指す家族像をビジュアルで伝えることで理念への共感を促し、「そのビジョンを叶える一員になりませんか?」という呼びかけで自然に応募アクションへとつなげる導線を設計しました。

メンバー紹介カードにキャッチコピーを掲載

求職者に親近感を持ってもらうため、メンバーカードには実際に働く社員一人ひとりの想いをキャッチコピーとして掲載しました。

メンバー直下にCTAを配置

メンバー紹介の直下にカジュアル面談の申込ボタンを配置し、「実際に会ってみたい」と感じた瞬間を逃さずアクションへ繋げる導線を設計しました。

社員の声で伝える福利厚生のリアル

ターゲット層が最も重視する福利厚生について、社員の声を吹き出し形式で掲載。実際の体験談を通じて、安心感と信頼性を高める工夫をしています。 

サイト全体で優しい世界観を守るトーンで展開していますが、募集職種セクションでは意図的にトーンを変え、職種の専門性や真剣さを伝えるため、写真を黒基調にし機械的でかっちりとした印象を目指しました。

その一方で、過度に堅苦しくならないよう、ギミック的な動きで面白みと親しみやすさを加えました。また、それぞれの閲覧環境で最も情報が伝わりやすいインタラクションを選択することで、ユーザー体験の向上を図っています。

FAQ（よくある質問）を追加

クライアントから提供された要素に加えて、ユーザー導線を考慮し「よくある質問」セクションを独自に追加しました。

「エントリー」の直前に配置することで、応募前に生じる不安や疑問をその場で解消できる設計に。「本当に応募していいのか」という心理的なハードルを下げ、スムーズにアクションへつながる流れを意識しました。

■今回の課題で学んだこと

〇要件整理
トレンドリサーチから始め、「なぜその手法が使われるのか」を分析することで、ターゲット（ママ・パパ）に合わせた論理的なサイト設計ができました。調査から設計への流れを構築する重要性を実感しました。

〇デザイン制作
 親しみやすさと信頼性のバランスを取る難しさを経験。「なぜこの色?」「なぜこの順番?」と一つ一つに根拠を持たせることで、説得力のあるデザインを作る重要性を学びました。

〇コーディング
 相対数値でのサイズ指定やHTML構成の事前設計の大切さ、scriptの実装イメージを掴めました。TAの先生やAIのサポートを通じて、適切な質問の仕方や問題の本質を理解することで、技術理解が深まりました。