はじめに

先日、初めてSWELLを使用したWordPress案件を受注しました。

それまで私は、自作テーマやHTML/CSSを使ったコーディング案件が中心だったため、SWELLを本格的に触るのは今回が初めてでした。

正直なところ、

• SWELL案件って何をするの？
• PHPはどれくらい書くの？
• 独自機能を覚えないと対応できないのでは？

と不安だらけでした。

しかし実際に案件を進めてみると、想像していたものとはかなり違いました。

この記事では、実際の案件を通して実際に学んだことを共有します。

これからSWELL案件に挑戦したい方や、WordPress案件の幅を広げたい方の参考になれば幸いです。

SWELLとは

SWELLは、WordPressで人気の国産有料テーマです。

プログラミングの知識が少なくても、ブロックエディタを使って直感的にページを作れるのが大きな特徴です。

また、

• デザイン性が高い
• 表示速度が速い
• SEO対策がしやすい
• 更新や運用がしやすい

といった理由から、個人ブログだけでなく企業サイトの制作でも利用されています。

多くの案件でもSWELLが採用されており、実際に触れてみることで「なぜ多くの現場で使われているのか」を理解できました。

また、SWELLは買い切り型の有料テーマで、一度購入すると複数サイトで利用できます。

案件ごとにテーマ費用が発生しないため、制作者側にとっても導入しやすい点は大きなメリットです。

実際に制作会社案件でも採用されていることが多く、多くの制作者に支持されている理由の一つだと感じました。

この記事では、SWELLの機能紹介ではなく、実際の案件を通して学んだ実践的なポイントを紹介していきます。

SWELL公式サイト：https://swell-theme.com/

SWELLの何が良いのか

実際に案件で触って感じたSWELLの良さは、「作る人」と「運用する人」の両方に優しいことです。

例えば、

• ブロックエディタだけで多くのデザインが実現できる
• 管理画面が分かりやすい
• 同期パターンやブログパーツで共通管理がしやすい
• 表示速度やSEOも考慮されている
• 更新担当者が自分で修正しやすい

といった特徴があります。

私自身、案件前は「WordPress案件だからPHPを書きながら作るのかな」と思っていました。

しかし実際は、SWELLの機能を活用しながらページを組み立てる場面が多く、運用を見据えて設計されているテーマだと感じました。

特に制作会社案件では、「公開後にクライアントが更新しやすいか」という視点が重要になります。

SWELLはその点がよく考えられており、制作者だけでなく運用者にとっても扱いやすいテーマだと感じています。

SWELL案件を受けたときに不安だったこと

案件開始前は、主に3つの不安がありました。

どこまでブロックエディタで作るのか分からなかった

WordPressのブロックエディタは触ったことがありましたが、実案件でどの程度利用するのか分かりませんでした。

HTMLを直接書くのか、それともブロック中心なのか。

制作フローがイメージできなかったのです。

PHPを書く案件だと思っていた

WordPress案件と聞くと、

• functions.php
• テンプレートファイル
• カスタム投稿

などを触るイメージがありました。

そのため、ある程度PHPを書く準備をしていました。

SWELL独自機能を理解できるか不安だった

SWELLには独自ブロックや便利機能が多くあります。

そのため、

「まず機能を全部覚えないと案件に入れないのでは？」

と思っていました。

しかし実際は違いました。

案件ではSWELLの機能を活用しながらページを構築する場面が多く、最初から全機能を理解している必要はありませんでした。

SWELLの主な機能

主な機能として以下があります。

• ブロックエディタ対応
• レスポンシブ対応
• SEO対策機能
• 高速表示設計
• カスタマイザーによるデザイン調整
• 広告管理機能
• ランディングページ作成機能
• CTA設置機能
• SNS連携機能
• 目次自動生成
• パンくずリスト
• 記事一覧カスタマイズ

WordPress初心者でも比較的扱いやすく、プラグインに頼らなくても多くの機能を利用できます。

SWELL独自の便利機能

実際の案件で特に利用頻度が高かったのは、SWELL独自の機能でした。

ブログパーツ

共通パーツを再利用できる機能です。

例えば、

• CTA
• プロフィール
• お知らせ
• 注意事項

などを一元管理できます。

1か所修正するだけで使い回しが可能です。

同期パターン

複数ページで同じブロックを共有できる機能です。

例えば、

• お問い合わせ導線
• キャンペーン案内
• サービス紹介

などを全ページで統一できます。

運用時の修正漏れを防げるため、制作会社案件でもよく利用されます。

SWELL独自ブロック

標準ブロックに加えて、SWELL専用ブロックが用意されています。

代表例

• ボックス
• アコーディオン
• ステップ
• 吹き出し
• FAQ
• キャプションボックス
• バナーリンク
• ボタン

CSSを書かなくてもデザイン性の高いコンテンツを作れます。

フルワイドブロック

画面いっぱいにコンテンツを表示できる機能です。

主に

• ファーストビュー
• CTAエリア
• 背景付きセクション

などで利用されます。

特にセクションを作成するときにまずフルワイドブロックを配置し、その中にコンテンツを組み立てていく進め方が多く採用されています。

イメージとしては、

という構造です。

以上のようにSWELLには他のWordPressテーマと異なり、独自の機能とカスタマイズ性を持っており、非常に便利なテーマであることがわかります。

SWELL案件を受けたときに不安だったこと

主に3つの不安がありました。

どこまでブロックエディタで作るのか分からなかった

WordPressのブロックエディタは触ったことがありましたが、実案件でどの程度利用するのか分かりませんでした。

HTMLを直接書くのか、それともブロック中心なのか。

制作フローがイメージできなかったのです。

PHPを書く案件だと思っていた

WordPress案件と聞くと、

• functions.php
• テンプレートファイル
• カスタム投稿

などを触るイメージがありました。

そのため、ある程度PHPを書く準備をしていました。

SWELL独自機能を理解できるか不安だった

SWELLには独自ブロックや便利機能が多くあります。

そのため、

「まず機能を全部覚えないと案件に入れないのでは？」

と思っていました。

しかし実際は違いました。

案件ではSWELLの機能を活用しながらページを構築する場面が多く、最初から全機能を理解している必要はありませんでした。

実際の進め方

実案件では、次のような流れで進むことが多かったです。

ヘッダーやフッターはSWELLの機能を利用

ヘッダーやフッターはテーマ側の機能を利用して設定しました。

そのため、ゼロから構築する場面はほとんどありませんでした。

固定ページ上でブロックを組み立てる

ページ制作の中心は固定ページです。

• 見出し
• 画像
• ボタン
• カラム

などをブロックで組み立てていきます。

必要に応じてCSSを追加

ブロックだけでは再現が難しい部分についてはCSSで調整しました。

PHPを書く場面は少なかった

案件内容にもよりますが、PHPを書く機会はほとんどありませんでした。

WordPress案件＝PHP開発というイメージが強かったため、これは意外な発見でした。

逆にいうとそれだけSWELLには優れた既存機能（ブロックエディタ）が多いということがわかります。

SWELLの機能を理解することの方がPHPを書くより重要でした。

学んだこと① 同期パターンは必須レベルで便利

実際の案件ではCTAを複数箇所に設置していました。

その際に活躍したのが同期パターンです。

同期パターンとは

複数ページで同じ内容を共有できる機能です。

例えば、

• お問い合わせ導線
• 資料請求ボタン
• キャンペーン案内

などを共通化できます。

修正が一括反映される

一度修正すると全ページへ反映されます。

ページ数が増えるほど効果を実感できます。

運用担当者にとっても大きなメリットがある機能だと感じました。

学んだこと② ブログパーツを活用すると管理が楽になる

SWELLにはブログパーツという便利な機能があります。

共通パーツを再利用できる

例えば、

• プロフィール
• CTA
• 注意事項

などを共通化できます。

運用者の負担を減らせる

制作側だけでなく、運用する側も管理しやすくなります。

案件では「作って終わり」ではありません。

公開後の運用も考慮して設計することが重要だと学びました。

学んだこと③ SWELL案件でもCSSを書く場面は普通にある

SWELLは高機能なテーマです。

しかし実案件ではCSSを書く場面も普通にありました。

例えば、

• 余白調整
• デザインカンプとの差分修正
• 特殊なレイアウト対応

などです。

高度な設定からクラス名を付与する

ブロックには「高度な設定」があります。

ここで独自クラスを付与できます。

例えば、

p-top__cta

のようなクラスを追加します。

その後CSSで調整します。

.p-top__cta {
  margin-top: 80px;
}

実案件で感じたこと

案件を通して感じたのは、

まずSWELLの機能で実現できないか考える

↓

難しい部分だけCSSで補う

という流れが非常に効率的だということです。

「SWELL案件＝ノーコード」

ではありません。

実際には、

「SWELL＋CSS」

という考え方が実務に近いと感じました。

SWELL案件を受ける前に予習しておくと安心なことチェックリスト

私自身、初めてSWELL案件を担当したときは何から触れば良いのか分かりませんでした。

振り返ってみると、以下を事前に確認しておけばもっとスムーズに進められたと感じています。

ブロックエディタの基本操作

• 固定ページを作成できる
• 見出しや画像ブロックを追加できる
• カラムブロックを使える
• リストビューを使える
• ブロックの移動や複製ができる

まずはWordPress標準のブロックエディタに慣れておくのがおすすめです。

SWELL独自ブロックを触ってみる

• ボックス
• ステップ
• FAQ
• ボタン
• バナーリンク
• アコーディオン

実案件ではSWELL独自ブロックを活用する場面が多くありました。

どんなことができるか一度触っておくだけでも理解が進みます。

フルワイドブロックを試してみる

• 背景色を付ける
• 背景画像を設定する
• セクションを作る
• 余白を調整する

まずフルワイドブロックを配置してから中身を組み立てることが多かったため、事前に触っておくと安心です。

同期パターンを作ってみる

• 登録方法を理解する
• 編集方法を理解する
• 一括反映を試してみる

案件ではCTAの管理で非常に役立ちました。

SWELL案件なら覚えておいて損はない機能です。

ブログパーツを作ってみる

• 作成方法を確認する
• 呼び出し方法を確認する
• 編集方法を確認する

運用を意識したサイト制作では頻繁に利用されます。

高度な設定からクラスを付与する

• クラス名を追加できる
• CSSで調整できる

SWELLだけで完結しない場面もあるため、CSSとの組み合わせは実務でもよく使います。

SWELL案件を通して感じたこと

今回の案件を通して最も感じたのは、

SWELLは運用を強く意識したテーマだということです。

これまではコーダー目線で、

「どう実装するか」

ばかり考えていました。

しかし実際の案件では、

• 運用担当者が更新しやすいか
• 修正しやすいか
• 管理しやすいか

も重要でした。

実際に案件で触れることで、SWELLの考え方や強みを理解できたと思います。

もし今、

「SWELL案件に挑戦してみたいけど不安」

と思っているなら、私自身も同じでした。

ですが、実際に触ってみると学べることが非常に多く、WordPress案件の幅も広がります。

最初から完璧を目指さず、まずは一件経験してみることをおすすめします。

まとめ

今回の案件で学んだことをまとめます。

• SWELLはブロックエディタ中心で構築する
• 同期パターンは積極的に活用する
• ブログパーツで共通化できる
• フルワイドブロックがセクション作成の鍵
• 必要に応じてCSSで調整する
• 高度な設定のクラス付与は実務でよく使う

私自身、案件前は不安ばかりでした。

しかし実際に触ってみると、SWELLは初心者にも扱いやすく、運用面まで考えられたテーマだと感じました。

これからSWELL案件に挑戦する方の参考になれば幸いです。

一言

今回のSWELL案件を通して、サイトを作る技術だけでなく「公開後にどう運用されるか」を考える大切さを学びました。

私はこれまでコーダー目線で実装方法ばかりを意識していましたが、実案件では「クライアントが更新しやすいか」「運用担当者が管理しやすいか」も同じくらい重要でした。

SWELLはまさにその考え方が反映されたテーマだと感じています。

これからSWELL案件に挑戦する方は、コーディングの知識だけでなく、運用者目線も意識しながら取り組むと、より実践的なスキルが身につくと思います。