目的を絞り込んだサイト制作

Mt.Stonewave ウェブサイト

こちらは私自身の音楽活動用の個人サイトです。 レスポンシブウェブデザイン(RWD)の手法を用いつつ (1)活動コンセプトをビジュアルで伝えること (2)デモ楽曲をとにかく聞いてみてもらうこと この二つの目的に絞った音楽サイトを デモンストレーションとして制作しました。

目的を絞り込む
〜時間とコストを集中させる〜

アーティストサイトといえば普通はCD情報があったり、詳細なプロフィールがありますが、 今回はそれらのほとんどを削ってしまっています。 とにかく聞いてもらう。とにかくビジュアルで世界観を感じてもらう。 そのために他の要素は徹底的に後回しとしました。

これはどのサイト制作でもあり得る手法だと考えています。定番の体裁にしないと心配になる方も多いですが、 予算にはたいてい限りがあります。 特に観る人に強い印象を与えたい場合は、他を犠牲にしても一つのことに特化した仕上がりにするのは一つの戦略だと考えています。 その次の段階として定番コンテンツを順次加えていっても遅くはないでしょう。

大画面でのファーストビュー。メインビジュアルと試聴エリアだけが目に入る様にしています。

画面をいっぱいに使う
〜ビジュアル面の問題解決〜

さてMt.Stonewaveの音楽活動コンセプトは「清涼感 x 力強さ」です。これを伝えるためにまず、 ビジュアルは画面をいっぱいに使う迫力のあるものにしたいと考えました。 しかしRWDではよく画像が重くなりがちであることが問題になります。
そもそもビジュアルを重視したサイトでは昔から(フルフラッシュ全盛の時代から)
画像容量の重さがユーザーのストレスの元です。

そこで質感を排したビジュアルのテイストを採用。バズワードの「フラットデザイン」的な表現ですが、シルクスクリーン印刷のような古典的な表現スタイルでもあります。山並みのモチーフを用いたデザインは、迫力のある画面デザインとファイルサイズを軽くすることを、同時に実現しています。

サイトの特性からモバイル端末での閲覧比率は高いと判断。異なる端末間でも同じビジュアル体験を提供できるよう作っています。

プロジェクト概要:

  • Foundation5ベースのモバイルファーストRWD
  • HTML5 / CSS3

制作年 / 期間:

  • 2014年
  • 1週間程度

カテゴリー:

  • ウェブ・UI
  • Client: ----
  • Dir / AD / D / Dev: H.Iwanami