【SWELLサイト集】おしゃれなサイトの3つの共通点!「配色」や「サイト構成」を分析

SWELLサイト集
WOLFくん

デザインテーマはSWELLにしたよ!
ぼくでもおしゃれなサイトにカスタマイズできるかな。

えみり

いろんなサイトを見て、お手本を見つけてみよう。
同じSWELLテーマを使っているサイトだと、より参考になるよ!

当サイトも使用しているSWELLテーマ。

デザイン性や機能性が高く、使用しているサイトをよく見かけます。

初期設定のままでもシンプルで素敵ですが、他サイトと印象がかぶりやすく、サイト訪問者の記憶に残りません。

せっかく作った自分だけのブログ、もっとおしゃれにカスタマイズしたいですよね!

ブログ初心者がサイトをおしゃれにカスタマイズするためには、

  1. サイトイメージにあった配色
  2. 文字や画像の統一感
  3. サイト構成

この3つのポイントを意識するだけで、一気におしゃれなサイトに生まれ変わります。

WOLFくん

デザイン初心者には難しそう・・・

えみり

大丈夫だよ!
おしゃれなSWELLサイトの「配色」や「統一感の出し方」、「サイト構成」を分かりやすくまとめてみたから、参考にしてみてね。

①サイトのイメージにあった配色

自分の好みや、あつかっているジャンルによって、「元気がでるようなサイトにしたい」「落ち着いた雰囲気のサイトにしたい」など、なりたいイメージがありますよね。

サイトのイメージは、使用している「色」の影響が非常に大きいです。

そこで「ナチュラル」「ポップ」「エレガント」「モダン」「シンプル」の5つの配色イメージに分けて紹介します。

5つの配色イメージ
  • ナチュラル*自然体で優しい印象のサイト
  • ポップ*明るくて元気が出るサイト
  • エレガント*上品で大人っぽい雰囲気のサイト
  • モダン*現代的でスタイリッシュなサイト
  • シンプル*記事やアイキャッチ画像が際立つサイト

②文字や画像の統一感

サイト上の文字や画像に統一感がないと、ごちゃごちゃした印象になります。

おしゃれなサイトでは、使用している文字のフォントやカテゴリー画像・アイキャッチ画像に統一感があり、サイト全体がまとまっています。

紹介しているサイトの雰囲気が分かるように、ホーム画面の写真や、一言コメントを掲載しています。

えみり

配色、フォント、画像で統一感は出せるよ!

③サイト構成

取りあつかっているジャンルや、「雑記ブログ」「特化ブログ」によって、カテゴリーの数やホーム画面の構成も変わってきます。

取りあつかっているジャンルやサイトの構成が参考にできるように、「ブログのジャンル」や「サイトの特徴」を掲載しています。

「サイト型ブログ」は、読者の動線を意識して記事やカテゴリーが配置されています。

新着記事が並んでいる一般的な「ブログ」とは違ったサイト構成で、よりおしゃれな印象になります。

WOLFくん

実際のサイトにも遊びにいってみてね!

こんな人におすすめ
  • SWELLテーマを使用中、もしくは使用を検討している人
  • 参考にしたい「おしゃれサイト」を探している人
  • 自己流でカスタマイズしたけど、あまりおしゃれにならなかった人
えみり

現在、20サイト掲載中!

目次

ナチュラル*自然体で優しい印象のサイト

淡くソフトなパステルカラーや、くすみを含んだニュアンスカラーなど、柔らかさや優しさを感じる配色のサイトです。

おもちブログ

おもちブログ

おもちブログ

ジャンル子育て・暮らし・教育・知育
サイトの特徴雑記ブログ
サイト型ブログ
Twitter@omochi__blog
えみり

アイコンにもこだわりがつまっているサイト型のブログ。
子育てジャンルにぴったりな、やわらかい色遣い♡

みーちゃんち~アラサー看護師の生活~

みーちゃんち

みーちゃんち

ジャンル子どもの英会話・マイホーム
サイトの特徴雑記ブログ
サイト型ブログ
Twitter@mi_chan_sisan
えみり

優しい色遣いが素敵だね。
記事のアイキャッチ画にも統一感があっておしゃれ♡

totokiki house ~毎日を大切に生きるために、日々の暮らしを綴っています!~

totokikihouse

totokiki house

ジャンルくらし・ブログ・ポイ活・旅行
サイトの特徴雑記ブログ
Twitter@totokiki_house
えみり

同系色にまとめられていておしゃれ♡
テーマごとにアイキャッチ画像が統一されているよ。

今日が一番若い日 ~福パンダの雑記帳~

今日が一番若い日

今日が一番若い日

ジャンル投資・ブログ・片付け
サイトの特徴雑記ブログ
サイト型ブログ
Twitter@toushi_panda1
えみり

福パンダのアイコンが可愛すぎる♡
ニュアンスカラーの使い方が参考になるね。

マスパパブログ~便利アイテムで育児を楽に!~

マスパパブログ

マスパパブログ

ジャンルベビーグッズ
サイトの特徴特化ブログ
Twitter@IctEduCase
WOLFくん

育児をテーマにしたブログにぴったりな、淡いカラーで統一されたサイトだよ。

ポップ*明るくて元気が出るサイト

明るい印象のビビットカラーや、フレッシュなイメージのブライトトーンなど、キュートで元気が出る配色です。

ソルトのやってみた ~30代の私が●●試してみた!リアルな悩みと闘う日々 ~

ソルトブログ

ソルトのやってみた

ジャンルブログ・SWELL・注文住宅
サイトの特徴雑記ブログ
サイト型ブログ
Twitter@salt_salt2022
えみり

サイトカラーはもちろん、アイキャッチ画像もピンクで統一されているよ!
世界観が可愛すぎる♡

アラサーおとこのコツコツ日記

アラサーおとこのコツコツ日記

アラサーおとこのコツコツ日記

ジャンル経済圏情報・節約
サイトの特徴雑記ブログ
サイト型ブログ
Twitter@kotsukotsudiary
WOLFくん

ホーム画面がかなりつくり込まれているよ!
記事のアイキャッチ画像もインパクト大!!

ピントの日記 ~つらい恋愛にまみれてきた元弁護士秘書がお届けするブログ~

ピントの日記

ピントの日記

ジャンル子育て・娯楽・ブログ
サイトの特徴雑記ブログ
Twitter@pintoburogu
えみり

原色の組み合わせが可愛いサイト♡
記事のアイキャッチ画像に統一感があるね!

NABIZ-BLOG ~リスクなしでは、奇跡は起きない。~

NABIZBLOG

NABIZ-BLOG

ジャンル投資・お金・仕事・ブログ
サイトの特徴雑記ブログ
サイト型ブログ
Twitter@NABIZ_BLOG
WOLFくん

さわやかなブルーが印象的なサイト。
アイキャッチ画像は色遣いやフォント、イラストはポップだよ!

もとやすブログ ~いまの生活をもっと自由に!~

もとやすブログ

もとやすブログ

ジャンル旅行・ライフイベント・雑貨・車
サイトの特徴雑記ブログ
サイト型ブログ
Twitter@motoyasublog
WOLFくん

スクロールしてみてびっくり!
ホーム画面って、こんなにカスタマイズが自由にできるんだね。

エレガント*上品で大人っぽい雰囲気のサイト

落ち着きのある色使いや、明度・彩度をおさえた配色で、優雅で洗練されたイメージのサイトです。

れおあなハウス ~20代共働き夫婦のシンプルな暮らしを発信~

れおあなハウス

れおあなハウス

ジャンル暮らし・旅行・副業
サイトの特徴雑記ブログ
Twitter@reoana2022
えみり

アクセントカラーのチョイスが素敵♡
アイキャッチ画像に写真を使うと、一気におしゃれになるね!

おこづかい族 団長~毎日にサプライズを~

おこづかい族

おこづかい族 団長

ジャンルファッション・ガジェット・ブログ
サイトの特徴雑記ブログ
サイト型ブログ
Twitter@okozukaizoku
WOLFくん

最高にかっこいいサイト!
ホーム画面をサイト型にしたい人も参考にしてみてね。

恋愛義塾大学~恋愛が楽しめれば人生もうまくいく!人生を楽しむ恋愛のススメ~

恋愛義塾大学

恋愛義塾大学

ジャンル恋愛・マッチングアプリ
サイトの特徴特化ブログ
サイト型ブログ
Twitter@mugichoko0129
えみり

恋愛ジャンルにぴったりな、ピンクが基調のおしゃれなサイトだよ!

モダン*現代的でスタイリッシュなサイト

知的な印象の無彩色や寒色系のダークトーンを使った、シンプルでクールなイメージの配色です。

おるかブログ ~成功したい会社員のための情報サイト~

おるかブログ

おるかブログ

ジャンル仕事・お金・健康
サイトの特徴雑記ブログ
サイト型ブログ
Twitter@orcablog
WOLFくん

モノトーンで洗練された雰囲気のサイト。
ホーム画面もつくり込まれているのに、とっても見やすい!

room78~最高の部屋を目指して。~

room78

room78

ジャンルガジェット・旅行・ファッション・天体写真
サイトの特徴雑記ブログ
Twitter@hiyo_room78
えみり

モノトーンでスタイリッシュなサイト。
シンプル好きにはたまらないね!

技術人.com ~The Fox Loves Technology!~

技術人.com

技術人.com

ジャンルガジェット・PC・車・書籍
サイトの特徴雑記ブログ
サイト型ブログ
Twitter@gijutsujin
WOLFくん

トップ画面が動くよ!
おすすめアイテムのアイコンもスタイリッシュでかっこいい!

いしろぐ ~ブログを始めたい方向けに記事を書いています。~

いしろぐ

いしろぐ

ジャンルブログ・プログラミング
サイトの特徴特化ブログ
サイト型ブログ
Twitter@stdesign3000
WOLFくん

記事のアイキャッチ画像もシンプルでおしゃれだね。
SWELLテーマについての記事も多いよ!

シンプル*記事やアイキャッチ画像が際立つサイト

サイトの装飾に使う色をおさえることで、記事やアイキャッチ画像を際立たせているサイトです。

てつんブログ~薬局薬剤師の趣味ブログ~

てつんブログ

てつんブログ

ジャンル薬剤師・家計管理
サイトの特徴雑記ブログ
Twitter@tetsun_pha
WOLFくん

ヘッダー画像が印象的だね。
オリジナルアイコンを使うと、覚えてもらいやすい!

実戦的サッカー上達ブログ ~サッカーが今より上達したい、楽しみたいという方へのブログです~

実践的サッカー上達ブログ

実践的サッカー上達ブログ

ジャンルサッカーの技術力向上
サイトの特徴特化ブログ
Twitter@YUNOYUNO0000
WOLFくん

ホームページのインパクト大!
特化ブログのサイト構成の参考にもなるよ。

宅配ライフ ~宅配クリーニング比較サイト~

宅配ライフ

宅配ライフ

ジャンル宅配クリーニング
サイトの特徴特化ブログ
Twitter@bean_taro24
WOLFくん

クリーニングのイメージと、サイトカラーの青色がぴったりマッチ。
特化ブログに挑戦したい人は必見!

まとめ:おしゃれなサイトにカスタマイズしよう

参考にしたいサイトは見つかりましたか?

おしゃれなサイトは、訪れただけで印象に残ったはず!

自分のサイトもカスタマイズしてサイト訪問者の記憶に残り、また来たくなるサイトをつくりましょう。

おしゃれなサイトの共通点はこの3つです。

  1. サイトイメージにあった配色
  2. 文字や画像の統一感
  3. サイト構成

この3つのポイントを意識しながら、他サイトを分析してみてください。

お手本にしたいブログをいくつか見つけて、カスタマイズしたい方向性が見えてきたら、カスタマイズにチャレンジしてましょう。

当サイトでも、今後カスタマイズの方法を順次更新していいくので、参考にしてみてください。

えみり

この記事で紹介してもいい「おしゃれなSWELLサイト」も募集中だよ♡
Twitterアカウント(@emiri3blog)で定期的に募集企画を実施するね。

WOLFくん

まだSWELLテーマを使っていない人は、これを機に検討してみてね!
WordPressテーマ「SWELL」の公式ホームページ

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

目次
閉じる