【LPデザイン/コーディング】TSUTSUMU 採用サイト

制作時期 ：2025年7月

制作時間 ： デザイン 約8時間、コーディング 約40時間 

制作範囲 ：構成/デザイン/実装

ツール 　： Figma (ワイヤーフレーム) / Photoshop (デザインカンプ) / VScode(コーディング)

使用言語：HTML / CSS / jQuery

サイズ　 ：PC（横幅1440px）
SP（横幅375px）

【制作物】

【概要と情報設計】

クライアント情報

TSUTSUMU 株式会社

ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定。

制作目的

本LPを通してエントリーをしてもらうこと


* 採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい

ターゲット

・転職希望の方

・報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方

・各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている方

トンマナ


・明確なブランドトンマナがまだ決まっていないので、事業内容にあうトンマナを自由に提案してほしい

要件から導いたペルソナ

佐藤 みのり (34)｜夫と２歳の娘と３人暮らし｜制作会社WEBディレクター｜東京在住
・週５出社で時短勤務。保育園の送迎で毎日バタバタで疲弊気味。ほかにいい働き方があるかも？と感じている

・クライアントワーク中心。頼れる同僚も多く仕事をこなしているが、誰のための仕事わからなくなることがありモヤモヤをかかえることがある

・共感を根拠に行動するタイプ。職場を変えるならビジョンや人柄で会社を選びたい。

ムードボード

【情報設計】

ユーザー心理に沿ったLP設計図

【ポイント】

ヘッダー

アバウト

人を知る(社員紹介)

制度を知る (会社紹介)

FAQ(よくある質問）

CTA

【気付き/学び】

見た目だけでなく「情報の順序」と「伝える構造」がLP制作のキーとなる

コーディング段階で「この並びで本当に伝わるのか？」と疑問を持つ場面があり、デザインカンプの段階で情報設計の意図がデザイン反映されていないことに気付きました。セクションの順序や情報のポイントを整理することでユーザーに意図が届きやすいLPになることが分かりました。

・レスポンシブ対応の重要さ

様々なサイズのデバイスで閲覧されることを前提としたレスポンシブ対応やブレイクポイントの設定をすることで、ユーザー視点でのページの見やすさを再度考え直すきっかけになりました。また、コーディング中のエラー解決を繰り返す中で、原因を特定する力や実装スキルが着実にアップしました。