【自主制作】ベビー用品会社 | 採用サイト LP デザイン・コーディング

【対応範囲】要件定義・情報設計、PC・SP ワイヤーフレーム〜デザインカンプ制作、　　　　　　　　　　　コーディング（HTML・CSS・JavaScript）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　【制作期間】デザイン制作：約2週間／コーディング：約3週間　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　【制作時期】2025年11~12月　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　【使用ツール】Figma、Visual Studio Code

目次

• 制作物
• 要件
• 制作のポイント（情報設計／デザイン）
• 制作を通して学んだこと

▶︎制作物

▶︎要件

・概要

・ペルソナ　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　要件に沿い、ターゲット像を具体化するためペルソナを詳細に設計しました。

▶︎制作のポイント

【情報設計】

・ユーザーストーリー　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　要件にある「TSUTSUMUの世界観に共感できる方」「カルチャーフィットする方」にエントリーしてもらうことを目的に、ユーザーストーリーを設計しました。

・はたらくイメージを伝えるコンテンツ設計　　　　　　　　　　　　　　　　　　　　　　　　　　はたらき方の解像度を高め、入社後はたらくイメージを具体的に想像できるよう、コンテンツを設計しました。「1日のスケジュール」や「数字で見るTSUTSUMU」といったセクションを設け、はたらき方や環境を具体的に伝えています。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　同じ意図から、「メンバー紹介」では一言コメントを添え、どのように活躍しているのかが伝わるよう工夫しました。

・アクションを後押しするための工夫　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　選考プロセスを可視化することで、応募への心理的ハードルを下げる工夫をしました。　　　　　　　いきなりENTRYすることに不安を感じるユーザーに向けて「カジュアル面談」を、さらに情報収集をしたいユーザーに向けて「SNSコンテンツ」を紹介し、検討段階に合わせてアクションを選べる導線を設計しています。　　　　　　　　　　　　　　　　　　　

【デザイン】

・ムードボード　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　家族みんなが幸せになることを目指した事業背景と、「世界をやさしさでつつむ。」というキャッチコピーから「家族の笑顔をやさしくつつむ 〜育児で感じた課題や想いを、しごとを通じて未来へつなぐ〜」をキーワードにトンマナを設計しました。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　カラーはひだまりの光や自然に包まれるイメージから、セージグリーンをメインにあたたかい暖色を使用。採用サイトとしての役割を踏まえ、やわらかさと落ち着きのバランスを意識したトーンにしています。　

・世界観の表現　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　「私たちについて」セクションで、大切にしている想いと併せて、ギャラリービュー形式で写真が流れるようにすることで、世界観を視覚的に伝え、共感を生むことを目指しました。　

・やわらかさ・やさしさの表現　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　写真を曲形で切り抜いたり曲線で結ぶことで、やわらかい雰囲気を出しました。　　　　　　　　　　また、水彩タッチの図形や手書きの曲線をあしらうことで、TSUTSUMUのやさしい世界観を表現しています。図形のあしらいには、ふわっと浮遊する動きをつけました。　

・ホバーした際の動き　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ユーザーにとって分かりやすいインターフェイスを意識し、メニュー名やボタンなど、クリックできる箇所にはホバーした際の動きを取り入れました。

▶︎制作を通して学んだこと

【クライアント・ユーザー視点の両軸】　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　要件に沿ってペルソナを詳細に設計したことで、「自分がペルソナだったらどう感じるか、何を知りたいか」を想像しながら、ユーザー視点で情報設計を進めやすくなりました。　　　　　　　　　　　　また、クライアントが訴求したいこととユーザー視点の両軸で考え、ユーザーストーリーやワイヤーフレームを検討していく重要性を学びました。

【コーディングを考慮したデザイン設計】　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　要件定義・情報設計から、ワイヤーフレーム・デザインカンプ制作、コーディングまで一連の流れを経験したことで、デザインの段階からコーディングを意識することの重要性を学びました。　　　　　　一方で、コーディングのしやすさを優先しすぎると本末転倒になるため、「どう実装するのか」を考えつつ、要件やトンマナに沿ったデザインを制作する必要があると感じています。意図に沿った様々なデザインを形にできるよう、今後さらにコーディングの知識を身につけていきたいです。

【ルール設計とレスポンシブ対応】　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　予めスタイルガイドを作成し、デザインルールを整理しておくことが、全体の一貫性だけでなくコーディングのしやすさにも繋がることを実感しました。　　　　　　　　　　　　　　　　　　　　　　　またレスポンシブ対応では、ユーザーが利用する端末の幅広さを考慮したデザイン設計とコーディングの難しさを実感しました。今後も幅広い画面幅に対応できるよう意識しながら、より丁寧な設計をしていきたいと考えています。