どうも、星川(@Soh_RundabanSP)です。

 

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

 

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

 

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

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

 

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

 

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

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

 

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

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

  1. レンタルサーバーと契約する
  2. 独自ドメインを取得する
  3. WordPressをサーバーにインストールする
  4. 最低限の設定をしておく

 

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

 

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

 

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

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

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

 

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

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

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

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

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

 

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

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

 

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

ところが最近になってドメインキングがサーバー代の値上げを行ったんです…。

(全てのプランに今までの+¥500)

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

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

 

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

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

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

 

 

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

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

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

 

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

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

 

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

  • サーバーID(初期ドメイン)⇒これからつくるサイトのURLとは無関係なのでわかりやすい任意の文字列で大丈夫です。
  • プラン:個人の音楽サイトの場合「X10」で十分です。後からグレードアップすることもできます。

 

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

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

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

 

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

 

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

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

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

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

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

 

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

 

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

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

 

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

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

 

メニュー右の「ログイン」から「インフォパネル」をクリックします。

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

 

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

  • 会員ID(メールアドレスでも可)
  • インフォパネルパスワード

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

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

 

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

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

 

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

 

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

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

 

独自ドメインを取得する

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

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

 

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

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

 

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

 

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

 

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

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

の3ステップです!

 

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

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

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

 

まずは先ほどと同じ「インフォパネル」にログインします。

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

 

画面左のメニューの「追加お申込み」をクリック。

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

 

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

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

 

ドメインの「新規取得」をクリックします。

ワードプレスで独自ドメインを取得する方法③

 

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

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

どんなドメインがイイ?

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

 

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

 

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

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

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

 

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

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

 

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

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

サーバーパネルとインフォパネルの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

 

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

 

ドメイン代を節約するなら「お名前ドットコム」で
実はエックスサーバーで独自ドメインを取得するより、「お名前ドットコム」でドメインを取得してエックスサーバーに接続したほうがコストは安いです。
  • エックスサーバー⇒¥1500/年(.com)
  • お名前ドットコム⇒¥1160/年(.com)

 

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

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

 

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

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

3.「ns3.xserver.jp」

4.「ns4.xserver.jp」

5.「ns5.xserver.jp」

 

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


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

 

 

さぁ!これで、

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

が準備できました!

 

次はいよいよ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なので適当な英語で大丈夫です(笑)

 

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

星川
一旦、お疲れさまでした!

 

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

 

ここからいよいよ実際のサイト作りの作業に入っていきます。

(作業ごとに詳しく解説しているので、それぞれ別記事を用意しています)

 

続いて、

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

と進んでいきましょう!

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

 

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

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

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

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

 

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

 

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

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

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

 

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

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

 

まとめ:WordPressに挑戦しよう!作業につまづいた時の対処法

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

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

 

この記事の解説だけでは難しいと感じたかもしれません。

エックスサーバーでは10日間の無料体験が用意されているので、ぜひ一度体感してみて欲しいと思います。

それでも難しいと感じたら、決済をせずにいればお金はかからずサービスを終了することができますよ。

 

 

WordPressを使い始めて、

もっとカッコよくしたい…

カスタマイズができない…!

 

そんな疑問が出ても大丈夫です!

 

WordPressは非常に有名な老舗サービスなので、クラウドソーシングを覗くとカスタマイズやお悩み解決のサービスを出品している人をたくさん見つけることができます。

例えば、ココナラを覗いてみるとこんな方がすぐ見つかりますよ。

WordPressの質問や相談・問題解決代行します
ワードプレス(WordPress)でサイトを制作したけど...
・サイトが消えた
・表示が崩れた
・細かいデザインの調整の仕方がわからない
・機能を追加したい
など、WordPressを使用する上で必ず困ったことや、問題に遭遇すると思います。 その様な方のために、徹底的にアドバイス・サポートします。
WordPressの質問や相談・問題解決代行します

ココナラにはWordPress専用カテゴリーがあります

 

ココナラはワンコイン500円~仕事を依頼できる気軽なサービスです。

初めてクラウドソーシングを使う人に特におすすめですよ。

 

会員登録だけなら無料ですのでまずは登録して使ってみて下さい。

 

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

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

 

それでは!

Twitterでフォローしよう