🔳　今週のピックアップ【Shupatto - シュパッとたためるデザインバッグ】

UIデザイナー須田によるデザインコーナーvol.20。
今週の須田的ベストデザインは「Shupatto - シュパッとたためるデザインバッグ」。

須田(UID)：
今回は、「Shupatto（シュパット）」というエコバッグのブランドサイトを紹介します。

アニメーションがかわいくて印象的だったのでピックアップしました。

古川(PdM)：
このサイトの制作会社は、Xでも話題のmount inc.さんだ。
最近だと役所広司主演の映画『PERFECT DAYS』やPOLA『POLA Mother’s Day』でも見かけましたね。

須田(UID)：
Awwwardsでも名前を見かけますね。以前、デザインニュースでも取り上げた『SANTE FX × ICHIRO YAMAGUCHI』もmount inc.さんが手がけています。

古川(PdM)：
トップページのアニメーションですが、4日間かけて2000枚ほどのエコバッグを撮影したらしいです(笑)

須田(UID)：
パラパラ漫画的な表現方法ですね(笑)
他にも、エコバッグ自体が生き物のような動きになっていてデザインへのこだわりが感じられます。

長津(COO)：
実は、俺が持っているエコバッグが結構大きくて、畳むのが面倒だからいつもぐしゃぐしゃに丸めちゃってる（笑）

須田(UID)：
"簡単に畳めてシュパッと取り出せる"最大の特長を、畳むまでの過程をアニメーションでみせているのがいいですね。

須田(UID)：
全体的にデザインにこだわっていると思うのですが、aboutセクションに関しては、写真とテキストだけのシンプルなデザインになっています。
おそらく購入者にとってはあまり関係ないページになるので、デザインにメリハリをつけている？

須田(UID)：
LINEUPセクションは商品ごとにGIFっぽい動きがありますね。

長津(COO)：
かわうい。

須田(UID)：
商品プレビュー画面では、エコバッグにカーソルをあわせると少し横を向くので、バッグの奥行きや大きさなどをよりリアルに感じることができます。

長津(COO)：
購入者にとってはいいね。

長津(COO)：
スクロールすると自動的に動くUI、カーソルに合わせてバッグが傾く仕掛け、そしてタップすると色が変わるところとか、細かい工夫があっていいね。

mount inc,さんの誰がつくったんだろう？

古川(PdM)：
比較的みなさん若そうですね、すごいです！

飯野(PdM)：
実績を見てみると、デフォルトのブラウザのスクロールを使用していない作品が多い気がしました。
操作性へのアプローチに注力しているのかな？
マウス・スクロール・キー入力といったタッチポイントを経由してユーザー行動にどうアプローチしていくか？Webの中で表現できることを突き詰めている感じがします。

長津(COO)：
インタラクションに注力しているってことだね。

飯野(PdM)：
あと、アニメーションの見せ方や方法論の言語化をしっかりしているから、筋の通ったキレイなアニメーションになっているんだろうなとも思いました。

長津(COO)：
今年は飛躍の年ということで、我々も新しい表現方法にこだわってやっていきましょう！

じゃあ今日はここまで。アディオス！

〆