MENU
WordPressサイト解析「WP-Search」
WP-Search
無料でプレスリリース「ブロググ」
WP-Search

【参考】おしゃれなブログデザイン事例集【WordPressテンプレート25+α】

この記事では、WordPressを使ったサイトの使用テーマやプラグインまでわかるブログ例を、WordPressテーマ別にまとめてご紹介します。

WordPress(ワードプレス)」のブログデザインのサイト集から、カスタマイズ例やサイト構成の手本となる参考サイトを見つけましょう。

WP-Searchの事例集(サイト集)は2万以上の掲載数を誇っており、カラー別におしゃれ・かっこいい・かわいい・シンプルなブログを探すことができます。

suya

海外テーマやも一部掲載しています。

なるほどくん

なるほど!いろいろあるんですね。

この記事でできること
  • WordPressを使ったサイト使用例を見つけられる
  • センスの良い・見やすいブログメディアを見つけられる
  • 使用しているプラグインもわかる
この記事を書いた人

suya @suyasite

この記事を最後まで読めば、「WordPress(ワードプレス)」を使ったおすすめテーマや見本となるWebサイトがすぐに見つかります。

ぜひ最後まで進めてみてください。

目次

ブログ事例集の見方

おしゃれなブログの作り方は、おしゃれなブログを知ることから始まります。

WordPressテーマ別に事例集をまとめましたので参考にしてください。

サイトカラーを意識しながら見る

ブログデザインの印象は、色使いで決まってしまう部分があります。

そのため、サイトのメインカラーをどうするかを考えながら事例集を見るのがおすすめです。

WP-Searchではカラーごとに分類した事例集を見ることができます

カラー分類から事例集を見たい方は、各テーマの「WP-Searchでもっと見る」ボタンから確認してみてください。

使用テンプレート(テーマ)を考慮する

気に入った参考サイトが見つかっても、自分が使っているWordPressテーマ(デザインテンプレート)と違う場合があります。

この場合、同じデザイン・機能が使えないため、想像と違ったデザインになるかもしれません。

テーマ選定がまだの方は、どのテーマにするか考えながら事例集を見ることをおすすめします。

テーマ決定済みの方は、同じテーマを使ったブログ事例を参考にすることをおすすめします。

テンプレート(テーマ)でデザインが決まる

WordPress(ワードプレス)では、ほしい機能があればプラグインで簡単に追加できます。

一方で、デザインはプラグインでは変更できず、テンプレート(テーマ)を変更する必要があることが多いです。

もし気になるブログデザインが見つかったら、テーマ変更も含めて検討することをおすすめします。

WordPressテーマを調べたいときは、WP-SearchでURLを検索すれば簡単にわかります。

各テーマ公式サイトのデモサイトも見る

おしゃれなブログは、デフォルトの状態からカスタマイズされていることが多いです。

その点、公式のデモサイトであれば標準機能のみを使って作成されています。

まずはデモサイトでイメージをつかんだ上で、事例を見ていくことをおすすめします。

企業サイトや店舗・施設メディアも参考になる

おしゃれなブログにしたいなら、企業の運営するコーポレートサイトや店舗・施設のサイト、Webメディア・Webマガジンなども参考になります。

デザインの難易度は上がりますが、参考にしたい場合はそちらも見てみましょう。

本事例集では、ブログ向けWordPressテーマを企業サイトに利用している事例も掲載しています。

シェアに基づく人気順で掲載

WordPressテーマの掲載順は、WP-Searchのサイト数順(人気順)で掲載しています。

テーマ(デザインテンプレート)を選ぶなら、上から順に見ていくと効率がいいです。

ブログ向け日本語テーマのブログデザイン事例一覧

ここでは、主にブログ向けに使用されている国産テーマのサイト事例を、WP-Searchの人気順(執筆時点)で掲載します。

  • テーマのバージョン違いは合計しています。

SWELLを使ったブログデザイン事例一覧

公式サイトSWELL公式サイト
料金有料テーマ(一括買い切り)
デザインおしゃれ・スタイリッシュ
デモサイトSWELLデモサイト

(スウェル)はおしゃれなサイト型デザインが簡単にできるため、個人ブログだけでなく企業サイト(コーポレートサイト)にも多く利用されています。

ブロックエディターの使いやすさの評判もよく、トップページだけでなく記事ページもおしゃれになります。

ブログメディア

POINT OF VIEW
tipswork.net
くうかんしんぷるライフ
Lifit(ライフィット)

個人メディア

ワインフィッター
エクリュ

ギャラリーサイト

FLAT STOCK
I KAGATTE

データベースサイト

ドローンスクールナビ
LALA

施設メディア

香里園TELE+
江神温泉第一源泉組合

コーポレートサイト

レンタルサーバーのスピーバー
株式会社すえ木工

団体・組織サイト

アジャイル ビジネス インスティテュート株式会社
ウェブ解析士協会

SWELLを使ったサイトをもっと見たい場合は、以下を参考にしてください。

Cocoonを使ったブログデザイン事例一覧

公式サイトCocoon公式サイト
料金無料テーマ
デザインシンプル・スキン
デモサイトCocoonデモサイト

(コクーン)は高機能なのに無料で利用できる人気テーマで、ブログで利用されていることが多いです。

無料で使えるため、フルカスタマイズされているコーポレートサイトなども一部あります。

ブログメディア

CAFICT
U Love English
COLOR CODE
ori log

Webメディア・Webマガジン

グーネットマガジン
丹波新聞

ギャラリーサイト

ちょうどいいイラスト
ベクターシェルフ

施設メディア

元麻布ヒルズメディカルクリニック
宮古島マリンクラブ

コーポレートサイト

看板屋アドベン
株式会社ケーツーコミュニケーションズ

団体・組織サイト

一般社団法人 日本音楽協会 | オンキョウ
NPO法人木曽情報技術支援センター

サービスサイト

タスカル
男の退職代行

Cocoonを使ったサイトをもっと見たい場合は、以下を参考にしてください。

SANGOを使ったブログデザイン事例一覧

公式サイトSANGO公式サイト
ConoHa WINGのSANGO紹介サイト
料金有料テーマ(一括買い切り)
デザインかわいい・マテリアル
デモサイトSANGOデモサイト

(サンゴ)はかわいらしいデザインで、主にブログやWebメディア・Webマガジンで利用されています。

最近3.0にアップデートされ、テンプレートからコピペできる「SANGO Land」などの機能が充実しました。

ブログメディア

Kissanadu
雑学エンジニアブログ

個人メディア

yuki illustration
イラストレーターたなかのりこ

コーポレートメディア

PIXTAガイド
Link-A 公式ブログ

施設メディア

北九州市立高等学校
Grow Rich English School

コーポレートサイト

ライバージャパン
令和行政書士事務所

SANGOを使ったサイトをもっと見たい場合は、以下を参考にしてください。

AFFINGERを使ったブログデザイン事例一覧

公式サイトAFFINGER6公式サイト
AFFINGER6 ACTION PACK3公式サイト
料金有料テーマ(一括買い切り)
デザインかっこいい・クール
デモサイトAFFINGERデモサイト

(アフィンガー)はかっこいいデザインで、主に個人ブログで利用されています。

カスタマイズ性の高さから、フルカスタマイズでコーポレートサイトなども一部使用されています。

ブログメディア

PLAY AND LIVE
Yosocam

個人メディア

週末の作り置きレシピ
重ね煮アカデミー

コーポレートメディア

WEBCAMP MEDIA
離婚・修復のガイドブック

施設メディア

朝日みどりの里
ハレハレ

コーポレートサイト

株式会社pamxy
株式会社チック

AFFINGERを使ったサイトをもっと見たい場合は、以下を参考にしてください。

JIN:R / JINを使ったブログデザイン事例一覧

公式サイトJIN:R公式サイト / JIN公式サイト
料金有料テーマ(一括買い切り)
デザインかわいい・フラット・マテリアル
デモサイトJIN:Rデモサイト / JINデモサイト

はかわいらしいデザインで、主に個人ブログやメディア・マガジンで利用されています。

JINではブログ型デザインが多いですが、新テーマJIN:Rがリリースされてサイト型デザインが増えることが予想されます。

JIN:R

Pet Life Consulting シンビオーシス
お片づけプロジェクト

ブログメディア(JIN)

オルクリブログ
ノマドGO

個人メディア(JIN)

ヘンテコレクション
タチバナ堂

ギャラリーサイト(JIN)

フリーペンシル
かもともイラストレーション

コーポレートサイト(JIN)

みらいきって
株式会社アブストリームクリエイション

JIN:R / JINを使ったサイトをもっと見たい場合は、以下を参考にしてください。

STORK19を使ったブログデザイン事例一覧

公式サイトSTORK19公式サイト
料金有料テーマ(一括買い切り)
デザインシンプル・カラー
デモサイトSTORK19デモサイト

(ストーク19)はシンプルなデザインで、主に個人ブログで利用されています。

コーポレートサイトなどでもブログ型デザインで利用されていることが多いです。

ブログメディア

imanilog
創kenブログ

コーポレートメディア

メルカリ Column
tameni

店舗メディア

ナガサワ文具センター
カメラのアマノ

コーポレートサイト

アクアセレモニー
尾藤武英税理士事務所

STORK19を使ったサイトをもっと見たい場合は、以下を参考にしてください。

THE THORを使ったブログデザイン事例一覧

公式サイトTHE THOR公式サイト
料金有料テーマ(一括買い切り)
デザインおしゃれ・スタイリッシュ
デモサイトTHE THORデモサイト

(ザ・トール)はおしゃれなデザインで、主にメディア・マガジンや個人ブログで利用されています。

ブロックエディターに対応していませんが、企業の運営するサイトでの利用も多いのが特徴です。

ブログメディア

COFFEE LITERACY
COFFEE LITERACY

Webメディア・Webマガジン

WEBヤングマシン
STEEP

店舗メディア

美容室・美容院Lee(リー)
KOKOA

コーポレートサイト

株式会社オムニモスーク
有限会社ABCガーデンズ

THE THORを使ったサイトをもっと見たい場合は、以下を参考にしてください。

Diverを使ったブログデザイン事例一覧

公式サイトDiver公式サイト
料金有料テーマ(一括買い切り)
デザインかっこいい・クール
デモサイトDiverデモサイト

(ダイバー)はかっこいいデザインで、主にメディア・マガジンやブログで利用されています。

ブログメディア

TEICHAKU
働くママ(ワーキングマザー)のサバイバル作戦

Webメディア・Webマガジン

毎日ことば
人事を戦略に変えるメディア『経営人。』

施設メディア

マリオス小林内科クリニック
リペアセルクリニック

店舗メディア

富山の老舗スイーツ専門店リブラン
アケボノスタジオ

Diverを使ったサイトをもっと見たい場合は、以下を参考にしてください。

賢威を使ったブログデザイン事例一覧

公式サイト賢威公式サイト
料金有料テーマ(一括買い切り)
デザインプレーン・カラー
デモサイトなし

(けんい)はプレーンなデザインで、主にブログで利用されています。

ブログメディア

榎商店 お酒情報ブログ
LunaTripTea

施設メディア

ブレインクリニック
プライベートケアクリニック東京

店舗メディア

髪質改善美容室Dears
美容室 homey roomy

賢威を使ったサイトをもっと見たい場合は、以下を参考にしてください。

Luxeritasを使ったブログデザイン事例一覧

公式サイトLuxeritas公式サイト
料金無料テーマ/有料プラグイン(一括買い切り)
デザインシンプル・プレーン
デモサイトLuxeritasデモサイト

(ルクセリタス)はシンプルなデザインで、主に個人ブログで利用されています。

ブログメディア

おてて動かそう
KodoCode

個人メディア

いからし農園 時々 if-creative
Yozawa Tsubasa

施設メディア

野尻湖ナウマンゾウ博物館
山と川の学校

Luxeritasを使ったサイトをもっと見たい場合は、以下を参考にしてください。

Nishiki Proを使ったブログデザイン事例一覧

公式サイトNishiki Pro公式サイト
料金有料テーマ(一括買い切り)
デザインおしゃれ・オリジナリティ
デモサイトNishiki Proデモサイト

(ニシキ プロ)はおしゃれなデザインで、ブログだけでなくコーポレートサイト(企業サイト)でも利用されています。

ブログメディア

LITTLE GIRL
東亞現像

個人メディア

Kinokoillust&Design
はざくみ.COM

コーポレートサイト

都一級建築設計事務所
小嶋ライフ

Nishiki Proを使ったサイトをもっと見たい場合は、以下を参考にしてください。

THE SONICを使ったブログデザイン事例一覧

公式サイトTHE SONIC公式サイト
ConoHa WINGのTHE SONIC紹介サイト
料金有料テーマ(サブスク
デザインおしゃれ・スタイリッシュ
デモサイトTHE SONICデモサイト

(ザ・ソニック)はおしゃれなデザインで、主に個人ブログで利用されています。

ブログメディア

photohibi
BENRI LIFE

コーポレートサイト

D1 OFFICIAL WEBSITE
Tokyo Bunkyudo

THE SONICを使ったサイトをもっと見たい場合は、以下を参考にしてください。

deerを使ったブログデザイン事例一覧

公式サイトdeer公式サイト
料金有料テーマ(一括買い切り)
デザインシンプル・オフィシャル
デモサイトdeerデモサイト

(ディアー)はシンプルなデザインで、主に個人メディアやブログで利用されています。

個人メディア

インナーチャイルドケア講座 森ようこ
馬場佐希子

施設メディア

安東歯科
BeWELLキックボクシング

deerを使ったサイトをもっと見たい場合は、以下を参考にしてください。

MERILを使ったブログデザイン事例一覧

公式サイトMERIL公式サイト
料金有料テーマ(一括買い切り)
デザインシンプル・カラー
デモサイトMERILデモサイト

(メリル)はシンプルなデザインで、主に個人ブログで利用されています。

ブログメディア

CampDinner
N-blog

MERILを使ったサイトをもっと見たい場合は、以下を参考にしてください。

Manablog Copyを使ったブログデザイン事例一覧

公式サイトManablog Copy公式サイト
料金有料テーマ(一括買い切り)
デザインシンプル・プレーン
デモサイトManablog Copyデモサイト

(マナブログコピー)はシンプルなデザインで、主に個人ブログで利用されています。

ブログメディア

かんろぐ
Sakura English

Manablog Copyを使ったサイトをもっと見たい場合は、以下を参考にしてください。

オリジナルテーマ(自作テーマ)を使ったブログデザイン事例一覧

自作のオリジナルテーマを使ったブログやメディア・マガジンもあります。

ブログメディア

ネスブログ
Urawa Reds Life

オフィシャルブログ

PINGU
ポmagazine

コーポレートメディア

iret.media
よむよむカラーミー

Webメディア・Webマガジン

AWW
MMD TIMES
りとふる
FLY BASKETBALL CULTURE MAGAZINE
CHAGOCORO
Akimama

オリジナルテーマ(自作テーマ)を使ったサイトをもっと見たい場合は、以下を参考にしてください。

企業サイト向け日本語テーマのブログデザイン事例一覧

企業サイト向けのテーマ(デザインテンプレート)でも、ブログや個人メディアに使用されるケースがあります。

ここでは、主に企業サイト向けに使用されている国産テーマのブログ事例を掲載します。

TCDを使ったブログデザイン事例一覧

公式サイトGENSEN公式サイト(有料)
Switch公式サイト(有料)
STORY公式サイト(有料)
Rebirth公式サイト(無料)
BlogPress公式サイト(無料)
など多数(詳しくはこちら
料金有料テーマ(一括買い切り)※一部無料テーマあり
デザインきれい・用途別
デモサイトGENSENデモサイト(有料)
Switchデモサイト(有料)
STORYデモサイト(有料)
Rebirthデモサイト(無料)
BlogPressデモサイト(無料)
など多数(詳しくはこちら

TCDテーマは用途別・業種別のデザインで、企業サイト(コーポレートサイト)だけでなく店舗・施設向けやブログ向けのテーマもあります。

TCDテーマは100近くあるため、ここにすべての事例を掲載することはできません。

そのため、本サイトの比較分類WP-SearchのTCDテーマ人気ランキングをもとに、ブログ・メディア向けのテーマを掲載します。

すべてのTCDテーマの事例集を見たい場合は、以下をご覧ください。

一番人気のGENSEN(tcd050)

ローカルメディア

mamamoana ママモアナ
HORTO札幌

求人メディア

CareNavi関西
tocoroni(トコロニ)

GENSENを使ったサイトをもっと見たい場合は、以下を参考にしてください。

ブログ向けのMAG(tcd036)

ブログメディア

Knower Mag
フランス語の扉を開こう~ペンギンと

Webメディア・Webマガジン

はじめての三国志
めっつぉ

MAGを使ったサイトをもっと見たい場合は、以下を参考にしてください。

Webメディア・Webマガジン向けのEVERY(tcd075)

Webメディア・Webマガジン

ほいくnote
氣ism

個人メディア

りえさんレシピ
ワイズ料理研究所

EVERYを使ったサイトをもっと見たい場合は、以下を参考にしてください。

DigiPressを使ったブログデザイン事例一覧

公式サイトDigiPress公式サイト
料金有料テーマ(一括買い切り)
デザインかっこいい・オリジナリティ
デモサイトDigiPressデモサイト(各テーマページ内)

(デジプレス)はかっこいいデザインで、企業サイト(コーポレートサイト)や店舗・施設サイトだけでなくブログやメディアにも利用されています。

ここでは、WP-Searchの人気順に上位2つのテーマのみ掲載します。

すべてのDigiPressテーマの事例集を見たい場合は、以下をご覧ください。

fresco

個人メディア

Yuji Hemmi
小澤聡

Webメディア・Webマガジン

CheRish Brun.
ガーカガワ

frescoを使ったサイトをもっと見たい場合は、以下を参考にしてください。

Fancie NOTE

個人メディア

KENJI HIROTA PHOTOGRAPHY
木原ことの

ギャラリーサイト

BURNISH Viz Studio
MICHI ISHIJIMA – Pride One –

Fancie NOTEを使ったサイトをもっと見たい場合は、以下を参考にしてください。

Minimal WPを使ったブログデザイン事例一覧

公式サイトMinimal WP公式サイト
料金有料テーマ(一括買い切り)
デザインミニマル・余白
デモサイトMinimal WPデモサイト(各テーマページ内)

(ミニマルWP)は余白のあるミニマルなデザインで、企業サイト(コーポレートサイト)や店舗・施設サイトだけでなくブログやメディアにも利用されています。

ここでは、WP-Searchの人気順に上位2つのテーマのみ掲載します。

すべてのMinimal WPテーマの事例集を見たい場合は、以下をご覧ください。

Pantomime

個人メディア

馬遊舎
むらかみひとみ

Pantomimeを使ったサイトをもっと見たい場合は、以下を参考にしてください。

My Song

施設メディア

FLORA ROOM
ritsuko nakata

My Songを使ったサイトをもっと見たい場合は、以下を参考にしてください。

isotypeを使った企業サイト・ホームページ事例一覧

公式サイトisotype公式サイト
料金有料テーマ(一括買い切り)
デザインかっこいい・ゴージャス
デモサイトisotypeデモサイト(各テーマページ内)

(アイソタイプ)はかっこいいデザインで、企業サイト(コーポレートサイト)や店舗・施設サイトだけでなくブログやメディアにも利用されています。

ここでは、WP-Searchの人気順に上位1つのテーマのみ掲載します。

すべてのisotypeテーマの事例集を見たい場合は、以下をご覧ください。

MAJESTIC+

個人メディア

ちょうなはつり むか井
針金細工八百魚

MAJESTIC+を使ったサイトをもっと見たい場合は、以下を参考にしてください。

yStandardを使った企業サイト・ホームページ事例一覧

公式サイトyStandard公式サイト
料金無料テーマ/有料プラグイン(一括買い切り)
デザインプレーン・シンプル・カスタマイズ
デモサイトなし

(ワイスタンダード)はプレーンなデザインで、企業サイト(コーポレートサイト)や店舗・施設サイトで利用されています。

テーマ自体は無料なので、個人ブログやメディアなども一部あります。

ブログメディア

45House
FLAPPER

個人メディア

fumika
Tomoko Sakurai

yStandardを使ったサイトをもっと見たい場合は、以下を参考にしてください。

企業サイト向け日本語テーマのデザイン事例

その他の企業サイト向けテーマの事例は、以下をご覧ください。

海外テーマのブログデザイン事例一覧

海外製のWordPressテーマ(デザインテンプレート)も一部で使われています。

海外テーマはデザイン済みのテンプレートが多数準備されているため、おしゃれなサイトが簡単に作れます。

Diviを使ったブログデザイン事例一覧

公式サイトDivi公式サイト
料金有料テーマ
デザインテンプレート100以上
デモサイトDiviテンプレート集

(ディビ)は、世界で一番使われているWordPressテーマです。

個人メディア

The Key of Life
ちひりーたの愛のうた

コーポレートサイト

MINOH LABO
株式会社チャーミー造園

Diviを使ったサイトをもっと見たい場合は、以下を参考にしてください。

Astraを使ったブログデザイン事例一覧

公式サイトAstra公式サイト
料金無料テーマ/有料プラグイン
デザインテンプレート200以上
デモサイトAstraテンプレート集

(アストラ)は、プラグインと一緒によく使われています。

ブログメディア

キャラゲッ!
Mignon BLOG

コーポレートサイト

株式会社しおさい電力
三輪舎

Astraを使ったサイトをもっと見たい場合は、以下を参考にしてください。

Hello Elementorを使ったブログデザイン事例一覧

公式サイトHello Elementor公式サイト
料金無料テーマ
デザインテンプレート100以上
デモサイトHello Elementorテンプレート集

(ハローエレメンター)は、プラグインの公式テーマです。

ブログメディア

みこ旅
FOOD/DAYS

コーポレートサイト

あすなろガーデン
吉宮建設株式会社

Hello Elementorを使ったサイトをもっと見たい場合は、以下を参考にしてください。

GeneratePressを使ったブログデザイン事例一覧

公式サイトGeneratePress公式サイト
料金無料/有料テーマ
デザインテンプレート90以上
デモサイトGeneratePressテンプレート集

(ジェネレートプレス)は、独自のページビルダープラグイン「GenerateBlocks」を搭載しています。

Webメディア・Webマガジン

IoT NEWS
alldtx.com

コーポレートサイト

造形社
東海エイチアール株式会社

GeneratePressを使ったサイトをもっと見たい場合は、以下を参考にしてください。

Newspaperを使ったブログデザイン事例一覧

公式サイトNewspaper公式サイト
料金有料テーマ
デザインテンプレート100以上
デモサイトNewspaperテンプレート集

(ニュースペーパー)は、プラグインにも対応したニュースメディア向けテーマです。

ブログメディア

DMKsnowboard
UMilCL

Webメディア・Webマガジン

webゲンロン
Media Innovation

Newspaperを使ったサイトをもっと見たい場合は、以下を参考にしてください。

WordPress以外のブログデザイン事例一覧

WordPress以外のホームページ作成サービスを使ったブログ・メディアもあります。

は、日本国内だけでなく海外でもWordPressの次に人気のCMSです。

Wixを使ったブログデザイン事例一覧

公式サイトWix公式サイト
料金無料/有料サービス
デザインテンプレート800以上
デモサイトWixテンプレート集

(ウィックス)は、簡単にホームページやネットショップを作成できるサービスです。

ポートフォリオサイト

THE ART OF YO SHIMIZU
Mayu Yukishita

コーポレートサイト

株式会社ドラフト
株式会社サインウェーブ

Wixを使ったサイトをもっと見たい場合は、以下を参考にしてください。

初心者でもおしゃれなブログデザインにするコツ

おしゃれなブログの作り方は、事例集を見るだけではありません。

読者の見やすさを意識して、読みやすいサイト構成を考えてみましょう。

カラー・背景色を統一する

サイトの印象は、まずカラーで決まります。そして、カラーの大部分は背景色で決まります。

デザイン初心者が背景色を白以外にするのは難易度が高いです。

その上で、ブログのメインカラーを考えましょう。

ヘッダーやフッターの色が、サイトのメインカラーになることが多いです。

以下のような色見本のサイトなどを見てもいいです。

おしゃれなフリー素材を利用する

トップページなどで記事一覧で見た際に、カラー以外で印象を決めるのはサムネイル画像(アイキャッチ画像)です。

画像は無料のフリー素材だけでも、ずいぶんおしゃれになるものです。

以下にフリー素材サイトをいくつかご紹介します。

ロゴやアバター画像はプロに依頼する

サイトのブランディングを決めるのは、ロゴやアバター画像(アイコン画像)です。

ここは自分でやるのではなく、プロに外注するのもおすすめです。

今なら「」などで昔より安く依頼することもできます。

\ ブログブランディング /

\ 自分ブランディング /

おしゃれなデザインテンプレートを使う

WordPressサイトのデザインは、使用するテーマ(デザインテンプレート)で決まることが多いです。

デモサイトや事例集でデザインを確認する際は、人気ランキング順に見ていきましょう。

オリジナリティを出したい場合は、逆順で見るのもいいかもしれません。

サイト型トップページにカスタマイズする

WordPressブロックエディターと人気テーマ「」の登場で、ブログでもサイト型トップページが増えています

デザインを考えるなら、記事の一覧ではなく、カテゴリーなどに構造化されたトップページにしたいものです。

SWELL公式サイト

スマホでデザインを確認する

最近はパソコンだけでなく、スマホからのアクセスが増えています

そのため、スマホから見たブログのデザインを確認することをおすすめします。

パソコンで完成したと思ったら、スマホでデザインが崩れていたというのはよくあることです。

サイドバーの有無を考える

スマホ読者の増加から、サイドバーのない1カラム(ワンカラム)のレイアウトが増えました

一方で、サイドバーに固定表示される目次は、パソコンでの読みやすさにつながります。

メインの読者がスマホかパソコンかよく考えた上で、どちらがいいか判断しましょう。

記事タイトルや見出しのデザインを意識する

トップページのデザインに目が行きがちですが、ブログの記事ページのデザインも重要です。

特に記事タイトルのデザイン見出しのデザインは要検討です。

目立つだけでなく、読みやすさにも関わる要素なので、行間・余白の大きさなどにも注意しましょう。

HTML、CSSについて学ぶ

見出しデザインなどは、自分でCSSを書くとオリジナリティのある見出しになります。

HTMLやCSSについて学びたい人は、「udemy」がおすすめです。

本と違って講座感覚で学ぶことができるので、初心者向けです。

おすすめのデザインブログを読む

Webデザイナーが運営するデザイン系のブログを読むのもおすすめです。

サルワカ

WordPressテーマ「」でおなじみです。

ぽんひろ

WordPressテーマ「」のカスタマイズ情報が多いです。

coliss

Web制作向けのデザインTIPSが多く掲載されています。

Webクリエイターボックス

WebデザインTIPSが多く掲載されているメディアです。

ブログメディアを始める

デザインのイメージができたら、ブログメディアを始めてみましょう。

レンタルサーバーの契約がまだの場合は、まずレンタルサーバーから始めます。

デザインを依頼するならココナラ

デザインを人に頼みたいなら、「ココナラ(coconala)」でプロにお任せしましょう。

以下のボタンから、WordPressカスタマイズを検索できます。

\ 無料登録 /

その他のクラウドソーシングサイトについては、以下をご覧ください。

一括見積もりならホームページ制作.jp

Web制作・HP制作の業者に一括見積したいなら、「」でまとめて依頼できます。

ホームページ制作.jpなら、専門コンサルタントがヒアリングしてくれます。

\ 無料ヒアリング・無料見積 /

その他の一括見積サイトについては、以下をご覧ください。

Webデザインを学びたいなら

ウェブデザインを自分で学びたいなら「」の動画講座が便利です。

以下のボタンから、ウェブデザイン講座を検索できます。

\ Webデザイン講座 /

WordPressサイト解析ツール&サイト事例集「WP-Search」

テーマ・プラグイン・サーバーを調べる

WP-Search」は使用しているテーマだけでなく、プラグインレンタルサーバーなども調べることができます。

以下のボタンからアクセスして、気になるサイト・ブログをURLで検索してみましょう。

サイト事例集に掲載する

WP-Searchのサイト事例集に掲載を希望する場合は、以下のページをご覧ください。

マニュオンのサイト事例集(本ページ)に掲載を希望する場合は、以下からお問い合わせください。

  • 必ず掲載されるとは限りませんのでご了承ください。

この記事のまとめ

ブログデザインは、事例集を参考にしてカスタマイズしましょう。

テーマ選びに迷ったら、事例集と合わせてWordPressテーマの人気ランキングが参考になります。

WordPressを使ったサイト・ブログの事例集は「WP-Search」で確認できます。

なるほどくん

WordPressっていろんなテーマがありますね。

その他のWordPressテーマのサイト事例集は、以下をご覧ください。

WordPressテーマのシェアに基づく人気ランキングは、以下をご覧ください。

読者の声を紹介させてください

この記事をご紹介いただいた方がいらっしゃいましたら、読者の声として掲載させていただきます。

ぜひご連絡いただければと思います。

  • 当サイトで紹介した商品を購入すると、売上の一部が当サイトに還元されることがあります。(消費者庁資料
  • 当サイトで掲載しているコンテンツは独自のものであり、広告主は一切関与していません。(コンテンツポリシー
この記事が役に立ったらご紹介ください!

コメント

コメントする

目次