サイト構築・運営

難しいことはわからないけど、かっこよくてオシャレなサイトをつくりたい!を叶えるツール

2023.09.06

この記事で解決出来る課題は、

  • HTMLエイチティーエムエルとか、難しいことは分からないけどオシャレなウェブサイト(ホームページ)を自身でつくりたい!
  • そんなに予算はかけられないけど、カッコいいウェブサイト(ホームページ)をつくってほしい
  • ウェブサイト(ホームページ)の制作を業者さんに頼んだけど、こちらが思うような出来栄えになっていない

そんな、ウェブサイト(ホームページ)のお悩みは、この世界にウェブサイト(ホームページ)というものが誕生してからずっと続いている。

それはこの先、更にテクノロジーが進歩したとしても、情報とお金と人間関係が微妙に絡まっているこの課題、まだしばらくは解決されないように思う。

だからこそ、事業家のあなたには、情報を得て賢く振る舞って欲しいと願う。

「Amazonでウェブサイト(ホームページ)制作の本を買ったけど難しすぎて…」

「制作業者さんから上がってきたウェブサイト(ホームページ)が微妙で…」

ウェブサイト(ホームページ)は、いまでは事業活動では欠かせないアイテムになっているのに、多くの事業家は自身のウェブサイト(ホームページ)の出来栄えや運営方法に満足していないのでは?と思うことが少なくない。

そして、そこを改善すべく、ご自身で手を加えようとされたり、別の制作業者さんに相談したりといろいろと手を尽くされているお姿をよくお見かけする。

だけど、なかなか思うようにいかずに苦悩されているお姿もまたよくお見かけする。

これは、前述した通り、この世界にウェブサイト(ホームページ)が登場してから尽きることのないお悩みになっている。

かといって、解決策が無いわけではなく、WordPressワードプレスを上手く使えば、解決の可能性が見えてくるということをお伝えしたく、この記事を書かせていただいた。

つくりながら組み立てて、組み立てながら考えるのがウェブサイト(ホームページ)

ウェブサイト(ホームページ)制作会社に勤めていた時に、わたし自身が始めた新規事業のウェブサイト(ホームページ)をつくったのが、初めてのウェブサイト(ホームページ)。

当時は、ウェブサイト(ホームページ)の黎明期れいめいきで、様々な企業が自社のウェブサイト(ホームページ)をつくり、公開し始めた頃だった。

わたし自身も関わりがある企業のウェブサイト(ホームページ)構築を数件請け負って、相手とやり取りをしつつ進めつつも、ウェブサイト(ホームページ)づくりの“難しさ”に直面していた。それは・・・

つくりながら、内容やレイアウトが変わっていくのがウェブサイト(ホームページ)だということ

例えば、打ち合わせで紙やパワーポイントなどのツールを使って、ウェブサイト(ホームページ)のイメージをつくっておいても、実際にウェブサイト(ホームページ)が出来上がっていく過程で、大幅な修正が入ることが少なくない。

なぜ、そうなるのか?を観察していると、それは、紙に書いたものと実際にディスプレイ越しに見るものは全く違う印象になることが少なくないので、依頼者がディスプレイに表示されたウェブサイト(ホームページ)を見て、そこで初めてウェブサイト(ホームページ)のイメージが湧いてくるようなのだ。

紙とウェブページは違う

だから、変更が発生するたびに、コードを書き直しレイアウトを組み直すといった作業が発生して、酷い時は“これって、永遠に終わらないんじゃ無いか?”と思うことさえあった。

当然だけど、その度に制作者を動かすわけで、その費用が発生してトラブルに発展することも少なくなかった。

WordPressワードプレス登場以前の悩み

WordPressワードプレスが無かった時代に独自のウェブサイト(ホームページ)をつくろうと思えば、HTMLやスタイルシートといったウェブページの制作に必要なプログラミング言語をマスターするしか方法が無かった。

当時のわたしは、その知識も技術も持ち合わせていなかったため、ノートに描いていたイメージと実際の仕上がりが随分違って見えたし、それはクライアントも同じ気持ちだった。知識が無いので仕上がったウェブページの微調整も制作者に上手く伝えられずに結局、納得が行かないイマイチなウェブサイト(ホームページ)が出来上がり、何度も悔しい思いをした。

また、前述した通り、わずかな修正でも制作者に依頼する費用も決して安いものではなかった。

そんな時に、“自身の手で思うようなサイトを作れたらどんなにいいだろう”と考えていた。

そんな時に、WordPressワードプレスというアイテムが世界に登場して、誰でもウェブページを思うように組み立てられることを知り感動した。

WordPressが世界に初めて登場した

WordPressワードプレスを使ってウェブページを組み立てる

そもそも、“ウェブサイト(ホームページ)”というのは複数の“ウェブページ”の集合体のことをいう。つまり、“ウェブサイトをつくる”ということは、“ウェブページを1ページずつ、つくっていくということ”になる。

それらは、WordPressワードプレスの編集機能を使えば、誰でも思うようなウェブページを組み立てて行くことが出来るというわけだ。

ここでは、そんなWordPressワードプレスを使ったウェブページをつくるとてもオーソドックスな手順を詳しく解説させていただく。

1名称はGutenbergグーテンベルク

WordPressワードプレスでウェブページをつくる時、“ブロック”を組み合わせながらつくるというのが最も新しい手順だ。

このブロックを組み合わせながらつくる機能のことを、WordPressワードプレスの新しい編集画面・ブロックエディター、通称Gutenbergグーテンベルクという。

Gutenbergグーテンベルクというのは、活版印刷術を発明したヨハネス・グーテンベルクのことで、これが由来になっている。

Gutenberg

2何もないページに文字と画像を配置してページを整えていく

ここからは、ページを新たにつくり、そこに文字や画像を配置して、レイアウトを整えていくところまでをお伝えする。

まず、WordPressワードプレスにログインして、“投稿”から“新規追加”をクリック。

何もないウェブページに文字と画像を配置してページを整えていく

3アナウンスが表示される

初めて“新規追加”から新たに“投稿”のページを追加すると、『ブロックエディターにようこそ』といったアナウンスが表示されたらとりあえず、“閉じるボタン”で案内を消しておく。

アナウンスが表示される

4ページに“タイトル”を付ける

最初にすることがページの“タイトル”付け。

ページにタイトルを入れておかないと、途中で下書きを保存したい時に保存が出来ないため、必ず最初にタイトルを入れる。なお、入れたタイトル名は後ほどいくらでも変更出来るのでここは仮タイトルでもいいのでまずはタイトルを記述しておこう。

ページに“タイトル”を付ける

5“ブロック”を追加

ブロックの追加は、画面右側にある『+』ボタンから追加する。『+』をクリックすると、

“ブロック”を追加

6“ブロック追加”のアナウンス

“どのようなブロックを追加するか?”のアナウンスの小窓が開くので、“案内の小窓”の中から『すべて表示』をクリック。

“ブロック追加”のアナウンス

7“案内パネル”を開く

“案内パネル”の中から最初に、『段落(¶)』を追加する。『段落(¶)』は文章の基本ブロックなので使用頻度が高いブロックのひとつだ。

“案内パネル”を開く

8追加した『段落』に文章を記述

『段落』ブロックが追加されたら、そこに文章を記述する。

追加した『段落』に文章を記述

9記述した文章の下に新たなブロックを追加

段落ブロックに文章の記述が出来たら、記述した文章のしたにある『+』の“ブロックを追加”をクリックして、新たなブロックを追加していく。

ここでの手順も、『+』の“ブロックを追加”をクリックして、案内の小窓から“すべて表示”をクリックして、“案内パネル”を開いて進める。

記述した文章の下に新たなブロックを追加

10“画像ブロック”の追加

次に追加するブロックは“画像ブロック”なので、案内パネルの“メディア”の項目から“画像”を選択すると、コンテンツの中に“画像ブロック”が追加される。

“画像ブロック”の追加

11追加した“画像ブロック”に画像を挿入

今回、画像はURLから挿入するので、画像ブロック内の“URLから挿入”をクリックして、画像のURLを貼り付ける。

追加した“画像ブロック”に画像を挿入

12画像の挿入完了

画像が挿入された。

画像の挿入完了

ちなみに

ここでは、URLから画像を挿入しているが、画像の挿入方法は、WordPressワードプレスに直接アップロードするやり方が一般的だ。

13挿入した画像の下に更に画像を挿入

挿入した画像の下の『+』をクリックして、ブロックを追加。

挿入した画像の下に更に画像を挿入

14次は、“アナウンスの小窓”から“画像”を選択してみる

次は、“アナウンスの小窓”から“画像”を選択してみる

この“アナウンスの小窓”には、あなたが良く使うブロックが表示される仕組みになっていて、先程、“画像ブロック”をついかしたので、“画像ブロック”が追加されている。慣れてくれば、この“アナウンスの小窓”から次のブロックを追加していくと楽だ。

次は、“アナウンスの小窓”から“画像”を選択してみる

15URLから画像を挿入

今回も画像はURLから挿入するので、“URLから挿入”をクリックして、画像のURLを貼り付ける。

URLから画像を挿入

16画像の下に新たな画像が追加された

先に挿入した画像の下に新たな画像が追加された。

ウェブページは、こんな感じでひとつひとつコンテンツをつくり、積み上げて完成させていく。

画像の下に新たな画像が追加された

17スクロールして2枚の画像を確認

スクロールすると2枚の画像が確認出来る。

スクロールして2枚の画像を確認

18“見出し”を追加

次は“見出し”の追加。“見出し”というのは、その記事の内容が一見してわかるように、文章の前に示す簡単な言葉のこと。

挿入した画像の下の『+』をクリックして、“案内の小窓”の中に“見出し”ブロックがあれば、そこから追加してもいい、無ければ、“案内パネル”を開いて“見出し”ブロックを追加。

“見出し”を追加

19“見出し”の下には“段落”を追加

“見出し”ブロックが追加されたので、見出しを記述する。

“見出し”には“段落”がセットになるので、見出しの下に新たに、“段落”ブロックを追加しておこう。

“見出し”の下には“段落”を追加

20“段落ブロック”の追加

『+』でブロックを追加、“アナウンスの小窓”の中に“段落ブロック”が表示されているので、“段落”をクリックして追加する。

“段落ブロック”の追加

21画面上部のメニューからブロックを追加

段落ブロックが追加されたので、本文を記述しておく。

次は、“表”を追加していく。今回は、画面上部のメニューから新たなブロック、“テーブル”を追加してみよう。画面上部にある『+』をクリック。

画面上部のメニューからブロックを追加

22テーブルの追加

“案内パネル”が開くので、“テーブル”ブロックを選択して、クリックして先程、記述した本文の下に“テーブル”を追加する。

“テーブル”というのは、“表”のことだ。

テーブルの追加

23“カラム数”と“行数”を決める

“テーブル”ブロックが追加されたので、“カラム数”と“行数”を決める。

“カラム”というのは、“列”のことを指す。ちなみにここで決めたカラム数も列数も後から追加したり削除したりすることが出来るので、暫定で決めておいてよい。

“カラム数”と“行数”を決める

24表を完成させる

追加した“表”に内容を入れて表を完成させる。

表を完成させる

25実際に表示される画面の確認

編集画面の向かって右上にある『更新』をクリック。

ちなみにここは、まだ、一般公開していない時は『公開』となっている。

実際に表示される画面の確認

26『更新』をクリック

『更新』をクリックすると、編集画面向かって左下に、“投稿を更新しました。 投稿を表示”といった案内が表示されるので、

『更新』をクリック

27“投稿を表示”をクリック

“投稿を表示”をクリック。

“投稿を表示”をクリック

28ウェブページの表示確認

実際に、ネット上に一般公開されて閲覧可能になったウェブページが表示された。

ウェブページの表示確認

29画面をスクロール

スクロールすると、2枚挿入した画像が表示されて、

画面をスクロール

30見出しに本文に表の確認

見出しに本文、表もきちんと表示されている。

見出しに本文に表の確認

以上が、WordPressワードプレスのブロックエディターである、Gutenbergグーテンベルクを使ってウェブページを組み上げていくもっとも基本的な手順だ。

要は、ページに“ブロック”を配置して、その中にタイトルや段落や画像や表などを入れていくというのが、このGutenbergグーテンベルクの使い方になる。

Gutenbergグーテンベルクの凄い楽なところは、文章と画像を並べたい時など以前は、cssシーエスエスを書いてレイアウトを組む必要があったが、その必要もなく、“カラムブロック”を配置するだけでよくなった。

きっとこの先、テクノロジーの進化でGutenbergグーテンベルクも更に使いやすくなることは間違いないだろう。

そうなると、わたし達は優れたコンテンツをつくることにもっと集中することが出来るというわけだ。

そして、WordPressワードプレス登場以前に多くの事業家が抱えていた“ウェブサイト(ホームページ)は専門家に頼まないと修正や更新が出来ない”という課題が、いま徐々に解決されつつある。

-サイト構築・運営
-, ,