SWELL はデザインセンス抜群のテーマです。標準機能で基本操作でサイトを作っても素晴らしいオシャレなサイトになりますが、ひとつ工夫することでさらに一段上のおしゃれデザインのサイトを作れます。

本記事では、SWELLの魅力満載のサンプル（デモサイト）をご紹介し、さらにオシャレサイトの作り方も詳しく解説します。デザインセンス抜群の SWELL の世界へ一緒に飛び込みましょう！

SWELL で作ったサンプルサイト（デモサイト）

SWELL で作ったサンプル（デモサイト）、および、作り方（ note で公開中 ）です。

デモサイト（スタイリッシュ型）

デモサイト

スタイリッシュなデザインを用いた和食レストランのサンプルサイトです。

実際のサイトはこちら

http://wpdemopresents.com/swell04/

このデザインの作り方は note（こちら） で公開しています。（有料記事：５８０円）

お得な値段設定です。

作り方はこちら

デモサイト（シンプル）

デモサイト

SWELLの機能をシンプルに利用したサンプルサイトです。

実際のサイトはこちら

http://wpdemopresents.com/swell03/

このデザインの作り方は note（こちら） で公開しています。

大サービス中！

作り方はこちら

デモサイト（サロン向けオシャレ）

デモサイト

エステ・ネイルサロン向けオシャレサイト

実際のサイトはこちら

https://wpdemopresents.com/swell06/

このデザインの作り方は note（こちら） で公開しています。（有料記事：７８０円）

ボリュームあります！

作り方はこちら

デモサイト（シンプル）

デモサイト

左側にナビを固定した珍しいデザインのサンプルサイトです。

実際のサイトはこちら

http://wpdemopresents.com/swell02/

このデザインの作り方は note（こちら） で公開しています。（有料記事：３８０円）

お得な値段設定です。

作り方はこちら

デモサイト（画像リスト型）

デモサイト

旅の写真などをリストっぽく並べています。

実際のサイトはこちら

http://wpdemopresents.com/swell05/

このデザインの作り方は note（こちら） で公開しています。（有料記事：５８０円）

お得な値段設定です。

作り方はこちら

デモサイト（動画背景型）

デモサイト

動画を背景にして大人っぽく作ったサンプルサイトです。

実際のサイトはこちら

http://wpdemopresents.com/swell01/

このデザインの作り方は note（こちら） で公開しています。

大サービス中！

作り方はこちら

デモサイト（美容院サンプル）

デモサイト

スタイリッシュな美容院サンプルです。

実際のサイトはこちら

http://wpdemopresents.com/swell07/

このデザインの作り方は note（こちら） で公開しています。（有料記事：５８０円）

お得な値段設定です。

作り方はこちら

SWELL でオシャレなページを作るポイント

■ メインビジュアルで魅せる

SWELL には「メインビジュアル」というトップページ上でファーストビューを魅力席に見せる大きな画像や動画を前面に出す機能があります。メインビジュアルで魅力的な画像や動画でインパクトを与えることで、ユーザー（読者）を一気にサイトの世界観に引き込むことができます。

サイトのファーストビューを意識してオシャレに魅せたサンプル

全体をブラックにすることで読者の注意を引寄せ、ゆっくり動く動画（ライト）で魅せてます。照らされたワイングラスに注がれたワインに映る灯りがまた美しさを際立たせます。

訪問した読者を一気に魅了することでしょう。

■ ヘッダーとグローバルナビで SWELL の標準機能を存分に利用する

SWELL の ヘッダー部分の工夫は秀逸です。特にファーストビュー（ページを開いた瞬間）のヘッダーの見せ方と、スクロールしたときに再度出てくるムーブはそのまま活かして使いたいデザインです。

初期表示ではヘッダーやロゴを原寸で表示する。

スクロールした場合は、高さを調節したヘッダーを再表示する。

実際の動きは、サンプルサイトで確認してください。
http://wpdemopresents.com/swell04/

ユーザーライクで使いやすく、しかもオシャレな演出なので、ぜひ使いたい機能です。

■ サイト名は、「ロゴ画像」で作る

サイト名（ロゴ）はサイトの雰囲気を感じるポイントの一つです。テキスト（文字列）にした場合、デバイスのフォントに影響を受け、思ったようなイメージにならない場合があります。

サイト名は別途画像で用意しロゴ画像として表示したほうがよりオシャレになります。

ロゴ画像の例

ロゴ画像の使用例です。

テキストのみのロゴですが、画像で作ることでフォントも見た目も固定されますので雰囲気がそのまま伝わります。

■ 「トップページ」に動画やアニメーション効果をつける

ファーストビューでユーザー（読者）を魅了する演出は大切です。派手過ぎず主張しすぎない「さりげないアニメーション」を使うと、ユーザーの心をつかむ効果が期待できます。

サイトがポップな場合は、速くシュッと複数の画像を動かし、サイトがクールでシックな場合には、「ゆっくり大きく」魅せることもオシャレな動きのポイントです。

トップページに動きを付けたサンプル

（動画です、再生することで動きを確認できます）

実際のサイトはこちら

http://wpdemopresents.com/swell01/

SWELLを使って素敵なサイトを作ってくださいね。

■ 横幅一杯の画像を差し込む

WEBサイトは縦長のコンテンツです。上下にスクロールして読み進めるため、縦に縦に意識付けされます。

ただ単純に情報を並べ続けると縦に間延びしたようなサイトになります。適度に横幅一杯の画像などを差し込み、流れを変えることでお社に魅せることができます。

適度に左右横幅一杯の画像を差し込むことで、縦の流れにアクセントを入れる。

実際のサイトはこちら
http://wpdemopresents.com/swell04/

オシャレ度を加速する、絶対使いたい SWELL 専用機能・ブロック

デザインセンス抜群の SWELL には、オシャレに魅せるための機能、ブロックが多く用意されています。

一部を紹介します。

■ メインビジュアル

「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」で設定できるトップページ用の画像設定は SWELL の代表的なオシャレ機能の一つですね。

画像や動画を設定できることは勿論、画像や動画の上にさらにコンテンツを重ねることができます。

SWELLの「ブログパーツ」機能で作った多様に表現したコンテンツを重ねることで、さらに個性的なメインビジュアルに仕上げることが可能です。

■ 「フルワイド」ブロック

SWELL の「フルワイド」ブロックは（サイドバーが無い場合）横幅一杯に画像を表示し、中にコンテンツを入れられる便利なブロックであり、画像の透過度の設定や画像の固定ができるのでオシャレ度を増す重要なアイテムです。

フルワイドブロック使用例

■ 「メディアとテキスト」ブロックの「ブロークングリッド」機能

SWELLでは「ブロークングリッド」機能があり、メディア（画像など）とコンテンツ部分（テキストなど）を一部重ね合わせた表現ができます。重ねることでオシャレ度を増しますね。

美味しいフルーツの恵み

豊かに実るフルーツ、全てが潤いのある味で幸せになる食べ物です。

「ブロークングリッド」使用例

オシャレ度を加速する、SWELLと一緒に使いたいプラグイン

さりげないアニメーションはサイトをおしゃれに楽しく魅せる効果があります。

アニメーション使用例

（初回表示時に上方向にスライドインします）

SWELLでアニメーションを利用した場合は、ブロックエディタ用のアニメーションを追加できるプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」がおススメです。

アニメーションの設定について詳しくはこちらの記事を参照してください。

あわせて読みたい

【SWELL】アニメーション演出を利用する方法「Blocks Animation」プラグイン ブログサイトはポイントでアニメーション演出を利用するとインパクトのあるデザインにできますね。WordPressのテーマ「SWELL」でアニメーションを利用する場合は、アニメーション用のプラグインを用いるのが簡単です。プラグイン「Blocks Animation」を解説します。

まとめ：SWELL でおしゃれなサイトを作る方法！

SWELL はデザインセンスに優れたテーマのため、そのままサイトを作っても高いレベルのオシャレなサイトになりますが、一工夫加えることで更に一段上のオシャレなサイトにすることもできます。

SWELL を使って素敵なサイトを作ってくださいね。

デモサイト（スタイリッシュ型）

デモサイト

スタイリッシュなデザインを用いた和食レストランのサンプルサイトです。

実際のサイトはこちら

http://wpdemopresents.com/swell04/

このデザインの作り方は note（こちら） で公開しています。（有料記事：580円）

お得な値段設定です。

作り方はこちら

デモサイト（シンプル）

デモサイト

SWELLの機能をシンプルに利用したサンプルサイトです。

実際のサイトはこちら

http://wpdemopresents.com/swell03/

このデザインの作り方は note（こちら） で公開しています。（有料記事：100円）

大サービス中！

作り方はこちら

デモサイト（サロン向けオシャレ）

デモサイト

エステ・ネイルサロン向けオシャレサイト

実際のサイトはこちら

https://wpdemopresents.com/swell06/

このデザインの作り方は note（こちら） で公開しています。（有料記事：780円）

ボリュームあります！

作り方はこちら

デモサイト（シンプル）

デモサイト

左側にナビを固定した珍しいデザインのサンプルサイトです。

実際のサイトはこちら

http://wpdemopresents.com/swell02/

このデザインの作り方は note（こちら） で公開しています。（有料記事：380円）

お得な値段設定です。

作り方はこちら

デモサイト（画像リスト型）

デモサイト

旅の写真などをリストっぽく並べています。

実際のサイトはこちら

http://wpdemopresents.com/swell05/

このデザインの作り方は note（こちら） で公開しています。（有料記事：580円）

お得な値段設定です。

作り方はこちら

デモサイト（動画背景型）

デモサイト

動画を背景にして大人っぽく作ったサンプルサイトです。

実際のサイトはこちら

http://wpdemopresents.com/swell01/

このデザインの作り方は note（こちら） で公開しています。（有料記事：100円）

大サービス中！

作り方はこちら

デモサイト（美容院サンプル）

デモサイト

スタイリッシュな美容院サンプルです。

実際のサイトはこちら

http://wpdemopresents.com/swell07/

このデザインの作り方は note（こちら） で公開しています。（有料記事：580円）

お得な値段設定です。

作り方はこちら

PR

＼テーマを変えるなら早いほうがいい／

SWELL のご購入はこちらから

WordPressテーマ「SWELL」

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

よく比較されるテーマ「SWELL」と「AFFINGER」について、両方とも使い込んでいる私の視点で、特徴、メリット、デメリットを解説します。

WordPress のテーマは「デザインの方向性」を決める大切なアイテムです。どちらが優れているということは無く優劣をつけるものではありません。自分の好みやデザインの方向性によりあっているテーマを選ぶのがコツです。

「SWELL」も「AFFINGER」も、両方とも素晴らしいテーマですので、よくご検討くださいませ。

AFFINGER と SWELL を比較

SWELL と AFFINGER の特徴

「SWELL」と「AFFINGER」の特徴をざっと比較します。

	SWELL	AFFINGER
おすすめ対象	初心者に優しい	最初のとっかかりが難しい （できなくはない）
デザイン	洗練されたデザイン （スタイリッシュ）	かっこいいデザイン （シャープ）
操作性、使いやすさ	直感的に簡単に操作できる （※しかし、細かいカスタマイズができないことがある）	細かく操作・設定できる （※しかし、設定できることが多すぎて、操作がわかりにくい時がある）
特徴	インストール後からすでに最高に最適化された美しいデザインでサイトを構築できる。標準のデザイン設定で、すでに神レベル。	最初の設定は最低限の状態なので自分で諸設定をしていく必要がある。設定で細かく変えられるので自分の好みのデザインのサイトを作っていける。
購入	ご購入、導入手順はこちらから SWELLの購入、導入方法について	ご購入、導入手順はこちらから AFFINGERの購入、導入方法について
価格	17,600円	14,800円

SWELL は特に初心者に優しく、初期状態から画面全体のデザインセンスや文章の行間などが最適化されている状態のため、メインの画像などを入れていくなどの簡単操作だけで充分デザイン性の高いサイトを構築できます。

AFFINGERは設定する箇所が多く、また初期状態は最低限の状態のためフォントの大きさや行間などを自分で設定して調整しなければなりません。最初手間がかかりますが、とても細かい設定ができるため、自由自在にサイトデザインを変えていける特徴があります。

全体的なサイトデザイン感（デザインの方向性）の比較

SWELL のサイト例

シンプルデザイン

実際のサイトはこちら

動画背景大人デザイン

実際のサイトはこちら

左側ナビ固定デザイン

実際のサイトはこちら

SWELLは洗練されたスタイリッシュなデザインが得意です。トップページに「メインビジュアル」という特殊な機能を付けており、画像や動画を割り当てていくだけで簡単にファーストビューで読者を引き付けるサイトを作ることができます。

AFFINGER のサイト例

シンプル＆クールデザイン

実際のサイトはこちら

スタイリッシュデザイン

実際のサイトはこちら

動画背景かっこいいデザイン

実際のサイトはこちら

AFFINGERはシンプルでクールなデザインが得意です。形がブログ（HTML / WordPress）の基本の形に則っているためすっきり見えます。設定が細かくできるのでオリジナリティを出しやすく、またHTMLフレームの形が素直なのでCSSなどによるカスタマイズを当てやすい特徴があります。

SWELL と AFFINGER の全体的なデザイン感の違い

SWELLとAFFINGERは「デザインの方向性」「デザインの特徴」が異なります。

SWELLのほうは全体的に洗練されたデザインかつフラットデザインを得意としており読者に「心地よさ」を与える印象です。一方、AFFINGERはリッチなデザインかつクールでかっこいいデザインになりやすく、読者を「惹きつける」デザインになりやすいのが特徴です。

もちろん、SWELLでAFFINGERのようなサイトを作ることも、AFFINGERでSWELLのようなサイトを作ることも頑張れば可能です、しかし、テーマのもともとのデザインポリシーを極端に変えていくようなカスタマイズは大変です。

デザインポリシーに優劣はありませんので、自分のデザインの好みに合わせてテーマを選ぶのが良いでしょう。

記事のデザイン感（記事の読みやすさ、見やすさ）の比較

テーマによって記事の細部のデザインも変わります。「記事の読みやすさ」に大きくかかわり、読者満足度に影響するポイントです。

SWELL の記事デザイン例

SWELL の記事デザインは標準（インストールしたばかりの状態）でほぼデザインの完成形に近く、神レベルで洗練されています。すごすぎる！特に見出しや文章の行間、部品の配色などは設定でわざわざ変える必要が無いほど、そのまま使えます。

※自分でさらに行間や配色を変えていくことも、もちろん可能です。

AFFINGER の記事デザイン例

AFFINGERの場合、初期状態（インストール後）では、お世辞にもデザインが奇麗とは言い難い状況です。フォントはやや小さめで、行間は狭く、配色なども少し古さを感じます。AFFINGERは設定することが前提のテーマなので初期状態のデザインはあまり洗練されていません。

多少手間はかかりますが、自分で各設定を行うことで、SWELLに負けないレベルのデザインにすることが可能です。

（アフィンガーで初期設定を実施した例）

多少初期設定をするとAFFINGERの見た目も良い方向に変わります。また細部まで細かい設定が可能ですので自分好みに変えていくことができます。上の例では、次の設定変更を実施しました（作業時間1時間程度）。

• サイト全体の横幅を広げる
• H2、H3の見出しの配色やスタイルを変更
• フォント設定と行間の設定を変更
• BOXやボタンの配色は記事編集時に変更

SWELL と AFFINGER の記事デザイン感の違い

SWELLは初期状態でデザインがすでに洗練していて、そのまま使ってもスタイリッシュで読みやすいのが良さです。AFFINGERは初期状態では設定が若干古さが見受けられるため、自分で設定しなおす必要があります。

AFFINGERで設定を変えていくには「慣れ」も必要なため、ブログ初心者がいち早く優れたデザインでサイトを作りたいならSWELLが便利ですね。

操作感、使いやすさの比較

ブログを運営していくならば、サイトデザイン（ヘッダーの工夫やトップページ＝見た目など）は自分なりの個性あるオシャレなデザインに変えていきたいものですね。SWELLもAFFINGERもデザイン性が高いテーマで、どちらもおすすめです。詳しく見ていきましょう。

SWELLはとても使いやすいテーマ

【良い】おしゃれなトップページが作りやすい

SWELLはトップページの形が用意されており、ある程度の流れに沿って画像などを割り当てていけばオシャレなデザインでサイトが作れるテーマです。

SWELLは、美しいバランスのヘッダーとヘッダメニュー、サイトのファーストビューを大きく手助けするメインビジュアル、見やすいピックアップバナーなどを標準機能で形作っているため、比較的簡単に、おしゃれなデザインのトップページを作ることができます。

【良い】設定箇所がまとまっていてわかりやすい

SWELLはデザイン系の設定や操作が、ほぼすべて「外観」→「カスタマイズ」内にまとめられています。

上手に分類わけされているので探しやすいのが特徴です。

【良い】記事作成時の一つ一つの操作がわかりやすい

SWELLは記事作成時の操作がとても分かりやすく親切です。

記事内の装飾などを行う場合に、見てわかるような工夫が随所にあるので、わかりやすく使いやすい。すばらしいユーザーライクなテーマですね。

AFFINGERは細かく設定することに優れている

【良い】記事作成時に細かくデザインを設定できる

AFFINGERは部品ごとにさらに細かく装飾を変更できます。

例えばBOXでは「タイトル」「枠線」「背景」など、それぞれの項目ごとに配色を変えられます。

【悪い】設定箇所がわかりにくい

AFFINGERでデザインする場合、設定する箇所が２か所に分かれています。

「外観」→「カスタマイズ」での設定

AFFINGER管理での設定

たとえば同じ「ヘッダー」の見え方のデザイン設定でも、一部は、「外観ーカスタマイズ」の中にあり、一部は「AFFINGER管理」の中にあります。デザインに関して設定する場所が分散しているため、使いにくいと感じることがあります。

SWELLとAFFINGERの操作感の違い

SWELLは初心者でも直感的に使える使いやすいテーマです。使いやすさを求めるならSWELLの方が上位でしょう。

カスタマイズ性の比較

SWELLはカスタマイズの方向性を絞っている

SWELLはトップページや部品のデザイン（形）がある程度決まっています。

SWELLは多くデザインのパターンが事前に用意されており、設定変更レベルである程度変えられるので困ることは殆どありません。しかし、既に用意されているものの中から選んでいく性質が強いため、オリジナリティを出したい場合には対応が難しい（できない）場合があります。

またSWELLは内部構造が強力に作りこまれているため、自作CSSなどを使って追加で改造していくことが比較的難しいテーマです。

AFFINGERは自由度が高く、カスタマイズ性に優れたテーマ

【良い】サイト標準の形に沿っているので、サイトデザインをどの方向にも変えていける

AFFINGERのサイトの構成は、WordPress や HTML の基本の形に沿って作られています。

上から順にヘッダーエリア（ヘッダー部、メニュー部、ヘッダーカード部など）、メインコンテンツエリアと配置されています。もともとのHTMLは上から下に部品を配置していくことが基本であり、AFFINGERの仕組みも基本の形に合わせています。

基本の形からはデザインを好きな方向性に変えやすいのが特徴です。さらに、構成が基本の形にあっていることから、CSSなどを使った自作デザインなども比較的容易です。

フレーム（形）からオリジナリティのあるサイトデザインに変えていきやすいテーマです。

【良い】ヘッダー構造が多重でデザインの幅が広い

AFFINGERはヘッダー部分の構造が多重化されており、細かくカスタマイズができます。

ヘッダー部の構造が多重化および分割されていることから、それぞれに画像を割り当てたり透明化するなどが可能です。ヘッダー部分の表現力（カスタマイズ性）が圧倒的に高いテーマです。

【良い】細かく設定ができる

AFFINGERは部品に対して細かい設定ができるテーマです。

カスタムボタンの場合、枠線の色、文字の色、背景色、グラデーションなどの配色が細かく設定できます。また、枠線の太さや丸みも指定できます。

SWELLとAFFINGERのカスタマイズ性の違い

カスタマイズ性を求めるならば、構造が基本形にあっていて、細かい設定ができるAFFINGERが便利です。

他と被らない個性的なデザインのサイトを作りたい場合、AFFINGERをおすすめします。

SWELL、または、AFFINGERをおすすめめする人

SWELLをおすすめする人

SWELL は初心者にも優しく、上級者でも十分満足できる優れたテーマです。

＼SWELLの購入・導入手順はこちら／

あわせて読みたい

【デザイン良すぎ】ブログ初心者なら SWELL テーマが超おすすめ、特徴・メリット・デメリットを徹底解説 WordPress を使ってブログ運営するならば、適切なテーマ選びは重要です。テーマ「SWELL」はブログ・サイトを作るにあたって、デザイン面が特に秀逸なテーマです。本記事では SWELL の特徴やメリット・デメリットを徹底解説します。あなたの目的に合ったテーマ選びの参考にしてください。

AFFINGERをおすすめする人

AFFINGER は最初こそ慣れるまでに時間がかかりますが、一度覚えてしまえば、多くのカスタマイズの可能性を感じられるテーマです。オリジナリティを出していきたい人におすすめのテーマです。

＼AFFINGER の購入・導入手順はこちら／

ENJOY AFFINGER

【購入特典付き】AFFINGERの選択が成功への近道！特徴・メリット・デメリットを徹底解説 【当サイト限定購入特典あり】AFFINGER テーマを使うと「オリジナリティのあるオシャレなサイト」を作りやすくなります。オリジナリティの高さは他サイトとの差別化を計る…

よくある質問

SWELLとAFFINGERについてよくある質問と回答です。

まとめ：SWELL と AFFINGER の比較

SWELLもAFFINGERも素晴らしいテーマです。それぞれ特徴があるので自分の好みに合わせて選びましょう。

自分に合った WordPress のテーマを使って、素敵なサイトを作ってくださいね。

SWELLの購入・導入手順

＼SWELLの購入・導入手順はこちら／

購入方法とインストール手順

AFFINGER の購入・導入手順

＼AFFINGER の購入・導入手順はこちら／

購入方法とインストール手順

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

WordPress を使ってブログ運営するならば、適切なテーマ選びは重要です。

ブログで収益化を目指すなら記事の質とともに、読みやすさ、見やすさといったデザイン面も重要です。たとえば文章の行間が適切なページは心地よく記事を読めます。読者もしっかり記事を読み進めてくれますね。

テーマ「SWELL」はブログ・サイトを作るにあたって、デザイン面が特に秀逸なテーマです。本記事では SWELL の特徴やメリット・デメリットを徹底解説します。あなたの目的に合ったテーマ選びの参考にしてください。

SWELL を使ったデモサイト

SWELLテーマを利用したシンプルなデザインです。
SWELLの機能をそのまま素直に使って作ったサイトになります。

デザインが洗練していてスタイリッシュでカッコいい。
素敵なデザインのサイトを簡単に作れる優良なテーマですね。

実際のサイトはこちら

PR

＼テーマを変えるなら早いほうがいい／

SWELL のご購入はこちらから

WordPressテーマ「SWELL」

SWELLのおすすめポイント（メリット）

SWELLにはブロガーに向けてお勧めのポイントがたくさんあります。特におすすめの３点を見ていきましょう。

■ 圧倒的な「デザインセンス」

SWELL のおすすめポイントの一つは標準機能でサイトを作っていくだけで洗練された美しいデザインのブログに仕上がることです。SWELL はブログのデザイン最終系ともいえる美麗なデザインを標準で兼ね備えています。

洗練されたトップページデザイン

標準でヘッダーメニューが右上に並ぶ機能美デザインや、トプページにサイトの洗練さと美しさを際立たせることができるメインビジュアルデザインの採用など、SWELL のデザインはブログデザインの理想を追求したような素晴らしいデザインです。

これほどのすごいデザインを標準の機能のまま使えるテーマが SWELL です。

細部にこだわって見やすさを追求した記事デザイン

SWELLは記事ページのデザインにも細部までこだわりが感じられるテーマです。

タイトルや各々の部品は基本的にフラットデザインを採用しており、PCでもスマホでも心地よく見ることができるようデザインされています。また行間が広すぎず狭すぎずすっきりとしていて文章が読みやすいのも好印象です。

記事ページにも、一つ一つにデザインのこだわりを感じられるテーマです。

■ 初心者に優しい、圧倒的な「使いやすさ」

SWELLは出来る限り見て直感的に使えるように画面が工夫されています。

実際にイメージしながら記事の部品を使っていけるような工夫が随所にあり、初心者にも使いやすいテーマです。

■ 多様な記事作成用の部品

有料テーマの優れている点は、記事作成用の部品が用意されているのでCSSなどで部品を作る必要がない点です。

特にSWELLは多くの部品を標準で用意しており、その一つ一つがとても有用です。

記事作成画面には多くのSWELL専用ブロックが用意されています。

SWELL テーマを使ったサンプルサイト

SWELL テーマを使って作ったサンプルサイトです。

サンプルサイト

動画背景大人デザイン

背景の動画がゆっくり動き、オトナチックな雰囲気を出しているデザインです。

実際のサイトはこちら

本デザインの作り方は note 記事で公開中です。

（有料記事：100円）

サンプルサイト

メニュー左側デザイン

メニューを左側面に置いて使い勝手を考慮した珍しいデザインです。

実際のサイトはこちら

本デザインの作り方は note 記事で公開中です。

（有料記事：380円）

サンプルサイト

シンプル＆スタイリッシュ

SWELLテーマを利用したシンプルなデザインです。
SWELLの機能をそのまま素直に使って作ったサイトになります。

デザインが洗練していてスタイリッシュでカッコいい。
素敵なデザインのサイトを簡単に作れる優良なテーマですね。

実際のサイトはこちら

本デザインの作り方は note 記事で公開中です。

（有料記事：100円）

SWELL のデメリット

SWELL はとても使いやすく優良なテーマですが、デメリットもあります。

デメリットと言っても、メリットの裏返しのようなデメリットになりますが、気になる部分ではありますので紹介します。

■ 使える色数（パターン）をあえて絞っている

SWELLは（あえて）配色パターンなどを３種類程度に絞っています。

３種類の色は別途事前に設定ができるため、必ずしも「赤」「青」「緑」必須ではありません。しかし、３種類以上のバリエーションを使い分けることはできません。

通常記事を書く場合は３種類程度あれば十分に足ります。迷うことなくワンクリックで設定できる「使いやすさ」を追求した仕様ですね。しかし、状況によって多色と使い分けたい場合には、CSSなどで色を強制指定する必要があり一気に難しくなります。

SWELLはワンクリックで設定できる「使いやすさ」を重視している。

AFFINGER の場合

SWELL とよく比較されるテーマ「AFFINGER」の場合は、「枠線」「文字」「内側」などの色をブロックごとに個別に設定することができます。

状況によって色を使い分けることができるものの、毎回設定しなければならない手間もあります。

どちらが好ましいかは、使う人の好みやサイトをデザインする方向性などで変わってきますね。

AFFINGER の紹介はこちら

■ 他と似たようなデザインのサイトになりやすい

SWELL 事態のデザインが特徴的であることから、他のSWELLを使い人のサイトと似たような形（デザイン）のサイトになりやすいデメリットがあります。

SWELLは利用ユーザー数が多いため、多くの他サイトと似たデザインとなるかもしれません。

画像や配色で十分にオリジナリティのあるサイトをデザインできる。

■ SWELL の型が強すぎて CSS による追加の改造が難しい

SWELLは基本的にユーザー側で CSS を使わなくても多くのカスタマイズができるように部品のバリエーションなどを整えているテーマです。そのため、基本的には CSS での改造をする機会は殆どありません。

しかし、テーマで用意しているバリエーションには限界があるため、時には CSS や JavaScript などを使ってオリジナルの改造を加えたいときがあります。

SWELL は内部が SWELL 用に強力に作りこまれているため、CSS などでコードを被せることがとても難しいデメリットがあります。

SWELL の標準機能でも多くのことができるため、実際にはCSS改造はあまり使いません。

PR

＼テーマを変えるなら早いほうがいい／

SWELL のご購入はこちらから

WordPressテーマ「SWELL」

有料テーマを使う意味とメリット

WordPress のテーマには無料のテーマ、有料のテーマと数多くのテーマがありますが、SWELLに限らず「有料テーマ」を使うことには意味（メリット）があります。

優れた有料テーマを使うことでサイト作成、記事作成にかける時間を短くすることができます。

記事をより短い時間で書ければ、より早く、より多くの収益化のチャンスが生まれますね。

仮に無料テーマでは１０時間かかる記事が有料テーマでは５時間で書けた場合には、１日あたり５時間の節約です。３０記事を書いた場合。約１５０時間を節約できます。

有料テーマ（約１～２万円）で１５０時間を節約できると思えば十分価値のある自己投資ではないでしょうか。

たとえば、記事の作成スピードが３倍になれば、ブログの収益化も３倍早く実現できますね！

SWELL の値段と購入・導入方法

SWELLの価格は「１７，６００円」です。

購入から導入までの流れは以下の通りです。

詳しくはこちらの記事を参照してください。

あわせて読みたい

【SWELL】購入方法、初期設定、全体デザイン、最初にやること（初心者向け図解で完全案内） WordPress のテーマ「SWELL」を使うと、洗練されており見た目もきれいなデザインのブログを作成できます。本記事では、WordPress の優良テーマ「SWELL」の購入方法とインストール手順、サイトの全体デザインなど、最初にやることを一通り解説します。

PR

＼テーマを変えるなら早いほうがいい／

SWELL のご購入はこちらから

WordPressテーマ「SWELL」

まとめ：SWELL の特徴・メリット・デメリット

ブログで収益化を目指すなら記事の質とともに、読みやすさ、見やすさといったデザイン面も重要です。たとえば文章の行間が適切なページは心地よく記事を読めます。読者もしっかり記事を読み進めてくれるはず。

テーマ「SWELL」はブログ・サイトを作るにあたって、デザイン面が特に秀逸なテーマです。

SWELL を使って素敵なサイトをデザインしてくださいね。

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記