【Pick Up!!】『ブログ用語集』始めました!100以上の用語をサクッと解説!

SWELL|デザイン力不要?!デモサイト着せ替えでプロ級サイトに!

SWELLデモサイトデータを使ってプロ級のサイトデザインに!
くま太君

皆のブログ見ると、すっごくオシャレでカッコイイんだよね。
だけど、ボクの美的センスってゼロなんだ。

デザイン力も、ページを作る力もない。
どうしたらいいの?

ブログを制作する段階で、デザイン力があっても、WordPressに慣れていないと、好きなようにレイアウトするのも一苦労ですよね。

・サイトデザインに悩んで、先に進めない
・2つ目のブログを作りたいけど、違うデザインにしたい
・WordPressで思ったようにレイアウトできない

こんな時におすすめなのが、WordPressテーマのSWELL!

SWELLには、デザインの着せ替え用に、デモサイトデータが6種類も用意されているんです。

もちろん、SWELLメンバーなら、追加料金なしの無料です!

・同じSWELLでも、イメージの違うサイトが作れる

今回は、簡単に違う雰囲気のサイトが作れる、着せ替え用のデモサイトを1つ1つ見て、

・特徴
・メリット・デメリット
・使うと、どんなイメージのサイトになるのか
・デザインを扱うときのポイント

などを、ご案内していきます。

SWELLに限らず、デザイン選びの参考になりますので、良かったら最後までお付き合いください。

この記事を読むと分かること
・SWELLの各デザインの特徴

目次

SWELLはオシャレって評判!

くま太君

WordPressテーマ、SWELLって、オシャレで使いやすいって評判なんだ。
仕事で、いくつかWordPressテーマを使ってるけど、ブログで使っているSWELLが1番好きだな。
ガリガリ作り込まなくても、オシャレなデザインがすぐに使えるんだもん。

WordPressテーマのSWELLはオシャレって評判は高いですが、

・シンプルにおしゃれなかんじを出したいけど、センスという壁が立ちはだかっている…。

・おしゃれにカスタマイズ可能ですが、設定できる部分がたくさんあって初心者には難しい…。

・SWELLはおしゃれなんだけど、僕が使うとダサくなる

・ブログでcocoonからswellに変えたけど…修正が追いつかないし、swellのおしゃれさを活かしきれない

と言う声も、モチロンあります。

ですが、それでもおすすめしている声は多く見聞きします。

https://twitter.com/htk_guru2/status/1538775003050569728

そんな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/
SWELL情報

WordPressテーマSWELLは有料で、¥17,600(税込)と少々お高め。

ですが、買い切りテーマなので、実はこんなに嬉しいことはないんです。

・買い切り
・¥17,600(税込)以外かからない
・デモサイト着せ替えデザインが使える
・他テーマからの乗り換えプラグインを用意
・GPL100%でライセンス制限がないので使い放題

WEBの仕事を手掛ける者からしたら、かなり使い勝手のよい優良テーマであることは間違いありません

そんなWordPressテーマSWELLですが、デザイン面もオシャレで秀逸なんです。

WordPressテーマSWELLトップページ
SWELLトップページ

SWELL公式ページでは、トップページにダイナミックな、波の動画を配置しています。

動画・画像を簡単に配置することが可能

くま太君

当ブログもSWELL使用中!
サイトトップには動画(mp4)を配置しているよ。

記事を読んでもらうことがメインのブログでは、このスッキリ感が使いやすいですね。

もう、特にカスタマイズしなくても、そのままでオシャレっていうところが、SWELLの人気の秘密です。

くま太君

そして、サイトスピードも速いし、操作性も簡単でサクサク記事も書ける!

もちろんカスタマイズをすれば、どんどんオリジナルデザインに改良していけますよ。

くま太君

でも…………
超本格的にカスタマイズするには、CSS・PHPの編集があって難しい!

そこでおすすめなのが、SWELLの着せ替え可能なデモサイトデータです。

・みんなと同じデザインは嫌だ!
・もっと簡単にオシャレにしたい!
・写真を大きく載せるサイトにしたい!

こんな希望を叶えてくれます。

小難しいCSS・PHPを使ったカスタマイズも不要で、プラグインで簡単に着せ替え可能です。

ではさっそく、デモサイトデータのデザインと特徴を、見ていきましょう。

デモサイトデータのデザインと特徴をチェック

くま太君

デモサイトデータのデザイン・特徴を見てみよう。
どんなイメージに仕上がるのか、
どんなブログに適しているのかなど、
そのデザインを扱うときのポイントも見ていくね。

デザインは全部で6種類!

実際にデモサイトデータを使ってサイトを作るときに、残念な仕上がりにならないように、制作時のポイントも挙げていきます

デザインの参考になれば幸いです。

くま太君

SWELLだと着せ替えだけで、こんなに素敵なデザインが使えちゃう!
モチロン追加料金なしで、無料だよ!

SWELLデモデータデザイン全6種類
SWELL デモサイトデザイン一覧

【SWELLデモサイトページを見る】

これだけ見たら、もう、ステキサイトが出来るイメージしか湧きません。

スタンダードなブログデザイン

くま太君

まずは『SWELL DEMO 01』のデザインから見ていこう!

SWELLデモデータデザイン1
DEMO 01トップページ

【SWELL DEMO 01ページを見る】

シンプルで、今流行のブログらしいデザイン

特に込み入ったデザインではないので、このままの型ですぐに使えます

SWELLデモデータ記事デザイン1
DEMO 01記事ページ

シンプルなので、他のブログとデザインの面で同じに見える。

シンプルなため、逆にデザインに失敗がない。
画像やカラーリングだけでもオリジナリティを1番出しやすい。

Simple is Best。

記事を読んでもらうためには、ゴテゴテしたデザインはむしろ逆効果!

ブログはどうしても文字が多いので、シンプルな方が読者を疲れさせない気配りができますね。

画像に文字を載せると、その分全体にゴチャッとするので、文字の大きさ・色合いを統一するとスッキリします。

1段上のオシャレデザイン

くま太君

次は『SWELL DEMO 02』のデザインを見てみよう!

SWELLデモデータデザイン2
DEMO 02トップページ

【SWELL DEMO 02ページを見る】

画像の上にスライダーを乗せて、1段上のオシャレ感を演出

カテゴリをタブ切り替えで、見やすく配置

上部「Pick up posts!」のスライダー下の大きい画像を変えることで、オリジナリティが出せるデザインですね。

画像をモノクロやセピアなど、1色で配色したら、引き締まった大人デザインに早変わり!

SWELLデモデータ記事デザイン2
DEMO 02記事ページ

スライダー下の画像を派手にすると、スライダーが見えにくくなるので、選ぶ画像が難しい。
場合によっては、ごちゃついたサイトに見える。

サイト全体の画像選びが上手くいけば、かなりオシャレなサイトになる。
トップページのこのデザインが無料で使用できるのは、かなり嬉しい。

ブログタイプのサイト構成で、オリジナル感を強く出せる、素敵なデザインですね。

トップページの大きな画像は、シンプルな絵面が楽に合わせやすいです。

インパクト絶大デザイン

くま太君

次は『SWELL DEMO 03』のデザインだよ。

SWELLデモデータデザイン3
DEMO 03トップページ

【SWELL DEMO 03ページを見る】

画像を切り替えつつ、ほぼ全画面に表示

スクロール後すぐ、カテゴリを配置

このタイプは、インパクトがあってかっこいいデザインですね。

SWELLデモデータ記事デザイン3
DEMO 03記事ページ

大きい画像のイメージ選びが難しい。
選び方によって、トップの大きい画像は、スマホ表示で残念な結果に。
すぐに記事を読みたい読者向けには、不向き。

画像が大きいのでインパクト・訴求力が高い。
特化ブログ・オフィシャルサイトでは、特にブログテーマを打ち出しやすい。

大きい画像があることで、インパクトを強く出せるので、サイトのイメージを伝えやすいデザインです。

デモサイトのように、全体の色を統一すると、引き締まります。

カテゴリボタンをレイアウトしているのと、画像を大きく使用しているので、旅行や料理、写真を前面に出したいサイトに向いています。

記事に焦点を当てたデザイン

くま太君

同じように見えて、実は全く視点を替えたデザインが、『SWELL DEMO 04』だよ。

SWELLデモデータデザイン4
DEMO 04トップページ

【SWELL DEMO 04ページを見る】

記事をメインに打ち出すデザイン

パット見は、「DEMO 01・DEMO 02」と同じに見えませんか?

ですが記事一覧の部分が、タブ切り替えを使用していません。

「人気記事」や「新着記事」に焦点をあてつつ、1つ1つの記事に目を向けさせるデザインになっています。

SWELLデモデータ記事デザイン4
DEMO 04記事ページ

サイトトップでは、メニューバーが上部にあるが、カテゴリが分かりにくい。
読者が記事をカテゴリから閲覧する傾向は、下がる。

一覧部分をどう表示するか悩む
  ↓
・人気順にするか新着順にするか
・自分の読んで欲しい記事を、独自にピックアップするか

1つの記事が目に付きやすいので、読ませたい記事に誘導できる。

読者の方はほとんどスクロールをしない、と考えると、記事の表示個数が極端に少なくなります。

ですが、1つの記事がバーン!と目に付くので、これぞ!という記事を固定にして、読ませることがしやすい(誘導しやすい)サイトです。

均等に記事を扱うデザイン

くま太君

『SWELL DEMO 05』も、オーソドックスなレイアウトだよ。

SWELLデモデータデザイン5
DEMO 05トップページ

【SWELL DEMO 05ページを見る】

他のスライダーのデザインよりも、画像を大きく使うことで、記事のピックアップ感が強くなる。

上の画像だと分かりませんが、ページをスクロールすると、「New Posts」と同じように、それぞれのカテゴリを『ブロック』で表示しています。

SWELLデモデータ記事デザイン5
DEMO 05記事ページ

トップページのスクロールが、長くなる。
隠れている部分のカテゴリが見られない可能生が高い。

タブ切り替えのように、記事が隠れていないので、クリック率が上がる可能生がある。
カテゴリがブロックごとに別れていて、分かりやすい。

ブロックで分けて、それぞれの記事を表示しているので、見やすい反面、スクロールが長くなるので、下の方が見られない可能生が高いです。

このタイプであれば、上部のスライダー下に、小さくても良いので、アンカーリンクを置いて、下の対応カテゴリに飛ぶようにすれば、万事解決です。

デザイン自体はシンプルですが、下まで見てもらうためにも、魅力的なカテゴリ分けが必要になります。

オフィシャルサイトや、サイトにファンが付いている場合などには、強いデザインと言えるでしょう。

画像で訴えるデザイン

くま太君

『SWELL DEMO 06』は、画像をメインにレイアウトする、デザインだね。

SWELLデモデータデザイン6
DEMO 06トップページ

【SWELL DEMO 06ページを見る】

画像命の、「イメージ」を重点に置いたデザイン

こちらも「DEMO 03」のように、画像を大きく扱っています。

ですが「DEMO 03」とは違って、画像を全画面に配置していません

画像に沿うように、スライダーが置かれています。

全体的に画像を大きくすることで、視覚に訴えるデザインになっていますね。

SWELLデモデータ記事デザイン6
DEMO 06記事ページ

考えずに画像を使うとゴチャついて、かえって見にくいサイトになってしまう。
画像選びが難しい。
画像に文字を入れすぎると、うるさくなってしまう。

画像イメージで記事を案内できるので、印象に残りやすい。
画像を見て、連想→クリックにつながりやすい。

ニュースサイトやマガジンなどに、よく使われるデザインです。

デモサイトだと、シンプルな画像、統一感のある画像しか使っていません。

このようにチョット、コツが必要なデザインではあります。

ですが、読者側からしたら、インパクトが強く、画像からイメージしやすいので、思わずクリック・記憶に残るサイトになるでしょう。

くま太君

SWELLいいじゃん!
って思ったら、下記の記事も参考にしてみてくれたら嬉しいな。

SWELL|デモサイト着せ替え完全攻略!設定方法から注意事項まで!
SWELL|購入方法からインストールまで完全図解で不安解消!

オリジナリティを出してみよう

くま太君

同じ雰囲気のデモサイトデータデザインでも、チョット差があったね。
それぞれの特徴、少しでもイメージしてもらえたかな?

ここからは、デモサイトデータの着せ替えだけにかぎりませんが、よりオリジナリティを出せるポイントを考えてみます。

サイト全体の色を決めよう

くま太君

サイト全体のイメージカラーを決めよう。

  • ポップな可愛い・楽しいイメージ
  • シックな落ち着いたイメージ
  • 白を基調でシンプル・清楚なイメージ

あまり奇抜な色使いだと、記事を読みにくく感じます。

また、記事のバナーを毎回作成するのに、バランスを考えるのが大変になるので、サイト全体の色は落ち着いた感じの方が扱いやすいです。

くま太君

こっちの記事で、デザイン(色)の使い方について、
ちょっと解説しているよ。
良かったら、参考にしてね。

シルエットAC|商用利用OK!無料シルエット素材を加工してみた!

ロゴやサイトタイトルのデザインを考えよう

くま太君

ロゴやサイトタイトルが入るだけで、もうすでにオリジナル感満載!

サイトの顔とも言えるロゴやタイトルのデザインを考えてみましょう。

色と合わせて、サイトのイメージに近いデザインに仕上げていきましょう。

ロゴの作成や、各記事のバナー作成の素材が気になったら、こちらの記事がおすすめです。

ブログ素材の画像&イラストを3つの経路からおすすめサイトを厳選!
イラストACアカウント共通利用OK!全18種AC関連サイトをまとめてみた!

上記リンクのような、素材サイトを眺めているだけでも、デザインのインスピレーションが湧いてきます

デザインの仕事を手掛けるときに、行き詰まったら、素材サイト巡りをすることが結構あるので、おすすめです。

『外観』→『カスタマイズ』で各種設定をしよう

くま太君

この『カスタマイズ』を設定していけば、サイトデザインはほぼ終了!

『外観』→『カスタマイズ』
でサイト全体のデザイン設定ができる。

ここで、先ほど決めた色や、ロゴ・タイトルデザインを設定していきます。

WordPressでは、設定しながらすぐに出来栄えが確認できるので、ドンドン設定していきましょう。

今回のまとめ。そのまま使えてプロ級デザインに!

くま太君

デモサイトデータで着せ替えをしたら、ステキサイトに大変身!

WordPressテーマ・SWELLでは、オリジナルのデモサイトデザインを、SWELLメンバーに無料配布しています。

デモサイトデザインを利用することで、簡単にオシャレサイトに早変わり!

適用したデザインをそのまま使ってもよし、色を変えるだけでも、イメージがかなり変わります。

サイトトップでは、多くの画像を使用することになりますが、あまりゴチャつき過ぎると、帰って離脱率が上がってしまいます。

  1. シンプルな画像を使う
  2. 色数を多く使いすぎない
  3. 画像の文字数のバランス
  4. 文字色の工夫
  5. サイト全体の色を統一

最低限これだけでも気を付けていたら、まずアンバランスなサイトになることはありません。

WordPressテーマ、オシャレの筆頭SWELLで、素敵サイトを作ってみましょう。

ここまでお読みいただき、ありがとうございました。

くま太君

デモサイトデータの設定方法や、注意事項、バックアップ方法などは、こっちの記事を確認してね。

\ SWELLだと、設定も編集もサクサクできる! /
WordPressテーマ『SWELL』の詳細は公式サイトで!

☆読んでくれてありがとう!よかったらシェアしてね!☆
目次