WEBサイト上のホームページをスマホ対応させる5つの方法を解説！

Googleが導入したモバイルファースト インデックス（MFI：Mobile First Indexing）をはじめ、ホームページ運営者にとってスマートフォンサイトへの対応は必須項目となっています。

今回は、スマートフォンからの閲覧に対応したホームページを作る5つの方法をご紹介します。それぞれメリット、デメリットがありますので、手軽さ・費用・デザイン性など、何を重視するかを考慮した上で適した方法を選んでみてください。

参考：乗り遅れるな！Googleが推奨するモバイルファーストインデックス（MFI）の注意点｜ferret [フェレット]

1．スマホ対応ホームページをゼロから作る

費用：★★☆
手軽さ：★☆☆
デザイン性：★★★

パソコン用のホームページを作るのと同じく、HTMLとCSSを使って自分で一からスマートフォンの環境に最適化した専用サイトを作る方法があります。

スマートフォン専用のホームページの場合は、パソコン用ホームページのように古いバージョンのブラウザに対応させる必要がないため、HTML/CSSの基本的な知識さえあれば比較的簡単に作ることができるのがメリットです。

しかし、すでにパソコン用のホームページがある場合、コンテンツ自体は流用できるものの、静的に作られたホームページ同士の連動に手間がかかります。パソコン用ホームページで更新した内容をまたスマートフォン専用ホームページで更新するという並行作業になってしまうので、更新スピードが早くコンテンツのボリュームも多い場合にはあまり向かないかもしれません。

2．自動変換ツールでスマホ対応ホームページを作る

費用：★★☆
手軽さ：★★★
デザイン性：★☆☆

HTMLやCSSを使って自分で構築するのが難しい場合や連動が重要な場合には、すでにあるパソコン用のホームページを自動的にスマートフォン用のホームページに変換してくれるツールを使う方法があります。

例えば、自動変換サービス「モビファイ」なら、パソコン用のホームページを簡単にマルチスクリーン対応にすることができます。スマートフォン用のホームページで重要とされる表示速度も速く、幅広いデザイン性も特徴の1つです。
料金プランは、8万円から50万PVまでとあるものの、一からスマートフォン用のホームページを制作する、あるいは作り変える費用で考えても安く抑えられるでしょう。

唯一の欠点としては、自分で一から作る方法に比べるとデザインやレイアウトの自由が利かないもののお手軽なので、スマートフォン対応ホームページの有効性自体を確認してみたい、という方にもおすすめです。

3．WordPressプラグインでスマホ対応ホームページを作る

費用：★★★
手軽さ：★★★
デザイン性：★☆☆

すでにパソコン用ホームページがあり、かつそれがWordPressで構築されている場合は有料の変換ツールに頼らずとも、無料のプラグインでスマートフォン対応が可能です。

WordPress公式ホームページで配布されている「WPtouch」を活用することで、訪問者が利用している端末によってパソコンならパソコン用、スマートフォンならスマートフォン用のホームページを自動的に切り替えて表示してくれるのでHTML/CSSで静的に構築した時のような連動の手間もかかりません。

ただし、既存のパソコン用ホームページのデザインに合わせてスマートフォン用のデザインを自在にカスタマイズするためには、専門の知識が必要となるところがデメリットといえるでしょう。WordPressを利用しているホームページでこのプラグインを利用しているところが多いため、スマートフォン用ホームページを他と差別化することが難しいことも難点です。

4．レスポンシブデザインでスマホ対応ホームページを作る

費用：★★☆
手軽さ：★★☆
デザイン性：★★☆

タッチスクリーンの導入などパソコンとは操作方法から異なるスマートフォンですが、基本的にパソコン用ホームページのデータをそのまま使い、訪問者が利用している端末の画面サイズにのみ対応して表示幅や文字のサイズを変更することでスマートフォンに対応する方法もあります。このような技術のことをレスポンシブデザインと言います。

HTMLはPC用、スマホ用共通のものを利用し、訪問者が見る端末にあわせてスタイルシートを用意しておくことで「中身はそのまま、見た目はその端末にあっている」サイトをつくることが可能です。
HTML内に「メディア・クエリ」とよばれるものを付け加えるだけなので、HTMLを利用した基本的なWEBサイト構築が可能であれば、難しい作業ではないと思います。

5. レスポンシブ対応のツールで作る［PR］

参考：さくっと作成、らく〜に運営｜One Page(ワンページ)

費用：★★☆
手軽さ：★★★
デザイン性：★★☆

最近はスマートフォンでの表示を見越して、作ったページがそのままレスポンシブ対応になるツールが増えています。

大きな手間をかけずに、PC、スマホ、タブレットなどどんな端末でも見やすいレスポンシブデザインのホームページを作りたい方におすすめです。

既にある程度のデザインが決まった中から選ぶ形式になるため、こだわりがぎゅっとつまったデザインを自らの手で作ることは難しいものの、比較的手軽にどの端末から見ても遜色のないホームページが作れます。

ホームページをスマートフォンに対応させよう

スマートフォン用のホームページ制作にも様々な手段があり、それぞれのメリット・デメリットがあります。

スマホ利用者の増加、特に10代、20代の中にはPCを所持していない人も増えつつあることで、否応なしに迫られるホームページのスマホ対応を、どのような手段で構築するかは、それぞれの特性やご自身のニーズにあわせて決めるのがベストです。

アクセス解析などでユーザーの閲覧環境を参考にし、PC観覧9割を超える場合はPC用ホームページのみ、スマートフォンユーザーが9割を超えるようでスマホ対応ホームページのみ。といった対応も考えられますが、おおよその場合はそこまで偏らないので、早めにスマホ対応のホームページを作ってしまいましょう。

ホームページのスマホ最適化を進める

ホームページをスマホ化していないのは大問題！早急に対応するべき理由がわかる記事5選

今回は、まだスマホ対応に踏み切れない方に向けて、過去にFerretで配信した記事の中からスマホ対応の重要さがわかるものをご紹介します。

スマホサイトのデザインの参考にしよう！デザインをまとめたサービス11選

スマホ最適化を実施する前に見ておきたいスマホサイトデザイン集をご紹介します。これからスマホサイトを制作する予定の方、またはリニューアルを考えられている方はぜひ参考にしてみてください。