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

 

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

 

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

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

 

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

 

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

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

 

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

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

 

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

 

 

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

 

 

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

 

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

おすすめ

音楽サブスク『Amazon Music Unlimited』が、今なら4ヶ月間、無料10月13日まで)

 

無料体験中に退会すればお金はかかりませんので、ぜひ今のうちに試してみてください!

\4ヶ月間、無料!/


※操作が不安なら→Amazon Music Unlimitedの始め方、使い方をわかりやすく解説!初心者でも簡単に9,000万曲が聴き放題できます

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

 

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

 

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

 

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


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

 

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

 

エックスサーバーには、

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

 

もし以下の解説でもわかりにくかったら、エックスサーバー公式メディアの「【初心者でも安心】たった10分で出来るWordPressブログの始め方 」も読んでみてください。

 

最近の手順がわさらにかりやすく詳細に解説されています。

参考サイト【初心者でも安心】たった10分で出来るWordPressブログの始め方

 

エックスサーバー公式の動画も参考になります。

 

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

 

トップ画面上部のメニューから「まずはお試し10日間無料!(お申し込み)」をクリック。

さらに次の画面で「10日間無料お試し 新規申し込み」をクリックします。

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

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

 

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

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

クイックスタートなら…

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

いっぺんに設定完了

 

続いてXseverアカウントの登録です。

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

 

全て入力し終わったら「次へ進む」をクリック。

 

続いてメール認証です。

入力したメールアドレスに確認コードが届きますので、入力して「次へ進む」をクリック。

次に内容確認。

問題なければ「この内容で申込する」をクリック。

最後に電話(SMS)を使った認証があります。

ここはスマホの電話を利用しましょう。

 

電話番号を入力して、取得方法はSMSがおすすめ。

「認証コードを取得する」をクリックします。

 

するとお手持ちのスマホにSMSで番号が届きますので、入力し、「認証して申込みを完了する」をクリック。

 

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

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

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

 

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

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

 

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

 

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

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

 

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

 

料金の支払いをするにはまず「Xserverアカウント」にアクセスします。

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

 

メニュー右の「ログイン」から「Xserverアカウント」をクリックします。

 

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

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

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

 

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

 

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

 

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

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


独自ドメインを取得する

 

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

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

 

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

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

 

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

 

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

 

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

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

の3ステップです!

 

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

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

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

 

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

 

まずは先ほどと同じ「Xseverアカウント」にログインします。

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

 

画面下メニューのドメインから「ドメイン取得」をクリック。

 

エックスサーバーのドメイン管理サービス「エックスドメイン」のページに移動しますので、「新規取得」から取得したいドメインを入力してみます。

入力したら「ドメインを検索する」をクリック。

 

取得可能の場合、以下の画面が表示されます。

「「利用規約」「個人情報の取り扱い」に同意する」にチェックして、次の画面へ進みます。

 

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

基本的にはクレジットカードがおすすめです。(サイト運営を続ければ、今後にわたって継続的に支払いがあるので)

 

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

 

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

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

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

 

Xseverアカウントのトップページにもそのドメインが表示されているのが確認できます。

どんなドメインがイイ?

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

 

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


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

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

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

 

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

 

またはXseverアカウントのトップページに表示されている「サーバー管理」からも移動できますよ。

こっちからも行ける

 

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

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

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

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

 

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

 

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

 

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

 

続いて「ドメイン設定追加」をクリック。

 

「ドメイン名」に先ほど取得したドメインを入力。

さらに「無料独自SSLを利用する」「Xアクセラレータを有効にする」にチェック。

 

「確認画面へ進む」をクリックします。

 

内容を確認して「追加する」をクリックします。

 

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

エックスサーバーに独自ドメインを設定する手順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 」でドメインを取得してエックスサーバー に接続したほうがコストは安いです。

 

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

 

お名前.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日間の無料体験が用意されています。

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

 

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

 

以上の解説でわかりにくかった方は、公式サイトをご覧いただければと思います。

参考サイト【初心者でも安心】たった10分で出来るWordPressブログの始め方

 

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

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