sagurabaです。
先日自分で公式サイトをつくりました。
もともとWeb系の仕事をしていたので、余裕です。
このブログもず〜っと昔から運営していたものを改修して、sagurabaのブログにしました。
個人でブログを書いたり、音楽活動をしたり、モデルをしたりなんでもできる時代になりました。
そこで必要になってくるのが自分の活動のメインとなる「Webサイト（ブログ）」だと思います。
というわけで、つくり方とか運用方法とかをまとめてみます。
Webサイト（ブログ）の作り方
Webサイトを自分でつくる選択肢としては、以下の2つがあります。
- アメブロやWixなど、無料で作れるサービスを利用する
- ドメインとレンタルサーバーを自分で取得してつくる
上記のとおり。
しかしアメブロやWixといった無料サービスだと、所有権が完全に自分のものになりません。デザインやルールも厳しいため本格的な活動には向いていません。
というわけでこの記事では「ドメインとレンタルサーバーを自分で取得してつくる」という方法で紹介します。
このBLOGもsaguraba公式サイトも同じ方法でつくっています。
とても簡単です。
レンタルサーバーとドメインを取得する
レンタルサーバーを契約します。
サーバーとは
Webサイトが「家」だとすれば、サーバーは「土地」です。
レンタルサーバーとはつまり「ネット上でレンタルする土地」のことです。
サーバーを一から自分で構築するのは、知識がないとまず無理です。
なので、大抵の人はレンタルサーバーを利用します。
オススメのサーバーは「エックスサーバー」です。
エックスサーバーとは
レンタルサーバーでは一番有名。ぼくも昔からずっと利用しています
エックスサーバー公式サイトにアクセスします。
「お申し込み」をクリック。
「10日間無料お試し 新規お申し込み」をクリック。
プランは「スタンダード」で超十分です。
ありえないくらいのアクセスを獲得できる知名度orサイトに育ったらプラン変更を考えましょう。
あと、「WordPressクイックスタート」の「利用する」に必ずチェックを入れてください。
そして「Xserverアカウントの登録へ進む」をクリック。
このようなポップアップが出るので「確認しました」をクリック。
- サーバーの契約期間：まずは3ヶ月がオススメ
- 取得ドメイン名：好きなドメインを入力
- ドメインとは → 『Webサイトが「家」だとすれば、ドメインは「住所」です。明確なサイト名や活動名がある場合は、それにそったドメインを取得しましょう。たとえばsagurabaのオフィシャルサイトのドメインは「saguraba.com」です』
- ブログ名：サイトのタイトルを入力。こちらは後からいつでも何度でも変更できます
- ユーザー名：サイトを編集するユーザー名を入力。なんでもOKです
- パスワード：サイトにログインするためのパスワードになります。推測されにくいものにしましょう
- メールアドレス：メールアドレスを入力
- テーマ：すでに選択されている「WordPressデフォルトテーマ」でOK
- テーマオプション：スルーでOK
上記のとおり入力が終わったら「Xserverアカウントの登録へ進む」をクリック。
上記を入力し、「次へ進む」をクリック。
入力したアドレスに確認コードが送信されるので、入力し「次へ進む」をクリック。
内容を確認し、間違い等なければ「SMS・電話認証へ進む」をクリック。
「認証コードを取得する」をクリック。
SMSに送信された5桁のコードを入力し「認証して申し込みを完了する」をクリック。
これでレンタルサーバーとドメインが取得できました。
ほぼほぼサイトの完成です。ただし、今レンタルサーバー側でサーバーを構築している最中なので、すぐにはアクセスできません。
エックスサーバーからのメールを確認＆保存しておく
登録したアドレスを開いてみると、下記のようにエックスサーバーから4件くらいメールが届いているはず。
そのうち「【Xserverアカウント】■重要■サーバーアカウント設置完了のお知らせ」というメールが大事なので、スターをつけるなりしておきましょう。そしてそのメールを開いてみます。
上記に記載されている「サイトURL」が今回つくったWebサイトのURLになります。
「管理画面URL」というのが、サイトの管理画面にログインするためのURLになります。ここからデザインを自由にカスタマイズしたり、記事や画像を投稿したりできます。
ためしに管理画面URLをクリックしてみましょう。
おそらく上記のように表示されます。これはまだブログが立ち上がっていないということです。
しばらく待てばブログは勝手に立ち上がります。
しばらく待ったあともう一度クリックしてみると、下記のような画面が表示されます。
上記に先ほどのメールに記載されている「ユーザー名」と「パスワード」を入力すると、管理画面に入ることができます。
これがサイトの管理画面です。
ここまで来ればWebサイトの完成です。
記事を投稿したり、デザインをカスタマイズしたり、ポートフォリオを載せたり、できることは無限大です。
できることはマジで無限にあるのですが、このあとはWebサイトの運用方法について書いていきます。
Webサイトの運用方法
基本的には下記を覚えておけば大丈夫です。
- 初期設定
- 記事を投稿する
- デザインをカスタマイズする
初期設定
初期設定といっても、ぼくが行っているのは
- パーマリンクの設定
- SEOの設定
- アナリティクスとサーチコンソールの設定
くらいです。最低限で十分です。
パーマリンクの設定
パーマリンクとは
サイトのページ一つ一つに割与えられたURLのこと
パーマリンクの設定を何もいじらないままにしておくと、URLがぐちゃぐちゃな感じになり、見栄えが悪いです。
下記のとおり設定しておくことをオススメします。
設定の「パーマリンク」から「投稿名」にチェック。
これでURLがとてもシンプルな表示になり、美しいです。
SEOの設定
SEOとは
サイトを検索結果の上位に表示させるための施策のこと。SEOがしっかりしていれば、それだけサイトをみてもらえる機会を得やすい
ここは専門的な話なので、今はなんとなくの理解度で問題ありません。
どんなサイトであれ、検索結果の上位を目指すのは大切なことです。自分がなにか検索するときのことを考えればすぐに分かりますが、検索結果の上位のページから開きますよね。
下の方の記事はよほど深く調べたいわけでもない限り、見ないと思います。
繰り返しになりますがサイトを持つものとして、検索結果の上位を目指すのはとても大切なことなのです。
SEOはそれを職業にできるほど奥が深いので、ここでは必ずすべき設定にとどめます。
とても簡単で、「SEO SIMPLE PACK」というプラグインをインストールしましょう。
プラグインの「新規追加」から「SEO SIMPLE PACK」と入力し、「今すぐインストール」をクリック。
これでサイトにSEO SIMPLE PACKというSEO設定ができるプラグインが入ります。
SEO PACKから「一般設定」を開いてみましょう。
「フロントページ」のディスクリプション欄に、あなたのサイトが検索された時に表示させたい情報を記載します。
たとえば、「Vaundy」と検索したときに下記の部分に表示されるところになります。
サイトの概要、といったところでしょうか。
続いて「フロントページ」のキーワード欄に、どのようなキーワードで検索されたときにサイトが表示されたいのか、そのキーワードを入力します。
「Vaundy」と検索すればVaundyの公式サイトが出てくるように、あなたのサイトのサイト名、活動名、ブログ名といったものが相応しいでしょう。
アナリティクスとサーチコンソールの設定
この設定については、重要なところなので別記事にしました。
下記を見て設定してみてください。
>> 記事作成中
記事を投稿する
つづいては、記事を投稿する方法です。
サイトをブログとして運用する方だったり、なにか新しい情報をページで更新する際に必要な知識です。
saguraba公式サイトでも、下記のようにお知らせを記事として投稿しています。
それではまず投稿から「新規追加」をクリックします。
すると下記のような記事投稿画面（ブロックエディタ）に遷移します。
このブロックエディタで記事を書いたり、写真を投稿したり、はたまたポートフォリオなんかも作れちゃいます。
下記のように楽曲をリスト化して載せることだってできます。
ブロックエディタで投稿する際に覚えておきたいのが、下記です。
- タイトルの入力
- 本文の入力
- 画像の挿入
- アイキャッチの設定
- パーマリンクの設定
- カテゴリの設定
- タグの設定
- ディスクリプションの設定
- OG:imageの設定
- キーワードの設定
すこし多いですが、むずかしい事は何もないので、順番にみていきましょう。
タイトルの入力
投稿には必ずタイトルが必要になります。タイトルスペースに入力しましょう。
アーティストサイトやポートフォリオサイト等であればあまり気にする必要はありませんが、ブログ記事として「多くの方に読んでもらいたい」といった目的があれば、タイトルはSEOを意識したものをつける必要があります。
詳しくは割愛しますが、下記の3点を意識してみてください。
- タイトルは30文字前後にする
- タイトルにキーワードを入れる
- 興味をそそるタイトルをつける
たとえば再掲しますが、下記のような投稿はそもそもファンがサイトを見てくれている事前提で投稿しているため、「オフィシャルサイトを開設しました！」というお知らせのようなタイトルの付け方をしていて、SEOを意識していません。
逆にこの記事は、できればまったく知らない人でも検索でたどり着けるように、すこしSEOを意識したタイトルづけをしています。
「Webサイト（ブログ）の作り方【初期設定からデザインまで】」というタイトルの中に「Webサイト 作り方」というキーワードを入れています。
そもそもサイトのパワーが強くないと上位表示されないのですが、それでも「Webサイト 作り方」と検索してくれた方の目に留まる可能性は残しています。
そんな感じで目的に合わせたタイトルづけをしてみてください。
本文の入力
本文は下記のエリアに入力していきます。
ブログ記事の場合はここに文章を書いていきますし、なにかポートフォリオとして画像なんかを載せたい場合もこちらから挿入していきます。
画像の挿入
画像の挿入は下記のように、ブロックを選択し「画像」というボタンをクリックします。
すると画像ブロックになりますので、「アップロード」から載せたい画像をアップロードするだけです。
画像を載せるときの注意点として、できるだけ画像は軽量化（圧縮）したほうがいいです。
高画質のサイズのでかい画像を載せまくると、ページが重くなりユーザーにストレスを与えてしまいます。
画像の軽量化は「JPEG 圧縮」とかで調べると圧縮ツールが出てくるので、使ってみてください。
おすすめは「COMPRESS JPEG」です。
パーマリンクの設定
前述しましたが、ページ（記事）にはそれぞれパーマリンクというURLが割り与えられます。
ブロックエディタ上でそれをカスタマイズできます。初期のままだと「p123」のように訳のわからないパーマリンクになるので、それは避けた方がいいです。
とても簡単で、右側の「投稿」から「URL」をクリックするとパーマリンクを編集できます。
パーマリンクは、投稿のタイトルにそったものにすると綺麗になり、SEO効果もあります。
たとえばこの記事のキーワードは「Webサイト 作り方」なので、パーマリンクは「website-making」としています。
このようにするとURLを見ただけでも、Webサイトの作り方を紹介した記事なんだということが分かりますよね。
注意点として「パーマリンクに日本語を使うのはあまり良くない」と覚えておいてください。
パーマリンクに日本語を入れてしまうと、URLをどこか（例えばLINEとか）に載せたときに文字化けしてしまいます。
アイキャッチの設定
記事には「アイキャッチ」を設定するのが一般的です。
アイキャッチとは
記事の見出しとなる画像のことで、表紙絵のようなイメージ
アイキャッチを設定することで、たとえば記事一覧ページを見たときに、下記のように表示されます。
ほとんどの場合、設定するのが一般的です。
例外としてアーティストサイトやコーポレートサイトの「お知らせ」等では必要なかったりします。
なので何度も掲載してごめんなさいですが、下記のページにはアイキャッチは設定していません。
アイキャッチの設定方法はとても簡単で、右側の「投稿」から「アイキャッチ画像」を選択し、画像をアップロードするだけです。
カテゴリーの設定
記事にはカテゴリーを設定するのが一般的です。
たとえばこの記事には「Blog」というカテゴリーをつけています。
カテゴリーの付け方も簡単です。右側の「投稿」から「カテゴリー」をクリックし、「新規カテゴリー名」に新しくつくりたいカテゴリー名を入力し「新規カテゴリーを追加」をクリックします。
するとカテゴリーが追加されるので、それにチェックを入れるだけです。
ちなみにカテゴリーは日本語でも英語でもどちらでも大丈夫です。
写真のポートフォリオサイトを作るのであれば
- 動物
- 風景
- 人物
みたいなカテゴリーをつけたりするイメージです。
注意点として、SEO的によくないので「記事につけるカテゴリーは一つだけ」にしましょう。
タグの設定
タグとは、「一記事に複数つけられるカテゴリーのようなもの」と覚えておけば問題ありません。
タグの設定も同じように右側の「投稿」から「タグ」で追加できます。
ディスクリプションの設定
ディスクリプションは、記事の要約文のことです。
検索結果で下記のように表示される部分です。
100文字程度でその記事の内容を要約し、設定しましょう。
ディスクリプションは先ほどインストールしたプラグイン「SEO SIMPLE PACK」が有効化されている状態で、本文下までスクロールしたところに記入欄があります。
また、ディスクリプションを書くときに「記事のキーワードを入れる」とSEOに効果的です。
検索されたキーワードがディスクリプションに入っていると、太字で表示されユーザーにクリックされる確率が上がるためです。
og:imageの設定
og:imageとは、記事がシェアされたときに表示される画像のことです。
ブログ記事の場合は、アイキャッチの画像を設定するのがベターです。
og:imageについても、「SEO SIMPLE PACK」が有効化されている状態で、本文下までスクロールしたところでアップロードできます。
キーワードの設定
キーワードは先ほどから何度か登場した「記事のキーワード」のことです。
このキーワードも「SEO SIMPLE PACK」が有効化されている状態で、本文下までスクロールしたところに記入欄があります。
ここまで終わったところで、右上の「公開」をクリックで記事が投稿されます。
記事は公開したあとでもいつでも編集可能なので、あまり慎重になりすぎないことも大切です。
デザインをカスタマイズする
さいごにサイトデザインのカスタマイズ方法についてです。
サイトのデザイン（見た目）は、「テーマ」という機能で誰でもカスタマイズすることができます。
テーマとは
サイトの着せ替え機能のようなもので、好きなテーマをインストールして使用します。無料で使えるものから有料のものまで、数えきれないほどあります。
今回は無料でつかえるテーマをインストールしてみます。
まずは「Cocoon」公式サイトにアクセスし、「ダウンロードはこちら」をクリック。
スクロールし、「Cocoonテーマをダウンロード」と「Cocoon子テーマをダウンロード」をクリック。
ダウンロードされたことを確認します。
ダウンロードしたテーマを外観の「テーマ」から「新規追加」をクリックし、アップロードしていきます。
「テーマをアップロード」をクリックし、「ファイルを追加」から先ほどのzipファイルを一つずつアップロードします。
「今すぐインストール」をクリック。
「テーマページに移動」をクリックし、同じ手順でもう一つのファイルもアップロードします。
「Cocoon Child」の方を「有効化」します。
これでテーマがサイトに適用されました。
以降はテーマの公式サイト等に記載されているカスタマイズ手順にしたがって、自由にオリジナルなサイトを作ってみてください。
なお、このブログ及びsaguraba公式サイトで使用しているの「SWELL
」という有料テーマです。
Web制作、デザインの知識がなくても綺麗でかっこいいサイトが作れるので、おすすめです。
オリジナルのWebサイトで活動の幅を広げよう
おつかれさまでした。
自分のサイトを持っておくと、それは名刺がわりになります。
誰かの目に留まったとき、それは大きなチャンスになりえるかもしれません。
ぼくもいい曲を書いて公式サイトやこのブログで発信をつづけ、多くの人に曲を届け、いつか実になるよう活動をつづけていきます。
この記事があなたの目標とチャンスを結ぶきっかけになれますように。