![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-naku.png)
皆のブログ見ると、すっごくオシャレでカッコイイんだよね。
だけど、ボクの美的センスってゼロなんだ。
デザイン力も、ページを作る力もない。
どうしたらいいの?
ブログを制作する段階で、デザイン力があっても、WordPressに慣れていないと、好きなようにレイアウトするのも一苦労ですよね。
こんな時におすすめなのが、WordPressテーマのSWELL!
SWELLには、デザインの着せ替え用に、デモサイトデータが6種類も用意されているんです。
もちろん、SWELLメンバーなら、追加料金なしの無料です!
今回は、簡単に違う雰囲気のサイトが作れる、着せ替え用のデモサイトを1つ1つ見て、
などを、ご案内していきます。
SWELLに限らず、デザイン選びの参考になりますので、良かったら最後までお付き合いください。
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
ブログ作成で、作業の時間短縮をしたいならおすすめ!
![](https://www.zero-blo.com/wp-content/uploads/2023/03/swell-shortcut.png)
![](https://www.zero-blo.com/wp-content/uploads/2023/03/swell-shortcut.png)
![](https://www.zero-blo.com/wp-content/uploads/2023/02/yoast-duplicate-postti-01.png)
![](https://www.zero-blo.com/wp-content/uploads/2023/02/yoast-duplicate-postti-01.png)
SWELLはオシャレって評判!
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
WordPressテーマ、SWELLって、オシャレで使いやすいって評判なんだ。
仕事で、いくつかWordPressテーマを使ってるけど、ブログで使っているSWELLが1番好きだな。
ガリガリ作り込まなくても、オシャレなデザインがすぐに使えるんだもん。
WordPressテーマのSWELLはオシャレって評判は高いですが、
と言う声も、モチロンあります。
ですが、それでもおすすめしている声は多く見聞きします。
そんなWordPressテーマ界での「オシャレ」の代名詞になりつつある、SWELL。
今回は、そんなSWELLを簡単にオシャレサイトに変身させる、着せ替えデザインをご案内していきます。
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
これからブログを作ろうかな、と考えている方へ!
ブログ開設の下準備リストを作ったよ!
良かったら参考にしてね。
⇒ スムーズにブログ開設するなら要チェック!ブログ開設下準備チェックリストもDLできます!
SWELLのデザインを見てみよう
販売価格 | ¥17,600(税込)/買い切り |
動作必須環境 | PHP 7.3 以上/WordPress 推奨5.6以上 |
対応ブラウザ | Edge / Chrome / Firefox / Safari (各最新版) |
ライセンス | GPL100%/ライセンス制限なし。複数サイトで利用可能。 |
決済方法 | クレジットカード ( VISA / Master / AMEX / JCB ) |
ご購入ページ | https://swell-theme.com/download/ |
WordPressテーマSWELLは有料で、¥17,600(税込)と少々お高め。
ですが、買い切りテーマなので、実はこんなに嬉しいことはないんです。
WEBの仕事を手掛ける者からしたら、かなり使い勝手のよい優良テーマであることは間違いありません。
そんなWordPressテーマSWELLですが、デザイン面もオシャレで秀逸なんです。
![WordPressテーマSWELLトップページ](https://www.zero-blo.com/wp-content/uploads/2022/12/swelltop.png)
![WordPressテーマSWELLトップページ](https://www.zero-blo.com/wp-content/uploads/2022/12/swelltop.png)
SWELL公式ページ
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
当ブログもSWELL使用中!
サイトトップには動画(mp4)を配置しているよ。
記事を読んでもらうことがメインのブログでは、このスッキリ感が使いやすいですね。
もう、特にカスタマイズしなくても、そのままでオシャレっていうところが、SWELLの人気の秘密です。
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
そして、サイトスピードも速いし、操作性も簡単でサクサク記事も書ける!
もちろんカスタマイズをすれば、どんどんオリジナルデザインに改良していけますよ。
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-naku.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-naku.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-naku.png)
でも…………
超本格的にカスタマイズするには、CSS・PHPの編集があって難しい!
そこでおすすめなのが、SWELLの着せ替え可能なデモサイトデータです。
こんな希望を叶えてくれます。
小難しいCSS・PHPを使ったカスタマイズも不要で、プラグインで簡単に着せ替え可能です。
ではさっそく、デモサイトデータのデザインと特徴を、見ていきましょう。
デモサイトデータのデザインと特徴をチェック
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
デモサイトデータのデザイン・特徴を見てみよう。
どんなイメージに仕上がるのか、
どんなブログに適しているのかなど、
そのデザインを扱うときのポイントも見ていくね。
![](https://www.zero-blo.com/wp-content/uploads/2022/12/swell-demo-settei-300x158.png)
![](https://www.zero-blo.com/wp-content/uploads/2022/12/swell-demo-settei-300x158.png)
実際にデモサイトデータを使ってサイトを作るときに、残念な仕上がりにならないように、制作時のポイントも挙げていきます。
デザインの参考になれば幸いです。
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
SWELLだと着せ替えだけで、こんなに素敵なデザインが使えちゃう!
モチロン追加料金なしで、無料だよ!
![SWELLデモデータデザイン全6種類](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemosite.png)
![SWELLデモデータデザイン全6種類](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemosite.png)
これだけ見たら、もう、ステキサイトが出来るイメージしか湧きません。
スタンダードなブログデザイン
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
まずは『SWELL DEMO 01』のデザインから見ていこう!
![SWELLデモデータデザイン1](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemo-1.png)
![SWELLデモデータデザイン1](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemo-1.png)
特に込み入ったデザインではないので、このままの型ですぐに使えます。
![SWELLデモデータ記事デザイン1](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemokizi-1.png)
![SWELLデモデータ記事デザイン1](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemokizi-1.png)
Simple is Best。
記事を読んでもらうためには、ゴテゴテしたデザインはむしろ逆効果!
ブログはどうしても文字が多いので、シンプルな方が読者を疲れさせない気配りができますね。
1段上のオシャレデザイン
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
次は『SWELL DEMO 02』のデザインを見てみよう!
![SWELLデモデータデザイン2](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemo-2.png)
![SWELLデモデータデザイン2](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemo-2.png)
上部「Pick up posts!」のスライダー下の大きい画像を変えることで、オリジナリティが出せるデザインですね。
![SWELLデモデータ記事デザイン2](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemokizi-2.png)
![SWELLデモデータ記事デザイン2](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemokizi-2.png)
ブログタイプのサイト構成で、オリジナル感を強く出せる、素敵なデザインですね。
インパクト絶大デザイン
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
次は『SWELL DEMO 03』のデザインだよ。
![SWELLデモデータデザイン3](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemo-3.png)
![SWELLデモデータデザイン3](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemo-3.png)
このタイプは、インパクトがあってかっこいいデザインですね。
![SWELLデモデータ記事デザイン3](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemokizi-3.png)
![SWELLデモデータ記事デザイン3](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemokizi-3.png)
大きい画像があることで、インパクトを強く出せるので、サイトのイメージを伝えやすいデザインです。
記事に焦点を当てたデザイン
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yurumi.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yurumi.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yurumi.png)
同じように見えて、実は全く視点を替えたデザインが、『SWELL DEMO 04』だよ。
![SWELLデモデータデザイン4](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemo-4.png)
![SWELLデモデータデザイン4](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemo-4.png)
パット見は、「DEMO 01・DEMO 02」と同じに見えませんか?
ですが記事一覧の部分が、タブ切り替えを使用していません。
「人気記事」や「新着記事」に焦点をあてつつ、1つ1つの記事に目を向けさせるデザインになっています。
![SWELLデモデータ記事デザイン4](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemokizi-4.png)
![SWELLデモデータ記事デザイン4](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemokizi-4.png)
読者の方はほとんどスクロールをしない、と考えると、記事の表示個数が極端に少なくなります。
ですが、1つの記事がバーン!と目に付くので、これぞ!という記事を固定にして、読ませることがしやすい(誘導しやすい)サイトです。
均等に記事を扱うデザイン
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
『SWELL DEMO 05』も、オーソドックスなレイアウトだよ。
![SWELLデモデータデザイン5](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemo-5.png)
![SWELLデモデータデザイン5](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemo-5.png)
上の画像だと分かりませんが、ページをスクロールすると、「New Posts」と同じように、それぞれのカテゴリを『ブロック』で表示しています。
![SWELLデモデータ記事デザイン5](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemokizi-5.png)
![SWELLデモデータ記事デザイン5](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemokizi-5.png)
ブロックで分けて、それぞれの記事を表示しているので、見やすい反面、スクロールが長くなるので、下の方が見られない可能生が高いです。
デザイン自体はシンプルですが、下まで見てもらうためにも、魅力的なカテゴリ分けが必要になります。
オフィシャルサイトや、サイトにファンが付いている場合などには、強いデザインと言えるでしょう。
画像で訴えるデザイン
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
『SWELL DEMO 06』は、画像をメインにレイアウトする、デザインだね。
![SWELLデモデータデザイン6](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemo-6.png)
![SWELLデモデータデザイン6](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemo-6.png)
こちらも「DEMO 03」のように、画像を大きく扱っています。
ですが「DEMO 03」とは違って、画像を全画面に配置していません。
画像に沿うように、スライダーが置かれています。
全体的に画像を大きくすることで、視覚に訴えるデザインになっていますね。
![SWELLデモデータ記事デザイン6](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemokizi-6.png)
![SWELLデモデータ記事デザイン6](https://www.zero-blo.com/wp-content/uploads/2022/12/swelldemokizi-6.png)
ニュースサイトやマガジンなどに、よく使われるデザインです。
デモサイトだと、シンプルな画像、統一感のある画像しか使っていません。
このようにチョット、コツが必要なデザインではあります。
ですが、読者側からしたら、インパクトが強く、画像からイメージしやすいので、思わずクリック・記憶に残るサイトになるでしょう。
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
SWELLいいじゃん!
って思ったら、下記の記事も参考にしてみてくれたら嬉しいな。
SWELL|デモサイト着せ替え完全攻略!設定方法から注意事項まで!
SWELL|購入方法からインストールまで完全図解で不安解消!
オリジナリティを出してみよう
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
同じ雰囲気のデモサイトデータデザインでも、チョット差があったね。
それぞれの特徴、少しでもイメージしてもらえたかな?
ここからは、デモサイトデータの着せ替えだけにかぎりませんが、よりオリジナリティを出せるポイントを考えてみます。
サイト全体の色を決めよう
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
サイト全体のイメージカラーを決めよう。
- ポップな可愛い・楽しいイメージ
- シックな落ち着いたイメージ
- 白を基調でシンプル・清楚なイメージ
あまり奇抜な色使いだと、記事を読みにくく感じます。
また、記事のバナーを毎回作成するのに、バランスを考えるのが大変になるので、サイト全体の色は落ち着いた感じの方が扱いやすいです。
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
こっちの記事で、デザイン(色)の使い方について、
ちょっと解説しているよ。
良かったら、参考にしてね。
シルエットAC|商用利用OK!無料シルエット素材を加工してみた!
ロゴやサイトタイトルのデザインを考えよう
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yurumi.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yurumi.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yurumi.png)
ロゴやサイトタイトルが入るだけで、もうすでにオリジナル感満載!
サイトの顔とも言えるロゴやタイトルのデザインを考えてみましょう。
色と合わせて、サイトのイメージに近いデザインに仕上げていきましょう。
![](https://www.zero-blo.com/wp-content/uploads/2022/12/swell-favicon-300x158.png)
![](https://www.zero-blo.com/wp-content/uploads/2022/12/swell-favicon-300x158.png)
ロゴの作成や、各記事のバナー作成の素材が気になったら、こちらの記事がおすすめです。
ブログ素材の画像&イラストを3つの経路からおすすめサイトを厳選!
イラストACアカウント共通利用OK!全18種AC関連サイトをまとめてみた!
上記リンクのような、素材サイトを眺めているだけでも、デザインのインスピレーションが湧いてきます。
デザインの仕事を手掛けるときに、行き詰まったら、素材サイト巡りをすることが結構あるので、おすすめです。
『外観』→『カスタマイズ』で各種設定をしよう
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
この『カスタマイズ』を設定していけば、サイトデザインはほぼ終了!
ここで、先ほど決めた色や、ロゴ・タイトルデザインを設定していきます。
WordPressでは、設定しながらすぐに出来栄えが確認できるので、ドンドン設定していきましょう。
今回のまとめ。そのまま使えてプロ級デザインに!
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-yorokobu.png)
デモサイトデータで着せ替えをしたら、ステキサイトに大変身!
WordPressテーマ・SWELLでは、オリジナルのデモサイトデザインを、SWELLメンバーに無料配布しています。
デモサイトデザインを利用することで、簡単にオシャレサイトに早変わり!
適用したデザインをそのまま使ってもよし、色を変えるだけでも、イメージがかなり変わります。
サイトトップでは、多くの画像を使用することになりますが、あまりゴチャつき過ぎると、帰って離脱率が上がってしまいます。
- シンプルな画像を使う
- 色数を多く使いすぎない
- 画像の文字数のバランス
- 文字色の工夫
- サイト全体の色を統一
最低限これだけでも気を付けていたら、まずアンバランスなサイトになることはありません。
WordPressテーマ、オシャレの筆頭SWELLで、素敵サイトを作ってみましょう。
ここまでお読みいただき、ありがとうございました。
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
![](https://www.zero-blo.com/wp-content/uploads/2021/12/kuma-futuu.png)
デモサイトデータの設定方法や、注意事項、バックアップ方法などは、こっちの記事を確認してね。
![](https://www.zero-blo.com/wp-content/uploads/2022/12/swell-demo-settei-300x158.png)
![](https://www.zero-blo.com/wp-content/uploads/2022/12/swell-demo-settei-300x158.png)
\ 【広告】SWELLなら、設定も編集もサクサク快適! /
WordPressテーマ『SWELL』の詳細は公式サイトで!