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

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

参考:乗り遅れるな!Googleが推奨するモバイルファーストインデックス(MFI)の注意点|ferret [フェレット]

1.とにかくゼロから作る

とにかくゼロから作る

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

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

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

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

2.自動変換ツールで作る

モビファイ

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

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

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

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

3.WordPressプラグインで作る

WordPressプラグイン

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

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

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

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

4.レスポンシブデザインで作る

レスポンシブデザイン

費用:★★
手軽さ:★★
デザイン性:★★

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

閲覧端末に合わせてスタイルシートの切り替えを行うので、マルチデバイスに対応し、ユーザーの閲覧環境に合わせて最適な表示ができる点がメリットです。こちらも同様に専門的な知識を持っている方でなければ構築するのは難しいため、専門の制作会社などに依頼する必要があります。

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

スクリーンショット_2018-07-03_11.31.32.png
参考:さくっと作成、らく〜に運営|One Page(ワンページ)

費用:★★
手軽さ:★★★
デザイン性:★★

最近はスマートフォンでの表示を見越して、作ったページがそのままレスポンシブ対応になるツールが増えています。
スマホやタブレットでも見やすいレスポンシブデザインのホームページを作りたい方におすすめです。
ゼロから作る場合のような、凝ったデザインは難しいものの、こういったツールを活用すれば簡単にホームページが作れます。

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

スマートフォン用のホームページ制作にも様々な手段があり、それぞれのメリット・デメリットがあります。
否応なしに迫られるホームページのスマートフォン対応を、どういった手段で対応するかは、それぞれの手段を理解したうえで決めるのがベストです。
また、アクセス解析などでユーザーの閲覧環境も考えスマートフォンユーザーが多ければ、早めの対応をオススメします。

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

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

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

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

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

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

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