Flow Machines

AI Assisted Music

ソニーコンピュータサイエンス研究所様が研究・開発を進めているAIアシスト楽曲制作ツール・Flow MachinesのWebサイトリニューアルに伴い、アートディレクション、UI/UXデザイン、フロントエンド開発、WordPress開発をお手伝いしました。Flow Machinesのプロダクトやコンテンツの拡充にあわせたWebサイトリニューアルプロジェクトです。

デスクトップ・タブレット・スマートフォンに表示したトップページ
Flow Machines — Home

Webサイトのアートディレクションは、同時進行で進められているプロダクトデザインのカラー設定を踏襲しつつ、「音楽」や「AI」を連想させるオブジェクトを抽象化して表現しました。初回ローンチの時点では公開できる情報が少なかったため、Flow Machinesがアーティストとどのように共創するかをオーディオヴィジュアライザーやイラストレーションなどを用いて表現していましたが、今回は公開できる楽曲が複数あったため、サイトを訪れたユーザーがその場で視聴できる「プレイリスト」を中心に据えてUXをデザインしています。

楽曲の一覧と再生画面を表示した2台のタブレット
Playlist

実装面では、ほぼ1ページだったサイト構成を、新規コンテンツ含め複数ページになるように情報を再設計し、情報へのアクセシビリティとSEOを最適化しました。また、Fluid Typographyにインスパイアされた流体サイズを採用しており、どのような画面サイズにおいてもバランスよくレイアウトされるように実装しています。

メンバーの写真を並べたページ
Members
出来事を種類で絞り込めるページ
History
ニュースの一覧のページ
News
ニュースの記事のページ
News (detail)

CMSは引き続きWordPressで運用しており、既存コンテンツと同様、クライアント様ご自身でコンテンツを作成・編集できるエディターを実装しました。また、ソニー様の高いWebアクセシビリティ水準をクリアしています。

Client
Sony Computer Science Laboratories, Inc.
Project
Website
Creative Direction
Sony Creative Center, Kazunori Miura
Art Direction
Kazunori Miura
UI/UX Design
Kazunori Miura
Front-end Development
Kazunori Miura
WordPress Development
Kazunori Miura
Launch
2020.7
Related Link
flow-machines.com
Back to Index