「ToyBox」のサイトコンセプト

サイトコンセプト

• 特別な日を控えた子供がワクワクしながらプレゼントを選ぶことができるカタログサイト
• 一生の宝ものと出会い、成長していく通過点

ターゲットユーザー

• 未就学児から小学校低学年の子供
• 身近に子供がいる成人

サイトの特長

• アニメーションを控えめにして刺激を抑えながらも、楽しくタップできる工夫を盛り込んだ
• 大人の目線で安心・安全なイメージの訴求を心がけた
• プレゼントの詳細ウィンドウをダイアログ形式でポップアップし、ページ遷移の負荷なく軽快に操作を行える
• レスポンシブ対応し、プレゼントの画像に「Special」という帯がけする演出を取り入れた。
• PC表示ではディスプレイの大きさを活かして一部のプレゼント項目を大きな表示サイズにした。目的は2点ある。
  • 1点目は、サイズの統一をあえて崩すことでポップなイメージを目指すこと
  • 2点目は、高額なプレゼントを強調することで、購入単価の向上を狙った。
• ユーザーに対し文言に配慮し、PCユーザーには「クリック」、スマートフォン等タッチデバイスユーザーには「タップ」と表示を出し分けた。

技術仕様

• HTML、CSS3、JavaScript
• SASS、BEM（独自に簡易化したもの）、Git
• フェードインアニメーション、ポップアップ、CSS Grid Layout
• Figma

制作期間

• 5日
  • デザイン・ワイヤーフレーム：1日
  • コーディング：3日
  • 修正：1日