解決出来る課題は、
- HTMLとか、難しいことは分からないけどオシャレなウェブサイト（ホームページ）を自身でつくりたい！
- そんなに予算はかけられないけど、カッコいいウェブサイト（ホームページ）をつくってほしい
- ウェブサイト（ホームページ）の制作を業者さんに頼んだけど、こちらが思うような出来栄えになっていない・・・
そんなウェブサイト（ホームページ）のお悩みは、この世界にウェブサイト（ホームページ）というものが誕生してからずっと続いています。
それはこの先、さらにテクノロジーが進歩したとしても、情報とお金と人間関係が微妙に絡まっているこの課題は、まだしばらく解決されないように思います。
だからこそ、事業家のあなたには、適切な情報を得ていただき賢く振る舞ってほしいと切に願っています。
「Amazonでウェブサイト（ホームページ）制作の本を買ったけど難しすぎて…」
「制作業者さんから上がってきたウェブサイト（ホームページ）が微妙で…」
ウェブサイト（ホームページ）は、今では事業活動に欠かせないアイテムになっています。しかし、多くの事業家は自身のウェブサイト（ホームページ）の出来栄えや運営方法に満足していないのではないでしょうか？
そして、それを改善しようと、ご自身で手を加えたり、別の制作業者に相談したりと、さまざまな方法を試されている方が多くいらっしゃいます。
しかし、なかなか思うようにいかず、苦悩されている方も少なくありません。
これは、前述の通り、この世界にウェブサイト（ホームページ）が登場して以来、尽きることのない悩みになっています。
とはいえ、解決策がないわけではありません。WordPressを上手く使うことで、技術面は解決することをお伝えしたく、この記事を書かせていただきました。
つくりながら組み立てて、組み立てながら考えるのがウェブサイト（ホームページ）
ウェブサイト（ホームページ）制作会社に勤めていた時に、自身で始めた新規事業のウェブサイト（ホームページ）を作ったのが、初めてのウェブサイト（ホームページ）でした。
当時は、ウェブサイト（ホームページ）の黎明期で、さまざまな企業が自社のウェブサイト（ホームページ）を作り、公開し始めた頃でした。
自身も関わりのある企業のウェブサイト（ホームページ）構築を請け負い、相手の担当者とやり取りをしながら進めていましたが、いつもウェブサイト（ホームページ）づくりの“難しさ”に直面していました。それは・・・
つくりながら、内容やレイアウトが変わっていくのがウェブサイト（ホームページ）だということ
例えば、打ち合わせで紙やパワーポイントなどのツールを使ってウェブサイト（ホームページ）のイメージを作っておいても、実際にウェブサイト（ホームページ）が出来上がっていく過程で、大幅な修正が入ることが少なくありません。
なぜそうなるのかを観察していると、それは、紙に書いたものと、実際にディスプレイ越しに見るものとでは、全く違う印象になることが少なくないためです。その結果、依頼者はディスプレイに表示されたウェブサイト（ホームページ）を見て、初めて具体的なイメージが湧いてくるようなのです。
そのため、変更が発生するたびにコードを書き直し、レイアウトを組み直す作業が発生しました。酷い時は、「これって、永遠に終わらないのではないか？」と思うことさえありました。
当然ですが、そのたびに制作者が動くことになり、その費用が発生してトラブルに発展することも少なくありませんでした。
WordPress登場以前の悩み
WordPressがなかった時代に独自のウェブサイト（ホームページ）を作ろうと思えば、HTMLやスタイルシートといったウェブページの制作に必要なプログラミング言語をマスターするしか方法がありませんでした。
当時の私は、その知識も技術も持ち合わせていなかったため、ノートに描いていたイメージと実際の仕上がりが随分違って見えました。そして、それはクライアントも同じ気持ちだったようです。知識がなかったため、仕上がったウェブページの微調整を制作者に上手く伝えられず、結局納得がいかない、イマイチなウェブサイト（ホームページ）が出来上がり、何度も悔しい思いをしました。
また、前述した通り、わずかな修正であっても制作者に依頼する費用は決して安くはありませんでした。
そんな時に、「自分の手で思うようなサイトを作れたら、どんなにいいだろう」と考えていました。
そんな時、WordPressというアイテムが世界に登場し、誰でもウェブページを自由に組み立てられることを知り、感動しました。
WordPressを使ってウェブページを組み立てる
そもそも、「ウェブサイト（ホームページ）」とは、複数の「ウェブページ」の集合体のことをいいます。つまり、「ウェブサイトを作る」ということは、「ウェブページを1ページずつ作っていく」ということになります。
これらは、WordPressの編集機能を使うことで、誰でも思い通りのウェブページを組み立てていくことができるのです。
ここでは、そんなWordPressを使ってウェブページを作る、とてもオーソドックスな手順を詳しく解説させていただきます。
1名称はGutenberg
WordPressでウェブページを作る際は、「ブロック」を組み合わせながら作るのが、最新の手順です。
このブロックを組み合わせながら作る機能のことを、WordPressの新しい編集画面「ブロックエディター」、通称Gutenbergといいます。
ちなみに、Gutenbergというのは、活版印刷術を発明したヨハネス・グーテンベルクのことで、これが由来になっています。
2何もないところに文字と画像を配置してページを整えていく
ここからは、新しくページを作成し、そこに文字や画像を配置してレイアウトを整えるところまでをお伝えします。
まず、WordPressにログインし、「投稿」から「新規追加」をクリックします。
3アナウンスが表示される
初めて「新規追加」から新しく「投稿」のページを追加すると、「ブロックエディターにようこそ」といったアナウンスが表示されます。その場合は、ひとまず「閉じる」ボタンを押して案内を消しておきましょう。
4ページに“タイトル”を付ける
最初にすることがページの“タイトル”付け。
ページにタイトルを付けておかないと、途中で下書きを保存したい時に保存ができないため、まず最初にタイトルを付けましょう。なお、付けたタイトル名は、後で変更が出来るので、ここでは仮タイトルでも構いません。
5“ブロック”を追加
タイトル付けが終わったら、〝ブロックの追加〟に進みます。
〝ブロック〟というのは、テキストや画像の入れ物です。
最初にブロックを用意して、そこにテキストや画像を配置して、ウェブページにしていくという流れです。
この段階でイメージが沸かないかもしれませんが、まずは一通り取り組んでみましょう。
ブロックの追加は、画面右側にある『＋』ボタンから追加します。『＋』をクリックします。
6“ブロック追加”のアナウンス
“どのようなブロックを追加するか？”のアナウンスの小窓が開くので、“案内の小窓”の中から『すべて表示』をクリックします。
7“案内パネル”を開く
「案内パネル」の中から最初に、『段落（¶）』を追加します。『段落（¶）』は文章の基本ブロックなので、使用頻度が高いブロックのひとつです。
幾つかの文章がひとまとまりになったものを『段落（¶）』といいます。つまり、〝段落ブロック〟をつくることで、ここにはひとまとまりの文章を入れるということになります。
8追加した『段落』に文章を記述
『段落』ブロックが追加されたら、そこに文章を記述します。
9記述した文章の下に新たなブロックを追加
段落ブロックに文章の記述ができたら、記述した文章の下にある『＋』の「ブロックを追加」をクリックして、新たなブロックを追加していきます。
ここでの手順も、『＋』の「ブロックを追加」をクリックし、案内の小窓から「すべて表示」をクリックして、「案内パネル」を開いて進めます。
10“画像ブロック”の追加
次に追加するブロックには、画像を入れたいので「画像ブロック」を選択（クリック）します。案内パネルの「メディア」の項目から「画像」を選択（クリック）すると、コンテンツの中に「画像ブロック」が追加されます。
11追加した“画像ブロック”に画像を挿入
今回、画像はURLから挿入するので、画像ブロック内の「URLから挿入」をクリックして、画像のURLを貼り付けます。
ちなみに
ここでは、URLから画像を挿入していますが、画像の挿入方法は、WordPressに直接アップロードする方法が一般的です。
13挿入した画像の下に更に画像を挿入
挿入した画像の下の『＋』をクリックして、更にブロックを追加していきます。
14次は、“アナウンスの小窓”から“画像”を選択してみる
次は、「アナウンスの小窓」から「画像」を選択してみましょう。
この「アナウンスの小窓」には、よく使うブロックが表示される仕組みになっており、先程「画像ブロック」を追加したので、「画像ブロック」が表示されています。慣れてくれば、この「アナウンスの小窓」から次のブロックを追加していくと、楽に作業を進められます。
15URLから画像を挿入
今回も画像はURLから挿入するので、「URLから挿入」をクリックして、画像のURLを貼り付けます。
16画像の下に新たな画像が追加された
先に挿入した画像の下に、新たな画像が追加されました。
ウェブページというのは、このようにひとつひとつコンテンツ（文章や画像）を作り、積み上げて完成させていきます。
17スクロールして2枚の画像を確認
スクロールすると、2枚の画像が確認できます。
18“見出し”を追加
次は「見出し」の追加です。「見出し」とは、その記事の内容が一目でわかるように、文章の前に示す簡単な言葉のことです。
挿入した画像の下の『＋』をクリックして、「案内の小窓」の中に「見出し」ブロックがあれば、そこから追加しても構いません。無ければ、「案内パネル」を開いて「見出し」ブロックを追加します。
19“見出し”の下には“段落”を追加
追加された「見出し」ブロックには、見出しを記述します。
そして「見出し」には「段落」がセットになるので、見出しの下に新たに「段落」ブロックを追加しておきましょう。
20“段落ブロック”の追加
『＋』でブロックを追加し、「アナウンスの小窓」の中に「段落ブロック」が表示されているので、「段落」をクリックして追加します。
21画面上部のメニューからブロックを追加
追加された段落ブロックには、本文を記述しておきます。
次は、「表」を追加していきます。今回は、画面上部のメニューから新たなブロック「テーブル」を追加してみましょう。画面上部にある『＋』を選択（クリック）します。
22テーブルの追加
“案内パネル”が開くので、“テーブル”ブロックを選択（クリック）して先程、記述した本文の下に“テーブル”を追加します。
ここでの“テーブル”というのは、“表”のことです。
23“カラム数”と“行数”を決める
“テーブル”ブロックが追加されたので、“カラム数”と“行数”を決めます。
“カラム”というのは、“列”のことを指します。ちなみにここで決めたカラム数も列数も後から追加したり削除したりすることができるので、仮で決めておいて問題ありません。
24表を完成させる
追加した“表”に内容を入れて表を完成させます。
25実際に表示される画面の確認
編集画面の向かって右上にある『更新』をクリックします。
ちなみにここは、まだ、一般公開していない時は『公開』となっています。
26『更新』をクリック
『更新』をクリックすると、編集画面向かって左下に、“投稿を更新しました。 投稿を表示”といった案内が表示されます。
27“投稿を表示”をクリック
“投稿を表示”をクリックします。
28ウェブページの表示確認
実際に、ネット上に一般公開されて閲覧可能になったウェブページが表示されました。
29画面をスクロール
スクロールして、先ほど挿入した画像が表示されるのを確認します。
30見出しに本文に表の確認
見出しや本文、表の表示も確認しておきます。
以上が、WordPressのブロックエディターである、Gutenbergを使ってウェブページを組み上げていく基本的な手順です。
要は、ページに“ブロック”を配置して、その中にタイトルや段落や画像や表などを入れていくというのが、このGutenbergの使い方になります。
Gutenbergのすごく楽なところは、文章と画像を並べたいときなど、以前はcssを書いてレイアウトを組む必要がありましたが、その必要もなく、“カラムブロック”を配置するだけでよくなったことです。
きっとこの先、テクノロジーの進化でGutenbergも、もっと使いやすくなることは間違いないでしょう。
そうなると、私たちは優れたコンテンツを作ることにもっと集中できるようになります。
この進化で、WordPress登場以前に多くの事業者が抱えていた“ウェブサイト（ホームページ）は専門家に頼まないと修正や更新ができない”という課題が、今、徐々に解決されつつあります。
