【自主制作】架空LP ベビー用品事業の採用サイト

1.制作物

http://tsutsumu.kilo.jp/tsutsumu/

※FV写真はImageFXを使用して作成

2.課題要件

3.情報設計

①ペルソナ

②セクション順序の再考

ペルソナのユーザーストーリーをもとに、セクション順序を再考しました。

4.デザインコンセプト

Color Palette（カラーパレット）

・やさしさ・安心感・温もりを感じられる世界観を表現するため、淡くやわらかなパステルカラーを中心に構成。
・全体を明るく包み込むような配色にすることで、家族や子どもに関わるサービスとしての親しみやすさと信頼感を演出。
・CTAボタンのような重要箇所にはアクセントとしてベースカラーより濃い色を加えることで、コントラストを上げてメリハリを意識。

Typography（タイポグラフィ）

・メインにはZen Maru Gothicを使用し、丸みのある文字形から伝わるやさしさ・柔らかさを表現。可読性も高く、ストレスなく読める点で採用。

・補助的にLexend Zettaを組み合わせることで、見出しの英字部分にリズムを加え、
全体の印象が甘くなりすぎないようバランスを調整。

Photography / Motif（写真・モチーフ）

・赤ちゃんや家族の自然な表情、手のぬくもりが伝わるカットを使用し、サービスが持つやさしさや人とのつながりが伝わるような写真を選定。

5.デザインの工夫

●ヘッダー

サイト全体のやさしい世界観を損なわないよう、 透明感と奥行き感を意識した半透明デザインを採用しました。背景とのなじみを持たせることで、ファーストビューの写真やコンテンツに自然と視線が向かうよう意識しています。

●ヘッダーのエントリーボタン

ユーザーの行動を後押しするため、ホバー時にサイズがわずかに拡大し、色がピンクに変化するモーションを設定しました。視覚的な変化を加えることでクリック可能であることを直感的に伝えつつ、やさしいトーンの中でも重要なアクションがしっかりと認識されるよう意識しています。

●ファーストビューの下部のあしらい

ファーストビュー下部を波型にしグラデーションを加えることで、視線が自然と下方向へ流れ、スクロールを促すデザインにしました。やさしい印象を保ちつつ、下層コンテンツへの期待感を高めるよう設計しています。

●セクション背景

●VIEW MOREボタン、募集職種ボタンのモーション

VIEW MOREボタンには拡大と色変化のモーションを、募集職種のボタンには色調変化のみのモーションを設定しました。役割に応じて動きの強弱を調整し、 視認性と操作性のバランスを意識しました。

●CTAセクションのエントリーボタン

視線誘導を目的とした常時アニメーションを採用しました。緩やかな拡大・縮小にすることで、「やさしさ」をコンセプトとした世界観を損なわず、 ユーザーの行動を促す設計を意識しました。

※アニメーションはhttp://tsutsumu.kilo.jp/tsutsumu/でご覧になれます。

6.本課題で学んだこと

• 要件からターゲットを整理し、ユーザーストーリーを意識しながらサイト全体を設計する重要性を学びました。

• コーディングを前提としたデザインでは、図形や文字サイズを整数で設計することが、実装時のズレや調整工数の削減につながると実感しました。

• 見た目の美しさだけでなく、UI・UXを意識した設計を行うことで、ユーザーにとって理解しやすく行動につながるデザインになることを学びました。