HTMLが苦手でも大丈夫！WordPressブロックエディターでサイトを作る方法【挫折経験者が解説】

2026年3月26日

「HTMLを勉強してみたけど、正直よくわからない…」

そう思ったことはありませんか？

僕はまさにそのタイプでした。2021年、Web制作に興味を持ってHTMLの勉強を始めたんですが、約3ヶ月で挫折しています。

でも今は、副業でホームページ制作をやっていて、これまでに30件ほどのサイトを作ってきました。

コードが書けるようになったのかって？
いや、今でもHTMLをゴリゴリ書くのは苦手です。

じゃあどうやってサイトを作っているのか。答えはWordPressのブロックエディターです。

この記事では、HTMLの勉強で挫折した僕が、どうやってコードなしでサイト制作ができるようになったのかをお話しします。
「自分もHTMLが苦手だけど、サイトを作りたい」と思っている方に、少しでも参考になればうれしいです。

※本ページはプロモーションが含まれています

(スポンサーリンク)

HTMLの勉強で挫折した話

2021年の8月、僕はHTMLとCSSの勉強を始めました。

きっかけは副業への興味です。
「Web制作って稼げるらしい」という情報を見て、まずはHTMLから勉強しようと思ったわけです。

CSSは比較的すんなり理解できました。
「この要素にこの見た目を指定する」というのは感覚的にわかりやすかったんです。

問題はHTMLの方でした。

コードを読むだけなら、なんとなく理解できるんですよ。「ここが見出しで、ここが段落で…」みたいな。

でも、自分でゼロからHTMLを書くとなると、途端にわからなくなる。

特にcontainerやwrapperの概念、つまりHTMLの「枠組みの構成」がどうしても理解できませんでした。

「divで囲むのはわかるけど、なぜここにもう一つdivが必要なの？」「このラッパーとインナーの入れ子構造って、どう設計すればいいの？」

そんな疑問がずっとモヤモヤしていて、結局2021年の11月頃には完全に手が止まりました。

約3ヶ月。短いように見えるかもしれないけど、毎日やって3ヶ月わからないものはわからないんですよね。

WordPressブロックエディターとの出会い

HTMLの勉強を諦めた後も、Web制作そのものへの興味は消えていませんでした。

転機になったのは、同じくWeb制作をやっている人と直接会って話をしたことです。

その方は、僕と同じようにコーディングが得意ではなかったんですが、WordPressのブロックエディターを使ってホームページ制作をしていました。

「え、コード書かなくてもサイトって作れるの？」

正直、最初は半信半疑でした。
でも実際に作業の流れを見せてもらったら、本当にドラッグ＆ドロップと簡単な設定だけでページが出来上がっていくんです。

見出し、画像、ボタン、カラムレイアウト——全部ブロックを選んで配置するだけ。

あのHTMLの入れ子構造で悩んでいた時間はなんだったんだ、と思いました。

ブロックエディターって何？3つの特徴

WordPressのブロックエディターを知らない方のために、簡単に説明しておきます。

コンテンツを「ブロック」単位で編集する

ブロックエディターは、2018年にWordPressに標準搭載された編集機能です。

ページのすべての要素（見出し、文章、画像、ボタンなど）を「ブロック」という単位で管理します。
ブロックを追加・並び替え・削除するだけでページが完成するので、HTMLの知識がなくてもレイアウトが組めます。

CSSの知識があるとさらに自由度が上がる

ブロックエディターだけでも十分なサイトは作れますが、CSSがわかると細かい見た目の調整ができます。

僕の場合、CSSは問題なく理解できていたので、ブロックエディターで大枠を作って、CSSで微調整するという流れが自分にはすごく合っていました。

HTMLの枠組み構成は苦手でも、CSSで「ここの余白をもう少し広げたい」「フォントサイズを変えたい」という調整はできる——そういう方は意外と多いと思います。

テーマの力を借りれば、デザインの質も上がる

WordPressには「テーマ」というデザインテンプレートがあります。

特に有料テーマのSWELLは、ブロックエディターとの相性が抜群で、独自のブロック（ふきだし、ステップ、FAQなど）が豊富に用意されています。テーマの力を借りることで、デザインセンスに自信がなくてもきれいなサイトが作れます。

WordPressでサイトを作る手順【5ステップ】

ここからは、実際にWordPressでサイトを立ち上げる手順を紹介します。

ステップ①：レンタルサーバーを契約する

WordPressを使うには、まずレンタルサーバーが必要です。

僕が使っているのはConoHa WINGです。選んだ理由は、表示速度が速いこと、管理画面がわかりやすいこと、そしてWordPressの簡単インストール機能があることの3つです。

初めてサーバーを契約するときって不安ですよね。でもConoHa WINGは申し込みの流れがシンプルなので、画面の指示に沿って進めれば30分もかかりません。

ConoHa WINGの申し込み手順は、こちらの記事でまとめています。

ステップ②：WordPressをインストールする

ConoHa WINGの場合、サーバー契約時に「WordPressかんたんセットアップ」を使うと、サーバー契約と同時にWordPressのインストールまで完了します。

独自ドメインの取得もセットでできるので、別のサービスでドメインを取る必要がありません。契約が終わった時点で、もうWordPressにログインできる状態になっています。

ステップ③：テーマを設定する

WordPressにログインしたら、最初にテーマを設定しましょう。

僕のおすすめはSWELL（税込17,600円）です。

「え、有料なの？」と思うかもしれません。でも、サイト制作を本気でやるなら最初から有料テーマを入れた方が結果的に時間もお金も節約できます。

無料テーマでもサイトは作れますが、デザインの自由度やブロックエディターとの連携は有料テーマに大きく差をつけられます。
SWELLは買い切りで複数サイトに使えるので、コスパは十分良いです。

このブログもSWELLを使っています。SWELLの詳しいレビューは別記事で書く予定です。

ステップ④：初期設定を済ませる

テーマを入れたら、以下の初期設定を済ませておきましょう。

サイトタイトルとキャッチフレーズの設定（設定 → 一般）
パーマリンクの設定（設定 → パーマリンク → 「投稿名」を選択）
SSL化の確認（URLがhttpsになっているか）
不要な初期プラグインの削除（Hello Dolly等）

どれも管理画面からクリックするだけの作業です。10分あれば終わります。

ステップ⑤：固定ページを作ってみる

初期設定が終わったら、実際にブロックエディターで固定ページを1つ作ってみましょう。

まずは「トップページ」か「プロフィールページ」あたりから始めるのがおすすめです。

管理画面の「固定ページ」→「新規追加」をクリックすると、ブロックエディターの画面が開きます。左上の「＋」ボタンからブロックを選んで、見出し・文章・画像を配置していけば、それだけでページの形になります。

ブロックエディターでページを作ってみよう

ここでは、ブロックエディターでよく使う操作を紹介します。

見出し・段落・画像の基本操作

ブロックエディターで使う基本ブロックは主に3つです。

見出しブロックは、ページの構造を作るのに使います。H2（大見出し）、H3（中見出し）と階層を分けることで、読みやすいページになります。

段落ブロックは、普通の文章を書くときに使います。エンターキーを押すだけで自動的に新しい段落ブロックが作られるので、特に意識する必要はありません。

画像ブロックは、写真やイラストを挿入するときに使います。ドラッグ＆ドロップでアップロードできるので操作は簡単です。

SWELLの便利ブロックを活用する

SWELLを使っている場合、標準のブロックに加えてSWELL独自のブロックが使えます。

中でもよく使うのが、ふきだしブロック（会話形式の表現ができる）、ステップブロック（手順を番号付きで見やすく表示できる）、FAQブロック（よくある質問をQ&A形式で表示できる）の3つです。

これらを使うだけで、ページの見た目が一気にプロっぽくなります。

もう少しこだわりたい人へ：CSS編集の基本

ブロックエディターだけでも十分なサイトは作れます。
でも「ここの余白をもう少し調整したい」「このボタンの色を変えたい」といった細かいカスタマイズには、CSSが必要になる場面もあります。

SWELLの場合、管理画面の「外観」→「カスタマイズ」→「追加CSS」から、CSSを追加できます。

たとえば、見出しの下の余白を広げたいときは、こんな感じです。

.post_content h2 {
    margin-bottom: 2em;
}

CSSがわかる方なら、こういった微調整ができるだけでサイトの完成度がかなり変わります。
逆に、CSSがわからなくてもSWELLの設定画面だけでかなりの調整ができるので、無理に覚える必要はありません。

よくある質問

費用はどのくらいかかりますか？: 最低限必要な費用は、レンタルサーバー代（ConoHa WINGの場合、月額1,000円前後）と、WordPressテーマ代（SWELLは税込17,600円の買い切り）です。
WordPress自体は無料なので、初期費用は2万円〜3万円程度で始められます。
無料テーマではダメですか？: ダメではありません。無料テーマの「Cocoon」なども十分に高機能です。
ただ、ブロックエディターとの連携やデザインの自由度では、有料テーマの方が使いやすいと感じています。特に副業としてクライアントワークを考えているなら、最初から有料テーマに慣れておく方が効率的です。
Q. HTMLの知識はまったくなくても大丈夫？: 大丈夫です。僕自身、HTMLをゴリゴリ書くことはほとんどありません。
ブロックエディターの操作とCSSの基本がわかれば、十分にサイトは作れます。
HTMLの知識があれば便利な場面もありますが、必須ではないです。
Q. プログラミングスクールに通う必要はありますか？: WordPress＋ブロックエディターでのサイト制作であれば、スクールに通わなくても独学で十分に身につけられます。
SWELLの公式サイトにもマニュアルが充実していますし、ネット上に情報が豊富にあります。