ホームページ制作

あなたの発注コンシェルジュ

登録者数No.1
フリーダイアル

0120-917-819

営業時間 平日 10:00~19:00

ホームページ制作
登録者数No.1
お電話でのご相談
フリーダイアル 0120-917-819
営業時間 平日 10:00~19:00
仕事を受けたい方

公開日:2016年06月03日 更新日:2020年04月14日

WordPressをスマホ対応させる3つの方法を知っておこう【2020年最新版】

ノートパソコンやスマホ、筆記用具、コーヒー
目次

近年、スマートフォンを使ったインターネット利用率が増しています。
ショッピングサイトではスマホ利用者がパソコンの利用者を上回っていますが、この傾向は今後ますます拡大することが予想されています。
PCでの利用しか想定していないサイトは直ちにスマホサイトを用意する必要性に迫られていますが、さいわいな事にWordPressでは手軽に今あるサイトをスマホ対応にできるツールがそろっています。

ここでは、そんなWordPressスマホ対応の3つの方法をお伝えします。さっそく見ていきましょう。

WordPressスマホ対応にプラグインを利用する方法

プラグインですので、インストールして有効化すればすぐにサイト全体がスマートフォン対応します。とても便利ですね!

ここではスマホ対応プラグインとして有名なものを3つあげておきましょう。

WPtouch Pro の公式サイト
出典WPtouch Pro

有料版も用意されており、49ドルになっています。
気になる有料版と無料版の違いですが、無駄な「CSS」や「JS」ファイルの読みこみ・表示カット、iPad対応、カスタム投稿のスマホ化対応、設定項目のバックアップ可能、対応テーマが増える、などです。

特に、自社で使っているテーマに有料版で対応できる場合には有力な選択肢となりそうですね。

Jetpack のダウンロードページ
出典Jetpack

Jetpackは、コメントスパムなどを防いでくれる機能で有名ですがスマホ対応機能もついています。
このJetpackを使う方法では、カスタマイズがけっこう容易にできてしまうのが特徴です。
抜粋ページ(more)を設定したり、テーマのヘッダー画像、背景、ウィジェットのカスタム表示が可能です。

Ktai Style のプラグイン紹介ページ
出典Ktai Style

その名の通り、携帯電話に対応してくれるプラグインですが、まだガラケーを無視できない、というサイトにはぴったりです。
しかしWordPress公式ダウンロードサイトに警告があるように、2年間アップデートされていません。
したがって、本体のバージョンアップに従って突然使えなくなるという危険性もありますので、そこは注意しておきましょう。

WordPressをスマホ対応のレスポンシブデザインにする方法

タブレットとスマホ

すでにサイトを作りこんでしまっている場合は、自社で使っているテーマに対応したプラグインを探すという方法が有力ですが、これからサイトを作る、もしくは全面的にリニューアルするという場合には最初からレスポンシブ・ウェブデザイン対応のテーマを選ぶことが最も確実です。
テーマ自体がバージョンアップしてレスポンシブ・ウェブデザインを機能から外すということも考えにくいので、将来的にも安心ですね。

WordPressのレスポンシブ・ウェブデザイン対応のテーマは、本体のテーマ新規インストール画面から、レスポンシブ・ウェブデザイン対応をチェックすれば候補が沢山出てくるので、ぜひ試してみましょう。

ただし、同じレスポンシブ・ウェブデザイン対応テーマでもレイアウトの印象はかなり変わってきますので、プラグインを入れた後にそのまま使えるかどうかは分かりません。
細かなフォントやレイアウトをいじらないといかにも自動変換しました、という感じになってしまう場合も結構ありますので注意が必要です。

レスポンシブ対応のテーマはこちらで多数紹介しています!
レスポンシブ対応のWordPressテーマ35選!サイトをスマホ対応にする方法も解説

WordPressスマホ対応にカスタマイズで対応する方法

この方法は大きく分けて2つの方法があります。

1つ目は、自分でレスポンシブ・ウェブデザイン用CSSを作ってしまうことです。
専門的な知識と制作時間が必要になりますが費用を抑えて制作することができます。
そして2つ目はまるごと外注することになります。
外注する場合、時間と費用はかかりますが納得のいくレベルのものが出来上がるでしょう。

自分で試してみたい場合にも、その部分を業者に外注するにも、レスポンシブ・ウェブデザイン化に何が必要かを把握しておくことはとても大切なことです。
特に業者の相見積もりを取るときには、レスポンシブ・ウェブデザイン化はかなりの開きが出ることが予想されますが、どんな作業が必要になってくるかを押さえておけば、見積もりの妥当性を比較することができます。

■レスポンシブ・ウェブデザインに必要な作業
◇ヘッダ部分にviewpointを一行挿入する
◇PC:横幅769px以上、タブレット横幅768px、スマホ横幅640pxなどに合わせてCSSを3種類用意する
◇画像を呼びだしている部分の伸縮設定を行う

見積もりを取るときには「レスポンシブ・ウェブデザイン対応一式○○万円」ではなく、こうした項目を出してもらって作業工数ベースの見積もりを取れば比較検討が正確にできるようになります。

2つ目は、スマホ用のCSSを作って別サイトに置き、接続してきたデバイスによって振り分ける方法です。
レスポンシブ・ウェブデザイン全盛の中、ちょっと古くさい方法ではありますが振り分けプラグインとして Multi Device Switcher という便利なものも用意されています。

【まとめ】WordPressをスマホでも見れるサイトにするためには

WordPressをスマホ対応させる方法を知っておくことで、実際に自ら制作作業を行わないとしても、発注時の見積もり評価ができるようになり、交渉を有利に進められる可能性が高まります。

ビジネスマッチングサイト『アイミツ』ではホームページ制作業者に関する専門知識を持ったコンシェルジュが、信頼のおける業者を完全無料で紹介することができます。

まずはお気軽にお問い合わせください
すぐれたコンシェルジュが、あなたの会社に合った企業選びを全力でお手伝いさせていただきます。

ホームページ制作会社探しで、こんなお悩みありませんか?

電話が鳴り止まない

一括見積もりサイトだと
多数の会社から電話が・・・

見積もりを取っても不安

相場がわからないから
見積もりを取っても不安・・・

情報だけを信じるのは不安

どの企業が優れているのか
判断できない・・・

アイミツなら
  • point. 1 専門コンシェルジュがあなたの要件をヒアリング!
  • point. 2 10万件の利用実績から業界・相場情報をご提供!
  • point. 3 あなたの要件にマッチした優良企業のみご紹介!
アイミツ

著者

imitsu編集部

運営に関するお問い合わせ、取材依頼などはお問い合わせページからお願い致します。

ホームページ制作会社が
最短翌日までにそろう