ミュージシャンがWordPressで公式サイトを自作する方法をわかりやすく解説(全6回)

ミュージシャンがWordPressで公式サイトを自作する方法をわかりやすく解説(全6回)

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

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

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

ホームページは自分の財産となる大切なメディア
その意味でプラットフォームの都合に左右されない「完全な自分のサイト」であるWordPressサイトは、非常に価値の高い方法です。

ぜひWordPressであなたの公式サイトを作ってみて下さい。

以下のステップでWordPressの導入を進めていきます。
めんどくさそうですが意外と簡単にできますよ!

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

その後、以下の手順でサイトをデザインしたり、バンドの情報を記載してきます。

バン犬

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

まずは準備として、サーバーの料金と契約する際に必要なものを確認していきましょう!

レンタルサーバーと契約する前の準備

予算の検討:レンタルサーバー(エックスサーバー)料金を確認

バン活!ではいくつかあるレンタルサーバーで、エックスサーバーをおすすめしています。(実際にバン活!もエックスサーバーで運用中)

エックスサーバーでアーティスト公式サイトを始める場合、その料金は以下の通り。

  1. サーバー費用:月額990円〜
  2. ドメイン料金:0円〜
  3. テーマ(デザインテンプレート) :0円〜20,000円

個人向けプランは3つありますが、アーティスト公式サイトの場合、最も安い「スタンダード」で必要十分です。
また月額990円は36ヶ月(3年分)を一括で支払った時の料金。

つまり初期費用は35,640円になります。

まとめて払うと安い

「いきなり3万円以上の負担は大きいな」という人は、予算に合わせて支払いプランを調整して下さい。
もっとも、今から1年で音楽活動を辞めてしまうことはないでしょうから、できるだけ長期のまとめ払いがおすすめです。

ドメインとは、サイトのURLのこと。
エックスサーバーではサーバー契約すると、スタンダードプランでも最大2つまで無料でドメインが取得可能
ミュージシャンが3つ、4つとドメインを取得するケースは少ないので、ぜひ無料枠を使って下さい。

サイトデザインのテンプレートとなる「テーマ」は無料から有料まで様々あります。
もちろん、無料からはじめても大丈夫です。

「テーマ」について詳しくは後述しています。

その他、レンタルサーバーの種類によっては「SSL設定」「維持調整費」などが必要になる場合も。
エックスサーバーはそれらが無料です。
明瞭会計なのでも、エックスサーバーのメリットと言えます。

認証や支払いに必要:レンタルサーバー(エックスサーバー)の申し込みに必要なもの

  • メールアドレス
  • スマホ(電話番号)
  • パソコン
  • クレジットカード

メールアドレスとスマホがあれば、申込み自体は可能です。

メールアドレスはGmailなどフリーメールで大丈夫です。
スマホはSMS認証(電話番号のショートメッセージ認証)の際にも使用します。

後述する初期設定が一括で終わる「WordPressクイックスタート」を利用する場合、支払いにはクレジットカードが必要です。(通常申込みではコンビニ支払いなども)

また定期的に支払う料金なので、クレジットカードがいちばん便利でポイントもついてお得。
カードは何でもよいのですが、バン活!では主に楽天カードをおすすめしています。

またスマホからもサイトのデザインや情報更新の作業はできますが、やっぱりパソコンからの方が楽

バン犬
  1. 予算の検討
  2. スマホ・パソコン
  3. メアド
  4. クレジットカード
    で準備万端!

それでは以下からエックスサーバーに申し込む手順を確認してきましょう。

レンタルサーバー(エックスサーバー)と契約する

WaordPressを使ってサイトを作るにはまずサーバーを用意する必要があります。
サーバーとはネット上にデータを保管しておく場所。 

一般に個人がサーバーを用意するにはレンタルサーバーサービスを使います。
繰り返しですが「エックスサーバー」は月額990円からと安く使えるにも関わらず、

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

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

ブロガーとかサイト運営のプロもよく使っている定番レンタルサーバーです。
とても人気のある老舗サービスですから、作業につまづいた時にGoogleやYouTubeで調べると解決策を見つけることができるのも強みです。

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

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

エックスサーバーには、

  • 通常の申し込み
  • WordPressクイックスタート

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

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

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

この記事を読み進めてもらうとわかりますが、3までの手続きはそれなりに面倒。
WordPressクイックスタートなら、SNSを開設するのと変わらない労力でサイトを作ることができます。

特にミュージシャンがサイトを自作するなら、作業を効率化する(音楽に集中する)ためにWordPressクイックスタートをおすすめしたいと思います。

ただしWordPressクイックスタートを利用すると、10日間の無料体験ができません
ですからWordPress以外の方法でバンドのサイト構築を検討している方は注意が必要です。 

また前述のとおり、支払いにはクレジットカードが必要です。

あえて少しめんどうな通常の申し込み方法を選び、もろもろの操作に慣れるという考えもアリだと思います。
それでは以下から実際の申し込み方法を紹介していきます!

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

ブログということで説明されていますが、ミュージシャンの公式サイトに置き換えても作業は一緒です。
最近の手順がわさらにかりやすく詳細に解説されています。

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

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

では、まずは通常申込みの手順を紹介します。

エックスサーバー の公式サイトにアクセス。

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

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

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

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

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

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

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

 

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

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

最後に電話(SMS)を使った認証があります。
ここはスマホの電話を利用しましょう。 

電話番号を入力して、取得方法はSMSがおすすめ。
「認証コードを取得する」をクリックします。

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

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

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

といったようなタイトルのメールが届きます。
以下の内容が記載されています。

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

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

さて、ここまでて仮契約の無料お試し期間がスタートしました!
本契約をするには10日間のうちに料金を支払う必要があります。 

クイック!

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

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

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

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

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

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

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

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

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

エックスサーバー を10日間たっぷり試してから料金を支払うのも良いですが、気を付けたいのはむしろ払い忘れの方です。
操作を試してみて「WordPressでいこう!」と決めたら早めに支払うのをおすすめします。

独自ドメインを取得する

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

例えば、今読んでいるこのブログの独自ドメインは「www.shellbys.com」です。
独自ドメインでないサイトとは例えば「○○〇.wix.com」などレンタルサービスのドメインが末尾に付与されます。

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

バン犬

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

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

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

の3ステップです!

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

エックスサーバー ではレンタルサーバーと同時に独自ドメインも取得することができます。
エックスサーバー社のドメインサービス「エックスドメイン」に申し込めます。

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

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

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

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

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

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

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

 

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

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

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

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

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

どんなドメインがイイ?

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

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

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

次は「サーバーパネル」にログインしましょう。

 まずは先ほど同様、エックスサーバーアカウントにログインします。

トップページに表示されている「サーバー管理」から移動できます。

サーバ管理→選択する

サーバーパネルに移動できたら「ドメイン設定」をクリック。
※以下の画面は「新デザイン」です。「旧デザイン」からも設定可能ですが、左上の切り替えのボタンを押して新デザインで作業するのがおすすめ

「ドメインを追加」をクリック。※左側メニューからドメイン→ドメイン設定→ドメイン追加でもOK

 続いての画面で取得済みの「ドメイン名」を入力して、「追加する」をクリックします。

無料独自SSLもHTTPS転送もチェックを入れておきます。

これでドメインを設定できました!

この直後、もし

SSLの設定に失敗しました

といった画面がでたら、サーバーパネルの「ドメイン」→「SSL設定」からSSLを再度設定してみて下さい。

もしSSLができていなかったら、ここから設定しなおします

SSLとはサイトを暗号化する設定。
現在ではスタンダードなセキュリティ機能になっています。

このSSLが出ていないと、ユーザーがあなたのサイトで文章を入力する際に警告が出ることがあります。
つまり、ファンがサイトに設置した取り置きチケットの予約フォームに情報を入力する際に、警告がでる可能性があります。
これでは大きな機会損失になります。

やっておいて当たり前の設定ではありますので、必ず忘れず設定しておきましょう。

さぁ!これで、

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

が準備できました!

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

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

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

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

左メニューから「WordPress簡単インストール」をクリックします。

WordPress→WordPress簡単インストール

「WordPress追加」をクリックします。

ここから追加します

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

  • 追加形式:新規ドメインを選択
  • 対象ドメイン→設定したいドメインを選びます
  • ブログ名:サイトのタイトルです。「(バンド名)オフィシャルサイト」など(後からも変更できます)
  • ユーザ名:WordPressにログインする時に使用します
  • パスワード:同じくログイン時に使用します
  • メールアドレス:自分のメールアドレス
  • キャッシュ自動削除:「ONにする」を選びます
  • データベース:そのまま「自動でデータベースを生成する」で大丈夫です
  • テーマ:別途、有料テーマを購入済みなら「WordPressデフォルトテーマ」を選びます
  • プラグイン:チェックをいれます(不正対策ソフトが追加されます)

入力が完了したら「インストールする」をクリック。

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

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

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

まれに、

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

と表示されることがありますが、 時間をおいて再度インストールするか、ブラウザのキャッシュを削除すると解決することが多いです。
1日以上時間をおくとほとんど大丈夫だと思います。 

さて、これでWordPressのインストールまで完了しました!
次に実際にページを作り出す前に必要な最低限の設定をサイトに施していきましょう。

最低限の設定をしておく

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

  • SSL化を設定
  • パーマリンクの設定

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

バン犬

最後の下準備!

WordPressにログイン

先ほどブックマークしておいたURLから管理画面にログイン。
ユーザー名とパスワードも先ほどの「ID」と「PASSWORD」を入力します。

WordPressにログイン

 

URLをSSLに変更

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

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

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

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

  • WordPressアドレス(URL)
  • サイトアドレス(URL)

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

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

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

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

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

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

パーマリンクの説明

このパーマリンクが無駄に長かったりわかりにくいと、SNSでシェアされた時に見づらくなる可能性があります。
またパーマリンクの設定を途中で変えるのも良くありません。 

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

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

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

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

入力したら画面下にある「変更を保存」をクリックします。
これで記事作成画面からパーマリンクをそのつど入力することができるようになります。

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

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

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

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

バン犬

お疲れさまでした!

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

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

続いて、

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

と進んでいきましょう!

バン犬

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

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

プラグインとはWordPressにおける拡張機能のことです。
例えばカレンダーを添付するプラグインがあったり、音楽プレーヤーがあったりと有料・無料様々なプラグインがあります。

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

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

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

テーマとは、見た目の大枠を決めるテンプレートのことです。
どのテーマを選ぶかによって最終的な出来栄えが変わってきます。

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

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

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

来訪者がコンテンツを探しやすくするためにウェブサイトでは必須のパーツです。
音楽アーティストのサイトでもメニューを作りましょう。

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

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

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

WordPressの記事作成画面をエディターと言います。
そんなに難しくないのですが、エディターの基本的な使い方や文字装飾の方法を解説します。 

合わせて、記事の中にアップロードした楽曲の再生プレーヤーを設置する方法もご紹介します。
音楽アーティストの公式サイトなら、ぜひ曲をサイト上で聞けるようにするべき。

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

以上が「音楽アーティストの公式サイトを自作する手順」でした!
お役に立てたらうれしいです。 

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

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

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

このシリーズを読めば、同じようなサイトは難なく作れますよ。
参考としてぜひ、LANAPZIEのサイトも見ておいてください。

参考サイトLANPAZIE

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

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

また、それでもWordPressに挫折した方はこちらの記事をご覧ください。
その他のホームページ作成サービスをご紹介しています。

 

SHARE:
あなたへのおすすめ