moco bébé（デザイン＋コーディング）
- 制作区分
- 自主制作
- 担当範囲
- デザイン / コーディング / レスポンシブ対応
- 制作期間
- 約1.5ヶ月
- 使用ツール
- Figma / VS Code / HTML / CSS / JavaScript
- サイトタイプ
- 自主制作 / ECサイト
- ターゲット
- ベビー用品を探している20〜30代のママ層
架空案件概要
クライアント
架空クライアント
事業内容
自主制作 / ECサイト
ご依頼背景
架空の依頼背景ベビー用品ECサイトとして、「やさしさ・安心感・親しみやすさ」を感じられるブランドサイトを想定しました。制作意図淡いカラーや丸みのあるデザインを使用し、赤ちゃんらしい柔らかさと上質感を表現しました。
サイトの目的
メイン
サービスやブランドの魅力をわかりやすく伝え、閲覧者の興味・行動につなげること。
サブ
情報を整理し、回遊しやすい導線を設計する
PC/SPどちらでも世界観を崩さず表示する
お問い合わせ・購入・閲覧など次の行動へつなげる
ターゲット
メインターゲット
ベビー用品を探している20〜30代のママ層
ペルソナ
デザインの雰囲気や使いやすさを重視し、スマートフォンからもスムーズに情報を確認したいユーザー。
制作意図
架空の依頼背景ベビー用品ECサイトとして、「やさしさ・安心感・親しみやすさ」を感じられるブランドサイトを想定しました。制作意図淡いカラーや丸みのあるデザインを使用し、赤ちゃんらしい柔らかさと上質感を表現しました。
デザインのポイント
世界観を優先した余白設計
写真・文字・余白のバランスを整え、作品ごとの雰囲気が伝わるように構成しました。
ファーストビューで印象を訴求
制作物の特徴が最初に伝わるよう、メインビジュアルと導線を整理しています。
情報を見やすく整理
目的・ターゲット・担当範囲を管理画面から更新できる情報設計にしました。
レビューを活用した信頼性向上
Instagramとの親和性を意識した設計
デザインコンセプト
余白・写真・タイポグラフィを活かし、既存の世界観を壊さず上質で見やすいデザインに整えました。
制作担当
情報設計
ワイヤーフレーム設計
UIデザイン
レスポンシブデザイン
コーディング（HTML / SCSS）
アニメーション設計