ベビー用品会社｜採用サイト｜課題

❖ 目次

• 制作物
• 概要（クライアント情報 / 要件）
• 制作範囲
• 情報設計｜ユーザーストーリー
• デザインコンセプト
• デザインの工夫
• 実装の工夫
• 本課題で学んだこと

❖ 制作物

🔽 TSUTSUMU 採用サイト｜完成サイトはこちら

https://lulu.mond.jp/ 

❖ 概要

❖ クライアント情報

クライアント名：TSUTSUMU 株式会社

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

❖ 要件

❖ 制作範囲

• ワイヤーフレーム（情報設計）
• デザイン
• 画像選定・加工
• 実装（レスポンシブ対応 / アニメーション）
• 公開

❖ 情報設計｜ユーザーストーリー

❖ デザインコンセプト

❖ デザインの工夫

[ ① 装飾 ]

• 写真を流体シェイプに → 柔らかさと個性を演出
• 背景にグラデーションのぼかし円を配置 → 親しみやすさを表現

[ ② アイコン ]

• ペンツールで作成したアイコンを追加 → 全体の統一感、分かりやすさを意識

[ ③ レイアウト ]

• 全幅画像の配置や3つの要素をあえてずらす → デザインに変化をつけ単調さを防ぐ

❖ 実装の工夫

離脱されず、最後まで飽きずに見てもらえるよう、動きや操作性に工夫を加えました。

[ ① 横スクロールのアニメーション ]

 → 冒頭で印象的な動きを加え、視線を引く

[ ② ホバー時に円が広がるアニメーション ] 

→ やさしさが広がるイメージを表現

[ ③ エントリーボタン（PC：ヘッダー固定、SP：下部固定で追従）]

→ 操作性を向上 

[ ④ 各種 アニメーション ]

フェードイン、パララックス、ズームイン、スムーズスクロールなど

→ ページ全体に動きを持たせ、飽きさせない工夫

[ ⑤ レスポンシブ対応 ]

→ すべての画面サイズでレイアウトが崩れないよう細かく調整 

❖ 本課題で学んだこと

［ ① コーポレートサイトと採用サイトの違い ］

• それぞれの役割やターゲットの違いを理解し、目的に応じた効果的なアプローチ方法を考えることの大切さを学んだ

［ ② 丁寧なマークアップの効果 ］  

• 丁寧にマークアップすることで、実装がスムーズに進むことを実感

［ ③ ドメイン作成から公開までの流れ ］

• ロリポップを使用し、ドメイン作成から公開までの一連の流れを経験することで、Webサイト制作の全体像を把握できた