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

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

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

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

‍

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

‍

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

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

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

‍

‍

‍

ページ要素

‍

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

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

‍

‍

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

‍

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

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

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

‍