[無料プレゼント]ミュージシャンがサイトを持つべき理由と作り方

皆様こんにちは、ディレクターのコウで御座います。
私は元々音楽をやる為に高校卒業後、東京にのこのこ出て来たのですが、音楽活動上必要なWebサイトやCDジャケット、フライヤーなどのデザインを自分で試行錯誤して作っている内にデザイナーになってしまい今に至ります。
デジタルステージの業務に於いてもたまにサウンドディレクターや作編曲、演奏をする事もあり、何かと役立ってはおりますが。

今回はそんな私がミュージシャンがサイトを持つべき理由と、どんなサイト構成がよいかについて、実際にBiNDupを使いサイトを作成しましたので解説をしたいと思います。
また私の独断と偏見で各コンテンツの考え方なども訴えていきたいなと。
最後に作成したサイトデータも配布しますので是非使ってみて下さい。

今回の記事はミュージシャン向けに書いておりますが、自己をブランディングする意味では広義に応用出来るかもしれません。

なぜミュージシャンにWebサイトが必要なのか

まずこのテーマになりますが、SNS等の普及により「Twitterで常に発信してるから大丈夫」とか「ブログやってるから充分」と云う方は多いかもしれませんね。
私はインターネット黎明期よりミュージシャンがWebサイトを持つ事は重要だと考えていましたが、近年よりその重要性が増していると考えております。
理由は以下に。

情報発信のプラットフォームとして

興味のあるミュージシャンを見つけた際に、Web検索してもオフィシャルサイトが無い事がありますが、非常に「勿体ないな」と思っています。
私の場合、Twitterやブログが検索に引っかかってもまず開く事はありません。

ミュージシャンならまずは曲を聴かせろ!
どんなルックスか見せろ!

と思うからで、まだよく分からない相手のつぶやきを見せられてもそもそも興味はそこにありません(よっぽど面白いツイートなら別ですが)。

そんな訳でSNSを駆使して方々で発信していたとしても、そこをまとめるプラットフォームがないと情報として繋がらず不充分であると思うのです。
ましてやブログやTwitterなどのタイムラインは常に流れ続けているのでホントに欲しい情報に出会えるかは正に運任せ。
それで興味を持った人が離れてしまうのは勿体ないの極みです。

ブランディングが重要

これはミュージシャンに限らずですが、要するに差別化です。
ミュージシャンは、他者とは違う自分の個性を如何に表現するかに苦難する訳ですが、実際音楽を聴かないと解らないと云うのもハードルが高いと思うのですね。
その点、ビジュアルでの印象は一目で入って来ますから此れを利用しない手はありません。
聴覚視覚でアプローチ出来ればその情報量は倍増する事でしょう。

作品表現の場として

当たり前過ぎますが、ミュージシャンなので音楽を伝えるのが本分です。
料理等はリアルでしか提供出来ませんが、音楽の分野は音も映像もインターネットを通じて伝える事が出来るので、そこのアドバンテージは高いと思っております。
スマホ時代に入り回線速度も速くなっていますので、音楽映像コンテンツを精力的に発信する事は、今やミュージシャン活動の軸のひとつと言っても良いのでは無いでしょうか。

上記のことからミュージシャンはWebサイトを持つべしと思う訳であります。

ミュージシャンサイトのコンテンツを考える

ミュージシャンサイト

必要性が解った処で具体的にWebサイトの構成に入っていきましょう。
まず、今回私がホームページ制作サービス「BiNDup」で制作したミュージシャンサイトをご覧ください。

ミュージシャンサイトを見る

女性ソロミュージシャンの想定で制作しております。
バンドでもそんなに変わりませんのでこちらを題材に解説を進めます。

ミュージシャンサイトは写真が命

まぁ、ミュージシャンサイトに限らずWebサイト全般の最重要事項ではありますが。
このサイトに於いて最も重視しているのが、ファーストビューで見る事になるビルボードの写真。
次いでプロフィール写真です。

ブランディングのあり方によってはアーティスト写真に説明的な楽器は必要ない

ブランディングのあり方によってはアーティスト写真に説明的な楽器は必要ない

写真は素材ダウンロードサービス『materials』でピックアップしていますが、私が個人的に好いと思う構図の写真を使用しました。
このくらい大胆にトリミングされた構図もインパクトがあって良いと思います。

ハイクオリティな2,400万点の素材を使う事が出来る素材ダウンロードサービス「materials」

ハイクオリティな2,400万点の素材を使う事が出来る素材ダウンロードサービス「materials」

私の個人的な嗜好ですが、世界観が作られた写真を好み、説明的な写真を嫌います。
よくやってしまうのが安易に楽器を持って撮った写真。
楽器を持った写真を使いたいならクオリティの高いライブ写真を撮りましょう。
楽器を持っているにしても何故そこに楽器があるのかが作り込まれていないと逆に浮いてしまうので要注意。

楽器を持つ写真を撮る場合、世界観を作る事が重要

楽器を持つ写真を撮る場合、世界観を作る事が重要

あとは証明写真みたいなぎこちない写真もNG。
モデルさんみたいに撮られ慣れていれば別ですが、そうでなければ自然な姿を撮ってもらうのが良いでしょう。

Web使用時の加工テクニックとして、
とりあえずモノトーン
と云うのもアリかなと。

サイトのキーカラーも映えますので困ったらモノトーンにしてしまうと云うのはひとつ覚えておくと良いでしょう。
画像編集ソフト『SiGN』を使えば簡単にモノトーンの写真に変更出来ます。

画像編集ソフト「SiGN」のフィルターで簡単に写真をモノトーン化

画像編集ソフト「SiGN」のフィルターで簡単に写真をモノトーン化

CMS活用で簡単に更新

Webサイトなので当然更新する事が重要ですが、更新作業が簡単である事に越した事はありません。
BiND Pressを使えばブログを書く要領で更新出来ますし、BiNDupサーバーをお使いであればスマホからも投稿出来ます。

ここでBiND Pressを組み込んだのは「INFORMATION」と「BLOG」。
「INFORMATION」ではライブスケジュールやリリーススケジュール、その他諸々まとめて扱う想定にしています。

BiND Pressを使えばブログを更新する様にWebサイトを更新

BiND Pressを使えばブログを更新する様にWebサイトを更新

音楽映像コンテンツを効果的に

ミュージシャンサイトなのでメインディッシュですね。

「DISCOGRAPHY」の例では1曲ごとに試聴出来る作りにしました。
アルバム的に表現するのであれば、トップページはアルバムジャケットを並べてそこからリンクで専用ページを作って遷移させても良いと思います。

音楽配信SNSの「SoundCloud」を使用しました。
Embed機能を使ってウィジェットのソースをBiNDupに貼り付ければ直ぐに試聴出来ますので簡単ですね。

「SoundCloud」のEmbedコードをBiNDupに貼り付けるだけで試聴可能に

「SoundCloud」のEmbedコードをBiNDupに貼り付けるだけで試聴可能に

ライブ映像やPVなどの映像コンテンツは最早ミュージシャンの必須コンテンツとなっておりますので、「MOVIE」にも力を入れましょう。
Webサービス連携機能「SYNC」を使えば簡単にYouTubeを貼り付け、更にカバー画像も設定出来るのでデザイン性の高い表現が可能です。

カバー画像を設定するだけで一味違った動画サムネイルに

カバー画像を設定するだけで一味違った動画サムネイルに

SNSで更新性を高める

SNSを連携する事によりサイトの更新性が高まります。
ここでは「Instagram」、「Facebook」「Twitter」のタイムラインを同じくWebサービス連携機能「SYNC」を使って貼り付けています。
それぞれのSNSを投稿すれば一緒にサイト側も更新されますので正に一石二鳥ですね。

Instagramのタイムラインを横幅いっぱいに敷き詰めたギャラリーとして表現しています。

Instagramのアカウントと表示方法を設定するだけでタイムラインが貼り付けられる

Instagramのアカウントと表示方法を設定するだけでタイムラインが貼り付けられる

まとめ

サンプルサイトでは無料URLに公開していますが、実際に公開する場合は独自ドメインを用いましょう。
せっかくクオリティの高いサイトを作っても独自ドメインでないと借り物の印象が出てしまいます。
メールアドレスで云えば「xxx@gmail.com」より「info@yyy.jp」など独自ドメインを使った方が信頼度が増すのと一緒です。
BiNDupでは基本コース(年払い)とビジネスコースを契約したユーザーさんに初年度無料のドメイン使用権を付与していますので是非お使いください。

ざっと解説してみましたが如何でしたか?

ミュージシャンは音楽活動に注力すべしとは云っても、アピールをしなければ広がりません
少しでも興味を持ってくれた人に伝えるべき情報が伝わるWebサイトを是非作っていただきたいものです。
今回作成したサイトデータはBiNDup環境でお使い頂けます。初月は無料なので試してみてください。
※ダウンロードにはログインが必要です

サイトデータをダウンロードする

  • POINT

  • SNSやブログだけでは興味を持ったリスナーに伝えるべき情報が伝わらない事を理解する
  • Webサイトで使用するアーティスト写真は説明的なものを避ける
  • BiNDupでSNS連携などを行い効率的に更新する

あわせて読みたい