【wordpress】素材配布サイトの作り方|フリーBGMサイト向けのオススメテーマも紹介
どうも、しんさんわーくすです。
先日、ロイヤリティフリーのBGM・イラスト素材を配布するサイトをオープンしました。
BGM・イラスト素材配布サイトはこちら
https://materiworks.shinsanworks.com/
以前の記事でもちょっと触れたのですが、
今回の素材配布サイトは、ほぼスマホとwordpressを使って構築しました。
普通webサイトを作ろうと思ったら、皆さんPCは必須だと考えられるかと思います。
でも、スマホでも意外と自分のWEBサイトが作れてしまうんですね。
今回の記事では、スマホとwordpressを使った素材サイトを作り方や
大まかな流れや注意点についてお伝えできればと思います。
なお、かなりボリュームの多い内容なので、今回の記事では
wordpressを利用した素材配布サイトの作り方の概要をお伝えいたします。
詳細な解説が必要な箇所については、別記事で解説予定なのでそちらもご覧いただけると嬉しいです！
この記事はこんな人にオススメ
- オリジナルのWEBサイトがほしいけど、初めてで何をすればいいかわからない
- HTML？CSS？プログラミング？難しそう…
- 素材配布サイトを作りたいけど、作り方が分からない
- PCがないので、できればスマホでサイト制作を完結させたい
- wordpressを使って素材配布サイトをサクッと公開する
まずはサーバーとドメインを用意しよう
まずは、wordpressで自分の素材配布サイトを作る際に
必須のサーバーと独自ドメインを用意します。
サーバーは、簡単に言ってしまえば常時稼働しているPCのことです。
wordpressで素材配布サイトを作ったり、動かしたりするにはこのサーバー(PC)が必要になります。
またドメイン(独自ドメイン)は、素材配布サイト利用者があなたのサイトに辿り着くために必要となります。
ブラウザ(ChromeやSafari、Microsoft Edge等)の上部もしくは下部に、
https://○○○.com
等の文字があるかと思います。
この○○○.comの部分がドメインになります。
このサイトでいうと、shinsanworks.com がドメインとなります。
私、「しんさんわーくす」と申しますが、
「shinsanworks.com」
というドメイン名からもわかるように自分オリジナルの名前のドメインを使っています。
自分で好きな名前をつけて取得しているので、独自ドメインというのですね。
これから、wordpressで素材配布サイトを作る方は、
今後ずっと素材配布サイトを運営していくことになります。
素材配布サイト利用者にも覚えてもらいやすい、
独自のドメインを取得したいですね！
さて、このサーバーとドメインですが、有料サービスを利用しているので、お金がかかってしまいます。
残念ながら今回のサイト構築で唯一お金がかかるのがサーバーとドメインです。
実際にはお金をかけないで、サーバーやドメインを用意する方法はあるかとは思いますが、
無償版ならではの制限であったり、今後長く活動を続けていくことを考えるとサーバー代やドメイン代はケチらない方が良いです。
サーバーのレンタル方法やドメインの取得方法については、色々なサイトで既に紹介されているので、
詳細についてはそれらのサイトも参考にしてみてください。
ただ、個人的にレンタルサーバーやドメイン取得業者を選ぶ際にこれだけは気をつけた方がいいなと思う点が2つあるので紹介します。
ドメイン取得サービスを選ぶ際はwhois情報公開代行に対応しているか調べる
whoisって何？
といいますと、ドメインの保持者は氏名や住所、電話番号などの情報を一般に公開しないといけない
というルールが世界中のドメインを管理している団体によって決められているんですね。
なので、whois検索のサービスを使用すれば、そのドメインが誰によって管理されているのか分かってしまうのです。
でも、そんな個人情報をネット上に晒すのは怖いじゃないですか？
そんな人のために、ドメイン取得業者ではwhois情報公開代行のサービスを行ってるんですね。
これは、ドメイン保持者の情報をドメイン取得業者の名義で代わりに登録・公開してくれるサービスです。
大体どの業者であってもwhois情報公開代行に対応しているかと思いますが、念のためドメイン取得の先に確認しておいた方が良いです。
ちなみに私は、お名前.comを利用しています。
レンタルサーバーはパフォーマンス重視で選ぶ
レンタルサーバーも色々サービスを提供している業者がいます。
値段はピンキリで中には、こんな安くて大丈夫？ってくらい格安の業者もあると思います。
出来るだけ安いサービスを利用したい！
という気持ちは分かりますが、選ぶ際はサーバーのパフォーマンスにも注意した方が良いです。
文章中心のブログサイトを作りたい！
という方ならそんなに気にする必要もないかもしれませんが、今回作りたいのは素材配布サイトです。
訪問者が快適にサイトを利用できるように、
色々機能を追加したり、データ量の多い素材(ファイル)をサーバーにアップすることになります。
格安のサーバーをレンタルしたものの、いざサイトを作ってみたら劇遅でとても使う気にならない！
という事態になってしまったら、お金も時間も無駄になってしまいますからね。
なので、維持費だけでなく、パフォーマンスやストレージ等も考慮してサーバーを選んだ方が良いです。
ちなみに私はXサーバーを利用しています。
Xサーバーは、後ほど紹介するwordpressも簡単に導入できるので、オススメです。
サーバーに独自ドメインを設定しよう
独自ドメインを取得し、サーバーのレンタルも完了したら、次はサーバーに取得したドメインを登録します。
私はエックスサーバーを使っているので、
エックスサーバーの場合はサーバーパネルにログインし、パネルから設定をちょこっと行うだけで、登録は完了です。
かなり簡単に登録作業ができます。
詳細な手順については、エックスサーバー公式が分かりやすく説明しているので、設定の際はそちらをご覧ください。
エックスサーバーでブログを始めよう！初心者でもわかるWordPressブログの始め方
エックスサーバー以外を契約された方は、独自ドメインの登録方法でググってみてください。
有名どころのレンタルサーバーであれば、ドメインの設定方法やWordPressのインストール方法は記事が出てくると思います。
サーバーにwordpressをインストールしよう
独自ドメインが設定できたら、次はサーバーにwordpressをインストールしていきます。
インストールといってもこれも、エックスサーバーの場合はとても簡単。
サーバーパネルでぽちぽち操作していくだけです。
wordpressのインストール方法も、エックスサーバー公式が手順を公開しているので、
設定の際はこちらをご覧ください。
エックスサーバーでブログを始めよう！初心者でもわかるWordPressブログの始め方
ちなみに、エックスサーバーのサーバーパネルは、ブラウザ上で操作を行います。
なので、スマホからでも独自ドメインの登録やwordpressのインストールができてしまうのですね。
WEBサイトを作って公開するなら、自分でサーバーを立てて一から設定していくって手もあるのですが、
そうするとどうしてもPC操作が必要になり、スマホだけで構築を完結させることが難しくなります。
そういった意味でも個人的には、レンタルサーバーをオススメします。
なぜ、wordpressを使うの？
さて、wordpressをレンタルサーバーにインストールする所まで進みましたが、
そもそもなぜwordpressを使うかについても少し触れたいと思います。
なぜ、素材配布サイトでwordpressを使うのか？
結論から先に申し上げると
- 素材配布サイトを効率的に構築できるテーマやプラグインが豊富だから。
- 素材配布サイトに限らず、サイトの作り方の情報がたくさんあるから。
WEBサイトを公開するなら、別にWordPressに限定しなくても良いかなと思います。
その他のCMSを使ったり、HTMLやCMS、Javascriptが書けるのであれば
自分で一からコードを書いて作るのもありです。
ただ今回私が素材配布サイト構築で重視したのが、
- 手間をかけずに素早く公開まで進める
- プラグイン(拡張機能)が豊富であること
です。
「手間をかけない」ということについては、
移動中や待ち時間等のスキマ時間だけを使ってサイト作ると決めていたため、
素早くサイトの構築ができることを重視しました。
プラグインについても、
素材配布サイトは素材のダウンロード機能であったり、
お問い合わせフォームであったりと様々な機能が必要です。
それらを実装させるために、いちいちプログラムを書くのは時間がかかりますし、初心者だとあまりに大変です。
今回の素材配布サイトを手早く公開まで進める意味でも、
拡張機能を手軽に実装できるプラグインがたくさんあるwordpressがうってつけなのですね。
まずは、wordpressで素材配布サイトを公開するとこまでこぎつける。
そのあと気になった部分については、修正方法や機能の作り方を調べて
自分の素材配布サイトを少しずつ改善していきたいなと思いましたので、
今回はwordpressを採用しました。
サイトをSSL暗号化しよう
さて、話を戻しまして、
先程までの行程でレンタルサーバーにwordpressをインストールする所まで完了しました。
続いては、サイトをSSL暗号化する設定を行っていきましょう。
SSL暗号化についてですが、
みなさんがChromeやMicrosoft Edge、safariなどのウェブブラウザを使って何か調べる際、どのようにして検索するでしょうか?
きっとGoogle等の検索窓に、調べたいキーワードを入れて、関係ありそうなサイトを探すかと思います。
では、検索結果で出てきたサイトのタイトルの上部を見てみてください。
「http://」もしくは「https://」と書かれた文字列がどのサイトにもあるのが分かると思います。
この「http://」もしくは「https://」で始まる文字列がサイトのURLです。
さて、もっとよく見てみると、「https://」から始まるサイトがなんか多いかも
ということに気づくかと思います。
サイトをSSL暗号化するとはどういうことかざっくり言ってしまうと、
サイトのURLに「https://」を使用するよう設定すること
です。
もう少し踏み込んで書くとSSLはインターネット上での通信を暗号化する技術です。
SSL暗号化がされていないと、
あなたの素材配布サイトに訪れた人の通信が他の人に盗み見される可能性もあり、
訪問者は安心してあなたのサイトを利用することができません。
私は、別に「http」や「https」なんて意識したことがなかったし、他の人もそんな気にしないんじゃない？
って思われるた方もいるかもしれません。
しかし、SSL暗号化されてないサイトにアクセスする際、警告文を表示するブラウザもありますし、
暗号化することでSEO対策(Googleの検索上位に引っかかりやすくする対策)にもなります。
SSL暗号化自体もXサーバーであれば、簡単に設定ができます。
なのでSSL暗号化は絶対にやっておきましょう。
XサーバーでのSSL暗号化設定方法は、こちらの記事がわかりやすいので、参考にしましょう。
SSL暗号化は、自分でサーバーを立ててサイトを作ろうとすると
結構設定が大変だったりするので、Xサーバー等のレンタルサーバーの機能で実装できるのは
めちゃくちゃありがたいですよね。
サイトにパスワード認証を設定しよう
続いてサイトにパスワード認証を設定します。
こちらは、必要に応じて行ってください。
サーバーパネルで、サイトにパスワード認識をかける設定をしていきます。
これは、あなたのサイトに訪れた人がいても、ID・パスワードを入れないと続きを見られませんよ〜
という設定です。
なぜ、このような認識パスワードを設定するかというと、
構築中の素材配布サイトに誤って誰かが訪れてサイトを見られないようにするためですね。
構築中限定でパスワード認証をかけてサイトが完成したら、認証設定を外して正式に公開します。
とは言うものの、まだ完成してもいないサイトには基本的に人は来ませんから、そこまで気にする必要はないかもしれません。
なので、こちらのパスワード認証設定は必須ではありませんが、やらないよりはやっておいた方が何かと良いこともあるといった感じです。
wordpressのテーマを設定しよう
さて、wordpressのインストールも終わり、諸々の設定をサーバーパネルで行いましたら、
いよいよ次はwordpressでの素材サイト構築作業に移ります。
ここからが、wordpressを用いた素材配布サイトの作り方の肝となる部分です。
まずは、インストールしたwordpressの管理コンソールにログインしましょう。
wordpressの管理コンソールでは、色々と制作項目があるのですが、まずはテーマの変更から行います。
テーマの変更とは、つまりはサイトのデザインを設定するいうことになります。
wordpressをインストールするとデフォルトのテーマが設定されていますが、
素材配布サイトのデザインとしては使いにくいので、使いやすそうなテーマに変更します。
wordpressは、有志の方が作成したテーマが豊富なのでお好みのテーマを探し放題というのも魅力の一つです。
私の場合はシンプルなテーマにしたかったので、「Lightning」というテンプレートを採用しました。
テンプレート選びでは、こちらのサイトを参考にさせていただきました！
私が使っている「Lightning」以外にも素材配布サイトにオススメのテーマテンプレートを紹介されているので、
是非そちらも参考にしてみてください。
素材サイトに必要な機能実装をしよう
使用するwordpressのテンプレートが決まったら、
次は素材配布サイトに必要な機能をサイトに追加していきましょう。
ここでいう必要な機能というのは、
- 素材データのダウンロード機能
- お問い合わせフォーム
- 素材検索機能
等です。
機能を追加すると聞くと難しそうな感じがしますが、基本はwordpressのプラグインをインストールしてそれぞれ設定をしていくだけです。
私のサイトでは、素材検索機能とお問い合わせフォーム以外は全てwordpressのプラグインで機能を実装しました。
プラグインを使用しなかった、素材検索機能とお問い合わせフォームについても後ほど解説しますね。
インストールしたプラグイン
まずはwordpressにインストールしたプラグインについてご紹介します。
AddToAny Share Buttons (シェアボタン)
これは、サイトにSNSのシェアボタンを追加できるプラグインです。
Twitter、インスタグラムはもちろんLine等のボタンもあります。
サイトが成長してファンが増えれば、素材をシェアしてもらえる可能性も出てくるので、SNSシェアボタンは是非設置しておきたいですね！
BackWPup
サイトのバックアップを取るプラグインです。
素材配布サイトを利用しやすくするために、サイトを公開した後も機能の追加やデザインの変更等を行っていきます。
その際に、プラグインの相性が合わなかったり、大事な設定ファイルを消しちゃったりした場合でも元の状態に戻せるようにバックアップは定期的にとっておきましょう。
Classic Editor
これは、WordPressの編集画面(エディター)を旧バージョンに戻すためのプラグインです。
wordpressは、今はブロックエディターという編集画面が採用されているのですが、以前は編集画面が全く違うものだったのですね。
私は、旧エディターで慣れてしまっていて、新しくブロックエディターの使い方を学ぶのが大変だと思ったので、このプラグインを入れてます。
ブロックエディターの方が使い勝手も良くなっているようなので、これからwordpressを使い始める人は、新しいブロックエディターで慣れてしまった方が良いと思います。
Simple Download Monitor
こちらは、素材配布サイトのメイン機能である、ダウンロード機能を追加してくれるプラグインです。
ダウンロード機能追加のプラグインは、
いくつかありますがシンプルなものが良かったのでこちらのプラグインを採用しました。
ダウンロードボタンの設置方法も簡単で、
- wordpressのメディアから配布したい素材データをアップロード
- Simple Download Monitorの「add」から配布したいデータを先程アップロードしたメディアの中から選ぶ
- 公開を押して、ショートコードを配布ページに貼り付けるだけで、ダウンロードボタンが設置されます
とても簡単に使えるし、素材毎にダウンロードされた数が分かるので便利です。
一つだけ難点をあげるとすると、
ダウンロードボタンが自分のサイトのデザインと比較すると小さいかなぁ
というところです。
もっと利用者に分かりやすくするために、大きいサイズのボタンにできればいいなと思っております。
これに関しては、自分が設定項目を見落としているだけで、改善できるかもしれないのでちゃんと調べてみようと思います。
もし、改善方法が分かったら共有しますね。
TinyMCE テンプレート
これはその名の通り、投稿ページのテンプレートを作ることができるプラグインです。
素材を配布する際、1素材につき1ページのような形で公開することになるかと思いますが、大体は
- サンプル
- ダウンロードボタン
- 素材に対するコメント
みたいな感じで、決まりきった型があるかと思います。
それを毎回入力するのは大変なので、このようなテンプレート化できるプラグインを入れて手間を省きます。
サイトは、作るよりも更新し続ける方が大変なので、少しでも更新にかかる負担を減らしていきましょう。
WebSub (FKA. PubSubHubbub)
SEO対策(Google検索で見つけてもらいやすくするための対策)のプラグインです。
Googleのインデックスが早くなるようです。
XML Sitemap & Google News
こちらもSEO対策のプラグインです。
配布素材の検索機能を追加するPHP
プラグインによる機能追加とは別に、
素材検索機能を実装するために、wordpressのテーマのPHPファイルも編集しています。
素材配布サイトなので、当然利用者は欲しい素材があってサイトに来てくれるはずです。
なので、あなたの素材配布サイトにある配布素材を絞り込む機能は必須です。
PHPとは、ざっくりいうとwordpressのページを表示するためのプログラミング言語のことです。
プログラミングと聞くと難しそうと思われるかもしれませんが、
今回行った検索機能の追加は既存のコードをほぼコピペしただけなので
プログラミング初心者であっても取り組めるかと思います。
さて、実装した具体的な機能についてですが、
wordpressでは素材投稿ページに
「楽しい」、「爽やか」、「暗い」 等
のイメージ検索用のタグをつけられるのですが、それを絞り込むためのタグ検索機能を追加してます。
追加するPHPとCSS(WEBサイトを装飾するための言語)はこちらのサイトを参考にしました！
PHPを編集する際の注意点ですが、編集する前は必ずバックアップを取るようにしましょう。
編集の際に、重要なコードを誤って消してしまって自力で修正ができないということが起こっても
バックアップがあれば前のサイトの状態に戻すことができます。
もし、PHPの編集は難しそうだなと感じる場合は、
良さそうな検索機能を持つプラグインを探すのも一つの手だと思います！
こちらの記事で、素材配布サイトの検索機能を実装できそうなプラグインについて
解説されているので参考にしてみてください。
使用したその他サービス
プラグインとPHPの追加以外だと、お問い合わせフォームとしてGoogleフォームを使用してます。
もちろん、お問い合わせフォーム用のプラグインはたくさんあるのですが、
先程のPHP追加の際にCSSもサイトに追加したのですが、
それの影響でお問い合わせフォームのプラグインを使用すると入力フォームの表示崩れが起きてしまいました。
原因となっているCSSを修正すれば良いのですが、
一つ一つコードを読み取って原因となっている部分を特定するのは面倒だし、
そこにあまり時間をかけたくなかったので別の方法を探しました。
そこで見つけたのが、Googleフォームです。
Googleフォームはアンケート機能として使われることが多いと思いますが、
お問い合わせフォームにも応用できます。
Googleフォームをお問い合わせフォームとして利用する方法は
こちらの記事が分かりやすいです。
Googleフォームでお問い合わせフォームを作成するには？手順から自動返信の設定まで解説
基本的には、私の素材サイトでも記事に書かれているような設定を行いましたが、
フォームのサイズをデフォルトのまま使うと、
スマホでサイトを見た時画面をはみ出してしまっていたので、サイズだけ調整しています。
パスワード認識を解除してサイトを公開しよう
ここまでこれたら、素材配布サイトはほぼ完成です。
あとは、プロフィールや利用規約等の体裁を整えてサイトを公開しましょう。
サイトにパスワード認証をかけていた人は、公開前にパスワード認証を解除するのを忘れずに！
まとめ
今回は、wordpressを使った素材配布サイトの作り方について解説しました。
「素材配布サイトの作り方」とググってこの記事にたどり着いてくれた方は、
きっと音楽やイラスト、写真等の素材をすでに作っていて、
自分のサイトがほしい人だと思います。
大事なのは、素材を作ってそれを配布することなので、
wordpressのテーマやプラグイン等便利にショートカットできる部分は、
存分に活用してサクッと素材配布サイトを公開してしまいたいですよね！
今回の「wordpressによる素材配布サイトの作り方」の記事が
みなさんの素材配布サイト制作のお役に立てると嬉しいです。
