LP制作

OVERVIEW

SHElikes PRO デザイナーの課題として、LP制作(要件定義~コーディングまで)に取り組みました。

YEAR 2025

🐱制作物

▼ 完成したLP(GitHub Pages) ※PCとSPサイズでレスポンシブ

TSUTSUMU 採用サイト|新卒・中途採用情報


▼ PCデザインカンプ


▼ SPデザインカンプ


▼ ムードボード


🐱課題概要

架空クライアントからの依頼内容まとめ

  • やりたいこと
    採用に使用するLPの制作
  • クライアント
    「TSUTSUMU 株式会社」
    ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開。軸はベビー用品のまま、今後ママ・パパ、家族向けのサービスも展開予定
  • 目的
    採用強化。LPを通してエントリーをしてもらう
  • ターゲット
    転職希望の方
    報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくれる方。各職種で全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている方
  • 提供画像
    ロゴ
  • その他要望
    明確なブランドトンマナがまだ決まっていないので、事業内容にあうトンマナを自由に提案してほしい

🐱情報設計

■ 制作意図

「家族の未来をやさしくつつむ」をテーマに、赤ちゃんや家族を包み込むような温かさと安心感を重視した採用LPを制作しました。採用サイトという特性上、求職者に共感と信頼を同時に感じてもらえるよう、ビジュアルとコピーを設計しています。

読み進めるうちに自然とエントリーしたくなる導線を設計し、視線の流れ・情報量・余白を丁寧にコントロールしました。全体の構成は以下のストーリーを意識しています。

■ ユーザーストーリー

例:共働きで育児中のWebエンジニア(30代前半)

育児と仕事の両立に悩む中、「自分の仕事が本当に誰かの役に立っている」と実感できる環境を求めている。
⇒ SNS広告から本LPを訪問し、赤ちゃんや家族の安心を支える企業姿勢に共感。
⇒「世界をやさしさでつつむ」というコピーと社員の笑顔、柔らかいトーンのデザインに惹かれ、「ここでなら自分らしく働けそう」と感じ、エントリーボタンをクリックする。


🐱工夫したポイント

  • 世界観を一貫させたデザイン設計:温かみ・優しさ・誠実さを軸に、配色・フォント・イラストを選定。装飾的すぎず、安心感を与えるまろやかさを意識しました。
  • 細部までこだわったUI表現:スマホ表示で画像が縦に伸びてしまう問題を、aspect-ratioとbackground-sizeの調整で改善。自然な見え方を実現しました。
  • 動きによる感情的な演出:JSで実装したフェードインアニメーションにより、「ふわっと現れる優しさ」を視覚的にも表現。ページの最後にぬくもりが残るような体験設計を心がけました。
  • 課題感からの改善意識:前回のLP制作で学んだ構成の密度と余白のバランスを踏まえ、情報を削りすぎず、それでいて読み疲れしない設計に挑戦しました。

🐱学び・振り返り

細部の調整を粘り強く行うことで、デザインの完成度が大きく変わることを実感しました。技術的な試行錯誤(CSS・JSの扱い)を通じて、デザイナーとして「実装を意識した設計」の重要性を学びました。

世界観の構築が自分にとって最もモチベーションの源泉であると再確認。デザインを通じて「感情の温度」を伝えることが、自分の軸だと感じました。