お問合せ
WEBSITE MADE BY TEAMZ 2022

ウォータークラス

Waterklass

Visit company profile

ランディングページ

Musician and Artist With Fashion Design Platform

https://waterklass.webflow.io/

WaterklassのWebサイトのデザイン開発を担当いたしました。

Waterklassはミュージシャン・アーティスト・ファッションデザインを掛け合わせたプラットフォームで、エンターテインメントを通じてまだ見ぬ才能を発掘することを目標としています。

エンターテイメント業界に見合った、ファッショナブルでクールなデザインに仕上がっています。

また、サイト内のデザイン全体で統一感が出るよう、細部まで気を配り、サイト設計を行ないました。

ホームページとメニューデザイン

ホームページのデザインでは、ページングブロックデザインが採用されており、マウスを使ってホバーすることでエリアサイズを変更し、ユーザーにインタラクティブなエクスペリエンスがを提供します。

同時に、メニューボタンを押した際には、上から下へのジャンプアウトデザインが使用されています。ジャンプアウトデザインの利点は、ユーザーのインタラクティブなエクスペリエンスを向上させるだけでなく、ページの動きに影響を与えることなくメニューテキストを読むことが可能になる点です。背景のぼかし効果により、メニューとコンテンツが互いに調和し合い、優れた見栄えに可読性が加わります。

今回は音楽プラットフォーム関連のウェブサイトのデザインであるため、色の選択に彩度の高いオレンジ、ピンク、赤、青、緑を使用して、ユーザーが色を頼りに自分がどこにいるのかを明確に認識できるようにしました。

ページ要素

ページの差別化に関しては、今回はミュージシャン、アルバム、その他の業界向けのWebページであるため、ミュージシャン、アルバム、お問い合わせ、会社概要、製品販売ページの5つのエリアに分けました。彩度の高い色をすばやく区別できるよう、同じデザインとレイアウトを保ちながら、Webサイト全体のトーンをさらに改善しています。

今回はウェブサイトが主に黒ベースなため、フォントの色は真っ白を使用せず​​、明るめのグレーを使用しました。ハイコントラストをあえて避けることで、文章を読んでいても、目に優しい工夫がなされています。また、その代わりに見出しの色使いでカラーコントラストを確立し、インパクトはそのまま欠かさないデザインとなっています。

ニュースとテンプレートデザイン

このページにはニューストピックやプロモーション記事がたくさんあるため、CMSを介したアップロードと更新を設計しました。CMSを使用してテンプレートを作成する際、すべてのニュースリリースに背景画像があることを考慮しました。

メインのニュース画像の説明文テキストと、メインの見出しやその他のテンプレートで構成されています。また、ニュースのテキスト部分は白の背景に黒のテキストを採用しています。この方法は、黒の背景と白のテキストのメインスタイルとビジュアル的にしっかりと区別できるようになっており、ユーザーにとってより適切なデザインと言えます。

記事部分は、ユーザーがタイトルエリアとコンテンツエリアを明確に区別できるように、十分なフォントコントラストが使われています。

サービス
Service page
責任者
Project managers
ツール
TOOLS
Illustrator
Photoshop
Webflow
XD
同じクライアントの実績
MORE WORKS FOR THIS CLIENT
関連のあるプロジェクト
RELATED
他実績
MORE CASES
See more

Made by TEAMZ Studio

無料相談をリクエスト

Ready to Start?!

営業時間中に下記の電話番号にお問い合わせください。

営業時間は午前10時から午後7時までです。
(GMT + 9) 東京タイムゾーン
03 6695 1404

私たちのオフィスで訪問を予約することができます。

〒106-0032 東京都港区六本木7丁目19−9 VORT六本木
来訪予約

メールでのお問い合わせをご希望の方は、以下のフォームにご記入下さい。

お客様のご要望にいつでも迅速にお応えします。
お問い合わせ

または、営業時間中にビデオ会議を予約することも可能です。

ミーティングを予約