Re:inc.の世界観を守る、デザインしないデザイン

エムクルーズマネジメント株式会社

概要

Da-iCE 工藤大輝プロデュースによるプロジェクト“ガールズコレクティブ”「Re:inc.(リンク)」のオフィシャルWebサイトを制作しました。

プロジェクトのはじまり

最初からファンダムを持っていない、“コツコツ型”のプロジェクト。

近年は、オーディション番組をきっかけにデビュー前から大きな注目を集めるアーティストも増えています。
 
一方Re:inc.では、そうした形ではなく、楽曲やライブを通じて少しずつ活動を広げていく“コツコツ型”のプロジェクトとして展開しているとのこと。
 
また、Re:inc.は90年代〜00年代のブラックミュージックやシティポップの質感を、現代的なJ-POPとして再構築したグループです。Webサイトにおいても、その世界観や質感を視覚的に伝えることが求められました。
 
▼方向性を探るための初期ラフ

NASUの目論見

Re:inc.の世界観や質感を伝えるサイト設計へ。

Webサイトでは、背景は黒、文字は白を基調としたシンプルな構成を採用。情報量を整理し、写真やアートワークが自然に見えるレイアウトとすることで、Re:inc.が持つ世界観や質感を損なわない設計としました。
 
また、スマートフォンでの閲覧を前提に、縦スクロールを中心とした導線設計を行いました。

目論見に基づいた制作物のご紹介

情報量を整理したティザーサイト

本サイトの公開に先立ち、Re:inc. official siteのティザーサイトも制作しました。ティザー段階では公開できる情報が限られていたため、ロゴ、配信導線、SNSへの接続を中心としたシンプルな構成としています。余白を大きく取りながら、情報量を絞ることで、ロゴやビジュアルが印象として残る設計としました。

また、黒を基調とした画面設計、ロゴの見せ方、配信導線の配置バランスなどをこの段階で検証し、本サイト全体のトーンと方向性を固めました。

イメージが走るキービジュアル

トップページのキービジュアルでは、複数の写真やアートワークが連続して切り替わるイメージラッシュの演出にしています。サイトを開いた瞬間に、Re:inc.の世界観が印象として残る見せ方を意識しました。

情報を過剰に追加するのではなく、提供いただいたビジュアルを軸に構成することで、Re:inc.のビジュアルやアートワークが自然に見える構成としました。

90年代の質感を感じるビジュアルトーン

Re:inc.のルーツであるストリートカルチャーやシティポップの文脈を、言葉で説明するのではなく、視覚的に伝える必要がありました。

提供いただた写真を90年代の写真や映像に見られるザラつきやアナログ感をビジュアルトーンとして取り入れて調整しました。

単なる90年代の再現にとどめるのではなく、現代のアーティストサイトとして成立する見え方に調整することで、現代のアーティストサイトとして成立する見え方に調整しています。

スマホで迷わせない、接触から再生までの導線設計

Re:inc.のユーザーはスマートフォンでの閲覧が中心になることを前提に設計しています。

そのため、情報を細かく分岐させるのではなく、縦スクロールの中で自然に情報へたどり着ける構成としました。特にリリース情報については、ジャケット画像と配信リンクが直感的に認識できるよう整理しています。

サイト訪問から楽曲再生まで、スムーズにアクセスできる導線設計を行いました。

情報はシンプルに、更新と拡張に耐える構成へ

サイト全体の構成は、NEWS、DISCOGRAPHY、PROFILEなど、アーティストサイトとしてベーシックな構成にしています。情報をシンプルに整理し、ストレスなく閲覧できる構成を意識しました。Webサイトとしての使いやすさを整え、情報の更新にも柔軟に対応できる仕様にしています。

Webサイトはこちら

制作概要

クライアント
エムクルーズマネジメント株式会社
クリエイティブディレクション
前田 高志
Webデザイン
小島 由似
構築
株式会社ウェブスクウェア
カテゴリー
Web/UI
特設サイト

前へ

次へ