元サラリーマンブロガーなつのプロフィール

【ブログにおすすめ!】WordPressのテーマ、スマホ画面が映えるデザイン11選!

こんにちは!ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

かつてはPCが主流でしたが、スマホが一般的になってきて、スマホでからブログを訪れるユーザーも増えてきました。

なつ
このブログのようなネットのノウハウ系のジャンルはだいたい4割くらいがスマホからの閲覧だったりします。

 

ちょっとした時間つぶしにスマホで見るトレンドブログなどはもっとスマホからの訪問が多いと思いますし今後も増えていくでしょう。

そこで、スマホの画面でもWordpressブログが綺麗に見える「レスポンシブデザイン」が充実しているテーマをお伝えしていきます。

 

 2021年、話題のワードプレステーマ「THE THOR」
⇒ THE・THORの公式ページを確認する。

※ 今なら、8大購入特典をプレゼント!

 

WordPressテーマのスマホレスポンシブデザイン例

レスポンシブデザインという名前を聞いたことがあると思いますが、これは特別な作業しなくても見やすいデバイスに表示を自動的に最適化して切り替えてくれるデザインのことです。

PCの画面のデザインを整えるとスマホ画面が以下のようになります。

 

THE THORのスマホ画面

THE THOR使用スマホ画面

THE THOR 使用)

 

THE THORでは、画像がクッキリときれいに見えるので、ちょっと遊び心のある感じに仕上げています。元はと言えば、猫の画像を横に3枚並べて色を足しているだけですが、上からメッシュを重ねるとちょっとカッコいい感じになります。

例えば、コーヒーカップの画像だけでもメッシュを重ねるとちょっとカッコよく仕上がります。

⇒ ほのぼのヘッダー画像にメッシュを重ねた例

 

なつ
まだ初心者だったころ、スマホ画面のカスタマイズをどうすればいいのかすごく悩みました(;´・ω・)
レスポンシブと言ってもピンキリですが、最近は無料も有料もスマホを意識してとても綺麗なデザインになるように工夫されています。

 

ブログの訪問者もスマホからの流入が多く、レスポンシブデザインは絶対に押さえないといけない機能となりました。Wordpressテーマも今では、スマホのレスポンシブ画面の充実は必須となりつつあります。

 

 

スマホのデザインが綺麗なもの一覧 【ブログ用Wordpressテーマ】

有料・無料も含めてPC画面とスマホ画面が充実しているテーマを集めてみました。使いやすさや見栄えの良さなど比較してランキングしています。

  1. THE・THOR・・・完璧なSEO対策・上品なデザイン着せ替え
  2. AFFINGER6(ACTION)・・・着せ替え・パーツが豊富
  3. Diver・・・入力補助・簡単操作でアレンジがしやすい
  4. STORK(ストーク)・・・シンプルで可愛い
  5. SANGO(サンゴ)・・・可愛いデザインといったらコレ
  6. Cocoon・・・スキン(着せ替え)あり
  7. Chill(TCD)・・・女性向け専用のテーマ
  8. Hestia・・・シンプルでカラムが豊富
  9. 賢威8・・・10年以上前から販売している信頼性
  10. Astra・・・無料でシンプル
  11. Sydney・・・トップページが人気・無料

ここからは、それぞれのPC画面とスマホ画面がどんな感じになるのか調査してみました。ブラウザなどによっては見え方が若干違いがあるかもしれませんのでご了承ください。

メニュー部分などはパソコンでわかりづらい部分もありますが大まかな雰囲気で確認していただければと思います。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」!
THE THORの公式ページを確認する
※今なら、8大購入特典をお付けしています!

 

【スマホ画面】綺麗なWordpressテーマ 1. THE THOR

SEO対策を重視される方に最適なWordpressテーマがTHE THOR(ザ・トール)です。発売以来、かなり売れている大人気のテンプレートです。

無料ブログLIONBLOGからの有料化なので、LIONBLOGでの長年のノウハウがギュっとつまっています。

販売会社:フィット株式会社

 

なつ
ブログを作った時の見栄えがとても良くてプロが作ったみたいになります。

 

  • 完璧なSEO対策
  • 高機能でプラグインほとんど不要
  • 高速・上位表示の対策
  • 着せ替え機能
  • AMP・PWA対応
  • ヘッダーに動画・スライダー・静止画が選べる
  • お知らせヘッダー
  • 注目キーワード表示可能
  • 画像にメッシュなど重ねることができる。
  • 1~2カラム
  • サポート・会員フォーラム
  • ランキング

 

THE THOR(ザ・トール)には、54個の特徴があります。とてもこだわりの強いテーマですし、表示速度にもこだわりがあり、感想の中には短期間で上位表示されたなどの声もあります。

実際私のブログに使っていますが、デザイナーによってつくられた着せ替えデザインは使い勝手がとても良いです。

 

THE THORのPC画面

THE THOR(ザ・トール)ではデザイン違いのテンプレートが用意されています。上級者はカスタマイズをして凝ったデザインにできますし、初心者はワンクリックの着せ替え機能でプロのようなデザインを作れます。

 

THE THORのPC基礎画面

出典:THE THOR(着せ替え機能「01」)

 

THE THORのスマホ画面

スマホ画面も写真とラインの色が都会的でおしゃれです。TCDのChillはかわいくて印象的ですがザ・トールはシャープで色使いが印象的です。

 

当ブログのトップページスマホ画面
アレンジしたレスポンシブ画像

 

THE THORの場合には、設定した画像がとてもきれいに見えるという利点があります。ヘッダー画像も動画、スライダーなど自由に設定ができます。

 

↓ 当ブログからWordpressテーマTHE THORを購入くださった方に特典をプレゼントしています。

 

【スマホ画面】綺麗なWordpressテーマ 2. ACTION(AFFINGER6)

ACTION(AFFINGER6)とは、無料テーマのSTINGERやAFFINGER5(WING)をパワーアップさせたWordpressテーマです。2021年にAFFINGER5からAFFINGER6に変更されました。

機能的には大きく変更はないのですが、デザイン面とグーテンベルク対応が変わっています。元々デザイン面ではかなり触って変更できるのと、着せ替えがカッコいいものがあるので人気があります。

さらに、ブログとアフィリエイトで効率よく収益に繋げるための工夫があります。

 

販売会社:株式会社オンスピード

 

  • 独自のデザイン補助パーツが豊富
  • 口コミパーツ
  • AMP対応
  • コピー禁止機能
  • 広告設置機能
  • ランキング作成機能
  • 豊富なスライダー

 

ACTIONもまた、無料テーマからの有料化です。レイアウト自体は普通と変わりませんが、パーツや追加機能がよくできていて、ブロガーが欲しいな~と思う機能が備わっています。

 

AFFINGERのPC画面

AFFINGERの機能を使って作られた「かわいい系」のサンプル画像です。人気の記事のサムネイルを見てみてください。

ポラロイド写真風にアレンジが自分でできます。さらにその上にセロテープで貼ったような加工もワンクリックでできるようになっています。(サイドバーに丸のサムネイルを作ることも可能)

 

AFFINGER6のPC画面

出典:AFFINGER

 

AFFINGERのスマホ画面

シンプルですが、色合いの可愛いデザインです。バックの木目やタブの色などがホッコリする雰囲気なので、滞在率も上がると思います。

AFFINGER6のスマホ画面

出典:AFFINGER

 

例えば、TCDなどでもサムネイルを丸にしたデザインがありますが、AFFINGERでは操作次第でそういった加工もできます。

 

↓ 当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント!

 

【スマホ画面】綺麗なWordpressテーマ 3. Diver

Diverの特徴は、基本のSEO対策や機能に加えて初心者向けの入力補助機能や記事に使える細やかな配慮などが光るWordpressテーマです。私も使っていますが、とにかく記事装飾やブログヘッダー作成などがサクサクできるのでペラサイトにも最適です。

 

  • アイキャッチにYoutube動画が可能
  • 入力補助機能
  • SEO対策
  • 動くマーカー
  • 独自タブ
  • 画面レイアウトが豊富
  • ランキング作成機能
  • トグル

 

DiverのPC画像

タブが多く、整理されているので記事が多くなってきてもこのテーマなら美しく配置できます。派手ではありませんが、コンパクトに綺麗なサイトになります。

DiverのPC画面
出典:Diver

 

Diverはどのテーマよりも使う人のことを考えたテンプレートです。今のテーマにはほとんど見出しや囲い枠などは装備されていますが、Diverは自分のブログに合わせて「つくる」ことが可能。

 

Diverのスマホ画面

Diverのスマホの画面も見た感じは華やかですが、作り方はとてもシンプルに出来上がります。ボタンを工夫したりヘッダー画像等も簡単に変更できるので初心者には特におすすめです。

Diverのスマホ画面例

出典:Diver

 

 

 

 

【スマホ画面】綺麗なWordpressテーマ  4. STORK(ストーク)

とここんモバイルファーストと公式ページにあるようにカスタマイズを作りこむと忠実にスマホ画面に反映していきます。

STORKは機能的には、THE・THOR(ザ・トール)などよりもかなり少ないですが、その分作業がとても簡単なので初心者には向きます。

販売会社:OPENCAGE

 

  • ショートコード標準装備
  • ランディングページ作成機能
  • SNSボタン装備
  • ウィジェット機能
  • 商用可

 

STORKのPC画面

ヘッダーの上部、メニューの下にお知らせに誘導する部分がさりげなくあります。印象的なのはヘッダー画像上に誘導ボタンがありURLを指定することにより紹介したいページなどに訪問者を誘導できます。

 

STORK19のPC画面

出典:STORK19

 

STORKのスマホ画面

お知らせ、タイトル、ボタン、スライダーなど忠実にスマホ画面に反映されます。ここには映っていませんが、Androidのスマホ画面では、お知らせの上にメニューボタンが出てきます。

 

STORK19のスマホ画面

 

⇒ STORK公式ページを見てみる

 

 

 

【スマホ画面】綺麗なWordpressテーマ 5. SANGO(サンゴ)

サルワカさんが作っているデザイン性に優れたSANGO(サンゴ)。基本の色は水色ですが、赤系、黒系など用意された色番号を設定していけばまた違った雰囲気になります。

販売:サルワカ
販売価格:10,800円

 

  • 100%レスポンシブ
  • アニメーション効果
  • 内部SEO対策済み
  • 30種類以上の見出し

 

SANGOのPC画面

投稿記事の画面です。元々スッキリした雰囲気がありますが背景を木目に設定するとさらにホンワカしたイメージとなります。

 

SANGOのPC画面出典:SANGO

 

SANGOのスマホ画面

スマホ画面の方のバランスも良いですよね。ここではメニューがでてきていませんが、Androidのスマホ画面では設定したメニューが出てきます。

SANGOのスマホ画面

 

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

 

【スマホ画面】綺麗なWordpressテーマ 6. Cocoon

「主役は中身」というだけあってシンプルなのですが、必要なものはきちんとしている無料テーマです。Simplicityの後継版で、シンプルだけれどもできることが多いことや、スキン機能といって「着せ替え」のようなことができます。

 

  • 内部SEO済み
  • カスタマイズしやすい
  • 完全レスポンシブ
  • 無料
  • スキン機能
  • ランキング作成機能
  • 吹き出し機能

 

CocoonのPC画面

タイトルといいメニューといいかなりシンプルになっています。カスタマイズで背景をつけたので少しメリハリがついています。

 

CocoonのPC画面出典:Cocoon

 

Cocoonのスマホ画面

ヘッダー部分が長いので記事部分のみの画像となっています。ヘッダー部分は白地にタイトルとメニューがありますが、PC画面とほぼ同じです。

Cocoonのスマホ画面

 

↓ Cocoonの機能についてこちらの記事が参考になります。

 

【スマホ画面】綺麗なWordpressテーマ 7. Chill(TCD)

TCDは50種類以上のテーマを作って販売している会社です。Chillはその中でも比較的初期に販売されていたテーマ。

サロン、旅館、神社、医院、フォトグラファー、ブロガーなど

 

販売会社:デザインプラス
販売価格:Chill 8,980円

 

  • カスタムカラー機能
  • スクロール追従型のヘッダーバー
  • 広告スペース
  • テーマオプションでカスタマイズ
  • レスポンシブWeb対応

 

ChillのPC画面

若干古いテーマですが、ヘッダーやロゴなどを設定するとすごく綺麗ですね。女性向けテンプレートというだけあって画像の隅を微妙にカーブさせて角をとってあります。

 

TCDのPC画面

出典:TCD

 

 

Chillのスマホ画像

グラデーションの2色とその下のグラデーションが美しいのでやっぱり印象的です。使ってみて思うのはホームページのようなので個人ブログよりも何かショップブログのような使い方も良いのではないかと思います。

TCDのスマホ画面出典:TCD

 

 

Chill(TCD)はとても綺麗なんですが付属パーツがなく、公式から配布される見出しなどのショートコードはモノクロやグレーと地味であまり役にたたないかな・・・と感じます。

なので、もしTCDで自分なりの見出しなどは作らなければいけないので最低限のCSSが使えないといけないですし、見出しはH3からなのでSEO的には不利な部分もあります。

 

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

 

【スマホ画面】綺麗なWordpressテーマ  8. Hestia

WordPressの中から取り出せる無料テーマの中でも人気のあるテンプレートHestia。外国のテーマですが日本語の対応もしています。

  • 無料テーマ
  • 画像のオーバーレイ
  • フロントページが洗練されている
  • フォントの変更が可能
  • 無料部分は日本語でも対応
  • 75ドルでさらに高機能のHestia Proが用意されている。

 

HestiaのPC画面

ヘッダー部分のパープルが印象的ですが、これはベースになっている色です。

HestiaのPC画面

 

 

Hestiaのスマホ画面

ヘッダーのど真ん中のタイトルが目立ちます。基本的にはシンプルですので、使いやすいと思います。ただやはり無料テーマだけあって固定バーなどもなく有料との違いがありますね。

Hestiaのスマホ画面

 

 

【スマホ画面】綺麗なWordpressテーマ  9.  賢威  8

Webライダーという京都の会社が作っているのが賢威です。この賢威というテーマは歴史があり何度もバージョンアップしながら「8」までになっています。

SEO対策を強化し、昔からアフィリエイターに親しまれてきたテーマ。

販売会社:ウェブライダー
販売価格:27,280円(税込)

 

  • レスポンシブWebデザイン
  • スライダー
  • カスタマイズしやすい
  • SEO対策で上位表示しやすい
  • 着せ替え機能

 

賢威のPC画面

賢威では、いろんな職種のために色違いやイメージ違いのデザインが用意されています。それほど多くはありませんが、アフィリエイトなどに適しています。

賢威のPC画面

出典:賢威

 

賢威のスマホ画面

ヘッダーやSNSボタンがひとめでわかるレイアウト。スッキリしていて読みたい記事にすぐに誘導できるのがポイントです。

賢威のスマホ画面

 

 

 

【スマホ画面】綺麗なWordpressテーマ  10. Astra

WordPressで用意されている無料テーマで外国の方が作っているテンプレートです。2カラムでもあまりない左側にサイドバーが設置できるのが特徴です。

  •  レスポンシブ・スマホ対応
  • カスタマイザーで初心者も設定しやすい
  • カスタムカラー機能
  • SEO対策
  • 左にサイドバーが設置できる
  • 無料

 

AstraのPC画面

基本部分のみの設定なのでシンプルに見えますがカスタマイズに慣れてくるともう少しデザイン的にも自分好みにできます。

AstraのPC画面

 

 

Astraのスマホ画面

タイトルがスッキリ見えますね。背景を設定すると上品な雰囲気になります。シンプルイズベストという言葉がピッタリくるテーマです。

Astraのスマホ画面

 

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

 

【スマホ画面】綺麗なWordpressテーマ  11. Sydney

無料テーマの中でも人気のあるテーマ「Sydney」。TOPページがとても見やすくて有料テーマのSTORK(ストーク)やJINでもボタンなどは採用されています。

 

  • レスポンシブ・スマホ対応
  • カスタマイザーで初心者も設定しやすい
  • 高度なオリジナルヘッダーが作れる
  • 1カラム・2カラム対応
  • SEO対策
  • 無料

 

SydneyのPC画面

タイトルがスライドして出てきますので、見た目に目立ちますし、バックの画像とボタンを工夫することでユーザーに迷わずに見てもらいたい記事に誘導できます。

SydneyのPC画面

 

Sydneyのスマホ画面

ロゴとヘッダー背景を入れただけなのですがヘッダー部分はシンプルでカッコよく配置できます。

Sydneyのスマホ画面

無料なので、文句は言えないですが、有料と比べるとどうしても安っぽい雰囲気はありますね~(;´・ω・)

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

 

【まとめ】スマホ画面が綺麗なおすすめのWordpressテーマ

11個のレスポンシブデザインのテーマをお伝えしてきましたが、どれを選べばいいのでしょう。タイプ別にまとめてみます。

 

  1. お金をかけたくないタイプ
  2. SEO対策を重視したいタイプ
  3. デザイン重視したいタイプ
  4. 高機能のテーマを選びたいタイプ
  5. 自分自身でカスタマイズしたいタイプ
  6. 総合的にバランスを重視するタイプ

 

1. お金をかけたくないタイプ

  • Cocoon
  • Sydney(シドニー)
  • Astra
  • Hestia

 

とにかく安くブログを作りたい方には無料で使えるテーマがおすすめです。有料に近い機能を持っているものもありますし、Cocoonなどは日本の人が作っているので安心です。

 

 

2. SEO対策を重視したいタイプ

  • THE THOR(ザ・トール)
  • AFFINGER6
  • Diver

 

ブログを運営する上でSEO対策は避けて通れません。特に稼ぐブログにするには上位表示ができないと稼げませんのでSEO対策はとても大事です。

今現在どのテーマでもSEO対策はされていますが数と対策においてはTHE THOR(ザ・トール)が一番だと思います。

 

 

 

3.デザイン重視したいタイプ

  • AFFINGER6
  • Chill(TCD)
  • SANGO
  • THE THOR(ザ・トール)
  • Diver

 

デザインのみで語るならTCDのテーマが鮮やかで美しいと思います。ただしレイアウトのカスタマイズなどは決まっているので自分で少し触りたい人は他のテーマの方が良いでしょう。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

 

4. 高機能のテーマを選びたいタイプ

  • THE THOR(ザ・トール)
  • Diver
  • Cocoon
  • AFFINGER6

 

ザ・高機能といえばTHE THOR(ザ・トール)です。全て使いきれないくらいの機能があるのですが、初心者のためには「着せ替え機能」を用意してあるという部分で幅広いレベルの人が使えるようになっています。

 

5. 自分自身でカスタマイズしたいタイプ

  • Diver
  • WING
  • STORK
  • THE THOR(ザ・トール)
  • SANGO

 

Diverはテーマの中でも使う人のための独自の機能が備わっています。初心者の場合には高機能のテーマが使えないという悩みもあります。Diverでは自分で簡単に見出しやバッジなどを作ることができたり、今見かける蛍光ラインが動くというパーツを装備しています。

 

 

6. 総合的にバランスを重視するタイプ

  • THE THOR(ザ・トール)
  • Diver
  • WING
  • STORK

 

THE THOR(ザ・トール)は、54もの特徴があり完璧なSEO対策、高機能、使いやすさ、ストレスのなさなどかなりレベルの高いテンプレートです。

実際私もいくつか使ってみて一番使いやすいのがTHE THOR(ザ・トール)でした。ひとつだけデメリットをあげるとすると「有料」ということです。

上位表示・表示速度を上げて稼ぎたい人はTHE THOR(ザ・トール)がおすすめです。

 

 

初心者だからこそWordpress有料テーマ を使うべき理由


無料テーマを使うことで時間の無駄遣いをしていませんか?

  • 思い通りのデザインにできない・・・
  • なかなか稼げない・・・
  • アクセス数が増えない・・・

こんな悩みを抱えていませんか?
 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる5つのこと

  1. 検索上位を目指せる
  2. 見た目が綺麗でおしゃれになる
  3. 機能が豊富で出来ることが多い
  4. 会員フォームなどのサポート
  5. 有名ブロガーも有料テーマを使っている

 

これまでにあげた5つの有料テーマの特徴を説明していきます。

1. 検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。

  • 情報の信頼性
  • ユーザーへの役立つ情報であるか?
  • スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2. 見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

出典:THE THOR 着せ替え「01」

↓ クリックで拡大します
出典:特製THE THORオリジナルアレンジ

 

3. 機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4. 会員フォーラムなどのサポート

なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5. 有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。

当ブログおすすめWordpressテーマ!


WordPressテーマ「THE・THOR」

  • 高機能の最新テーマで有名ブロガーも使用
  • 着せ替え機能でいろんな用途に使える
  • 複数のブログに使える(本人のブログ)
  • 会員フォーラムやマニュアル完備



 

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US
なつ
とある芸術大学を卒業後、大手企業に就職。人件費削減の中、残業100時間が越えた時、「社会人」を卒業しました。 難しい表現をせず超初心者でも理解できるようなWordpressテーマの使い方や、カッコいいデザインの作り方もお伝えしています。