「本格的な音楽アーティストのサイトを自分で作りたい!」

 

バンドのホームページを作るには今は便利なサービスがたくさんありますが、もっと個性的なホームページを作りたいと思ったことはありませんか?

 

WordPress(ワードプレス)ならプログラミングができない人でも簡単に本格的なサイトを作ることができます。

ミュージシャンならでは「こだわったアーティスティックなホームページ」を作るならWordPressがおすすめです。

 

そこでこの記事では、音楽アーティストがゼロからWordPressを導入して公式ホームページを自作する手順をご紹介します!

 

ホームページは自分の財産となる大切なメディアです。

ぜひWordPressであなたの公式ホームページを作ってみて下さい。

 

以下のステップでWordPressの導入を進めていきます。

めんどくさそうですが意外と簡単にできますよ!

 

実際にサイトを作りだす前にやる作業は以下の4つです。

 

 

その後、以下の手順でサイトをデザインしていきます。

 

 

バン犬
図解を入れながら、わかりやすく解説していきますね!

 

初期設定が終わった後でWordPressの基本的な使い方を解説していきます。

おすすめ

Amazonの音楽サブスク『Amazon Music Unlimited』がお得です!

今なら新規登録で500ポイントをプレゼント。(7月2日まで)

 

無料体験するだけで500ポイントを貰えます。まだ使ったことがない人は今すぐ登録してください。

\無料体験で500ポイント/

※使い方がわからない方はこちら⇒Amazon Music Unlimitedの始め方、使い方をわかりやすく解説!初心者でも簡単に6500万曲が聴き放題できます

レンタルサーバーと契約する

 

WaordPressを使ってサイトを作るにはまずサーバーを用意する必要があります。

サーバーとはネット上にデータを保管しておく場所。

 

一般に個人がサーバーを用意するにはレンタルサーバーサービスを使います。

おすすめのレンタルサーバーサービスが「エックスサーバー」ですね。

 

月額900円からと安く使えるにも関わらず、

  • 自動バックアップ
  • 24時間サポート

など万全のサービスが魅力です。

 

ブロガーとかサイト運営のプロもよく使っている定番レンタルサーバーですね。

とても人気のあるサービスですから、作業につまづいた時にGoogleやYouTubeで調べると解決策を見つけることができるのも強みですよ。

 

実はバン活!ではエックスサーバー の他にドメインキングというサーバーもおすすめしていました。

ところが少し前にドメインキングがサーバー代の値上げを行ったんです…。(全てのプランに今までの+¥500)

結果的にドメインキングとエックスサーバー ではコストパフォーマンスに大きな差が無くなってしまいました。

 

バン犬
なのでサーバーは「エックスサーバー」一択!




エックスサーバーと契約する手順

 

それではエックスサーバー に申し込んでみましょう。

 

エックスサーバーには、

  1. 通常の申し込み
  2. WordPressクイックスタート

の2つの申し込み方法があります。

 

WordPressクイックスタートとは、エックスサーバーと契約すると同時に「独自ドメインの取得と設定」「ワードプレスのインストール」までいっぺんにできてしまう便利なシステムです!

エックスサーバーのWordPressクイックスタートのメリット

 

この記事を読み進めてもらうとわかりますが、3までの手続きはそれなりに面倒。

WordPressクイックスタートなら、SNSアカウントを開設するのと変わらない労力でサイトを立ち上げられるので、特に初心者の方にはおすすめですよ。

 

ただしWordPressクイックスタートを利用すると、10日間の無料体験ができません!

ですからWordPress以外の方法でバンドのサイト構築を検討している方は注意が必要です。

 

あえて少しめんどうな通常の申し込み方法を選び、もろもろの操作に慣れるという考えもアリだと思います。

無料体験中に解約すればお金はかからないので。

 

それでは以下から実際の申し込み方法を紹介していきます!

まずはエックスサーバー の公式サイトにアクセスしましょう。

 

トップ画面上部のメニューから「お申し込み」をクリック。

さらに「申し込みフォーム」をクリックします。

エックスサーバーに申し込む手順①

 

お申込みフォームが出てくるので「新規お申込み」をクリック。

エックスサーバーに申し込む手順②

 

入力画面になるので、必要事項を入力していきます。

  • サーバーID:これからつくるサイトのURLとは無関係なので初期設定のままでもOKです。
  • プラン:個人の音楽サイトの場合「X10」で十分です。後からグレードアップすることもできます。

エックスサーバーに申し込む手順1

 

※WordPressクイックスタートを申し込みたい方は、ここで「利用する」にチェックして下さい。チェックを入れると、その画面で「契約期間」「取得ドメイン名」「ブログ名(サイト名)」などを入力することができるようになります。

エックスサーバーのWordPressクイックスタートを申し込む手順1

クイックスタートなら…

エックスサーバーのWordPressクイックスタートを申し込む手順2

いっぺんに設定完了

 

さらにその下にメールアドレス、氏名、住所などのお客様情報を入力して「「利用規約」「個人情報規約」に同意する」にチェックをいれます。

全て入力し終わったら「お申込み内容」の確認をクリック。

エックスサーバーに申し込む手順④

 

あとは内容を確認して「お申込みをする」で申し込みは完了です。

 

するとエックスサーバー から

「【Xserver】■重要■サーバーアカウント設定完了のお知らせ[使用期間]」

といったようなタイトルのメールが届きます。

以下の内容が記載されています。

エックスサーバーの申し込み手順⑤

 

後述する「Xserverアカウント(旧インフォパネル)」にログインする時に必要になるので、この情報はメモを取っておいて下さいね。

 

さて、ここまでて仮契約の無料お試し期間がスタートしました。

本契約をするには10日間のうちに料金を支払う必要があります。

 

(※WordPressクイックスタートを利用した方は、ここで既に本契約がスタートしており、ドメインの取得と設定、WordPressインストールまでが完了している状態です。メール認証をした後に「最低限の設定をしておく」にすすんでください。「最低限の設定をしておく」までジャンプ↓

 

料金の支払いをするにはまず「Xserverアカウント(旧インフォパネル)」にアクセスします。

エックスサーバー のトップページにアクセス。

 

メニュー右の「ログイン」から「Xserverアカウント(旧インフォパネル)」をクリックします。

※インフォパネルは2019年12月に「Xserverアカウント」という名称に変わっています。用途はいっしょです

エックスサーバーのインフォパネルにログインする時

 

ログイン画面で先ほどメール記載されていた、

  • 会員ID(メールアドレスでも可)
  • Xseverアカウントパスワード

をそれぞれ入力して、ログインをクリックします。

Xserverアカウントにログイン

 

ログインしたら左下の「料金のお支払い」をから支払い手続きをすればOKです。

エックスサーバーの料金の支払い方法

 

料金を支払うと本契約ができます!

 

エックスサーバー を10日間たっぷり試してから料金を支払うのも良いですが、気を付けたいのはむしろ払い忘れの方です。

操作を試してみて「WordPressでいこう!」と決めたら早めに支払うのをおすすめします。




独自ドメインを取得する

 

独自ドメインとはあなただけが使える「固有のURL」のことです。

例えば、今読んでいるこのサイトの独自ドメインは「www.shellbys.com」です。

 

独自ドメインでないサイトとは例えば「○○〇.wix.com」などレンタルサービスのドメインが末尾に付与されます。

なんとな~く、独自ドメインの方がカッコいいと思いませんか?(笑)

 

バン犬
独自ドメインの方がプロっぽい!

 

WordPressは独自ドメインの利用がベターなので、どのみち取得は必須なのですが、ブランド力の向上にも一役買うことになります。

 

では、独自ドメインの取得方法とエックスサーバー と連携させる方法を説明していきます。

  1. エックスサーバー で独自ドメインを取得する
  2. サーバーにドメインを設定する
  3. SSL化する

の3ステップです!

 

キャンペーン

今、エックスサーバー では2020/7/2までドメイン代がずっと無料というキャンペーンをやっています!料金を支払うとキャンペーンを利用できるようになります。すぐに料金を支払った場合でも10日間の無料期間は短縮されないので安心してください。

 

エックスサーバーで独自ドメインを取得する

エックスサーバー ではレンタルサーバーと同時に独自ドメインも取得することができます。

エックスサーバー社のドメインサービス「エックスドメイン」に申し込めます。

 

(※後述する「お名前.com 」でも独自ドメインを取得することができます。料金はお名前.com の方が安いですがエックスサーバーの方が手続きが簡単です。この章を一読して、お好きな方を選んでいただければと思います⇒※追記 エックスサーバー では、2020/7/2までの登録でドメイン代がずっと無料です!)

 

まずは先ほどと同じ「Xseverアカウント(旧インフォパネル)」にログインします。

エックスサーバーのトップページのメニュー「ログイン」から→「Xseverアカウント(旧インフォパネル)」をクリック)

 

画面左のメニューの「サービスお申込み」をクリック。

エックスサーバーからエックスドメインの申し込み手順1

 

キャンペーンを適用させるには

2020/7/2までの登録でドメインずっと無料キャンペーンを適応させるには「追加のお申込み」の下のあたりに表示される「キャンペーンドメイン」から手続きしてください。※キャンペーンを適用させるには料金を支払っておく必要があります

 

エックスドメインの「新規申し込み」をクリックします。

エックスサーバーからエックスドメインの申し込み手順2

個人情報取り扱いに同意します。

エックスサーバーで独自ドメインを取得する方法②

 

 

好きなドメインを入力して、「○○を申し込む」をクリックします。

エックスサーバーで独自ドメインを取得する方法④

どんなドメインがイイ?

できればシンプルでサイトの趣旨に合うモノをおすすめします。
ドメインの末尾は「.com」や「.net」「.jp」など色んなパターンから選べます。
特にこだわりがなければ「.com」が料金が安いのでおすすめですよ。
今回はバンドのホームページなので、十中八九「(バンド名のアルファベット).com」などでキマリですね!

 

申し込んでみたものの、既に誰かが同じドメインを使っている場合は再度入力が求められます。

取得が可能だと確認へと進みます。

 

キャンセルすることはできないので、念入りに二回確認されますね(笑)

エックスサーバーで独自ドメインを取得する方法⑤

エックスサーバーで独自ドメインを取得する方法⑥

 

念のためメールをチェック

ドメインの申し込みが確定すると、この時点で以下のような確認メールが届くので、念のため内容を控えておきましょう。

エックスサーバーで独自ドメインを取得する方法⑦

 

申し込みが完了したら料金を支払います。

「料金のお支払い」をクリック。

エックスサーバーで独自ドメインを取得する方法⑧

 

「お支払い方法を選択する」をクリックします。

更新期間が「1年」なら1年分の料金を支払います。

サイトを長く運営する予定なら更新期間を長めにして一気に料金を支払ってしまっても良いですね。

エックスサーバーで独自ドメインを取得する方法⑨

 

料金の支払い方法を選びます。

  • 銀行振込
  • クレジットカード
  • ペイジー
  • コンビニ支払い

がありますが、基本的にクレジットカードがおすすめです。

払い忘れの心配がないですからね。(ポイントもつきますし)

エックスサーバーで独自ドメインを取得する方法⑩

ウェブサービスの決済はたいがいクレジットカードなので、まだ持ってない人はこの機会に作ってみて下さい。

 

支払いが完了すると確認メールが届きます。

エックスサーバーで独自ドメインを取得する方法⑪

これであなただけの独自ドメインを手に入れることができました!

続いて取得したドメインをレンタルしたサーバーに設定していきます。




取得した独自ドメインをエックスサーバーに設定する

次は「サーバーパネル」にログインしましょう。(Xseverアカウント(旧インフォパネル)ではありません!)

エックスサーバーは管理画面が2つ
ちょっとややこしいですが、エックスサーバー には「Xseverアカウント(旧インフォパネル)」と「サーバーパネル」の2種類の管理画面があります。今から作業するのは「サーバーパネル」です。

 

サーバーパネルにはトップページのメニュー右の「ログイン」から「サーバーパネル」をクリックします。

エックスサーバーのサーバーパネルにログインする

 

IDとパスワードを入力してログインします。

サーバーパネルにログインする2

サーバーパネルとXseverアカウント(旧インフォパネル)のID/パスは別
  • サーバーパネルのログイン情報はエックスサーバーと契約した時に送られてくる

    【Xserver】■重要■サーバーアカウント設定完了のお知らせ

    というメールに記載されています。

 

  • ユーザーアカウント情報
  • サーバーアカウント情報

 

の2種類がありますが、サーバーパネルにログインする時は「サーバーアカウント情報」を使います。
エックスサーバーのサーバーに関する情報

 

ログインできたら「ドメイン設定」をクリックします。

エックスサーバーにドメインを設定する手順①

 

続いて順番に、

  1. 「ドメイン設定の追加」をクリック
  2. 「ドメイン名」に先ほど取得したドメインを入力
  3. 「無料独自SSLを利用する」にチェック

してください。

 

全て入力したら「ドメイン設定の追加(確認)」をクリックします。(CSR情報を入力するは空欄でOKです)

エックスサーバーに独自ドメインを設定する手順2

 

「ドメイン設定の追加(確定)」をクリックします。

エックスサーバーに独自ドメインを設定する手順3

 

設定か完了すると以下のような画面が出てきます。

エックスサーバーに独自ドメインを設定する手順4

 

おそらく「無料独自SSLの設定に失敗しました」と出ている方が多いと思います。

そこで改めてSSL化を設定していきます。




取得した独自ドメインをSSL化する

SSL化とはサイトを暗号化して安全性を向上させるもの

Googleでも推奨されており、今後のウェブサイトではスタンダードとなるセキュリティシステムですね。

 

SSL化されたサイトはURLのhttpのところがhttpsに変わります。

ssl化したサイト

 

特にチケット予約フォームなどでファンから個人情報を送信してもらうミュージシャンのサイトには導入が必須です。

エックスサーバー では無料なので、ぜひあなたの音楽サイトもSSL化させておきましょう。

 

バン犬
エックスサーバーでサイトをSSL化するのは簡単!

 

再び「サーバーパネル」から今度は「SSL設定」をクリックします。

エックスサーバーでSSL化する方法1

 

順番に、

  1. 「独自SSL設定の追加」をクリック
  2. SSL化するドメインを選ぶ
  3. 「独自SSL設定を追加する(確定)」をクリック

します。(「CSR情報を入力する」は空欄にして大丈夫です)

エックスサーバーでサイトをSSL化する方法2

 

「SSL新規取得申請中です」と出ると思います。

しばらくすると手続きが終わり、サイトがSSL化されます。

エックスサーバーでサイトをSSL化する方法3

 

反映に時間がかかる場合がありますが、しばらくするとちゃんと反映されているので大丈夫です!

 

ドメイン代を節約するなら「お名前ドットコム」で
実はエックスサーバーで独自ドメインを取得するより、「お名前.com 」でドメインを取得してエックスサーバー に接続したほうがコストは安いです。⇒※追記 エックスサーバー では2020/7/2までの登録でドメイン代がずっと無料になるキャンペーンをやっているので、今ならエックスサーバー がお得です!

 

ただ接続作業が多少めんどうになるので、ここではエックスサーバー から独自ドメインを取得する方法をご紹介しました。

お名前.com で取得した独自ドメインをエックスサーバー に設定するには、お名前.com の管理画面から「ネームサーバーの選択」を以下のように入力します。

 

1.プライマリネームサーバー「ns1.xserver.jp」

2.セカンダリネームサーバー「ns2.xserver.jp」

3.「ns3.xserver.jp」

4.「ns4.xserver.jp」

5.「ns5.xserver.jp」

 

お名前.com のサイトから「ネームサーバーの」の設定が済んだら、改めてエックスサーバー の「ドメイン追加」からお名前.com で取得したドメインを追加・設定していきます。


詳しくはお名前ドットコムのヘルプも参照してみて下さいね。
節約したい方はこちらからどうぞ!

 

さぁ!これで、

  • レンタルサーバー
  • 独自ドメイン

が準備できました!

 

次はいよいよWordPressをインストールしてサイト作りの第一歩を踏み出します。

WordPressをサーバーにインストールする

 

通常、インストールとはめんどうな作業ですがエックスサーバーでは「簡単インストール」という機能がありサクッとできちゃいます。

まずは「サーバーパネル」にログイン。

エックスサーバーのトップページのメニュー「ログイン」から→「サーバーパネル」をクリック)

 

左下の「WordPress簡単インストール」をクリックします。

エックスサーバーにWordPressをインストールする手順1

 

WordPressをインストールしたいドメインの「選択する」をクリックします。

エックスサーバーにWordPressをインストールする手順2

 

必要事項を入力していきます。

  • インストールURL→そのままで大丈夫です
  • ブログ名:サイトのタイトルです。「(バンド名)オフィシャルサイト」など(後からも変更できます)
  • ユーザ名:WordPressにログインする時に使用します
  • パスワード:同じくログイン時に使用します
  • メールアドレス:自分のメールアドレス
  • データベース:そのまま「自動でデータベースを生成する」で大丈夫です

 

入力が完了したら「インストール(確認)」をクリック。

エックスサーバーにWordPressをインストールする手順3

 

続いての画面で「インストール(確定)」をクリックすると、以下のようにWordPress管理画面へログインできるURLやパスワードが表示されます。

ここは大切な情報なので必ず控えておくようにしましょう。

 

WordPressにログインできるURLはブラウザにブックマークしておくと便利です。
エックスサーバーにWordPressをインストールする手順5

まれに、

無効なURLです。プログラム設定の反映待ちである可能性があります。しばらく置いて再度アクセスをお試しください。

と表示されることがありますが、 時間をおいて再度インストールするか、ブラウザのキャッシュを削除すると解決することが多いです。

1日以上時間をおくとほとんど大丈夫だと思います。

 

さて、これでWordPressのインストールまで完了しました!

次に実際にページを作り出す前に必要な最低限の設定をサイトに施していきましょう。




最低限の設定をしておく

 

WordPressの管理画面にログインして、

  1. SSL化を設定
  2. パーマリンクの設定

をあらかじめやっておきます。

 

いづれも後から変更するとトラブルの原因になりますので今やってしまいましょう。

 

バン犬
最後の下準備!

WordPressにログイン

先ほどブックマークしておいたURLから管理画面にログイン。

ユーザー名とパスワードも先ほどの「ID」と「PASSWORD」を入力します。

WordPressにログイン

 

URLをSSLに変更

初期状態ではSSL化がサイトに反映されていないので設定していきます。

ログインしたら左のメニューから「設定」→「一般」とクリックします。

WordPressサイトにSSL化を設定する手順

 

いくつか入力項目がありますがここでは、

  1. WordPressアドレス(URL)
  2. サイトアドレス(URL)

の「http://」の部分に「https://」と「s」を付け足せばOKです。

WordPressでサイトをSSL化する手順2

 

変更したら画面下の方にある「変更を保存」をクリックすればSSLが反映されます。

余談ですが、ここで設定できるキャッチフレーズはサイトのデザインに反映されたりするので、とりあえず空白にしておくと良いですよ。

 

パーマリンクの設定を変更

パーマリンクとは記事ごとに設定されるURLの末尾部分のことを言います。

パーマリンクの説明

このパーマリンクが無駄に長かったりわかりにくいと、SNSでシェアされた時に見づらくなる可能性があります。

またパーマリンクの設定を途中で変えるのも良くありません。

 

設定するには管理画面トップの「設定」→「パーマリンク設定」をクリックします。

ワードプレスでパーマリンクを設定する手順1

 

「カスタム構造」にチェックを入れ、「/%postname%」と入力しましょう。

ワードプレスでパーマリンクを設定する手順2

 

入力したら画面下にある「変更を保存」をクリックします。

これで記事作成画面からパーマリンクをそのつど入力することができるようになります。

ワードプレスでパーマリンクを設定する手順3

パーマリンクはアルファベットで

パーマリンクはアルファベットで入力しましょう。日本語で入力するとシェアした時にURLが冗長になってしまいます。基本的には英語。もしくはローマ字で入力してください。とは言え、わかりやすければOKなので適当な英語で大丈夫です(笑)

 

さてこれでモロモロの設定が全て終了しました!

 

バン犬
お疲れさまでした!

 

解説を読みながら実際に作業してみたい方はエックスサーバー の無料お試しを利用してくださいね!

 

ここからいよいよ実際のサイトデザインの作業に入っていきます。(作業ごとに詳しく解説しているので、それぞれ別記事を用意しています)

 

続いて、

  1. 音楽サイトに欲しいプラグインを導入する
  2. テーマを導入して外観をカッコよくする
  3. カテゴリーを設定してメニューをつくる
  4. エディターの使い方、記事の書き方

と進んでいきましょう!

 

バン犬
ここからはクリエイティブで楽しい作業(笑)




音楽サイトに欲しいプラグインを導入する

 

プラグインとはWordPressにおける拡張機能のことです。

例えばカレンダーを添付するプラグインがあったり、音楽プレーヤーがあったりと有料・無料様々なプラグインがあります。

ここではまず、サイトを立ち上げた時に最低限導入しておきたいプラグインと音楽サイトなら導入しておきたいプラグインを紹介します。

 

セキュリティに関わるものもありますのでぜひ導入しておきましょう。

 

テーマを導入して外観をカッコよくする

 

テーマとは見た目の大枠を決めるテンプレートのことです。

どのテーマを選ぶかによって最終的な出来栄えが変わってきます。

 

音楽アーティストの公式サイトならやはり見た目はこだわりたいところですよね。

 

カテゴリーを設定してメニューをつくる

 

サイトに訪れるとすぐ目に入る場所にある「メニューバー」。

サイトにおけるメニューとは?

 

来訪者がコンテンツを探しやすくするためにウェブサイトでは必須のパーツです。

音楽アーティストのサイトでもメニューを作りましょう。

これでだいたいサイト構造が決まります!




エディターの基本的な使い方、記事の書き方

 

全ての枠組みが決まったらひとつひとつのページを作っていきます。

 

WordPressの記事作成画面をエディターと言います。

そんなに難しくないのですが、エディターの基本的な使い方や文字装飾の方法を解説します。

特に「見出し」の概念は頭に入れておいて欲しいですね!

 

まとめ:WordPressで作ったサイトを実際に見て下さい

以上が「音楽アーティストの公式サイトを自作する手順」でした!

お役に立てたらうれしいです。

 

最後に実際にこの手順・方法で作られたサイトをご紹介します。

友人のバンド「LANAPZIE」の公式サイトです。

 

エックスサーバー を使い、ワードプレステーマDIVERをインストールして構築されています。

このシリーズを読めば、同じようなサイトは難なく作れますよ。

 

参考としてぜひ、LANAPZIEのサイトも見ておいてください。

参考サイトLANPAZIE

 

エックスサーバー では10日間の無料体験が用意されています。

ぜひ操作を体感してみて下さい。

 

実際に触ってみて難しいと感じたら、決済をせずにいればお金はかからずサービスを終了することができますので、気軽に触ってみて下さいね。

 

それでももし、WordPressに挫折した方はこちらの記事をご覧ください。

その他のホームページ作成サービスをご紹介しています。

 

Print Friendly, PDF & Email
※バンドミーティングにご利用ください

※PDFダウンロード、メール送信もできます

※余分な画像は削除できます