デジタルコンテンツ制作
メタバースプラットフォームのUIリニューアル
STYLY, Inc
VR/AR/MRのプラットフォーム、STYLYのモバイルアプリリニューアルにてUIディレクションを担当しました。サービスのコアとなる機能の再提案、および整理。UIデザインを行なっています。
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_cover2.webp)
UI Design
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_01.png)
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_02.png)
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_03.png)
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_04.png)
ホームはクリエイターを発掘する場所
既存のUIではキャンペーン情報が並び、クリエイターの作品が新着のみで流れてしまう問題がありました。私たちはスタッフがピックアップした作品を掲載する場所を持つべきと提案。以下の効果を狙いました。
- クリエイターのモチベーションアップ
- 良質な作品を埋もれさせない
- 文字コンテンツの発信で検索流入
- ユーザー間でのSNS拡散
また、投稿された作品は動画のように気軽にプレビューができない。ユーザーはコンテンツを閲覧するまで内容が理解できない課題がありました。スタッフピックアップは文章で作品を分かりやすく届ける解決策でもあります。
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_home_01.jpg)
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_home_02.jpg)
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_staffpic_01.jpg)
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_staffpic_02.jpg)
ビジュアルによって変化するカラーリング
ホームと詳細画面は作品の色に合わせて背景が変化します。
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_scene_02.jpg)
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_scene_02_s.jpg)
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_scene_03.jpg)
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_scene_03_s.jpg)
コンテンツ閲覧画面の機能整理
コンテンツに集中できるように、機能を整理しました。
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_load.jpg)
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_scene.jpg)
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_scene_setting.jpg)
![](https://raywarp.com/wp/wp-content/uploads/2024/02/styly_scene_cap.jpg)
Team
- Clinent
- STYLY, Inc
- Agency & Develop
- HariRO.Tokyo
- UI Design
- Shiiho Furukawa (Raywarp)
Detail
- Launch
- June 2022