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

WordPressのテーマでおすすめのスマホ画面がきれいなデザイン11選!

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

今やほとんどの人がスマホを持っています。このワードプレスを扱ったブログでも約25%はスマホやタブレットからの訪問者ですし、そのほかの芸能ブログでは7割程度はスマホからの訪問だったりします。

そこで、レスポンシブデザインが充実しているテンプレートをスマホの画面と共にお伝えしていきます。

 

WordPressテーマでレスポンシブデザインって何?

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

このサイトではSTORK(ストーク)を使っていますが、PCの画面のデザインを整えるとスマホ画面が以下のようになります。

なつのひとりごと

まだ初心者だったころ、スマホ画面のカスタマイズをどうすればいいのかすごく悩みました(;´・ω・)

レスポンシブと言ってもピンキリですが、最近は無料も有料もスマホを意識してとても綺麗なデザインになるように工夫されています。

サイトもスマホで読まれることが多いので、レスポンシブデザインは絶対に押さえないといけない機能です。今のテーマのほとんどはレスポンシブデザインは意識されています。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

【初心者必見!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】


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

 

WordPressテーマでレスポンシブデザインが綺麗なもの一覧

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

  1. THE・THOR(ザ・トール)イチオシ!
  2. WING
  3. Diver
  4. STORK(ストーク)
  5. SANGO(サンゴ)
  6. Cocoon
  7. Chill(TCD)
  8. Hestia
  9. 賢威8
  10. Astra
  11. Sydney

 

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

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

 

レスポンシブデザインが美しいワードプレステーマ「THE・THOR」

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

レスポンシブデザインが綺麗なWordpressテーマ1. THE THOR

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

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

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

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

 

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

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

 

PC画面

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

 

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

スマホ画面

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

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

 

↓ THE・THOR(ザ・トール)をこのブログから購入くださった方に特典をプレゼントしています。よかったら利用してください!

【初心者必見!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】

レスポンシブデザインが綺麗なWordpressテーマ2. WING(AFFINGER5)

WING(AFFINGER5)とは、無料テーマのSTINGERやAFFINGER4をパワーアップさせたWordpressテーマです。

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

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

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

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

 

PC画面

WINGの機能を使って作られた「かわいい系」のサンプルです。

出典:WING(AFFINGER5)

スマホ画面

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

出典:WING(AFFINGER5)

 

 

 

レスポンシブデザインが綺麗なWordpressテーマ3. Diver

Diverの特徴は、基本のSEO対策や機能に加えて初心者向けの入力補助機能や記事に使える細やかな配慮などが光るWordpressテーマです。

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

 

PC画像

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

出典:Diver

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

 

スマホ画面

出典:Diver

 

↓ このブログからDiverをご購入くださった方に特典をプレゼントしています。

Diverの6大特典!【WordPressテーマ】初心者でも稼げる!ひとあじ違うテンプレートアイテムが魅力!

レスポンシブデザインが綺麗なWordpressテーマ4. STORK(ストーク)

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

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

販売会社:OPENCAGE

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

 

PC画面

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

スマホ画面

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

 

レスポンシブデザインが綺麗なWordpressテーマ5. SANGO(サンゴ)

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

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

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

PC画面

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

スマホ画面

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

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

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

レスポンシブデザインが綺麗なWordpressテーマ6. Cocoon

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

 

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

PC画面

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

スマホ画面

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

 

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

Cocoonは初心者向けか検証!機能面とデザインを調査!【WordPressテーマ】

 

レスポンシブデザインが綺麗なWordpressテーマ7. Chill(TCD)

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

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

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

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

PC画面

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

スマホ画像

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

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

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

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

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

レスポンシブデザインが綺麗なWordpressテーマ8. Hestia

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

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

PC画面

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

スマホ画面

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

レスポンシブデザインが綺麗なWordpressテーマ9. 賢威8

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

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

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

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

PC画面

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

スマホ画面

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

 

 

レスポンシブデザインが綺麗なWordpressテーマ10. Astra

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

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

 

PC画面

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

スマホ画面

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

 

デザイナーが作ったレスポンシブデザインのワードプレステーマ「THE・THOR」

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

レスポンシブデザインが綺麗なWordpressテーマ11. Sydney

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

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

 

PC画面

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

スマホ画面

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

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

 

100%レスポンシブデザインのワードプレステーマ「THE・THOR」

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

【結果】Wordpressのレスポンシブデザインテーマはどれを選ぶべきか?

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

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

 

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

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

 

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

 

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

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

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

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

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

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

 

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

 

デザイン重視&高機能のワードプレステーマ「THE・THOR」

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

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

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

ザ・高機能といえば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(ザ・トール)がおすすめです。

 

↓ このブログからTHE THOR(ザ・トール)をご購入くださった方に特典をプレゼントしています

【初心者必見!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】

 

初心者だからこそ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」

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

 

シェアしてね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です