SWELLブロックでおしゃれなデザインは作れる？実際に作って検証してみた

SWELLブロックでおしゃれなデザインを作成してみた

ブロークン型のメディアと文章を使用したデザイン

画像とテキストをあえてずらして配置することで、単調にならず印象的なレイアウトを作れます。商品の魅力やブランドの世界観を伝えたいサイトにおすすめです。

①

②

SWELLバナーリンクを使用したデザイン

SWELLのバナーリンクは、WordPress標準のカバーブロックに似ていますが、最初からタイトルとサブテキストの入力欄が用意されているため、画像付きバナーを簡単に作成できます。

また、PC・スマホそれぞれでバナーの高さを設定できるのも便利なポイントです。カバーブロックではPCの高さ設定のみでスマホサイズはCSSで調整していた部分も、SWELLバナーリンクなら管理画面から設定できます。

WordPress標準のカバーブロックにはない、角を丸くできる機能も便利です。丸みのあるデザインはやわらかくおしゃれな印象を与えてくれます。

画像の表示位置（フォーカルポイント）を細かく指定できない点や、カバーブロックのように自由なレイアウトは出来ません。しかし設定がシンプルで誰でも簡単におしゃれなバナーを作成できます。

①

②

SWELL ボックスメニュー

ボックスメニューは、アイコンとタイトルを組み合わせて一覧表示できるブロックです。縦並び・横並びを選択でき、アイコンやテキスト、背景色も自由に設定できます。

アイコンはSWELL標準のアイコンから選ぶだけでなく、画像をアップロードして使用することも可能です。ただし、画像は小さく表示されるため、デザイン面ではアイコンの方がおすすめです。

また、PC・タブレット・スマホごとに表示カラム数を設定できるのも便利なポイントです。ボックス間の余白やアイコンサイズも調整できます。

ボックスにリンク設定も出来ます。

余白を部分的に細かく調整することはできないため、デザインの自由度はそれほど高くありません。細部までこだわったレイアウトには向きませんが、シンプルで見やすいメニューを手軽に作りたい場合には非常に使いやすいブロックです。

①

縦並び

②

縦並び

③

横並び

④

横並び

SWELL リッチカラム

リッチカラムは、WordPress標準のカラムブロックでは物足りない部分をカバーしてくれるSWELL独自のブロックです。個人的にもよく使う便利なブロックの一つです。

標準のカラムブロックでは、PCで3列×2段に作ったレイアウトをスマホで2列×3段に変更するなど、表示数を細かく調整することができません。しかし、リッチカラムならPC・タブレット・スマホごとにカラム数を自由に設定できます。

また、画像の表示位置（フォーカルポイント）を設定できるのも使いやすいポイントです。スマホ表示で画像の見せたい部分が切れてしまう心配が少なくなります。

さらに、各カラム内には見出しや画像、ボタンなど好きなブロックを自由に配置できます。デザインの自由度と使いやすさのバランスが良く、SWELLの中でも特に優秀なブロックだと感じています。

個人的には、ボックスメニューのようなアイコンとタイトルを並べるデザインも、リッチカラムで作ることが多いです。リッチカラムなら余白を自由に調整できるため、デザインの幅が広がります。

①

ギャラリーのようなデザインも出来ます

②

カラム間の余白は、0.3〜0.5程度に設定するとすっきりとしたおしゃれなデザインに仕上がります。

③

制作実績や作品紹介では、カラム間の余白を大きめに取るのもおすすめです。一つひとつの作品が引き立ち、高級感や存在感のあるデザインになります。(下記のサンプルでは、左右・上下ともに6emの余白を設定しています。)

SWELLフルワイドブロック

フルワイドブロックは、企業サイトを制作する際によく使う便利なブロックです。

名前の通り、画面いっぱいに広がる横幅の広いセクションを作成できます。背景色や背景画像を設定でき、文章・画像・ボタンなどのコンテンツも自由に配置できます。

企業サイトでは、サービス紹介や会社紹介、メッセージセクションなど、ページ内の各セクションとしてフルワイドブロックを重ねて活用します。

また、上下の余白（padding）も細かく調整できるため、余白を活かしたゆったりとしたデザインも作成可能です。

SWELL独自の機能として、セクションの境界線を「斜線・円・波・ジグザグ」などに変更できます。通常のブロックにはない表現ができるため、よりデザイン性の高いサイト制作ができます。

さらに、画像の表示位置を調整できる「焦点ピッカー」により、背景画像の見せたい部分を自由に設定できます。人物写真などでも、重要な部分をきれいに配置できるのが便利なポイントです。

固定背景を利用すれば、スクロール時に背景画像が動き、ページに奥行きや動きを加えることもできます。セクションの間に取り入れることで、単調にならない印象的なサイトを作成できます。

背景に画像を設定すると境界線デザインの機能は使えないので、使用する場合は通常のテキストのフルワイドブロックではさむのがおすすめです。

とても使いが勝手のいいブロックですが個人的に上下paddingが細かい調整や幅があればもっと使いやすいと思います。細かい調整が必要な場合はスペーサーでの調整がおすすめです。

①

境界線に斜線を使用したデザイン

画像を固定背景にしたバージョンはこちら。動きが出ておしゃれです。

②

境界線にジグザグを使用したデザイン

固定背景にするとこんな感じです。

②

フルワイドブロックを背景に使用したデザイン

背景を固定背景にしたデザイン

SWELL STEPブロック

ステップブロックは、手順や流れを分かりやすく表示できるSWELLの便利なブロックです。

企業サイトでは「お問い合わせの流れ」や「制作の流れ」、「会社の歴史」などで活用出来ます。

ステップブロックは、アイコンのデザインを塗りつぶし・枠線・丸や四角などから選択できるほか、ステップ名や数字部分のテキストも変更でき、細かいカスタマイズが可能です。

表示パターンは「デフォルト」「スモール」「ビッグ」などが用意されていますが、

企業サイトで使用する場合は、スモールがおすすめです。シンプルでデザインの主張が強すぎず、すっきりとした印象に仕上がります。画像をいれるとよりわイメージしやすいので一緒に画像を入れるのがおすすめです。

デフォルトは数字部分が大きく表示されるため、少しポップな印象になります。ビッグはセンター配置なのでスマホサイトなどではおすすめですが情報量が多いページや企業サイトの流れ紹介では、少し間延びした印象になる場合があります。サイトデザインによりありかなと思います。

①

スモール（企業サイトはおすすめ）

SWELL アコーディオンブロック

アコーディオンブロックは、クリックすると内容が開閉するFAQなどでよく使われるSWELLの便利なブロックです。

質問を一覧で表示できるため、ページをすっきり見せながら必要な情報だけ確認してもらえます。よくある質問（Q&A）、料金表の補足説明、サービス詳細など、情報量が多いページで活用すると効果的です。

SWELLでは、4パターンのデザインがあります。タイトル部分だけでなく開いた後の内容にも自由にブロックを追加できるため、文章だけでなく画像やボタンを配置することも可能です。

個人的なおすすめはデォルトか囲い枠が企業サイトには使いやすいです。

①

デフォルト

②

シンプル

③

囲い枠

④

メインカラー

SWELL タブブロック

タブブロックは、複数の情報を切り替えて表示できるSWELLのブロックです。

内容をカテゴリーごとに整理できるため、1つの場所に多くの情報を掲載したい場合に活用できます。例えば、料金プランの比較、サービス内容の分類、店舗情報、商品カテゴリー、スケジュールなどで使いやすいブロックです。

デザインはノーマル、ふきだし、下線と3パターンあります。

タブをクリックすることで表示内容が切り替わるため、ページをすっきり見せながら必要な情報を分かりやすく伝えられます。

タブ幅はPC,スマホ別でサイズ調整が可能なのも使いやすいです。

個人的にはタブ背景色やラインをcssで調整しているのでこの辺がカスタマイズ出来れば便利、後は縦積みブロックがあれば最高。。。

①

ノーマル

②

吹き出し

③

下線

タブ幅も選択出来る

固定幅（25%）

端まで並べる（均等幅で）

スクロールで表示

SWELLブロックまとめ

今回のサンプルサイトでは、主に以下のSWELLブロックを使用して作成しました。

企業サイトを制作する場合、実際によく使うのはこのあたりのブロックです。特にリッチカラムやフルワイドブロックは使用頻度が高く、サイト全体のデザインを作る上で欠かせない存在です。

ボタンブロックは企業サイトでは意外と使用頻度が高くありません。ホバーアニメーションや矢印の動き、角丸デザイン、背景の広がり演出など、細かなデザインにこだわるケースが少なくないため、CSSでカスタマイズしたボタンを作成することが多いです。

実際にSWELLだけでサンプルサイトを作成してみましたが、特別なプラグインやカスタマイズを使わなくても十分おしゃれなデザインを作ることができたのではないでしょうか。

細かなデザインにこだわる場合はCSSによる調整が必要になることもありますが、標準機能だけでも企業サイトとして十分なクオリティを実現できます。

SWELLは「デザインのしやすさ」と「使いやすさ」のバランスが良く、ホームページ制作にもおすすめできるWordPressテーマだと感じています。