ブロックエディター対応のテーマ「SWELL」で企業サイトを作る

ブロックエディターに対応したテーマとして人気のSWELLを購入しました。

結論から言えば、SWELLは非常に素晴らしいテーマです。

SWELLを購入する前に、私は別のテーマと迷っていました。SWELLをすぐに選ばなかったのは、値段が理由です。

WordPressの有料テーマには、SANGOのように1万円ほどで買えるものがあります。それと比べれば、SWELLは少し高めです。

しかし、実際にSWELLを使ってみると、悩んでいた時間がもったいなかったと感じています。

私はブロックエディターの勉強のために、SWELLを使って約1ヶ月で10個ほどのサイトを作ってみました。

この記事では、その経験をもとにSWELLの使い勝手をレビューします。

SWELLとは

ブロックエディター対応のWordPressテーマ「SWELL」

SWELLとは、ブロックエディター(Gutenberg)に完全対応したWordPressのテーマです。

ブロックエディターとは、以下のように「ブロック」と呼ばれる部品を組み合わせて記事を書く方法です。

SWELLブロックの使い方

ブロックを追加するには、プラスのマークをクリックして、一覧からブロックを選ぶだけです。

例えば、「SWELLボタン」というブロックを追加すると、ボタンを設置できます。

通常であれば、HTMLやCSSを書いてボタンを設置しますが、ブロックエディターではそのような専門知識が不要で、直感的に記事を書けることが特徴です。

現在のWordPressはブロックエディターが標準ですが、まだ登場してから日が浅いので、ブロックエディターに対応していないテーマが多くあります。

SWELLは他のテーマに先駆けてブロックエディターに対応しており、SWELL専用の便利なブロックが多く用意されています。

SWELLの魅力

私がSWELLを購入した目的の一つは、企業のホームページ(コーポレートサイト)やランディングページ、およびそのようなデザインのサイトを制作するときに役立つと思ったからです。

このブログもそうですが、一般的なブログのトップページは記事の一覧があるだけです。

ブログのトップページデザイン

ブログは記事の内容で勝負する性質が強いので、これでも問題はありません。

しかし、会社のホームページのようにブランディングが重要になる場合や、ランディングページのように商品を販売する場合は、シンプル過ぎて物足りなく感じてしまいます。

SWELLは基本的にブログ向けのテーマなので、ブログの機能、デザイン、モバイル対応、SEO対策、高速化などは言うまでもありません。

それに加えて、SWELLのブロックを使えば企業サイトのように自由度の高いページも簡単に作成できます。

そのため、サイトの顔となるトップページはフルワイドのカラーやインパクトのある写真などを配置して、詳細はブログの記事に誘導できます。

さらに、SWELLは100%GPLというライセンス形式なので、他人のサイト制作を代行するときにも使えます。

このように、ブログにも企業サイトにも使えるところが、個人的には一番の魅力だと思います。

なお、簡単なホームページやブログであれば、私が格安料金で制作いたします。詳細は以下のページをご確認ください。

SWELLで企業サイトを作成

私はこれまで「Classic Editor」というプラグインをインストールして、従来のテキストエディターで記事を書いていました。

人生で初めてのブロックエディターということで、練習のためにサンプルサイトをSWELLで作ってみました。

例えば、「DEMO CAFE」というカフェをイメージしたホームページあります。

SWELLを使ったカフェのデモサイト

以下はカフェのメニューページですが、これはHTMLを全く書かず、微調整のために数行のCSSを書いただけです。

SWELLを使ったカフェのメニュー表

次は、「講座さがし」というサイトです。講座の検索や予約ができるサンプルサイトです。

SWELLを使った講座予約サイトのデモサイト

次は、「Recruit Company」という求人サイトです。SWELLを使っているので、求人ページの追加や編集も非常に簡単です。

SWELLを使った求人サイトのデモサイト

他には、「WordPressテーマギャラリー」というサイトも作りました。機能や値段などからWordPressのテーマを探せます。

SWELLのテーマで作ったサンプルサイト

5分で見つかる佐賀」というサンプルサイトは、魅力度ランキングで最下位から二番目の佐賀県の魅力を日本語と英語で紹介しています。

SWELLのテーマで作った多言語のサンプルサイト

以上のように、ホームページ風のサイトをSWELLで作るときは「フルワイドブロック」が大活躍するので、使い方を絶対に覚えておいた方が良いです。

フルワイドブロックを使えば、ブラウザの横幅いっぱいにデザインできます。

ここからは、「5分で見つかる佐賀」について、どのように作ったのか簡単に説明します。

SWELLのカスタマイズ

最初に表示される巨大なヒーローイメージは、ブロックではなく、管理画面の「外観」⇒「カスタマイズ」から設定しています。

SWELLボタン

ここからは、ブロックの使い方になります。まずは、上のようなカテゴリーボタンの作り方を紹介します。

SWELLフルワイドブロック

横幅いっぱいのデザインにするために、「フルワイド」というブロックを使います。

エディターの右側では、ブロックごとに詳細な設定ができます。フルワイドブロックでは背景色や背景画像を選択できて、水色と白色のボーダーは画像を使っています。

SWELLボタンブロック

次に、横に4つ並べるために、「カラム」というブロックを設置します。さらに、その中に「SWELLボタン」というブロックを設置します。

ちなみに、SWELLボタンの[icon]の部分はショートコードというもので、アイコンに変換されて表示されます。

SWELLボタンブロックの詳細設定

エディターの右側では、SWELLボタンブロックなら色やサイズなどを選択できて、カラムブロックであれば何分割にするか数字を選べます。

SWELLブロックの入れ子

これまでの流れを整理すると、フルワイドブロックの中にカラムブロックを設置して、カラムブロックの中にSWELLボタンブロックを設置しました。

このように、ブロックは入れ子にして使うこともできます。

SWELLのカラム

次に、カテゴリーごとにおすすめが掲載されている部分の作り方を紹介します。

SWELLのカラムブロック

先ほどと同様に、まずはカラムブロックを設置して横に3分割します。そして、今度は「画像」というブロックを設置して、メディアライブラリから掲載する写真を選択します。

写真の下にある文章やリンクは、色やフォントサイズ、余白などを細かく設定したかったので、「カスタムHTML」というブロックを使っています。

このように、既存のブロックを設置するだけでは難しいところは、カスタムHTMLブロックなどを使って細かくデザインできます。

SWELLのよくある質問

最後に、よくある質問の作り方を紹介します。

SWELLのFAQブロック

「FAQ」というブロックがあるので、背景色をグレーに設定したフルワイドブロックの中にそれを設置して、質問と回答の文章を入力しただけです。

以上でサンプルサイトの説明は終わりです。

「5分で見つかる佐賀」では使いませんでしたが、その他にも様々なブロックがあります。

SWELLのその他のブロック

上のようなページも、SWELLのブロックを使えばあっという間です。

参考
SWELLで使えるブロックの種類は、以下の記事が参考になります。

ブロックエディターのプラグイン

SWELLは記載時点では開発が続いており、無料アップデートで新しいブロックが増えています。

もしも、既存のブロックでは足りないときは、SWELLと一緒にプラグインを使う方法もあります。

Snow Monkey Blocks

Snow Monkey Blocks

ブロックエディターのおすすめプラグインは「Snow Monkey Blocks」です。

こちらはSnow Monkeyというテーマに最適化されたプラグインですが、それ以外のテーマでも一部の機能を使えます。

Snow Monkey Blocksのスライダーブロック

例えば、スライダーブロックを使えば、複数の画像を選択してアニメーションを選ぶだけで、スライド画像を表示できます。

Snow Monkey Blocksの価格表ブロック

また、価格表ブロックを使うと、わずか数分で上のような料金プランを表示できます。

LIQUID BLOCKS

LIQUID BLOCKS

他には「LIQUID BLOCKS」というプラグインもあります。

こちらは、新たなブロックというよりは、既存のブロックを組み合わせたテンプレートが用意されているイメージです。

LIQUID BLOCKSのコールトゥアクション

例えば、コールトゥアクション(CTA:資料請求や商品購入などを促すこと)のテンプレートを設置すれば、カラムブロックやボタンブロックなどが含まれているので、自分でブロックを個別に組み合わせる必要はありません。

まとめ

この記事では、SWELLの魅力や使い方などを紹介しました。

SWELLを使えば、企業やお店のホームページも簡単に作れます。

しかも、自分が制作するときだけではなく、クライアントに納品する場合には、後でメンテナンスがしやすいというメリットもあります。

もちろん、クライアントはブロックエディターの使い方を理解する必要はありますが、HTMLやCSS、PHPよりは簡単でしょう。

なお、この記事ではSWELLの公式サイトのキャプチャを引用しています。また、テーマに関する最新の正確な情報は、公式サイトをご確認ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA