レスポンシブテーマとは
レスポンシブテーマとはパソコン、スマホ、タブレットなどユーザーの使っているデバイスに対して最適なサイズでサイトを表示する仕組みを取り入れたテーマのことです。
画面の横幅に合わせてデザインが最適化されています。
レスポンシブのメリット
SEO効果
パソコン、スマホ、タブレットなどサイズの違うデバイスから同じURLにアクセスできるため、サイト評価が統一されることでSEO効果が上がりやすいです。
Googleがサイト情報をクロールする際もURLが統一されていれば、より効率的にコンテンツ情報を収集できることに繋がります。
サイトのメンテナンス
サイトのデザインの修正などをする際にレスポンシブに対応していないテーマでは複数のページを修正する必要がありますが、レスポンシブに対応していれば、単一のページを修正することで全てのページを変更することができます。
サイトデザインが統一される
どのデバイスでサイトを見ても、同じデザインでサイトを表示できるので、ユーザーに認識してもらいやすく、ブランディングにも効果的です。
サイトの表示速度
各デバイスに応じて表示するコンテンツの大きさを最適化しますので、パソコン版のサイトをスマホで表示した時のように、表示に時間がかかるような問題もありません。
レスポンシブのデメリット
ガラケー非対応
ガラケーはレスポンシブに対応していないため、個別URLにするか、プラグインを別でインストールする必要があります。
スマホからPC版がられない
あえてPC版がスマホなどで見たい時にレスポンシブに対応したテーマだと変更することができません。
スマホのブラウザなどで「PC版をリクエスト」する機能もありますが、その機能を使ってもPCサイトを表示することはできません。
パソコン版とスマホ版で偏りができやすい
レスポンシブではサイトのレイアウトを「自動」で最適化しますので、サイトを運営すう上で「スマホの時は、このコンテンツはここにいてほしい」となった場合は自分で編集するスキルが必要になります。
パソコン版で完璧なレイアウトになったとしても、スマホ版ではいまいちな事があったり、その逆もあります。
パソコン版かスマホ版のどちらかに、デザインを絞る必要があるとも言えます。
おすすめレスポンシブテーマ10選
Habakiri
数あるレスポンシブテーマの中でも日本語対応でHTML5とCSS3で構築されているところがおすすめできるテーマです。
無料でインストール可能でシンプルながらカスタマイズ性も高く、公式のマニュアルがあるのも嬉しいポイントです。デフォルトの状態でも綺麗なレイアウトなので、すぐに使用できます。
Copyright表記に変更出来るアドオンやシェアボタンを追加できるアドオンがサポートされているのも、このテーマを使うメリットです。
Graphy
https://ja.wordpress.org/themes/graphy/
ミニマルなデザインが人気のレスポンシブテーマ「Graphy」
ジャーナリストのブログサイトには非常におすすめです。一見、何も装備されていないかと思うかもしれませんがSNSのシェアボタンやフッターのプロフィールなどが無駄なくシンプルにレイアウトされています。
テーマは極限までシンプルにしておいて、コンテンツの内容にとことん拘りたい人に最適です。
STINGER
無料でカスタマイズ性も高く、ブログサイトも企業のサイトも構築できる万能型レスポンシブテーマの「STINGER」
SEOにも強いと評判で、こちらのテーマを作った方も実際にアフィリエイトでかなりの収入を得ているようです。インターネット上にはSTINGERを活用したカスタム事例の情報が沢山でていますので「こういうサイトにしたい」と思ったことは、このテーマでほとんど作れるでしょう。
無料テーマでアフィリエイト収益を上げてみたいと思う方は試す価値ありです。
Attitude
https://www.themehorse.com/preview/attitude/
海外製のテーマながらカスタマイズ画面の日本語表記が嬉しい「Attitude」
企業サイトに最適なレイアウトとブログサイトに最適なレイアウトがデフォルトで選択可能なのが最大のメリットです。トップ画像のスライド表示なども実装されている無料とは思えないようなテーマです。
特に企業サイトのレイアウトは非常に綺麗で、必要な情報が上手く配置されるように考えられていることが分かります。
自分で会社のページを作成したいけど、レイアウトで悩んでしまう方にとってもおすすめです。
Synthetica
https://tympanus.net/codrops/2016/04/29/freebie-synthetica-one-page-website-template/
気持ちの良いアニメーションが魅力的なテーマ「Synthetica」
デフォルトのカラーレイアウトも美しく、落ち着いた雰囲気が特徴的。製品の紹介や個人のポートフォリオなどに活用できます。HTML5とCSS3で構築されており、スマホ、タブレット時の表示やレイアウトも洗練されているのが印象的なレスポンシブテーマです。
革細工の工房のホームページやモダンな陶芸品の紹介なんかには非常におすすめです。
Valet
http://freehtml5.co/valet-free-html5-bootstrap-template/
大きなトップ画像が印象的なテーマ「Valet」
整ったレイアウト、レスポンシブ対応、小気味の良いアニメーションが特徴的です。ランディングページにも最適で「魅せる」ことに特化している作りになっています。
コンテンツ上にマウスを合わせるとフワッと動くアニメーションは製品の魅力をアピールするのに一役買いそうです。スマホで表示した際も綺麗なレイアウトを保っています。
SSMAG
http://hotclonethemes.com/portfolio/ssmag-premium-responsive-wordpress-magazine-theme/
グリッドデザインが特徴的なテーマ「SSMAG」
フォトグラファーの方にもおすすめのテーマです。デフォルトでは全て同じ大きさのグリッドデザインで統一されていますが、上段にメニューが設置されているのでカテゴリーやプロフィール関係をメニューに入れることでブログサイトとしてもインパクトのあるサイトになります。
スマホで表示した場合はグリッドが一列に並ぶ形になります。
PURE
https://www.webdesignerdepot.com/2014/09/free-download-pure-wordpress-theme/
多機能で斬新なデザインが目に止まってしまう「PURE」
レスポンシブでHTML5/CSS3と基本スペックも高いだけでなく、スムーズに動作するアニメーションやグリッドのパターンを簡単に変更できるのもポイントです。ギャラリーサイトや女性向けのファッション情報サイトなどにもおすすめです。
白を基調とした洗練されたデザインはスマホ、タブレットでの表示時もイメージがブレることがなく安定しています。
MAGAZINE
https://www.mhthemes.com/themes/mh/magazine-lite/
雑誌やニュースなどのインフォメーションサイトを構築したい時に便利な「MAGAZINE」
トップ画像にはスライド機能が付いていますので、時事ネタなどのスライド表示に便利です。メニューごとに記事を分けてくれる機能があるので、旅行サイトで国別、便利グッズ、必需品の紹介なんかに重宝します。
記事数の多いブログサイトも、こちらのテーマを活用することでユーザーに分かりやすく表示させることができます。
Waves
https://www.webulousthemes.com/waves/
波型の曲線とトップの大きな画像がインパクト大なテーマ「Waves」
デフォルトの状態で、すでにサイトとして完成されている印象を受けます。デザイン、レイアウト共に作り込まれているのでクルッと回転するアニメーションメニューや、トップとミドルにスライド画像が設置可能だったりと、多機能なテーマです。
このテーマで個人企業のホームページを作成したりしたら面白そうですね。
まとめ
無料でインストールができるWordPressのレスポンシブテーマを紹介しました。
デバイス選ばずに最適な画面で表示してくれるレスポンシブテーマ。無料のテーマでも、ここまで多機能なものがあるのには驚きですね。
今回、紹介したテーマには、より高性能な有料のアップグレード版が容易されているのも、嬉しいポイントです。
実際に無料版をインストールしてみて活用していく中で気に入ったテーマがあったら、有料版にアップグレードすれば、サポートやサービスをアップグレードすることができますので、おすすめです。
便利で多機能な無料のレスポンシブテーマを是非ご活用くださいませ。