LP制作|ベビー用品をメインとして扱う企業 株式会社TSUTSUMU 採用サイト
デザインを主軸としているキャリアスクール「SHElikes PRO デザイナー」の課題で、ワイヤーフレームからデザインカンプ作成、コーディング、サーバーアップとWEBデザインにおける必要なフローにひと通り挑戦しました。
【制作物】
・情報設計〜ワイヤーフレーム
・デザインカンプ
・コーディング(レスポンシブを含む)
・サーバーアップ
【制作情報】
制作時期:2025年6月~ 7月
制作時間:5週間(デザインカンプ2週間、コーディング3週間)
使用ツール・言語:Photoshop 、VS Code、HTML、CSS、jQuery
【課題の目的】
・WEBデザインにおいて必要な手順をひと通り学ぶ
・要件書の意図を理解し、目的に沿った情報の優先度付けや適切なレイアウトを考えながらワイヤーフレームを作成する方法を学ぶ
・実装を考慮してデザインカンプを作成することを学ぶ
・自分で0からコーディングをする際の手順を学ぶ
【成果物】
■実装サイトURL
株式会社 TSUTSUMU採用サイト
■CONCEPT
「やさしさでつつむ」という企業ミッションを軸に、赤ちゃんから家族全員が安心して幸せに過ごせる暮らしを支える姿勢を、配色・写真・余白設計などのビジュアル面で表現しました。
配色はパステル調のべージュやピンク、グリーンを基調にし、柔らかさと温もりを演出。写真には自然光で撮影された家族や社員の笑顔を選び、見る人の心に温かく響く雰囲気をつくり出しました。
構成面では、「カルチャーフィット」を意識して、求職者が自然に共感し、理解を深め、行動へつながるような流れを設計しています。また気持ちが高まっているうちに、いつでも応募に進めるよう各セクションにエントリーボタンを配置しました。
この採用サイトを通じて、企業の想いや価値観に共感した求職者が、「ここで働きたい」と自然に感じられる体験を提供することを目指しています。
【課題要件】
【分析】
【工夫した点】
【学んだこと】
WEBサイトの制作手順を実際に0→1から行うことで、一連の流れを知ることができました。制作時のコーディングを意識することで、コンテンツ幅や余白、見出しや本文など共通で揃える部分は揃えるなどデザインカンプを作成することの難しさも感じました。
また、コーディングに関してもマークアップ設計をきちんと行うことで後々の作業がスムーズに進むことを学びました。