【自主制作】LP　ベビー用品企業の採用サイト

【制作時間】5週間 

　　└情報設計・ワイヤーフレーム制作：15時間

　　└デザインカンプ制作： 25時間

　　└コーディング（HTML／CSS／JavaScript） ・サーバーアップ:30時間

【制作年】2025年12月～2026年1月

【使用ツール】Figma・VScode 

【使用言語】HTML・CSS・Java Script

【目次】

①制作物

②課題要件

③情報設計ー ペルソナ

④情報設計ー 構成・ユーザーストーリー

⑤デザインコンセプト

⑥ 工夫したところ

⑦まとめ

①制作物

※FVおよび「事業について」セクション内写真はAdobeFireflyを使用して作成

②課題要件

③ 情報設計ーペルソナ

課題要件から以下のペルソナを想定しました。

④情報設計ー構成・ユーザーストーリー

提供された構成をもとに、応募導線を再設計しました。

• 共感 → 理解 → 自分ごと化 → 不安解消 → 応募の流れを軸に再構成し、「働く環境」、「事業について」、「メンバー紹介」の順番を入れ替えました。
• 特に採用サイトでは「自分ごと化」できるかが応募行動に直結すると考え、
  体験の流れを意識して再構成しました。 キービジュアルで企業の価値観に触れてもらい、事業紹介で理解を深め、メンバー紹介や働く環境のセクションで「ここで働く自分」を具体的に想像できる設計としました。

⑤デザインコンセプト

「世界をやさしさでつつむ」というビジョンが、言葉だけでなく空気感として伝わる世界観を目指しました。採用サイトとして過度に装飾的にせず、長く働くイメージにつながる落ち着いたトーンを重視しました。 

ムードボード

 キーワード

「誠実」「家族」「暮らし」「生成り」「日常」「日々」  

• 理想主義的な子育てではなく、日常の延長にある風景を切り取ることで、企業の誠実さと信頼感が自然に伝わる世界観を設計しました。
• 甘さに寄せすぎず、家族全体を感じられる構成としています。 

スタイルガイド

配色

• ベビー用品業界の企業サイトで多く見られる暖色系の配色とは異なるアプローチを取り、性別を問わず共感できる配色を目指しました。
• ベージュを基調に余白を活かし、誠実さと安心感を軸に設計しています。
• メインカラーはCTAなど行動を促す箇所に限定し、アクセントカラーで視線誘導を行うことで、落ち着きのある中にもメリハリを持たせました。

デザイン設計の指針（まとめ）

上記のコンセプト・配色・タイポグラフィを踏まえ、以下の方針でデザインを設計した。 

• 採用サイトとして、誠実さと企業としての信頼感が自然に伝わる設計とする
• 知的で落ち着いたプロフェッショナルな印象を目指し、装飾を抑えた余白設計と低彩度の配色でトーンを統一する
• 男性や多様なキャリアを持つ層にも、自分ごととして捉えられる設計にする

⑥工夫したところ

⑦まとめ

• 情報設計・デザインカンプ・コーディング・サーバーアップまでの一連の制作工程を経験したことで全体を俯瞰して捉えられるようになり、コーディングを見据えたカンプ設計の重要性を実感しました。一方で、実装上の制約にとらわれすぎず、デザインと実装の双方のスキルを高めていく必要性も感じました。 

• 情報設計段階で優先順位を明確にすることで、以降のデザイン判断や実装がスムーズになると実感しました 。

• 表現の美しさだけでなく、課題解決の視点を持つことが、意図が伝わるサイトとしての説得力につながることを学びました。