くま太君皆のブログ見ると、すっごくオシャレでカッコイイんだよね。
だけど、ボクの美的センスってゼロなんだ。
デザイン力も、ページを作る力もない。
どうしたらいいの？
ブログを制作する段階で、デザイン力があっても、WordPressに慣れていないと、好きなようにレイアウトするのも一苦労ですよね。
こんな時におすすめなのが、WordPressテーマのSWELL！
SWELLには、デザインの着せ替え用に、デモサイトデータが6種類も用意されているんです。
もちろん、SWELLメンバーなら、追加料金なしの無料です！
今回は、簡単に違う雰囲気のサイトが作れる、着せ替え用のデモサイトを１つ１つ見て、
などを、ご案内していきます。
SWELLに限らず、デザイン選びの参考になりますので、良かったら最後までお付き合いください。
くま太君ブログ作成で、作業の時間短縮をしたいならおすすめ！
SWELLはオシャレって評判！
くま太君WordPressテーマ、SWELLって、オシャレで使いやすいって評判なんだ。
仕事で、いくつかWordPressテーマを使ってるけど、ブログで使っているSWELLが１番好きだな。
ガリガリ作り込まなくても、オシャレなデザインがすぐに使えるんだもん。
WordPressテーマのSWELLはオシャレって評判は高いですが、
と言う声も、モチロンあります。
ですが、それでもおすすめしている声は多く見聞きします。
そんなWordPressテーマ界での「オシャレ」の代名詞になりつつある、SWELL。
今回は、そんなSWELLを簡単にオシャレサイトに変身させる、着せ替えデザインをご案内していきます。
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ですが、デザイン面もオシャレで秀逸なんです。
SWELL公式ページでは、トップページにダイナミックな、波の動画を配置しています。
くま太君当ブログもSWELL使用中！
サイトトップには動画（mp4）を配置しているよ。
記事を読んでもらうことがメインのブログでは、このスッキリ感が使いやすいですね。
もう、特にカスタマイズしなくても、そのままでオシャレっていうところが、SWELLの人気の秘密です。
くま太君そして、サイトスピードも速いし、操作性も簡単でサクサク記事も書ける！
もちろんカスタマイズをすれば、どんどんオリジナルデザインに改良していけますよ。
くま太君でも…………
超本格的にカスタマイズするには、CSS・PHPの編集があって難しい！
そこでおすすめなのが、SWELLの着せ替え可能なデモサイトデータです。
こんな希望を叶えてくれます。
小難しいCSS・PHPを使ったカスタマイズも不要で、プラグインで簡単に着せ替え可能です。
ではさっそく、デモサイトデータのデザインと特徴を、見ていきましょう。
デモサイトデータのデザインと特徴をチェック
くま太君デモサイトデータのデザイン・特徴を見てみよう。
どんなイメージに仕上がるのか、
どんなブログに適しているのかなど、
そのデザインを扱うときのポイントも見ていくね。
実際にデモサイトデータを使ってサイトを作るときに、残念な仕上がりにならないように、制作時のポイントも挙げていきます。
デザインの参考になれば幸いです。
くま太君SWELLだと着せ替えだけで、こんなに素敵なデザインが使えちゃう！
モチロン追加料金なしで、無料だよ！
これだけ見たら、もう、ステキサイトが出来るイメージしか湧きません。
スタンダードなブログデザイン
くま太君まずは『SWELL DEMO 01』のデザインから見ていこう！
特に込み入ったデザインではないので、このままの型ですぐに使えます。
Simple is Best。
記事を読んでもらうためには、ゴテゴテしたデザインはむしろ逆効果！
ブログはどうしても文字が多いので、シンプルな方が読者を疲れさせない気配りができますね。
１段上のオシャレデザイン
くま太君次は『SWELL DEMO 02』のデザインを見てみよう！
上部「Pick up posts！」のスライダー下の大きい画像を変えることで、オリジナリティが出せるデザインですね。
ブログタイプのサイト構成で、オリジナル感を強く出せる、素敵なデザインですね。
インパクト絶大デザイン
くま太君次は『SWELL DEMO 03』のデザインだよ。
このタイプは、インパクトがあってかっこいいデザインですね。
大きい画像があることで、インパクトを強く出せるので、サイトのイメージを伝えやすいデザインです。
記事に焦点を当てたデザイン
くま太君同じように見えて、実は全く視点を替えたデザインが、『SWELL DEMO 04』だよ。
パット見は、「DEMO 01・DEMO 02」と同じに見えませんか？
ですが記事一覧の部分が、タブ切り替えを使用していません。
「人気記事」や「新着記事」に焦点をあてつつ、１つ１つの記事に目を向けさせるデザインになっています。
読者の方はほとんどスクロールをしない、と考えると、記事の表示個数が極端に少なくなります。
ですが、1つの記事がバーン！と目に付くので、これぞ！という記事を固定にして、読ませることがしやすい（誘導しやすい）サイトです。
均等に記事を扱うデザイン
くま太君『SWELL DEMO 05』も、オーソドックスなレイアウトだよ。
上の画像だと分かりませんが、ページをスクロールすると、「New Posts」と同じように、それぞれのカテゴリを『ブロック』で表示しています。
ブロックで分けて、それぞれの記事を表示しているので、見やすい反面、スクロールが長くなるので、下の方が見られない可能生が高いです。
デザイン自体はシンプルですが、下まで見てもらうためにも、魅力的なカテゴリ分けが必要になります。
オフィシャルサイトや、サイトにファンが付いている場合などには、強いデザインと言えるでしょう。
画像で訴えるデザイン
くま太君『SWELL DEMO 06』は、画像をメインにレイアウトする、デザインだね。
こちらも「DEMO 03」のように、画像を大きく扱っています。
ですが「DEMO 03」とは違って、画像を全画面に配置していません。
画像に沿うように、スライダーが置かれています。
全体的に画像を大きくすることで、視覚に訴えるデザインになっていますね。
ニュースサイトやマガジンなどに、よく使われるデザインです。
デモサイトだと、シンプルな画像、統一感のある画像しか使っていません。
このようにチョット、コツが必要なデザインではあります。
ですが、読者側からしたら、インパクトが強く、画像からイメージしやすいので、思わずクリック・記憶に残るサイトになるでしょう。
くま太君SWELLいいじゃん！
って思ったら、下記の記事も参考にしてみてくれたら嬉しいな。
SWELL｜デモサイト着せ替え完全攻略！設定方法から注意事項まで！
SWELL｜購入方法からインストールまで完全図解で不安解消！
オリジナリティを出してみよう
くま太君同じ雰囲気のデモサイトデータデザインでも、チョット差があったね。
それぞれの特徴、少しでもイメージしてもらえたかな？
ここからは、デモサイトデータの着せ替えだけにかぎりませんが、よりオリジナリティを出せるポイントを考えてみます。
サイト全体の色を決めよう
くま太君サイト全体のイメージカラーを決めよう。
- ポップな可愛い・楽しいイメージ
- シックな落ち着いたイメージ
- 白を基調でシンプル・清楚なイメージ
あまり奇抜な色使いだと、記事を読みにくく感じます。
また、記事のバナーを毎回作成するのに、バランスを考えるのが大変になるので、サイト全体の色は落ち着いた感じの方が扱いやすいです。
くま太君こっちの記事で、デザイン（色）の使い方について、
ちょっと解説しているよ。
良かったら、参考にしてね。
シルエットAC｜商用利用OK！無料シルエット素材を加工してみた！
ロゴやサイトタイトルのデザインを考えよう
くま太君ロゴやサイトタイトルが入るだけで、もうすでにオリジナル感満載！
サイトの顔とも言えるロゴやタイトルのデザインを考えてみましょう。
色と合わせて、サイトのイメージに近いデザインに仕上げていきましょう。
ロゴの作成や、各記事のバナー作成の素材が気になったら、こちらの記事がおすすめです。
ブログ素材の画像＆イラストを3つの経路からおすすめサイトを厳選！
イラストACアカウント共通利用OK！全18種AC関連サイトをまとめてみた！
上記リンクのような、素材サイトを眺めているだけでも、デザインのインスピレーションが湧いてきます。
デザインの仕事を手掛けるときに、行き詰まったら、素材サイト巡りをすることが結構あるので、おすすめです。
『外観』→『カスタマイズ』で各種設定をしよう
くま太君この『カスタマイズ』を設定していけば、サイトデザインはほぼ終了！
ここで、先ほど決めた色や、ロゴ・タイトルデザインを設定していきます。
WordPressでは、設定しながらすぐに出来栄えが確認できるので、ドンドン設定していきましょう。
今回のまとめ。そのまま使えてプロ級デザインに！
くま太君デモサイトデータで着せ替えをしたら、ステキサイトに大変身！
WordPressテーマ・SWELLでは、オリジナルのデモサイトデザインを、SWELLメンバーに無料配布しています。
デモサイトデザインを利用することで、簡単にオシャレサイトに早変わり！
適用したデザインをそのまま使ってもよし、色を変えるだけでも、イメージがかなり変わります。
サイトトップでは、多くの画像を使用することになりますが、あまりゴチャつき過ぎると、帰って離脱率が上がってしまいます。
- シンプルな画像を使う
- 色数を多く使いすぎない
- 画像の文字数のバランス
- 文字色の工夫
- サイト全体の色を統一
最低限これだけでも気を付けていたら、まずアンバランスなサイトになることはありません。
WordPressテーマ、オシャレの筆頭SWELLで、素敵サイトを作ってみましょう。
ここまでお読みいただき、ありがとうございました。
くま太君デモサイトデータの設定方法や、注意事項、バックアップ方法などは、こっちの記事を確認してね。
＼ 【広告】SWELLなら、設定も編集もサクサク快適！ ／
WordPressテーマ『SWELL』の詳細は公式サイトで！