まえがき
第1章 クリエーターが個人サイトを持つメリットとは
第2章 個人サイトが表示される仕組みとは
第3章 WordPressとは何か
第4章 個人サイト制作に必要な環境を揃える
第5章 個人サイトを1時間で作る ~WordPressの初期設定~
第6章 WordPressの管理画面
第7章 個人サイトの着せ替え~WordPressテーマの導入~
第8章 個人サイトの機能強化 ~WordPressプラグインの導入~
第9章 個人サイトに掲載したいコンテンツ
第10章 HTMLとCSSの概要
第11章 WordPressテーマファイルの中身を見る
第12章 WordPress子テーマの作成
第13章 WordPressカスタマイズに役立つHTMLタグ
第14章 WordPressカスタマイズに役立つCSSプロパティー
第15章 WordPressカスタマイズに役立つPHP構文・関数
第16章 Googleと仲良くする?しない?~SEOと検索避け~
第17章 個人サイトのアクセス解析(Google Analytics / Search Console)
第18章 WordPressの運用とトラブル対策
第19章 個人サイト制作に役立つオススメサイト&ツール
あとがき
このたびは、本書『クリエーターのためのWordPress活用入門 ~個人サイト制作でセルフブランディングしよう!~』をお手にとっていただき、誠にありがとうございます。
近年のインターネット技術の発展により、各種ブログサービスやSNS、動画投稿サイトなどを通じ、個人が誰しも自分の作品を無料で気軽に発信できるようになりました。同人作家・漫画家やミュージシャンなどのクリエーターにとっては、非常に恵まれた時代といえます。
一方で振り返ると、インターネット黎明期から2000年代中盤には、個人のWebサイト(以下個人サイト)を制作して創作活動を行うことが一般的でした。キリ番文化など、今となっては懐かしい響きがします。そこでは自らHTMLを書き、アクセスカウンターを設置し、CGIの掲示板を置きという、一定のWeb制作技術が活動するうえで個人のクリエーターに求められていました。
近年、SNSや投稿サイトでトラブルがあるたびに「昔の個人サイトに戻ろうぜ!」のような発言を見かけることがありますが、その反面、それに本気で取り組む方はあまり見かけません。それはやはり無料サービスに比べると高い技術的、金銭的なハードルが存在するからであり、仕方ない面もあります。
しかしながら現在は、全部HTMLの手打ちでやっていた時代よりも、はるかに高度なWebサイトを簡単に作ることができるようになりました。その強力な味方になるのが「WordPress」などのCMS(コンテンツ管理システム)です。 クリエーターがWebサイトの制作技術を身につけることができれば、その活動において大きな武器になることでしょう。
筆者は2002年に最初の個人サイトを制作し、さまざまな試行錯誤を経て、2014年よりWordPressに移行して現在に至ります。もともとは文字通りの個人の日記を綴るサイトでしたが、2008年からボカロP「アンメルツP」として楽曲発表やCD制作、同人誌の執筆といったさまざまな活動をするようになり、そのうえで大きな味方になったのがこのサイトの存在でした。自分の意見や情報を一箇所にまとめて発信できる「公式サイト」の存在は、集客や自己学習などにとても役立っていると実感しています。
現在は、自作CDの広報のために制作したサイトが評価され、Webデザインの仕事も定期的に行っています。そうした同人活動・Web制作の両方の経験を還元したいと思い、2019年に本書の同人版『令和時代の個人サイト制作入門』を執筆いたしました。その後2年を経て、最新の情報をフォローアップし、コンテンツの発信ノウハウなど、クリエーター向けの内容を加筆修正したのが本書となります。
本書が、読者の皆様が今後創作活動をするうえでの手助けとなれば幸いです。
2021年2月吉日 gcmstyle(アンメルツP)
本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。
『クリエーターのためのWordPress活用入門』という本書のタイトルに惹かれて購入された方は、少なからず個人サイトの制作にご興味のあるクリエーターの方と存じます。まずはこの2022年という時代に個人サイトを作る意味はいったいどこにあるのか、改めて考えてみました。
たとえば絵や写真を上げるだけならpixivやTumblr、Instagramなどで済むのではないかという声もあるでしょう。ブログを書くのであればアメブロやlivedoor Blog、最近は有料記事を売ることもできるnoteなどの各種サービスもあります。動画の投稿ならYouTubeやニコニコ動画、TikTokもあります。最近は普通の発言も含めて、すべてYouTubeやTikTokで完結するクリエーターも増えてきました。
しかも、これらのサービスはすべて基本無料。高度な機能を使うためには有料会員になる選択肢もありますが、ほとんどのことは無料でできてしまいます。実際、大部分の人はそれだけでも困らない場面がほとんどなのではないでしょうか。現代では、それらのサービスを利用しないと、創作活動自体なかなか立ち行かない面もあります。現代のサービスはやはり便利に作られているわけです。
筆者も個人サイト「G.C.M Records」(https://www.gcmstyle.com/)を持ちながらも、動画はYouTubeに上げていますし、普段の発言にはTwitterを使います。個人サイトを作ったからといって、すべてを置き換えるのは難しいです。
そして最初に申し上げますが、これから本書で取り上げる「WordPressによる個人サイト制作」は完全に無料では難しいです。
WordPress自体は基本的に無料(第3章で後述)ですが、ほかにある程度の費用が必要です。具体的には、サーバー代やドメイン代に月額、もしくは年額での費用がかかります。
本書では、主に筆者が使っている「エックスサーバー」というサーバーを利用してサイトを作る方法を書いていきますが、このサーバーは月額1,000円ほどかかります(サーバーやドメインに関する詳しい説明は、第2章をご覧ください)。
制作にある程度の技術知識と環境が必要で、しかも有料。ではその中で、結局個人サイトを作るメリットは一体何でしょうか?
筆者は、以下の理由があると考えます。
投稿型のサイトに依存することのデメリットを考えてみますと、利用規約やサイトの見た目(UI、インターフェイス)が突然変わったり、今まで使えていた機能が使えなくなったという経験は、誰しもが一度は味わっているのではないでしょうか。自分の意図に沿わない修正が入り、不満を漏らす方も見かけます。
これは、他人が作ったサービスに乗っかることの宿命です。
家でたとえるなら、既存のネットサービスは賃貸住宅やマンションのようなものです。環境のよさはある程度保証されている反面、マンションのオーナーが規約を変えたら、その住み心地も変わってしまうということです。
しかもYouTubeやTwitterであればアメリカの会社、TikTokであれば中国の会社など、グローバルに拠点を構えるネットサービスも多いです。それゆえ各サービスの設計思想と、日本のクローズかつハイコンテクスト(理解に際しさまざまな文脈や暗黙のお約束が必要になる)な創作文化などの間にどうしても相容れない部分が存在し、衝突が起こることもたびたびあると実感しています。
それに対して、個人サイトは家でいうところの一戸建て、マイホーム的な存在といえます。
確かに、個人サイトを作るのは少し面倒です。「必要な手続きを踏めば誰でも作れる」ことは間違いない事実ですが、特にパソコンを持っていなくてもスマホだけで十分生活が成り立つような時代に、「1から作れ」ともなかなか軽々しくいえない存在なのではないかと思います。
筆者も最初に個人サイト制作を始めた00年代には、パソコン用アプリ『ホームページNinja』や『ホームページ・ビルダー』といったソフトの力を借りて、やっと作っていました。
マイホームを作るなら「設計図を作る」という技術もありますし、「大工道具で家を組み立てる」という工程もあるので、やはりある程度の知識は必要です。それでも、個人サイトは(サーバー会社の規約があれども)他のプラットフォームに乗っかるよりは、自分の意志で行えることが多いです。
たとえば、デザインも自分自身でいろいろ変えることができます。その家の間取りやどんな家具を置くのか、その色も自分の意思だけですべて決められるということです。
そういった自由さとカスタマイズ性が、個人サイトの最大の魅力です。
制作した個人サイト自体を、自分のクリエーターとしての作品の一部、いわばポートフォリオとして見せられるのもひとつのメリットです。とりわけイラストレーターやデザイナーの方であれば、サイトを自分の作品としてアピールでき、それが新しい仕事につながることもあるでしょう。
特に商業的な創作活動を行いたい方ほど、「公式サイト」として位置づけできる存在が重要になってきます。
クリエーターの名前でGoogle検索をしたとき、ネットサービスを利用していると、そちらが上位に引っ掛かることがあります。YouTubeチャンネルやpixivプロフィールページ、noteの記事などがヒットしますが、それはあくまでYouTubeやpixiv、noteというサービスを利用している一人のメンバーという扱いです。そこで個人サイトを持つと、そのサイトが検索に混ざって堂々と表示されるわけです。
作品だけを蓄積している場所だと、自分自身のお知らせがどうしても埋もれがちになりますので、それらを発信するときにとても効力を発揮します。
何かあったときはここを見ればいいという存在証明にもなりますので、なりすましの防止にも効力を発揮します。スクリーンショットなどの画像はいくらでも加工・ねつ造ができるため、ソースとなるWebサイトがあると、信頼にもつながることでしょう。
個人サイトを出発点(ハブ)として、投稿サイトや通販サイトなど、他のサービスへのリンクを張り巡らせてスムーズに誘導させる、そういったルート作りにも大変有効です。
このように、いざ自分の家があると、セルフブランディングにとても役立ちます。
また、個人サイトがある程度自力で作れると、そこそこWebに関する技術への理解があるとみなされますので、その点でも対外的なメリットがあります。もちろん本業エンジニア・デザイナーの方にとっても、技術力を証明する場所になるので、作っておいて損はありません。
また、先ほどまでとは逆のパターンですが、検索避けやパスワードなどの設定を行うことで、完全に身内だけに向けたサイトも制作可能です。
昔の個人サイトでは、二次創作の対象物の運営元によるエゴサーチで見つからないようにする配慮として、こういった設定を行っていた方が多かったように思います。たとえるならテレビ番組「ポツンと一軒家」のように、人里離れた場所を選んで家を作ることだって可能、要するに、自分でどれぐらい露出するかコントロールできるのです。
外部のサービスを利用すると、コンテンツの個人によるコントロールが少し難しくなります。たとえばニコニコ動画の規約には、サービス運営元の株式会社ドワンゴが、投稿された動画などのコンテンツを勝手に外部のメディアに紹介するのも自由と書かれています。
下記は、「投稿規約 | ニコニコ動画」(https://www.upload.nicovideo.jp/rule)からの引用です。
2.運営会社による投稿コンテンツの利用
利用者は、投稿コンテンツをアップロードすることにより、運営会社(「ニコニコ」を運営する株式会社ドワンゴ及びその子会社を含みます。以下本条において同様です)に対し、投稿コンテンツを自由に利用できる世界的、非独占的、無償、サブライセンス可能かつ譲渡可能な許諾ライセンス(以下、「本ライセンス」といいます)を付与するものとします。利用者は、運営会社に対し、投稿コンテンツについて本ライセンスを付与するために必要な権原を有すること並びに当該投稿コンテンツの内容が法令及び本規約に違反するものではないことを表明・保証するものとします。
他の大部分の投稿サイトでも、類似の文章が規約にあるはずなので、確認してみてください。
サイトの更新に力を入れすぎるあまり本業がおろそかになってしまうのは本末転倒ですが、Webサイトの制作にはクリエイティブな部分も求められます。そのため、絵の作り方や作曲など、「本業」となる創作にも相乗効果をもたらすことがあります。
WordPressを利用すれば、まったくコンピューター言語を覚えなくても、ブログ記事の更新のような運用自体は可能です。しかし、いざ本格的な運用にあたっては、最低限のコンピューター言語に関する知識は持ち合わせていたほうがスムーズです。覚えておくとカスタマイズの幅が広がりますし、トラブルが起きたときも自分で解決できます。
コンピューター言語は、どれも論理立ててひとつずつ、Webサイトのデザインや動きを形作っています。したがって、覚えれば覚えるほどに自分のできることが増えていきます。そして論理的な思考は、音楽など他の作品づくりにも必要なことだと実感しております。
筆者は以前『ボカロビギナーズ!ボカロでDTM入門』(インプレスR&D)という作曲本を執筆した経験があるのですが、そこで主張していることは、作詞や作曲は「何か特別な才能」で作るものではないということです。特別な才能のない普通の人でも、理詰めで作詞や作曲は可能であり、その方法を紐解いていくというアプローチで取り組んだことを覚えています。ほとんど同じことが、Webサイト作りやプログラミングにも適用できると思います。
※ここではHTMLやCSS、PHP等をまとめて「コンピューター言語」と呼称しています。それぞれどの場面で使うかは後ほど解説します。
ブログで伝わる文章を書いたり、簡潔にわかりやすいタイトルをつけることは、自分自身の考えや知識を整理するためにも大事なことです。人間、他の人に教えるときが一番学習の機会だったりします。
また、現代は残念ながら、単純に作品を作っただけでは注目されることが少なくなっています。その理由は皮肉かな「誰でも作れるようになったから」です。
人間の余暇に使える時間には限りがあり、その中でどの作品を取捨選択するかを常に求められています。ですから作品の数が爆発的に増えた現状では、単純に作るだけではなく、それをどのように見てもらうかの戦略も自然と求められます。
そういう意味でも、個人サイトの制作や運用の経験は、発信力や広報のための技術を身につけるための重要な役割を果たすでしょう。
ネットサーフィンをしていると、ブログやWebサイトの記事に広告が入っているものをよく見かけます。これらは、GoogleがWebサイトの来訪者に合わせた広告を表示する「Google Adsense」や、Amazonなどで物が購入されると自分に紹介料が入ってくる「アフィリエイトリンク」などを通じて、サイトの運営者が収入を受け取れる仕組みを活用しています。
個人サイトの運営においては、どのような記事に広告をつけるか否か、もしつけるのであればその種類も、ある程度選ぶことが可能です。たとえばミュージシャンであれば、オススメの音楽機材を紹介する記事に、その機材へのAmazonアフィリエイトリンクを貼るといったものです。
こうした、自らの作品を直接売る以外にも、広告を通じてクリエーターとしての収入を得られる可能性があるのも個人サイトの魅力のひとつでしょう。
筆者の個人サイトには現在月に2万人ほどのアクセスがあり、サーバー代などのサイト運営費は十分に回収できる状況となっています。これだけで暮らせるとは考えないほうがいいですが、それでも単純にサーバー代がまかなえたら嬉しいですよね。
登録者数1,000人以上などの条件を満たさないと広告をつけられないYouTubeと同様、個人サイトでの広告掲載にあたっても一定の審査はありますが、クリエーターとして活動を行う過程で自然に新たな収入を得られる可能性があるのは、魅力のひとつといえます。
前章取り上げた「そもそも個人サイトを作るべき理由やメリット」に続き、本章では下記の話題を取り扱います。
・そもそも「個人サイト」ってどのように作るのか?
・そのためにどのような環境や技術が必要なのか?
・そして、個人サイトの制作に「WordPress」という存在がどのように関わるか?
とりあえず個人サイトを作るためには、最低限この3つが必要です。
・ドメイン(住所)
・サーバー(土地)
・表示したいコンテンツ(家屋)
家づくりにたとえますと、ドメインは住所で、サーバーは土地、そしてコンテンツが家屋にあたります。この3つがあれば「ドメイン」にアクセスしたとき、「サーバー」が「コンテンツ」を表示してくれます。
実際にはより複雑なプロセスはありますし、「厳密にはこれは○○だろ」というツッコミはいい出したらキリがないのですが、そこは本格的にWebサイトを支える技術に興味を持ち始めたら、皆さんが各自で調べ始めることでしょう。
さてここからは、ドメイン・サーバー・コンテンツとはそれぞれ何かを、さらにひとつずつ詳しく見ていきます。
「ドメイン」はご存知の方も多いとは思います。
Google Chromeのようなブラウザーの上に表示されているアドレスバーには、「https://www.gcmstyle.com/」のような文字列が表示されています。この文字列は「URL」と呼ばれています。 ここのURLのうち、「gcmstyle.com」という部分がドメインと呼ばれるものです。「○○.com」とか「○○.net」などを多く見かけますね。
ドメインとは「インターネット上のコンピューターにつけられる一意の名前」です。つまり、「ドメインの取得」というのは、「サーバー(後述)に名前をつけられる命名権」なわけです。初心者向けのサイトでは「ドメインとはインターネット上の住所である」との説明が多いですが、実際住所みたいなものだと認識していただいて、まったく構いません。本来の「住所」というものは、どちらかといえば「IPアドレス」という数字の羅列がより近いですが、ここにわかりやすい名前をつけてあげるということです。
ドメインは、すでに使われているものでなければ、好きなものを取得できます。ただし後ろの「.com」や「.net」の部分は、数十種類の中から決められたものしか選べません。
このドメインは、ドメインの取得サイトで取得できます。有名なサイトとしては、「お名前.com」や「バリュードメイン」などが挙げられます。ドメインの質や料金はどのサイトでもそれほど変わらないので、本来はどこで取得しても構いません。
ただ第1章にも書いた通り、本書ではサーバー「エックスサーバー」を使ってサイトの構築を行います。このエックスサーバーの運営会社では、ドメイン取得サービス「エックスサーバードメイン」も運営しており、サーバーの契約者にドメインをひとつ永久無料でプレゼントする特典キャンペーンも定期的に行っています。エックスサーバーでやる場合は、同時にここでドメインも契約するのがお得です。
ほかにも、系列で運営しているサイトが、実はたくさんあります。相性のいいところを選べば、あとの設定が楽になるなど、お得なことも多いです。
・サーバー「ロリポップ」や「heteml(ヘテムル)」→ドメイン「ムームードメイン」
・サーバー「coreserver」→「バリュードメイン」
ドメインの維持費は、年間で1,000~3,000円前後が一般的です。若干の費用がかかるものの、サーバー代に比べると安いです。
サーバーとは、本質的には「サービスを提供するもの(ソフトウェア)」という意味です。
メールサーバーやWebサーバーという言葉を聞いたことはありませんか?端的に説明すると、メールサービスやWebサービスを提供するソフト(これを「サーバーソフト」と呼ぶこともあります)が入っているコンピューターのことを「サーバー」と呼びます。
そもそもなぜWebサイトが表示されるかというと、どこかのコンピューター(サーバー)に置いてあるデータを表示しているからです。Webサーバーソフトを通じて、コンピューター内のコンテンツをインターネットに表示することができるわけです。
このサーバーを用意するには、いろいろな方法があります。「自分のパソコンをサーバーにする」という方法もありますが、これはかなりの上級者向けですので、本書では取り扱いません。初心者~中級者の方は、レンタルサーバーを使いましょう。
セキュリティーのかかった部屋にコンピューターがたくさん置いてあり、そのコンピューターの一部の利用権を利用者に貸している。そういったビジネスを展開しているレンタルサーバー会社がたくさんあります。これもざっくり家にたとえると、土地の所有権だけを借りるといった感じですね。
料金は月額数百円から数千円というところが多いです。広告つきで無料になるものも一部ありますが、そのようなサーバーはWordPressに対応していない場合も多いですし、対応していたとしてもコンピューターのスペックが低く、表示に長時間かかる場合もあります(「WordPress対応」などと明記しているところを選んだほうがいいです)。WordPressを考えずに単純に数ページのHTMLなどをアップする、という場合は、選択肢のひとつかもしれません。
本書で取り上げる「エックスサーバー」(https://www.xserver.ne.jp/)のほかにメジャーなものとしては、「さくらインターネット」が提供する「さくらのレンタルサーバー」、同じく老舗の「coreserver(コアサーバー)」や「ロリポップ」、それに「heteml(ヘテムル)」などがあります。
coreserverは最安の「CORE-Mini」プランならば、月額220円からWordPressが使える仕様になっております。
筆者はエックスサーバーが月額1,000円前後と他より割高ながらも、とにかく高速で安定している、また管理画面がわかりやすいという点を非常に魅力に感じて利用しています。
多くのサーバーには、10日間前後無料で試せる機能がついております。また、WordPressでサイトを作るときに便利な「WordPressの簡単インストール機能」が実装されているサーバーも多いです。時間のある方はこの機能でWordPressの入ったサイトを作ってみて、使い心地を試してみましょう。
注意点として、契約する前にサーバーの利用規約は必ず確認しておきましょう。どんなコンテンツが上げられるか、規約により制限されていることがあります。たとえばエックスサーバーの場合は、年齢制限のあるコンテンツの掲載には注意が必要です。
・禁止事項について - よくある質問 | レンタルサーバー【エックスサーバー】(https://www.xserver.ne.jp/support/faq/faq_dont.php)
そのため漫画家やイラストレーターの方で、成人向けの作品を取り扱いたい場合は、別のサーバーにしておくのが賢明かもしれません。そういうものができるレンタルサーバーとしては「mixhost」(https://mixhost.jp/)などが知られています。
そして最後に、家屋を建てることになります。この家屋がコンテンツですね。
土地であるサーバーと住所であるドメインはひとまず契約という事務手続きをすればOKですが、コンテンツはお客さんに見せたいものを自分で作る必要があります。
コンテンツを実際に見せるためには、「FTPソフト」と呼ばれる、サーバーとやり取りするためのソフトを通じて、自分のパソコン内にあるファイルをアップする必要があります。家具などを家に運び込むイメージです。
基本的には自分が持っているファイルならば何でもアップできるので、最低限メモ帳で作ったテキストファイル1個でも、コンテンツとして成立します。その他音楽ファイルや動画ファイルなどのアップも可能です。ただ一般的なWebサイトのためには、「HTMLファイル」と呼ばれるファイルといくつかの画像など、関連したファイルを上げるのが通常です。
そもそもHTMLとは「Hypertext Markup Language」の略で、テキストを装飾するための言語です。その中でもリンクを張れる機能がHTMLの心臓部で、テキストに他のサイトのリンクを張ることで実際に他のサイトにジャンプできたり、自分のサイトの中にある画像を表示できたりします。現在我々がネットサーフィンできるのは、HTMLがあるからこそなのです。
HTMLファイルは普通のテキストに「HTMLタグ」と呼ばれる、比較的簡単な書き方で装飾するだけで作れます。Webサイト作りに親しむ人であれば、基本となる言語です。
このHTMLファイルをいくつかと、それに関連する画像などを一緒にアップすれば、一般的なWebサイトが完成します。昔の個人サイトはほとんどこの方法で作られていましたし、現在でもたとえば1ページものの特設サイト(ミュージシャンであれば新作アルバムの告知など)は、この手法で十分成立します。
このコンテンツを作るときに便利なソフトウェア・アプリや技術的な知識、またそれを動かすために必要なハードウェアなどの解説は、第4章で行います。また、HTMLについては、第10章以降でより詳しく取り扱います。
個人サイトの定義は人によって分かれるところですが、ここでは「自分自身が契約した(もしくは自分だけのために用意された)ドメイン・サーバー上で作ったコンテンツを、自分がメインとなって運用するWebサイト」ということにしましょう。自分でいわば「一国一城の主」になり、コントロールができるWebサイトということですね。
たとえば「アメブロ」や「livedoor Blog」などのブログサービスは、コンテンツは自分で運用するものの、「ameblo.jp」や「blog.livedoor.com」の下に属するので、「自分自身が契約した」ドメインではありません。
コンテンツの更新は「自分がメイン」でさえあれば、別に他の人に入ってもらったって構いませんし、後述するように、WordPressではそれが可能です。