ホームページ作成「グーペ」 トップ » グーペノート» ホームページ作成» バンド・ミュージシャン・音楽家のホームページの作成方法を解説!世界観も表現で...

バンド・ミュージシャン・音楽家のホームページの作成方法を解説!世界観も表現できる作り方とは?

コロナの影響で多くのライブが中止や延期となる中、ライブをYouTubeで配信したり、CDやTシャツなどのグッズを販売したりと、音楽業界のホームページに新たなコンテンツが生まれています。

本日は、ホームページ作成サービス「グーペ」を使って、バンド・ミュージシャン・音楽家のホームページの作り方を紹介します。
HTMLなどの難しい知識は必要ありません。

これからホームページを作りたい方はもちろん、「ライブのお知らせがなくホームページの更新が止まっている」「何を発信したらいいかわからない」という方も、一緒に作り方を学んでいきましょう。

バンド・ミュージシャン・音楽家のホームページ作成の目的を考えよう

作成に取りかかる前に、ホームページでどんな情報を発信したいのか書き出してみましょう。
すでにホームページを持っている方も、今一度考えてみましょう。新しい視点に気づくかもしれません。

  • ライブやCDのリリース情報をお知らせしたい
  • ライブの予約を受け付けたい
  • ミュージックビデオを掲載したい
  • X(旧Twitter)やInstagramなどのSNSアカウントを集約したい

書き出してみることで、どんなページを用意したらいいのかが見えてきます。
また、「ブログは必要か?」と自問することで「ホームページが更新されている感が出るからチャレンジしてみよう」「コンスタントに更新するのは大変だから止まってしまいそうだな」と考えるきっかけになります。

ホームページを見に来る人をイメージしよう

続いて、ホームページを見に来る人をイメージします。
イメージすることで、必然とメニューの名称や使用する言葉選びが決まってきます。

子ども向けのバンド 子どもと保護者が見に来る ひらがなを使う
アメリカでも活動する 音楽家日本人とアメリカ人が見に来る 英字のページも用意する
ピアノやギターなどの音楽教室を開催している 様々な年齢層の人が見に来る 料金ページなど受講する人が知りたい情報を充実させる

バンド・ミュージシャン・音楽家のホームページではイメージや世界観を伝えることも大切ですが、「ホームページに訪れる人にとってわかりやすい表現になっているか」も意識しましょう。

バンド・ミュージシャン・音楽家のホームページに必要な構成とは?

続いて、ホームページに必要な構成を考えます。
事前に「ホームページの目的」や「見に来る人」を洗い出したことで、構成の要・不要がスムーズに判断できます。

「ホームページの目的が実現できるページを用意すること」「ホームページに見に来る人が知りたい情報を掲載すること」を意識して作成した構成が、次の表です。
各項目のリンクをクリックするとサンプルサイトが表示されますので、ぜひ実際の表示をご覧ください。
※ナビゲーション名はホームページ上のメニューの名称、機能名はグーペの管理画面の機能名称です。

ナビゲーション名 機能名 用途
News お知らせ バンドの最新情報を発信
ProfileBiography スタッフ紹介/フリーページ バンドメンバーの情報を発信
※スタッフ紹介でもフリーページでも作成が可能なため、両方のサンプルページをご用意しました
Discography フリーページ リリースされた楽曲のご案内
Schedule カレンダー ライブやメディア出演情報のご案内
Movie フリーページ バンドの動画を発信
Shop フリーページ(カラーミーショップを使用) バンドのグッズを販売
Reserve イベント予約 ライブや配信のチケット予約を受け付ける
Contact お問い合わせ お問い合わせを受け付ける

実際にホームページを作ってみよう

ホームページの構成が決まったところで、さっそくホームページを作っていきましょう。
今回は、ホームページ作成サービス「グーペ」を使って作り方を解説していきます。
事前に写真素材を用意しておくと作成がスムーズです。楽曲のイメージや世界観を伝えるためにも、統一感のある写真が良いでしょう。

ホームページの作成を、15日間無料でおためしできます。
無料おためしを始める

ホームページのメニューを最適な名称にカスタマイズする

先ほど作成した構成をもとに、ホームページのメニューを設定していきます。
日本語表記と英語表記どちらが良いのか、ページのタイトルは、ProfileとBiographyどちらがが良いのかなど、「ホームページを見に来る人」が迷わないことやバンドの世界観を考慮して決めていきます。
今回は、次のようなバンドのホームページを作成するというイメージで、メニュー名を設定しました。

・ボーカル、ギタリストは女性
・ベーシスト、ドラムスは男性
・バンドのターゲット層は10代後半〜30代前半
・日本国内で活動

Before After
インフォメーション News
スタッフ紹介 Profile/Biography
※フリーページ作成時に設定 Discography
カレンダー Schedule
※フリーページ作成時に設定 Movie
※フリーページ作成時に設定 Shop
イベント予約 Reserve
お問い合わせ Contact

名称が決まったら、さっそく変更してみましょう。

管理画面「各種設定:ナビゲーション > 設定」

変更画面が表示されたら「表示名」に変更後のメニュー名を入力して保存します。
※下記の画像が再生されない場合は画面を再読込みしてご覧ください。

グーペ管理画面のナビゲーション設定画面

ホームページに表示しないメニューは非表示にします。

管理画面「各種設定:ナビゲーション > 「設定」横の▼ > 非表示の項目に移動」

グーペ管理画面のナビゲーション設定画面

変更を終えたら、管理画面右上の「ホームページ表示」をクリックして、実際の表示を確認してみましょう。

スタッフ紹介機能を使ってプロフィールを作成する

管理画面「コンテンツ:スタッフ紹介」

ホームページは、そのバンド・ミュージシャン・音楽家をよく知るファンの人以外にも、友達からCDを借りた、ラジオで曲を耳にしたなど、「どんなバンドなんだろう?」と知りたい人も訪れます。
そのため、よく知る人にも知らない人にも伝わる内容にしましょう。
人となりが伝わるアイテムのひとつとして、SNSアカウントを掲載するのもおすすめです。

なお、バンド・ミュージシャン・音楽家のプロフィールでは、多くを語りすぎず少々ミステリアスにできるのは、他のジャンルのホームページとは異なるポイントです。
プロフィール写真の顔がはっきりと写っていなくても、それが世界観を表現する手段になります。
バンドや楽曲のイメージをもとに、掲載する情報を整理してみましょう。

バンドメンバーのプロフィールページ

メンバーを紹介するページは、フリーページを使って作成することも可能です。
サンプルサイトでは、メニュー名をBiographyとして作成しましたので、次の項目で解説します。

フリーページを使ってコンテンツを充実させる

管理画面「コンテンツ:フリーページ」

Biography、Discographyなどの経歴をまとめる

フリーページを使って「Biography」や「Discography」など、経歴をまとめたページを作成しましょう。
ここでは、ホームページを見に来る人のうち、『「どんなバンドなんだろう?」と知りたくて訪れた人』に伝わるかを意識すると、わかりやすいページになります。
合わせて、サンプルページで作成した「Biography」「Discography」もご覧ください。

バンドホームページのDiscographyページ

「スタッフ紹介機能」と「フリーページ」のどちらを使うか迷った時は、どんなページにしたいかをイメージしてみましょう。
メンバーひとりひとりの写真を見せたい場合や少ないテキストでもしっかりしたページにしたい場合は「スタッフ紹介機能」、自由なレイアウトにしたい場合やテキストを多く掲載したい場合は「フリーページ」が使いやすいでしょう。

「フリーページを使いたいけど、HTMLを書くことはできない」「写真の右側にテキストを配置したいけど、どうしたらいい?」という場合にも、ご安心ください。
「グーペ」では、用意されたテンプレートで簡単に作ることができます。

管理画面「コンテンツ:フリーページ > リッチエディタ > テンプレート > テンプレート名を選択 > OK」

Biography グーペ管理画面のフリーページ設定画面

Biographyでは、テンプレートの「年表・沿革」を、Discographyでは「プロフィール(写真左)」を選択しました。
あとはテキストを入力するだけで完成します。
また、フリーページでは、URLとなる 【https://r.goope.jp/グーペのアカウント/free/***】(※独自ドメインをご利用の場合は【https://独自ドメイン/free/***】) の***部分を自由に設定できます。

CDやグッズを購入できるようにする

続いて、ホームページでCDやグッズを購入できるようにしましょう。
これまで、ライブ会場でのみ販売されていたバンド・ミュージシャン・音楽家の中には、コロナの影響でライブが中止となり、CDやグッズがファンの人へと届かない経験をされている方もいるのではないでしょうか。

ネットショップ作成サービス「カラーミーショップ」の『どこでもカラーミー機能』を使うと、ホームページ上に「(商品を)カートに入れる」ボタンを簡単に表示することが可能です。

バンドホームページのShopページ

「カラーミーショップ」に登録した商品のコードを取得して、「グーペ」のフリーページに貼るだけ。
ホームページでも、販売している商品を並べて見せたい時に活用できます。

グーペ管理画面のフリーページ設定画面

▽マニュアル – どこでもカラーミーを利用する

「商品のコードを取得するとは?」と少々難しく感じた方も、ご安心ください。
ホームページのメニューに、ショップページへのリンクを追加することも可能です。
※あらかじめ「カラーミーショップ」などを利用して、ショップページを用意しておく必要があります。

管理画面「各種管理:ナビゲーション > 項目を追加 > 外部リンク 」

上記の手順で設定画面が表示されたら、メニューの名称とショップページのURLを入力します。
「リンク先の表示」では、ショップページをホームページと同じタブで開くか?ホームページのタブとは異なる新しいタブで開くか?を選択します。
「同じタブで開く」を選択すると、ホームページにたどり着いてくれた人を離脱させてしまうので、「異なるタブで開く」をおすすめします。
※下記の画像が再生されない場合は画面を再読込みしてご覧ください。

グーペ管理画面のナビゲーション設定画面

「カートに入れるボタンの表示」と「ショップページへのリンク」のどちらを使うか迷った時は、ピックアップした商品を見せたいのか、たくさんの商品を販売したいのか、用途によって使い分けると良いでしょう。

なお、ネットで販売を行う場合は「特定商取引法に基づく表記」が必要です。
「カラーミーショップ」では、管理画面内に入力フォームが用意されているので、項目にそって入力していくだけで設定が完了します。
「グーペ」で作成される場合は、あなたのホームページは表示義務がある?「特定商取引法に基づく表記」と設置方法 をご参考ください。

YouTube動画を掲載する

バンド・ミュージシャン・音楽家のホームページで重要なのは楽曲を届けること。
聴き手の数だけ受け取り方が様々な特徴があるので、どんな楽曲かを文章で説明するのではなく、試聴できるページやCDを購入できるページを充実することが大切です。

ライブが中止や延期になることが多い今、ミュージックビデオの制作やYouTuberとしての活動に力を入れているアーティストが多く見受けられることから、サンプルサイトではYouTube動画を掲載してみました。

バンドホームページのMovieページ

操作方法は、【知っておきたい!】グーペで作成したホームページに動画を掲載する方法 でご案内していますのでご参考ください。
※「コンテンツ:お知らせ」の更新方法となっていますので、コンテンツ:フリーページにて同様の操作を行ってください。

カレンダー機能でスケジュールを案内する

ライブ情報、メディア出演情報、CDリリース情報を集約する

ライブの開催日、チケットの発売日、ラジオやテレビの出演日、CDやDVDの発売日と多数の情報は、SNSでの告知だけでは流れてしまいがち。
カレンダーに集約することで、ホームページを見に来る人が迷わずに情報を見つけやすくなります。

なお、サンプルサイトではカレンダー機能を使用しましたが、フリーページを使ってメディア情報を集約したページを作ることも可能です。
大切なのは、「今日は何かあるかな?」とホームページを見に来た人が、解決するページがあることです。

▽マニュアル – カレンダーを更新する

イベント予約機能でライブの予約を受け付ける

ライブ、発売予定のCD、発売予定のグッズなどをオンラインで予約を受け付けることも可能です。
SNSやメールで受け付けていると、どの予約なのか紙にまとめたり、Excelに転記することになったりと二度手間になることもありますよね。
イベント予約機能を使えば、予約された人の一覧を管理画面内で見ることができます。
詳しい操作方法は 事例つき!「イベント予約」機能を使いこなそう をご参考ください。

グーペ管理画面の予約一覧画面

バンド・ミュージシャン・音楽家のホームページをグーペスタッフが作ってみました

以上をふまえて、非デザイナーのグーペスタッフがホームページを作ってみました。

バンドのホームページ

バンドのサンプルホームページ」を見る

テンプレートは、写真を魅力的に見せられる「Scene」を選びました。
バンドの世界観を維持しつつ、見に来る人が必要としている情報を伝えることを意識しました。

ファンの人は新しい情報を求めて、度々見に来ることも考えられますが、「Top」のサンプルテキストやお知らせが更新されることで、ホームページに動きが出ます。
ライブツアーやCDリリースの都度、写真を変えて、ホームページの新鮮さをアピールしても良いでしょう。

さらに、バンドメンバー(ギタリスト)の個人ホームページとしてミュージシャンのホームページも作ってみました。

ミュージシャンのホームページ

ミュージシャンのサンプルホームページ」を見る

Goope bandのホームページに比べて情報量が少ないので、少ないテキストでも存在感のあるホームページにしたくて、テンプレートは写真が全面に表示される「Blackboard」を選びました。
ミュージシャンのホームページでは、ギター教室の料金表やMAPなど、バンドのホームページとはまた違った構成になっています。

ホームページの目的を考えたり、見に来る人をイメージしたり、いずれも同じ流れで作成した結果、異なるメニューのホームページが生まれました。

まとめ

今回はバンド・ミュージシャン・音楽家のホームページを作る流れを解説しました。
SNSだけでなく、バンド名で検索した時にホームページが表示されるようにしておくことは、とても大切です。
また、ホームページの更新が過去の日付で止まっていると、「見に来る人」はだんだんと離れていきます。自分でコントロールできるように、更新したい時に簡単に操作できるサービスを探してみましょう。

予約機能を含めたホームページの作成を、15日間無料でおためしできます。
無料おためしを始める

新着記事