==========================================

• 長津：カドベヤCOO／弊社WEBディレクターの長(おさ)的存在
• 須田：UIデザイナー／ゲーム・ドラムに日々没頭
• 古川：PdM／クリエイティブ部マネージャー
• 飯野：PdM／カドベヤのお兄ちゃん、ゲーム・アニメ・SEOがすき
• 竹田：WEBディレクター／サウナのためなら全国に出没

==========================================

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

UIデザイナー須田によるデザインコーナーvol.20。

今週の須田的ベストデザインは「Shupatto - シュパッとたためるデザインバッグ」。

引用元：https://www.shupatto.com/

須田(UID)：

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

生活雑貨メーカー株式会社マーナ（東京都墨田区、代表取締役 名児耶 剛［なごや ごう］）は、シュパッとたためるバッグ「Shupatto（シュパット）」のブランドサイトを全面リニューアルし、本日より公開いたしました。（著者名.“Shupattoのブランドサイトが全面リニューアル.PR Times.)

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

古川(PdM)：

このサイトの制作会社は、Xでも話題のmount inc.さんだ。

最近だと役所広司主演の映画『PERFECT DAYS』やPOLA『POLA Mother’s Day』でも見かけましたね。

須田(UID)：

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

古川(PdM)：

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

須田(UID)：

パラパラ漫画的な表現方法ですね(笑)

他にも、エコバッグ自体が生き物のような動きになっていてデザインへのこだわりが感じられます。

（※どうすれば動画キャプチャできますか？ヘルプミー,有識者）

「Shupatto」は、「たたむのが面倒」「付属の袋にきちんと入らない」など、ポータブルバッグに対する潜在的な不満を解消するバッグです。（略）お買い物シーンに限らず、ライフスタイルにおける様々なシーンに寄り添いたいという想いから、「エコバッグから“デザイン”バッグへ。」をコンセプトにサイトをリニューアル。（著者名.“Shupattoのブランドサイトが全面リニューアル.PR Times.)

長津(COO)：

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

須田(UID)：

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

須田(UID)：

全体的にデザインにこだわっていると思うのですが、aboutセクションに関しては、写真とテキストだけのシンプルなデザインになっています。

おそらく購入者にとってはあまり関係ないページになるので、デザインにメリハリをつけている？

引用元：https://www.shupatto.com/product/

須田(UID)：

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

長津(COO)：

かわうい。

須田(UID)：

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

長津(COO)：

購入者にとってはいいね。

引用元：https://www.shupatto.com/product/compactbag-m/?color=2

長津(COO)：

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

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

古川(PdM)：

比較的みなさん若そうですね、すごいです！

飯野(PdM)：

実績を見てみると、デフォルトのブラウザのスクロールを使用していない作品が多い気がしました。

操作性へのアプローチに注力している感じ。

マウス・スクロール・キー入力といったタッチポイントを経由してユーザー行動にどうアプローチしていくか？Webの中で表現できることを突き詰めている感じがします。

長津(COO)：

インタラクションに注力しているってことだね。

飯野(PdM)：

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

長津(COO)：

今年のカドベヤの目標は更なる飛躍ということで、我々も新しい表現方法にこだわってやっていきましょう！

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

〆