当サイト使用のWPテーマ「SWELL」の評判口コミはこちら

ブログデザイン250事例│WordPressテーマ毎におしゃれなデザインを紹介

URLをコピーする
URLをコピーしました!
じゅんた

本記事はブログのデザインについて詳しく書いています。
WordPressテーマ毎におしゃれなデザインの事例をご紹介
そしておしゃれなブログデザインの作り方まで解説するので最後までご覧ください!

記事の内容と同じくらい重要なブログデザイン

おしゃれなブログデザインの作り方を知りたい」「WordPressテーマ毎にどんなデザインができるのか実際のブログを見てみたい」という声は多いです。

そこでWordPressテーマを専門にブログで情報発信している私が250事例以上のブログデザインを集めました。

サイト数がとても多いので本記事ではまとめ版として各テーマ毎に4つのブログデザインを厳選して紹介。

別記事も含めて250以上の全てのブログデザインを紹介しています。

本記事を読むと参考にするブログデザインや自分に合ったWordPressテーマを見つけることができ、おしゃれなブログデザインを作れます。

「参考にするブログデザインを探したい」「WordPressテーマ選びで迷っている」という方は最後までご覧ください。

WPテーマ選びやデザインで悩んでいる方の参考になればと思っています。
この「サイト&ブログ集」をブログ等でご紹介頂けると嬉しいです!

また当サイト集は掲載募集中です。
掲載希望の方は「①ブログ名&URL」「②WPテーマ」「③WPテーマを選んだ理由」をご連絡下さい。

読みたいところから読める「目次」

参考にしたいおしゃれなブログデザイン!WordPressテーマ毎に紹介!

それでは各テーマ毎にブログデザインを紹介していきます。

とても素敵なサイトが多すぎて正直選びきれないほどでした。

気になるWordPressテーマの個別ギャラリーも参考になるので是非ご覧ください。

※個別ギャラリーでは「そのテーマを選んだ理由」も紹介しているので参考にして下さい。

SWELLのブログデザイン

donguriWEB
人生を豊かにするアイデア

どんぐり所長さん(@donguriweb

カンイク
カンイク

かなさん(@_kana_blog

ふるルン
ふるルン

ふるルンさん(@fu_runrun

以上サイトのように、SWELLのブログデザインはシンプルでおしゃれです。

下記のSWELLのデザインギャラリーでSWELLを選んだ理由を一緒に紹介していますが、「デザインが好みだった」という声が多くとても人気です。

SWELLはオリジナルブロックも16個あるのでおしゃれに仕上がります。

またブロックエディタに完全対応しており使いやすいのでHTMLやCSSの知識がなくてもかんたんにサイトの編集ができます。

他にもたくさんの素敵なブログデザインがあるので下記記事も参考にしてみて下さい。

>>SWELLを詳しく見る

AFFINGERのブログデザイン

コンログ
コンログ

ヨウ♪さん(@youbu13

AFFINGERは上記の通り綺麗で読みやすいブログデザインです。

デザインをとても細かく設定できるので、こだわりのあるサイトを作ることができます。

下記のAFFINGERデザインギャラリーでAFFINGERを選んだ理由を一緒に紹介していますが「自由なカスタマイズ性が良かった」という声が多いです。

他にも多くの素敵なブログデザインがありので、下記記事も参考にしてみて下さい。

 

JINのブログデザイン

もくりんぐ
もくりんぐ

もくりんぐさん(@mokurin1979

むぎクエスト
むぎクエスト

むぎさん(@mugiquest

スタジオほっしー
スタジオほっしー

ほっしーさん(@studiohossy

ペペシネマ
ペペシネマ

ペペさん(@pepe2blog

JINは上記サイトのようにとても可愛くて読みやすいブログデザインです。

下記のJINデザインギャラリーでJINを選んだ理由を一緒に紹介していますが、「デザインが好みだった」という声が多く多くの方に支持されています。

他にもたくさんの素敵なブログデザインがありますので、下記記事を参考にしてみて下さい。

>>JINを詳しく見る

SANGOのブログデザイン

すとふり
すとふり

まいごさん(@maigostfr

あいぶろ
あいぶろ

あいさん(@aipon_m08

SANGOは上記の通り、とても落ち着きのある優しいブログデザインです。

下記のSANGOギャラリーでSANGOを選んだ理由を一緒に紹介していますが、「優しい、柔らかい、開発者のサルカワさんのデザインが好き」という声が多かったです。

下記記事で他にも多くの素敵なブログデザインを紹介しているので参考にしてみて下さい。

>>SANGOを詳しく見る

THE THORのブログデザイン

すけろぐ
すけろぐ

ゆうすけさん(@Yusuke_k0305

Shirogumablog
Shirogumablog

しろグマさん(@keii04980300

THE THORは上記のサイトのように綺麗でかっこ良いブログデザインです。

下記のTHE THORギャラリーでTHE THORを選んだ理由を一緒に紹介していますが、「デザインが綺麗、かっこよい」という声が多かったです。

下記記事で他にも多くの素敵なブログデザインを紹介しているので参考にしてみて下さい。

Cocoonのブログデザイン

かんたブログ
かんたブログ

つむ太郎さん(@tsumutaro_kanta

かりしゃちブログ
かりしゃちブログ

しゃちさん(@blogvlog5

Cocoonは無料テーマにも関わらず上記サイトのように素敵なブログデザインに作り上げることができます。

Cocoonを選んだ理由はやはり「無料だから」という理由がほとんです。

しかしながらネット上に参考にできるカスタマイズ情報も多くおしゃれなデザインにする事も可能です。

下記記事で他にも多くのCocoonを使ったブログデザインを紹介しているので参考にしてみて下さい。

>>Cocoonを詳しく見る

その他WordPressテーマのブログデザイン

<STORK19>

いくじてん
いくじてん

ひとてんさん(@hito_ten

<THE SONIC>

25歳の壁
25歳の壁

shotaさん(@shota_drums_

<DIVER>

OneStar
OneStar

みわさん(@thailand_miwa

<Snow Monkey>

ブックレコメンド
ブックレコメンド

Fumito Mizunoさん(@ounziw

その他のブログデザインでは「DIVER・SEAL・STORK19・Snow Monkey・THE SONIC・yStandard・Manablog Copy」のサイトを紹介しています。

数が少なかったので、一つの記事にまとめていますが、おしゃれなデザインばかりです。

下記の記事に上記サイト以外も紹介していますので、是非参考にしてみて下さい。

以上のようにおしゃれなブログデザインを紹介してきました。

ぜひ参考にして頂ければと思います。

ブログデザインが重要な3つの理由

ブログデザインが重要な理由は上記3つです。

それぞれ詳しく解説していきます。

初訪問の読者は見た目でブログを評価する

人は見た目でそのサイトの善し悪しを判断しがちです。

特に初訪問の場合はその傾向が強いです。

最初にデザインで良い印象を持つとそのサイトの良いところを探そうとする。

逆に悪い印象を持つと、すぐに離脱されてしまいます。

人間の本質的な問題なのでブログデザインを良くすることでサイトの滞在時間が増えます。

他サイトとの差別化になる

他のサイトとの差別化になります。

検索キーワードが同じ記事であれば記事内容も同じような情報になりがちです。

なぜなら検索上位表示するために検索意図を考えて書くと構成が似てくるからです。

そこで差別化しやすいのがデザイン。

ブログデザインがおしゃれで印象に残ると、リピート訪問や指名検索につながります。

ユーザビリティーが向上し間接的にSEOに良い影響が出る

ユーザビリティーの高いデザインにすると間接的にSEOに良い影響がでます。

現在SEOで重要なポイントがユーザーエクスペリエンスです。

ユーザーエクスペリエンスとはユーザー体験の意味です。
ユーザーエクスペリエンスの指標としては主にユーザーのサイト滞在時間や離脱率、回遊率、サイト内での行動(リンククリック等)があります。

デザインを工夫してユーザーエクスペリエンスを高めると検索順位が上がりやすくなります。

逆にユーザーエクスペリエンスが低いと検索順位が下げられることもあります。

次の章以降でユーザーエクスペリエンスの高いデザインの作り方も解説しますのでぜひ最後までご覧ください。

おしゃれなブログデザインの特徴3つ

おしゃれなブログデザインの特徴3つ
  • ブログにコンセプトがあり統一感がある
  • 装飾がシンプルで読みやすい
  • メインビジュアルやアイキャッチ等の画像が綺麗

おしゃれなブログを分析すると上記のような特徴が見られました。

次の章ではこの3つの特徴を満たす為のポイントを解説します。

おしゃれなブログデザインにする9つのポイントを解説

おしゃれなブログデザインにする9つのポイント
  • 文字装飾のパターンを3つに絞りルールを決める
  • 吹き出しをポイントで使う(使いすぎない)
  • 表や箇条書きでまとめる
  • 漢字とひらがなを使い分ける
  • 文章を短くまとめる
  • オリジナルの画像や有料素材サイトを使う
  • サイト内で動きをつける
  • アイキャッチの絵と文字が重ならないようにする
  • サイトのイメージに合うWordPressテーマを使う

おしゃれなブログデザインにするコツは上記の9つです。

それぞれ詳しく解説していきます。

文字装飾のパターンを絞りルールを決める

装飾のパターンを絞りルールを決めるとデザインが統一されシンプルになり、ブログが読みやすくなります。

3~4パターンがおすすめで、私は下記の通り使い分けてます。

太字強調したい文章や言葉に使用
黄色背景太字特にここだけは読んでほしい文章や言葉に使用
赤太字注意すべき事やネガティブな事を伝える際に使用
青下線文字テキストリンクに使用

文字装飾を使いすぎるとごちゃごちゃして読みづらいですし、何が大事か分からなくなります

またテキストリンクは大手サイトで下線青文字を使っているので合わせた方が良いです。

比較してみたので下記参考にしてみてください。

文字装飾のパターンを絞りルールを決めた文章
文字装飾のパターンを絞りルールを決めた文章
文字装飾を華美に使いルールがない文章
文字装飾を華美に使いルールがない文章

吹き出しをポイントで使う(使いすぎない)

ふきだしは読者の視線を止めることが出来るので重要な場面で使うとよいです。

ただし目立つぶん、使いすぎたり吹き出しの文字装飾を華美にすると逆に読みにくくなるので注意です。

また何が重要か分かりにくくなります。

実際にベテランブロガーほど吹き出しを使う頻度は少ないです。

吹き出しはここぞという場面で使いましょう。

箇条書きや表でまとめる

内容をまとめて伝えるときに表や箇条書きでまとめると、とても読みやすくなります。

私の場合は見出しの後にどのような事を書いているのか箇条書きや表でまとめることが多いです。

比較してみたので参考にしてみてください。

箇条書きを使った記事
箇条書きを使った記事
箇条書きを使っていない記事
箇条書きを使っていない記事
表を使った記事
表を使った記事
表を使っていない記事
表を使っていない記事

漢字とひらがなを使い分ける

漢字とひらがなを使い分けると良いです。

漢字は多すぎると読みづらくなります。

特に読みづらい漢字はひらがなで書くことを推奨されており、そのことを「ひらく」と言われています。

ひらがなで書くと良い漢字の例は下記の通りです。

簡単かんたん
下さいください
致す/致しますいたす/いたします
敢えてあえて
当たってあたって
予めあらかじめ
是非ぜひ
ひらがなで書くことを推奨されている漢字

漢字で書くのかひらがなで書いた方が良いのか、迷って場合は記者ハンドブックを見ると良いです。

>>記者ハンドブックはこちら

文章を短くまとめる

文章は短く、情報密度を高めた方が良いです。

文章が長いと読みづらくなります。

そしてサイトから離脱される恐れもあります。

不要な文字は全て削っていきましょう。

オリジナルの画像や有料素材サイトを使う

オリジナルの画像や有料素材サイトを使うのも重要です。

無料の素材サイトだと、他のサイトで使われていることも多くどっかで見たようなデザインになってしまいます。

オリジナルの画像をすべて使うのは非効率なので、有料素材サイトを使うと良いです。

私のおすすめはです。

なぜならAdobe StockはPhotoshopやIllustratorと連携できるからです。

またAdobe Stockの画像は綺麗さや構図、背景などの品質が抜群に良いです。

Adobe Stockは 解約料なしで30日間10枚を無料で使えるのでまず試してみても良いかと思います。

サイト内で動きをつける

工事中です。

アイキャッチの絵と文字が重ならないようにする

工事中です。

サイトのイメージに合うWordPressテーマを使う

工事中です。

ブログデザインをプロデザイナーに外注する方法

デザインはプロに依頼すると更におしゃれになります。

おすすめはCGデザイナーのすいみんさん@cg_method)です。

デザインだけではなくコーディングでカスタマイズまでして頂けるので、他のサイトにはない魅力的なデザインになります。

例えばSWELLのブログ集で紹介している「ヘアケアトーーク」とJINのブログ集で紹介している「ココアオレのオンクレブログ」はすいみんさんが手掛けています。

<SWELL>

ヘアケアトーーク
ヘアケアトーーク

ひでよしさん(haircaretalk

<JIN>

ココアオレのオンクレブログ
ココアオレのオンクレブログ

ココアオレさん(@cocoaorenoblog

他のサイトとは違ったブログデザインにしたい」「もっとおしゃれにしたい」と考えている方はすいみんさんの下記記事をご覧ください。

まとめ:ブログデザインはとても重要!
WordPressテーマ別ギャラリーも参考にしてみて下さい!

以上のようにおしゃれなブログデザインを紹介してきました。

ブログデザインはとても重要です。

なぜならデザインで悪い印象を受けると離脱率が高まるからです。

逆に良いブログデザインだと信頼性が高まり、回遊率も上がります。

人間は第一印象を、内容よりも見た目で判断する傾向にあります。

ぜひ当ギャラリーを参考にして、おしゃれなブログデザインを作ってみてください。

最後までご覧頂きましてありがとうございます。

何かご不明な点がございましたら、下記までお気軽にご連絡下さい。

当サイト集への掲載は募集中です。
掲載希望の方は「①ブログ名&URL」「②WPテーマ」「③そのWPテーマを選んだ理由」をご連絡ください。

当記事はブログデザインで悩んでいる方の参考になればと思い、多くの方にご協力頂き作成しました。

本当にありがとうございます。

当サイト&ブログ集をブログ等でご紹介頂けるととても嬉しいです。

またTwitterでメンション(@jun_sigotofun)つけてツイートして頂ければ私もリツイートして拡散します!

(記事下の「 シェアボタン」をクリックすると簡単にツイートできます。)

今後ともよろしくお願いします!

シェア頂けると嬉しいです!よろしくお願いします!
URLをコピーする
URLをコピーしました!

コメント

コメントする

読みたいところから読める「目次」
閉じる