SWELLはデザインの自由度が低い？プロのカスタマイズ事例で解説

はじめに

SWELLでサイトを作ったものの、「どうしてもブログっぽく見えてしまう」「もっと事業用サイトらしいデザインにしたい」と感じていませんか。SWELLは国内で高いシェアを持つWordPressテーマです。ただ、初期状態のままでは新着記事が並ぶだけのレイアウトになりがちで、会社やお店の顔として使うには物足りなさを感じる方も多くいらっしゃいます。

実は、SWELLはカスタマイズ次第で、制作会社が作った企業サイトと見分けがつかないデザインにできます。しかも、その多くはコードを書かずに標準機能だけで実現できます。

この記事では、Web制作の現場で実際にSWELLを扱っている筆者が、デザインの自由度を高めるカスタマイズを実例とともに解説します。取り上げるのは「標準機能だけ」「CSSを少し足す」「プロに依頼する」の3段階です。読み終えるころには、どこまで自分ででき、どこからプロに頼むべきかの線引きも見えるようになります。

SWELLのデザイン自由度はどこまで高いのか

SWELLのカスタマイズを始める前に、まず「何がどこまでできるのか」の全体像を押さえておきましょう。ゴールを知らずに手を動かすのは、間取り図を描かずに家を建て始めるようなものです。

標準機能でできることの範囲

結論から言うと、レイアウト・配色・文字装飾といったデザインの主要素は、ほぼすべて管理画面から変更できます。SWELLには「カスタマイザー」という設定画面があり、サイト全体の配色、ヘッダーの形、ボタンのデザインなどを、実際の画面プレビューを見ながら変更できます。設定がその場で反映されるので、専門知識がなくても試行錯誤しやすいのが特長です。

さらに強力なのが、ブロックエディタ用の専用ブロックです。画面の端から端まで背景を広げる「フルワイド」ブロック、記事の一覧を好きな場所に好きな形式で置ける「投稿リスト」ブロック、よく使うパーツを登録して使い回せる「ブログパーツ」など、部品が豊富に揃っています。飲食店にたとえるなら、下ごしらえ済みの食材が揃った厨房のようなもので、組み合わせるだけで一品が完成します。トップページだけでなく、カテゴリーページや記事一覧の表示形式も管理画面から変えられるため、サイト全体の統一感も保ちやすくなっています。

それでも「ブログっぽく」見えてしまう理由

一方で、SWELLのサイトがブログっぽく見えてしまうことが多いのも事実です。その原因のほとんどは、トップページが「新着記事が時系列に並ぶだけ」の初期レイアウトのままだからです。

つまり、テーマの性能の問題ではなく、設定の問題です。裏を返せば、トップページの構成を変えるだけで、サイト全体の印象は大きく変わります。次の章から、その具体的な手順を見ていきましょう。

事例1：標準機能だけで作る「サイト型」トップページ

デザインの自由度を最も実感できるのが、トップページの「サイト型」カスタマイズです。サイト型とは、新着記事の羅列ではなく、企業サイトのように「サービス紹介」「実績」「お知らせ」といった情報を整理して配置したレイアウトのことです。

固定ページをトップページに切り替える

手順の起点はシンプルで、トップページ用の固定ページを1枚作り、WordPressの表示設定でトップに指定するだけです。これだけで、トップページはブロックエディタで自由に組み立てられる白紙のキャンバスに変わります。

店舗にたとえると、初期状態のトップページは「入荷順に商品が積まれた倉庫」です。固定ページへの切り替えは、そこに棚を入れて「お客様に見せたい順に並べ替えられる売り場」へ変える作業だと考えてください。売り場の一等地に何を置くかを、自分で決められるようになるわけです。

フルワイドブロックで構造を作り、投稿リストで動きを出す

白紙のキャンバスに構造を作るときの主役が、フルワイドブロックです。「サービス紹介」「制作実績」「お知らせ」といったセクションごとにフルワイドブロックを置き、背景色を交互に変えるだけで、ページに区切りとリズムが生まれます。

各セクションの中には、投稿リストブロックでカテゴリーを絞った記事一覧を配置します。たとえば「お知らせ」セクションにはお知らせカテゴリーの最新3件だけを表示する、といった指定が管理画面から可能です。更新すれば自動でトップページに反映されるので、手作業でトップページを書き換える必要もありません。ここまでのカスタマイズに、コードは1行も使っていません。

なお、ページ最上部の顔になるメインビジュアルは、カスタマイザーの「トップページ」設定から画像を入れられます。キャッチコピーやボタンも重ねられるので、ここを整えるだけでも第一印象は大きく変わります。

事例2：数行のCSSカスタマイズで細部を整える

標準機能で骨格ができたら、次は細部の仕上げです。既製服の裾上げのように、少し手を入れるだけで「自分のサイトのためにあつらえた」印象に変わります。

見出し・ボタン・余白の調整例

制作の実務でよく行うのは、次の3か所の調整です。

いずれも数行のCSSで実現でき、この「数行」こそがテーマの既視感を消す一番の近道です。SWELLは利用者が多いテーマなので、初期デザインのままだと他のサイトと似た印象になりがちですが、見出しとボタンが変わるだけで「どこかで見たデザイン」という印象は大きく薄れます。

追加CSSを書くときの注意点

CSSを足すときは、書く場所に注意が必要です。原則は、カスタマイザーの「追加CSS」欄か、子テーマに書くこと。テーマ本体のファイルを直接編集すると、テーマのアップデートで変更がすべて消えてしまいます。賃貸物件の壁に直接ペンキを塗るのではなく、貼って剥がせる壁紙を使うイメージです。

また、読みやすさを損なわない範囲にとどめることも大切です。デザインの自由度が上がるほど、読みにくくしてしまう自由も生まれるからです。たとえば筆者は、本文の文字サイズを14px未満にしない、背景色と文字色のコントラストを十分に確保する、という2つの基準を必ず守って調整しています。迷ったら「装飾を足す」より「余白を整える」を優先すると、失敗がありません。

事例3：プロに依頼して実現するカスタマイズ

最後は、制作のプロが関わる領域です。ここまでの内容で大半のデザイン要望は実現できますが、サイトの構造に踏み込む作業は難易度が一段上がります。

他テーマからのSWELL移行

筆者が実際に手がけた事例に、別のWordPressテーマで長く運用されてきたサイトのSWELL移行があります。デザインを一新しつつ、蓄積された記事資産をそのまま引き継ぐ作業です。

この種の案件の難所は、デザインよりも「旧テーマ専用ブロックの棚卸し」にあります。旧テーマの専用機能で書かれた装飾やボックスは、テーマを切り替えると表示が崩れるため、記事を1本ずつ確認して置き換える必要があるのです。デザインの自由度を求めてテーマ移行を検討する場合は、見た目の設計より先に、既存記事がどれだけ旧テーマの機能に依存しているかを調べることをおすすめします。ここを見誤ると、移行後に想定外の修正作業が膨らみます。

判断が難しいのはショップ機能の追加

もう1つ、ご相談が多いわりに判断が難しいのが、サイトへのショップ機能の追加です。SWELLは有名なショップ用プラグインの動作を公式には保証していないため、安易に組み合わせると表示や決済のトラブルの原因になります。

商品数が少なければ決済リンクの活用で足りることもあり、本格的なECならショップ部分だけ別の仕組みに分ける選択肢もあります。規模によって最適解が変わる領域なので、ここは設計の段階からプロに相談するのが安全です。

自分でやるか、プロに頼むかの線引き

ここまでの3段階を、判断基準として1行にまとめると次のようになります。

「元に戻せる作業は自分で試し、元に戻せない作業はプロに任せる」

サイト型トップページの作成やカスタマイザーの設定は、気に入らなければいつでも元に戻せます。失敗のリスクが小さいので、どんどん試して構いません。一方、テーマ移行やショップ機能の追加のような構造に関わる作業は、途中で行き詰まると元の状態に戻すこと自体が難しくなります。

CSSはその中間です。追加CSS欄に書いたものは消せば戻りますが、「書いたCSSが原因で別のページが崩れていた」ことに気づきにくいという落とし穴があります。数行の調整から始めて、不安を感じた時点で相談する、という進め方が現実的です。

なお、プロに依頼する場合も丸投げにする必要はありません。サイト型の骨格まで自分で作り、細部の仕上げや移行作業だけを依頼するという分担にすれば、費用を抑えながら仕上がりの品質を確保できます。

まとめ

SWELLのデザイン自由度を高めるカスタマイズを、3段階に分けて解説しました。

SWELLがブログっぽく見えるのはテーマの限界ではなく、トップページが初期設定のままだからです。まずは、いつでも元に戻せるサイト型カスタマイズから試してみてください。それだけで、サイトの印象は見違えるはずです。

よくある質問

SWELLのカスタマイズにHTMLやCSSの知識は必要ですか？

サイト型トップページの作成や配色変更までなら、知識は不要です。カスタマイザーとブロックエディタの操作だけで完結します。見出しやボタンの細部まで作り込みたい場合に、はじめて数行のCSSが必要になります。

SWELLはブログ以外の会社サイトにも使えますか？

サイト型トップページの作成や配色変更までなら、知識は不要です。カスタマイザーとブロックエディタの操作だけで完結します。見出しやボタンの細部まで作り込みたい場合に、はじめて数行のCSSが必要になります。

SWELLはブログ以外の会社サイトにも使えますか？

使えます。固定ページ中心の構成にすれば、コーポレートサイトや店舗サイトとして十分通用します。お知らせやコラムなど更新するコンテンツがあるサイトとは特に相性が良く、更新のしやすさはブログ用テーマならではの強みです。

SWELLのカスタマイズを制作会社に依頼すると費用はどれくらいかかりますか？

依頼範囲によって大きく変わります。トップページの改修だけなら小規模で済みますが、テーマ移行やページ全体のリニューアルは工数が数倍になります。見積もりを取る際は「どのページを」「どこまで」変えたいのかを整理して伝えると、見積もりの精度が上がります。

サイト型トップページにすると更新が大変になりませんか？

なりません。投稿リストブロックを使えば、記事を公開するだけでトップページの表示が自動で入れ替わります。トップページ自体を触るのは、サービス内容や実績の紹介を変えるときだけです。