採用LP 

目次

実装ページ

http://toto-design.jp/tsutsumu/

成果物

TSUTSUMU_PCデザインカンプ.pdf

TSUTSUMU_SPデザインカンプ.pdf

TSUTSUMU_PCワイヤーフレーム_再構築.pdf

TSUTSUMU_SPワイヤーフレーム.pdf

制作目的

採用サイトを通してエントリーをしてもらうこと。

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

ターゲット

• 転職希望の方（性別問わず）

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

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

課題要件・ペルソナ

※ペルソナは課題要件をもとに自身で考えました。

ユーザーストーリー

サイトの目的として「エントリーがあれば誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい」という要望もあったので、LPのフェーズの構成は「共感 → 理解 → 安心 → エントリー」と考えた。ユーザー心理の流れに合わせてより共感・安心感を持てる構成になるようコンテンツを追加した。

デザインコンセプト

コンセプト・テーマ 

「やさしさに包まれる」


赤ちゃんとその家族の日常に寄り添うブランドの世界観を表現するため、丸みのある形や柔らかい余白、レイヤー表現を用いて包み込まれるような安心感のあるデザインを目指しました。

配色にはペールピンクやベージュなど温もりを感じる色を使用し、コーラルカラーをアクセントとしてブランドの温度感を表現しています。

キーワード
「包む」「やさしさ」「温度」「つながり」「温もり」

デザインの深掘り
① 丸い形
角をなくした柔らかなフォルムを取り入れることで、 赤ちゃんらしいやさしさや安心感を視覚的に表現。 ユーザーに対しても心理的なやわらかさや親しみやすさを与えます。

② 包み込まれるレイアウト
余白や重なり（レイヤー）を活かし、要素同士がやさしく重なり合う構成にすることで、「包む」というブランドコンセプトを視覚的に表現しています。
コンテンツが孤立せず、つながりを感じられる設計にすることで、家族のつながりや安心感も表現しています。

③ 柔らかい余白
余白を広めに取り、要素同士の距離にゆとりを持たせることで、視覚的なストレスを減らし、落ち着いた印象に。
“余白＝安心できる空間”として機能させ、ユーザーが心地よく情報を受け取れるよう設計しています。

ムードボード

デザインコンセプトを「やさしさに包まれる」としたので、優しさを表現するような曲線の多いフレームを使用した。家族の写真だけではなく働く様子も伝わる写真も採用した。あしらいにはベビー用品の優しいイラストを追加した。

配色について

TSUTSUMUのブランドコンセプトである「やさしさに包まれる」を表現するため、温もりや安心感を感じられるやさしいトーンのカラーをベースに設計しました。
ベースカラー
清潔感と落ち着きを感じられるオフホワイトを使用し、サイト全体に柔らかく穏やかな印象を与えています。

メインカラー
ペールピンクとベージュを採用し、赤ちゃんや家族の温かい日常をイメージさせる、やさしく温もりのある世界観を表現しました。

アクセントカラー
やや彩度のあるコーラルカラーを使用し、やさしいトーンの中に程よいメリハリとブランドの温度感を加えています。
全体として、安心感・温もり・親しみやすさを感じられる配色設計としました。

デザインのこだわり1

フォントの使い分けにも意味を持たせ、コンセプトを再現しました。

デザインのこだわり2

コーディングの実装では、jQueryを用いて動きがあり、飽きない設計を心がけました。また、LP自体も長くなりすぎないようにスライダーなども組み込みました。

制作を通じて学んだこと

コンセプト設計からデザイン、実装までの一連の流れを経験する中で、特に「目的から逆算してデザインを行うこと」の重要性を学びました。

これまでは感覚的にデザインを進めてしまうこともありましたが、ユーザーストーリーやコンセプト設計にしっかりと時間をかけ、「誰に・何を伝えるサイトなのか」を明確にすることで、デザインの方向性に迷うことが少なくなり、一貫性のあるアウトプットにつながることを実感しました。

また、コンセプトに立ち返る軸を持つことで、見た目だけでなく意味を持ったデザインができることも大きな学びでした。

一方で、コーディングにおいてはマークアップ設計で悩む場面があり、特にテキストの管理や再利用性を意識した構造にする難しさを感じました。その中で、すべてを共通化するのではなく、セクションごとに適切に分けて設計することで、結果的に編集しやすくなるという気づきも得られました。