ミュージシャンがWordPressで公式サイトを自作する方法をわかりやすく解説（全5回）
「本格的な音楽アーティストのサイトを自分で作りたい！」
バンドのホームページを作るには今は便利なサービスがたくさんありますが、もっと個性的なホームページを作りたいと思ったことはありませんか？
WordPress（ワードプレス）ならプログラミングができない人でも簡単に本格的なサイトを作ることができます。
ミュージシャンならでは「こだわったアーティスティックなホームページ」を作るならWordPressがおすすめです。
そこでこの記事では、音楽アーティストがゼロからWordPressを導入して公式ホームページを自作する手順をご紹介します！
ホームページは自分の財産となる大切なメディアです。
ぜひWordPressであなたの公式ホームページを作ってみて下さい。
以下のステップでWordPressの導入を進めていきます。
めんどくさそうですが意外と簡単にできますよ！
実際にサイトを作りだす前にやる作業は以下の4つです。
その後、以下の手順でサイトをデザインしていきます。
図解を入れながら、わかりやすく解説していきますね！
初期設定が終わった後でWordPressの基本的な使い方を解説していきます。
レンタルサーバーと契約する
WaordPressを使ってサイトを作るにはまずサーバーを用意する必要があります。
サーバーとはネット上にデータを保管しておく場所。
一般に個人がサーバーを用意するにはレンタルサーバーサービスを使います。
おすすめのレンタルサーバーサービスが「エックスサーバー」ですね。
月額990円からと安く使えるにも関わらず、
- 自動バックアップ
- 24時間サポート
など万全のサービスが魅力です。
ブロガーとかサイト運営のプロもよく使っている定番レンタルサーバーですね。
とても人気のあるサービスですから、作業につまづいた時にGoogleやYouTubeで調べると解決策を見つけることができるのも強みですよ。
実はバン活！ではエックスサーバー
の他にドメインキングというサーバーもおすすめしていました。
ところが少し前にドメインキングがサーバー代の値上げを行ったんです…。（全てのプランに今までの＋￥500）
結果的にドメインキングとエックスサーバーではコストパフォーマンスに大きな差が無くなってしまいました。
なのでサーバーは「エックスサーバー」一択！
エックスサーバーと契約する手順
それではエックスサーバーに申し込んでみましょう。
エックスサーバーには、
- 通常の申し込み
- WordPressクイックスタート
の2つの申し込み方法があります。
WordPressクイックスタートとは、エックスサーバーと契約すると同時に「独自ドメインの取得と設定」「ワードプレスのインストール」までいっぺんにできてしまう便利なシステムです！
この記事を読み進めてもらうとわかりますが、3までの手続きはそれなりに面倒。
WordPressクイックスタートなら、SNSアカウントを開設するのと変わらない労力でサイトを立ち上げられるので、特に初心者の方にはおすすめですよ。
ただしWordPressクイックスタートを利用すると、10日間の無料体験ができません！
ですからWordPress以外の方法でバンドのサイト構築を検討している方は注意が必要です。
あえて少しめんどうな通常の申し込み方法を選び、もろもろの操作に慣れるという考えもアリだと思います。
無料体験中に解約すればお金はかからないので。
それでは以下から実際の申し込み方法を紹介していきます！
もし以下の解説でもわかりにくかったら、エックスサーバー公式メディアの「【初心者でも安心】たった10分で出来るWordPressブログの始め方
」も読んでみてください。
最近の手順がわさらにかりやすく詳細に解説されています。
参考サイト【初心者でも安心】たった10分で出来るWordPressブログの始め方
エックスサーバー公式の動画も参考になります。
では、まずはエックスサーバーの公式サイトにアクセスしましょう！
トップ画面上部のメニューから「まずはお試し１０日間無料！（お申し込み）」をクリック。
さらに次の画面で「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は独自ドメインの利用がベターなので、どのみち取得は必須なのですが、ブランド力の向上にも一役買うことになります。
では、独自ドメインの取得方法とエックスサーバーと連携させる方法を説明していきます。
- エックスサーバー
- サーバーにドメインを設定する
- SSL化する
の３ステップです！
エックスサーバーで独自ドメインを取得する
エックスサーバーではレンタルサーバーと同時に独自ドメインも取得することができます。
エックスサーバー社のドメインサービス「エックスドメイン」に申し込めます。
（※後述する「お名前.com
」でも独自ドメインを取得することができます。料金はお名前.comの方が安いですがエックスサーバーの方が手続きが簡単です。この章を一読して、お好きな方を選んでいただければと思います）
まずは先ほどと同じ「Xseverアカウント」にログインします。
（エックスサーバーのトップページのメニュー「ログイン」から→「Xseverアカウント」をクリック）
画面下メニューのドメインから「ドメイン取得」をクリック。
エックスサーバーのドメイン管理サービス「エックスドメイン」のページに移動しますので、「新規取得」から取得したいドメインを入力してみます。
入力したら「ドメインを検索する」をクリック。
取得可能の場合、以下の画面が表示されます。
「「利用規約」「個人情報の取り扱い」に同意する」にチェックして、次の画面へ進みます。
料金の支払い方法を選びます。
基本的にはクレジットカードがおすすめです。（サイト運営を続ければ、今後にわたって継続的に支払いがあるので）
ウェブサービスの決済はたいがいクレジットカードなので、まだ持ってない人はこの機会に作ってみて下さい。
支払いが完了すると確認メールが届きます。
これであなただけの独自ドメインを手に入れることができました！
Xseverアカウントのトップページにもそのドメインが表示されているのが確認できます。
できればシンプルでサイトの趣旨に合うモノをおすすめします。
ドメインの末尾は「.com」や「.net」「.jp」など色んなパターンから選べます。
特にこだわりがなければ「.com」が料金が安いのでおすすめですよ。
今回はバンドのホームページなので、十中八九「（バンド名のアルファベット）.com」などでキマリですね！
続いて取得したドメインをレンタルしたサーバーに設定していきます。
取得した独自ドメインをエックスサーバーに設定する
次は「サーバーパネル」にログインしましょう。（Xseverアカウントではありません！）
サーバーパネルにはトップページのメニュー右の「ログイン」から「サーバーパネル」をクリックします。
またはXseverアカウントのトップページに表示されている「サーバー管理」からも移動できますよ。
IDとパスワードを入力してログインします。
- サーバーパネルのログイン情報はエックスサーバーと契約した時に送られてくる
【Xserver】■重要■サーバーアカウント設定完了のお知らせ
- ユーザーアカウント情報
- サーバーアカウント情報
の2種類がありますが、サーバーパネルにログインする時は「サーバーアカウント情報」を使います。
ログインできたら「ドメイン設定」をクリックします。
続いて「ドメイン設定追加」をクリック。
「ドメイン名」に先ほど取得したドメインを入力。
さらに「無料独自SSLを利用する」「Xアクセラレータを有効にする」にチェック。
「確認画面へ進む」をクリックします。
内容を確認して「追加する」をクリックします。
設定が完了すると以下のような画面が出てきます。
おそらく「無料独自SSLの設定に失敗しました」と出ている方が多いと思います。
そこで改めてSSL化を設定していきましょう。
取得した独自ドメインをSSL化する
SSL化とはサイトを暗号化して安全性を向上させるもの。
Googleでも推奨されており、今後のウェブサイトではスタンダードとなるセキュリティシステムですね。
SSL化されたサイトはURLのhttpのところがhttpsに変わります。
特にチケット予約フォームなどでファンから個人情報を送信してもらうミュージシャンのサイトには導入が必須です。
エックスサーバーでは無料なので、ぜひあなたの音楽サイトもSSL化させておきましょう。
エックスサーバーでサイトをSSL化するのは簡単！
再び「サーバーパネル」から今度は「SSL設定」をクリックします。
順番に、
- 「独自SSL設定の追加」をクリック
- SSL化するドメインを選ぶ
- 「独自SSL設定を追加する（確定）」をクリック
します。（「CSR情報を入力する」は空欄にして大丈夫です）
「SSL新規取得申請中です」と出ると思います。
しばらくすると手続きが終わり、サイトがSSL化されます。
反映に時間がかかる場合がありますが、しばらくするとちゃんと反映されているので大丈夫です！
実はエックスサーバーで独自ドメインを取得するより、「お名前.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をインストールしたいドメインの「選択する」をクリックします。
必要事項を入力していきます。
- インストールURL→そのままで大丈夫です
- ブログ名：サイトのタイトルです。「（バンド名）オフィシャルサイト」など（後からも変更できます）
- ユーザ名：WordPressにログインする時に使用します
- パスワード：同じくログイン時に使用します
- メールアドレス：自分のメールアドレス
- データベース：そのまま「自動でデータベースを生成する」で大丈夫です
入力が完了したら「インストール（確認）」をクリック。
続いての画面で「インストール（確定）」をクリックすると、以下のようにWordPress管理画面へログインできるURLやパスワードが表示されます。
ここは大切な情報なので必ず控えておくようにしましょう。
WordPressにログインできるURLはブラウザにブックマークしておくと便利です。
まれに、
無効なURLです。プログラム設定の反映待ちである可能性があります。しばらく置いて再度アクセスをお試しください。
と表示されることがありますが、 時間をおいて再度インストールするか、ブラウザのキャッシュを削除すると解決することが多いです。
1日以上時間をおくとほとんど大丈夫だと思います。
さて、これでWordPressのインストールまで完了しました！
次に実際にページを作り出す前に必要な最低限の設定をサイトに施していきましょう。
最低限の設定をしておく
WordPressの管理画面にログインして、
- SSL化を設定
- パーマリンクの設定
をあらかじめやっておきます。
いづれも後から変更するとトラブルの原因になりますので今やってしまいましょう。
最後の下準備！
WordPressにログイン
先ほどブックマークしておいたURLから管理画面にログイン。
ユーザー名とパスワードも先ほどの「ID」と「PASSWORD」を入力します。
URLをSSLに変更
初期状態ではSSL化がサイトに反映されていないので設定していきます。
ログインしたら左のメニューから「設定」→「一般」とクリックします。
いくつか入力項目がありますがここでは、
- WordPressアドレス（URL）
- サイトアドレス（URL）
の「http://」の部分に「https://」と「s」を付け足せばOKです。
変更したら画面下の方にある「変更を保存」をクリックすればSSLが反映されます。
余談ですが、ここで設定できるキャッチフレーズはサイトのデザインに反映されたりするので、とりあえず空白にしておくと良いですよ。
パーマリンクの設定を変更
パーマリンクとは記事ごとに設定されるURLの末尾部分のことを言います。
このパーマリンクが無駄に長かったりわかりにくいと、SNSでシェアされた時に見づらくなる可能性があります。
またパーマリンクの設定を途中で変えるのも良くありません。
設定するには管理画面トップの「設定」→「パーマリンク設定」をクリックします。
「カスタム構造」にチェックを入れ、「/%postname%」と入力しましょう。
入力したら画面下にある「変更を保存」をクリックします。
これで記事作成画面からパーマリンクをそのつど入力することができるようになります。
パーマリンクはアルファベットで入力しましょう。日本語で入力するとシェアした時にURLが冗長になってしまいます。基本的には英語。もしくはローマ字で入力してください。とは言え、わかりやすければOKなので適当な英語で大丈夫です(笑)
さてこれでモロモロの設定が全て終了しました！
お疲れさまでした！
解説を読みながら実際に作業してみたい方はエックスサーバーの無料お試しを利用してくださいね！
ここからいよいよ実際のサイトデザインの作業に入っていきます。（作業ごとに詳しく解説しているので、それぞれ別記事を用意しています）
続いて、
- 音楽サイトに欲しいプラグインを導入する
- テーマを導入して外観をカッコよくする
- カテゴリーを設定してメニューをつくる
- エディターの使い方、記事の書き方
と進んでいきましょう！
ここからはクリエイティブで楽しい作業(笑)
音楽サイトに欲しいプラグインを導入する
プラグインとはWordPressにおける拡張機能のことです。
例えばカレンダーを添付するプラグインがあったり、音楽プレーヤーがあったりと有料・無料様々なプラグインがあります。
ここではまず、サイトを立ち上げた時に最低限導入しておきたいプラグインと音楽サイトなら導入しておきたいプラグインを紹介します。
セキュリティに関わるものもありますのでぜひ導入しておきましょう。
テーマを導入して外観をカッコよくする
テーマとは見た目の大枠を決めるテンプレートのことです。
どのテーマを選ぶかによって最終的な出来栄えが変わってきます。
音楽アーティストの公式サイトならやはり見た目はこだわりたいところですよね。
カテゴリーを設定してメニューをつくる
サイトに訪れるとすぐ目に入る場所にある「メニューバー」。
来訪者がコンテンツを探しやすくするためにウェブサイトでは必須のパーツです。
音楽アーティストのサイトでもメニューを作りましょう。
これでだいたいサイト構造が決まります！
エディターの基本的な使い方、記事の書き方
全ての枠組みが決まったらひとつひとつのページを作っていきます。
WordPressの記事作成画面をエディターと言います。
そんなに難しくないのですが、エディターの基本的な使い方や文字装飾の方法を解説します。
特に「見出し」の概念は頭に入れておいて欲しいですね！
まとめ：WordPressで作ったサイトを実際に見て下さい
以上が「音楽アーティストの公式サイトを自作する手順」でした！
お役に立てたらうれしいです。
最後に実際にこの手順・方法で作られたサイトをご紹介します。
友人のバンド「LANAPZIE」の公式サイトです。
エックスサーバーを使い、ワードプレステーマDIVERをインストールして構築されています。
このシリーズを読めば、同じようなサイトは難なく作れますよ。
参考としてぜひ、LANAPZIEのサイトも見ておいてください。
参考サイトLANPAZIE
エックスサーバーでは10日間の無料体験が用意されています。
ぜひ操作を体感してみて下さい。
実際に触ってみて難しいと感じたら、決済をせずにいればお金はかからずサービスを終了することができますので、気軽に触ってみて下さいね。
以上の解説でわかりにくかった方は、公式サイトをご覧いただければと思います。
参考サイト【初心者でも安心】たった10分で出来るWordPressブログの始め方
また、それでもWordPressに挫折した方はこちらの記事をご覧ください。
その他のホームページ作成サービスをご紹介しています。
