
SOUND ON LIVE
- Service
- UX/Product DesignWeb DesignArt DirectionInteractive DesignB2B
- Date
- Oct 2021 - Present
- Client
- Soundonlive Inc.
01 / Introduction
Role
Lead Product Designer
Project Space
Interactive Web Design
0-1 Projects
B2B
“SOUND ON LIVE” is a design firm where music artists collaborate to create a website that visually represents music in an innovative way. The goal was to capture the beauty of music while delivering a design that amazes and inspires.
As the lead designer, I handled the concept, wireframes, design, and art direction for the project.
「SOUND ON LIVE」は、音楽アーティストが共同で音楽を視覚的に革新するウェブサイトを制作するデザイン会社です。このプロジェクトの目標は、音楽の美しさを捉えながら、驚きとインスピレーションを与えるデザインを提供することでした。
リードデザイナーとして、コンセプト設計、ワイヤーフレーム作成、デザイン、そしてアートディレクションを担当しました。


02 / Overview and hypothesis
The challenge was to craft a dynamic website that visually embodies music. The design aimed to synchronize visuals with music to create a captivating and emotional experience.
Hypothesis
Dynamic, interactive visuals would convey the essence of music and engage users.
Animations and responsive design would enhance the sensory connection.
A balanced layout and color scheme would amplify the overall impact.
音楽を視覚的に体現するダイナミックなウェブサイトを制作することが求められました。このデザインは、音楽と視覚を同期させ、魅力的で感情に訴える体験を提供することを目的としていました。
仮説
動的でインタラクティブなビジュアルが音楽の本質を伝え、ユーザーを引き込む。
アニメーションとレスポンシブデザインが、感覚的なつながりを強化する。
バランスの取れたレイアウトと配色が、全体的なインパクトを高める。

03 / Solution
Dynamic Visuals
The website features particles that morph and change color in harmony with music, creating an interactive and immersive experience.
Collaborative Design Process
Through brainstorming and trial and error, we refined ideas to align with the project’s vision.
Fine-Tuned Design
Careful adjustments to layout, color, and animation speed enhanced simplicity and impact.
ダイナミックなビジュアル
ウェブサイトでは、音楽と調和して形を変えたり色を変化させたりする粒子を特徴とし、インタラクティブで没入感のある体験を提供しました。
コラボレーションによるデザインプロセス
ブレインストーミングや試行錯誤を通じて、プロジェクトのビジョンに沿ったアイデアを磨き上げました。
微調整されたデザイン
レイアウト、配色、アニメーションの速度を慎重に調整し、シンプルさとインパクトをさらに高めました。


04 / Impact and Learning
Impact
Successfully captured the joy and beauty of music through dynamic visuals.
Demonstrated innovation by combining technical creativity with music synchronization.
Delivered a memorable and impactful experience that aligned with the client’s vision.
Learning
Balancing creativity with usability is key to impactful designs.
Iterative refinement ensures cohesion in dynamic projects.
Collaboration with the client is vital for achieving a shared vision.
This project highlighted the potential of combining art and technology to create immersive digital experiences that celebrate music.
インパクト
ダイナミックなビジュアルを通じて、音楽の喜びと美しさを見事に表現しました。
技術的な創造性と音楽の同期を組み合わせることで、革新性を示しました。
クライアントのビジョンに合致した、記憶に残るインパクトのある体験を提供しました。
学び
創造性と使いやすさのバランスが、インパクトのあるデザインの鍵であることを再認識しました。
反復的な改良が、ダイナミックなプロジェクトにおける一貫性を確保する上で重要であることを学びました。
クライアントとのコラボレーションが、共通のビジョンを達成するために不可欠であることを強調しました。
このプロジェクトを通じて、アートとテクノロジーを組み合わせ、音楽を祝う没入型のデジタル体験を創出する可能性を実感しました。
