このサイトの作り方

ホームページを作るにあたって、何を発信するのか明確にしなければなりませんので、まずはコンセプトを考えました。
自分の場合は「羊毛フェルト作家としての情報発信」が目的でした。

コンセプトが決まれば、実際にどのようなページが必要かざっくりと考えました。
・トップページ
・作家紹介のページ
・販売やオーダーに関するページ
・作品を展示するギャラリーページ
・情報発信のためのブログページ
・ワークショップについてのページ
・羊毛フェルト初心者向けのページ
・お問い合わせページ
当初はこんな感じでした。

実際にページを作り始める前にやりたいことを箇条書きにしておくと、何がどれだけ必要なのかが分かりますので、サイト全体のイメージをつかみやすくなると思います。

ホームページを持つには、ウェブサーバーとドメインが必要になります。
ウェブサーバーとは、簡単に言うとホームページに必要な材料（ファイルや画像など）を置いておく専用のPCみたいなものです。
ドメインとは、ホームページの住所となるURLの基本部分（このサイトで言えば “omonitori.main.jp” 部分）です。

インターネットの簡単なしくみは、自分の端末からインターネット回線を通じてサーバーという専用PCの中のURLという住所にあるものを要求すれば、そのURLと一致したページが表示されるというイメージでしょうか。

ということで、自分のホームページを見られる状態にするには、必要なものをサーバーへ設置する必要があります。

サーバーは、有料、無料、自作という選択肢がありますが、素人に自作はほぼ無理なので有料か無料かになります。
無料サーバーは、運営会社の広告が入ったり、容量が少なかったり、利用できるプログラムなどに制限がある場合が多いです。
有料サーバーでも利用料によって性能や機能が違いますので、自分のやりたいことやサイトの規模、予算によって決めるのが良いと思います。
ドメインは基本的に有料ですが、有料サーバーを契約すればドメインが付いてくる場合もあります。
最近はスマホで見る人が多いですし、QRの普及でURLを直接見たり入力したりする機会も少ないので、それほどドメイン名は気にしなくてもいいような気はします。

自分の場合、
・規模はそれほど大きくないので容量はそこそこで良い
・できれば自由度が高い有料サーバーにしたい
・可能な限り安くしたい
・そこそこ有名なサーバー会社にしたい
・ワードプレスで作りたい
という感じだったので、あまり選択肢はなかったのですが以下にしました。

▼ロリポップ レンタルサーバー
https://lolipop.jp/

ワードプレスが使いたかったので「ライトプラン」で契約しました。
利用料金も安くて容量も十分、ドメインも付いています。

新サイトを作ろうと思ったときに色々と調べた結果、ワードプレスが無料で簡単に制作でき、テンプレも豊富でカスタマイズもしやすく、世の中のサイトもけっこうな数がワードプレスでできているという事を知りました。
全く触ったことはなかったのですが、無料で簡単らしいのでワードプレスで作ろうと割と安易に決めました。

通常はワードプレスのプログラム本体を公式サイトからダウンロードし、ウェブサーバーに自分でインストールしなければならないようなのですが、契約したロリポップには「ワードプレス簡単インストール」というものがあって、ボタン一つでワードプレスをインストールして使える状態にしてくれました。
なので、ワードプレスの準備自体は苦労せず簡単にできました。

▼自分でワードプレスをダウンロードする場合（無料）
https://ja.wordpress.org/

専門知識がある程度必要だと思いますが、ローカル環境でワードプレスを動かすことも可能です。
ここでは詳しく紹介しませんが、ローカルでテストしたい方はチャレンジしてみても良いかもしれません。
▼local
https://localwp.com/
▼XAMPP
https://www.apachefriends.org/jp/

さて、ワードプレスが使えるようになったので、まずはデザインの基本となるテーマ（テンプレート）を選択します。
ワードプレスの場合「テーマなし」というのは無理みたいなので、必ずテーマを選択する必要があるみたいです。
ということで選択しなければならないのですが…

「うーん、どれがいいのか分からん」

というのが正直な感想でした。
選択できるテーマは大量にありますし、何を基準に選択すれば良いのかも分かりませんでした。
なので、どれが人気なのか調べてみることにしました。
そうすると、根本的なことが色々と分かってきました。
・基本的にブログのシステムであること
・企業サイトのようにするには、それに向いているテーマを選択しなければならないこと
・通常は管理ページからテーマを選択するが、外部からインストールも可能であること
・有料テーマもあること

色々と分かって実際どうしようかと考えたのですが、初めて触りますし、困ったときに情報の多いテーマが良かったので以下にしました。

テーマ名：Lightning（ライトニング）
公式ページ：https://lightning.vektor-inc.co.jp/

検索エンジンで「ワードプレス おすすめのテーマ」などで調べると、上位にランキングされる人気で無料のテーマです。
ワードプレス管理ページの「外観」→「テーマ」→「新しいテーマを追加」から検索してインストール可能です。

テーマが決まったので、あとは実際に作っていきます。
で、少し作り始めたのですが…

「うーん、どうすればいいのか分からん」

と、テーマの時と同じような状態になったので、実際に作っている動画はないかとYoutubeで探してみました。
すると、たくさん出てきたので、まずはその動画を見ることから始めました。
→ テーマ「Lightning」を使ったサイトの作り方動画はこちら

そして、色々と見ていくうちになんとなく分かってきました。
・固定ページと投稿ページというものがある
・固定ページは通常の自由に構築できるページで、投稿ページはブログ記事を投稿するページ
・プラグインという外部プログラムをインストールすることで、色々と（問い合わせフォームとか）拡張できる
・ブロックエディタという機能別のブロック（テキストを入力するブロック、画像を設置するブロックなど）を選択・設置してページを作る
・プログラム（HTML、CSS、JavaScript、PHPなど）の知識は無くてもほぼ大丈夫
と、こんな感じでしょうか。
とにかく、特殊なことをしなければノーコードで全て作ることが可能のようです。

でも、ホームページ制作に関する知識（専門用語・リンク設定・メールフォーム・画像処理など）がある程度ないと、いくらノーコードで作ることができるとしても、思い描くサイトにするには相当時間がかかるのではないかと思います。
また、プラグインで色々と拡張できるのは良いのですが、逆に言うとデフォルト状態ではプラグインで拡張しなければどうにもならないくらいシンプルなので、これも素人には難しい部分ではないかと思います。

とは言え、ノーコードでホームページを完成させることのできるCMS（Contents Management System）では人気のワードプレスなので、何か困っても調べればたくさんの情報が出てきます。
やる気と根気さえあれば、それほど心配しなくてもなんとかなるような気はします。

なんとなく作り方が分かってきたので、あとは実際に触りながら覚えていこうと思います。
ワードプレスはどんなテーマを選択しても、ページを作る場合は基本的にブロックエディタと呼ばれる編集画面で「機能別のブロック」を設置し、その機能ブロックごとに編集していくことを繰り返します。

例えば、
「テキストブロック」を設置すると、主にテキストの大きさやカラーなどを設定できる。
「画像ブロック」を設置すると、画像に枠を追加したり画像自体の形を変えたりできる。
「ボタンブロック」を設置すると、ボタンの形や大きさ、カラーなどを設定できる。
他にも「カラムブロック」「スライダーブロック」「テーブルブロック」など、色々なブロックがあるので、それを設置して編集すれば簡単にページが出来上がっていきます。

ということで、まずはトップページを作っていくのですが、その前に色々と画像が必要になります。
サイトロゴ画像、スライドショー用の画像、各コンテンツ用の画像など、事前に作っておかなければなりません。
また、大まかなトップページのデザインを紙に書いておくと、行き当たりばったりで作るよりは早いと思います。

イメージと画像が用意できればあとは作るだけです。
まずはサイトロゴの設定、メニューの設定、フッターの設定など、サイト全体に共通する設定をします。
詳しくは説明しませんが、最初は「どこで何を設定するのか混乱する」と思いますので、この辺は制作動画や図解しているサイトを見た方が理解しやすいのではないかと思います。
次に、トップページ用の固定ページを作り、スライドショーの設定、各コンテンツの紹介など、どんどんブロックを設置・編集していきます。
ほぼ見た目で作ることができるので、デザインが決まっていれば割とサクサク作ることができます。

最初は設定するものが多くて時間がかかると思いますが、トップページはホームページで一番最初に表示される「顔」となるページなので、それなりに時間をかけてしっかり作った方が良いと思います。

トップページと同じように「固定ページ」として作ることができる以下のページを作っていきます。
・作家紹介のページ
・販売やオーダーに関するページ
・作品を展示するギャラリーページ
・羊毛フェルト初心者向けのページ

基本的にブロックエディタを使って作るのですが、デフォルトで入っているブロックの種類では思ったデザインにならない場合が出てきます。
そういう時は「プラグイン」と呼ばれる外部プログラムをインストールして機能を拡張することができます。

自分の場合は以下をインストールしました。
・VK All in One Expansion Unit
・VK Block Patterns
・VK Blocks
・CoBlocks

どれもワードプレス管理ページの「プラグイン」→「新規プラグイン追加」からインストールできます。

お問い合わせページとしてよくあるのがフォームを使った形式です。
デフォルトのワードプレスにはフォーム機能がないので、プラグインのフォームを入れるしかありません。
これまた色々とあるのでどれがいいのか調べた結果、以下をインストールしました。

MW WP Form

ワードプレス管理ページの「プラグイン」→「新規プラグイン追加」からインストールできます。

これにしたのは、送信内容の確認ページが標準で装備されているからでした。
フォームの作り方やメール内容の設定なども特に難しいという感じはなかったのですが、HTMLがある程度分からないと難しいのではないかと思います。
難しい場合は、デフォルトで入っているフォームを利用すれば割と簡単にできるかもしれません。
細かい部分で不満があって100％満足とはいきませんが、おおむね希望通りのフォームになったと思います。

このページを作るのが一番苦労したのですが、このページでやりたかったのが「オンライン予約」でした。
予約ページでやりたかったことは以下です。
・カレンダーから希望の日付を選択して予約ができる
・定員を設定できて、設定した定員になると自動的に予約不可になる
・予約内容のメールが自動的に送信される
・予約者のデータを見ることができる
・開催日の１週間くらい前に予約内容の再確認としてメールを送信する（リマインダー）
・将来的に有料コンテンツとしての設定も可能

できれば無料で作りたかったしワードプレス上で完結したかったので、まずはプラグインを探してみました。
候補に上がったのが以下です。