架空サイトミキサーブランド Smoos

Independent production

Title: 架空サイトミキサーブランド Smoos
Problem: 実際に一人暮らしを始めてみてさまざまな野菜をバランスよく摂るのは難易度が高く、調理するのは時間がかかるので負担になっていた。周りの友人にも同じ意見の人は多かった。
Purpose: 忙しくても健康をあきらめたくない方々にスムージーという選択肢を届ける。
Approach: 材料となる野菜や果物をかわいらしいキャラクターに見立て、人と同じ空間に存在させることで、野菜を身近に感じてもらえるようデザインする。電化製品ではあるが、性能を前面に出すのではなく、「野菜を摂りたいけれどハードルが高い」と感じている人に向けてスムージーなら意外と簡単においしく始められることを伝え、まずはミキサーに興味を持ってもらえるサイトを目指す。
Differentiation: 検索ワードや導線設計を「商品」ではなく「生活者の悩み」から逆算。キャッチーなメインビジュアルと鮮やかな色使いで視線を引き、野菜不足や食生活に不安を抱える人に“スムージーなら簡単でおいしく続けられる”という解決策を提示。他社が高機能を前面に押し出す中で、これまでミキサーという選択肢がなかった層にも届く、興味をもってもらえるサイトを目指した。

Overview

Key Points

苦労した点: 参考となるメインビジュアルがなく、キャラクターを活かしつつスムージーで楽しむ健康的な生活をどう表現するか方向性を模索した。コーディングではjQueryを学び始めたばかりだったため、Swiperの初期位置調整、など実装に苦戦した。
工夫した点: インパクトのあるメインビジュアルだとスクロールして次のセクションに入ったときの落差が大きく違和感が出るため、下部を波型にすることで自然に目線が流れるよう調整した。コーディングではjQueryを用い、自動で流れるバナーに手動操作も可能にした。また時間を計算して連打対策で一定時間のボタン操作を無効化した。