自社ホームページをスマホとタブレットに表示対応させる３つの方法

最近少しずつご依頼が増えている「ホームページのスマートフォン最適化」について解説させていただきます。当研究所のウェブサイトはパソコンとスマートフォン両方に自動対応済みです。パソコンとスマートフォンではそもそも解像度が違うので各ページにアクセスがあった端末情報を判定してCSS側にて調整を加えています。

対応方法はいくつかあるので下記で主な手法を３つご紹介いたします。

自社ホームページをスマホとタブレットに表示対応させる３つの方法

運営サイトをスマホ最適化できるかどうかは現時点の作り方に大きく影響されます。パターンが色々とあるため状況によってはデザインをそのままでコーディングしなおしたり部分調整したりと多種多様です。

１. スマートフォン用のページを別途作成する

まずは「現在のホームページに手を加えずにスマホ対応させる方法」があります。

方法としては３つのなかではもっとも古い手法です。どういう仕組みかと言うとモバイル向けに専用のページを作る流れになります。ウェブ業界では過去に「ガラケーが主流だった時期」がありました。その際にパソコン用のページと携帯電話向けのページをそれぞれ違うページで作成するという技術が多く採用されていました。

カンタンに言えば「/m」とか「/sp」といったディレクトリを新しく追加して携帯電話やスマートフォンからのアクセスを物理的にURL転送して最適なデザインのページを表示するといった仕組みですね。

メリットは「現ホームページとは異なる場所に配置できる点」となります。ディレクトリをわけているため影響を受けないのでレイアウトも自由自在に作ることが可能です。ただ、同じページなのにパソコン用とスマホ用でデータが違うため設定によっては「SEOの評価を分散してしまう」といったデメリットもあります。

上記は主にパソコン向けホームページの作り方が特殊な場合に採用する方法となります。ガラケー時代の作り方なのでスマートフォンやタブレットが中心となっている現在では積極的に使うことはありません。

２. 既存ホームページをスマートフォンに最適化する

そして次が「パソコン用のホームページに解像度ごとの設定を追加する方法」です。

一般的にパソコンとスマートフォンではアクセスする端末の解像度が違います。その解像度の設定ごとにCSSを切り替えて表示を最適化する仕組みとなります。以前に別記事も書いているのでご参照ください。

スマホ対応したホームページの作り方

上記でご紹介した記事URLのまとめ箇所に書いている「後からレスポンシブ」という技術ですね。対応可能かは現在のホームページ構造を細かくチェックしなければなりません。CSSを追加するだけでは対応できないケースもあるため状況次第ではデザインをそのままでパソコン向けに作り替えたりと作り方も微妙に変わってきます。

パソコンもスマートフォンもワンソースになるのでSEO評価も分散せずもっとも安心感があるかもしれません。

３. 最新技術でウェブサイトごと作り変える

もし上記「２」がむずかしい場合は「すべてを作り変える方法」がおすすめです。補足として「作り変える」と言っても大きくパターンＡとパターンＢにわかれます。どちらを選ぶかで必要な費用も変わります。

Ａ. パソコン向けの見た目を変えてスマートフォンに対応させるパターン
Ｂ. パソコン向けの画面は現状維持して見た目を変えず対応するパターン

わかりやすく言えば「Ａ」パターンはパソコン用のデザインが変わってもスマホ対応を優先するという考え方でなるべく費用をかけずに最適化したい人に選ばれやすい方法です。逆に「Ｂ」パターンはパソコン用の見た目をそのまま変更することなくパソコンとスマートフォン両方を共通ソースで作り直すという流れになります。

上記「Ａ」と「Ｂ」を選ぶポイントは「現ホームページのデザインを変えたくないかどうか」。パソコン向けに公開しているホームページの見た目を残してスマホに対応したいのであれば「Ｂ」しかありません。

まとめ

本日は「自社ホームページをスマホ対応する３つの方法」を解説させていただきました。まとめておきますね。

１. アクセスのあった端末によってディレクトリを切り替える方法
２. 現在公開中のPC向けホームページを維持してスマホ最適化する方法
３. パソコン向けの見た目を変更させてもいいので安く済ませる方法

そして「３」のもう１つのパターンがパソコン向けの画面を維持したまま全体を作り直してワンソースでスマホ対応させる方法です。ちなみに「２」は元のhtmlが柔軟な作りになっていることが条件となります。

ひとことでスマホ対応と言っても色々な方法があるのでご予算に応じて選ぶのがおすすめです。スマートフォン最適化がまだ完了していないホームページを運営されている管理者さまはぜひご検討くださいませ。

本記事が運営サイトをスマートフォン対応化する際のご参考になれば幸いです。