「クリエイターのたまご」の皆さんに贈る、デジタルハリウッドのお役立ちWebマガジン!「クリエイターになりたいなぁ」と、ちょっとでも思ったことのあるあなたは、「くりたま」です。

モバイルフレンドリーにしよう!スマホ対応サイトにする方法3つ

スマホ対応サイトにする方法

スマートフォンやiPhoneの普及で、既存のコーポレートサイトやECサイトをモバイルフレンドリーに対応させることが急務になっています。

 

ストレスなくスマホ対応サイトの構築または移行を終えるために、どのような方法があるのかを考えてみましょう。

 

Googleからの発表とスマホ対応の方法

2015年4月に、Googleから新たな発表がありました。

 

それは、検索エンジンの検索結果(キーワードによる検索順位)を決定づける要因として、スマートフォンサイトなどモバイルフレンドリー対応されたWebサイトを優遇するというものです。

 

インターネットやWebの世界で非常に強い影響力を持つGoogleの決定だけに無視もできません。特に、ECサイトや自社ホームページで利益をあげている世界中の企業にとって顧客を意識したモバイルフレンドリー対応は急務となりました。

 

既存のPCサイトなどをスマホ対応にする方法としては、いくつかの手段があります。代表的な3つの方法についてご紹介します。

 

1.レスポンシブWebデザインでスマホ対応させる


Googleが最も推奨しているのが「レスポンシブWebデザインを利用する」という方法です。

 

レスポンシブWebデザインとは、Webの閲覧者/訪問者の利用する端末(PC・スマホ・タブレット等)の画面幅に対応できるように表示画面が自動で切り替わるWebデザインのことです。

 

1つのURLとHTMLソースでPCサイト、スマホサイトの役割を果たすレスポンシブWebデザインを採用することにより、PCサイトとスマホサイトを別々に構築しなくて済みます。また、Webサイトを更新するときも1つのWebサイトを更新すれば良いだけです。

Google的にも、PCサイトとスマホサイトを別々にクロールしなくて済んだり、PCサイトとスマホサイトのコンテンツ重複をチェックしたりしなくて済むため、モバイルフレンドリー対策として推奨しています。

 

メリットが多そうなレスポンシブWebデザインですが、実は短期間で構築することが難しく、制作コストがふくらみやすいという欠点があります。また、Web制作側としては、画像のファイルサイズが重くなったり、デザインに制限が生まれたりするため、構築が難しいと感じるWebデザイナーもいるようです。

 

 

2.PCサイトとスマホサイトを別に制作する


スマホサイトをPCサイトとは別に制作する、という方法もあります。

 

PCサイトとスマホサイトを別のURLとHTMLコードで運用するケースと、アクセスしたユーザーの環境により出力するHTMLコードを変えることで、1つのURLでPCサイトとスマホサイトを使い分けるケースの2パターンです。

 

どちらのケースでも制作費用はPCサイトを作ったときと同じくらいのコストがかかりますが、ほかの方法と比べて制約が少なく自由にデザインを組むことができます。

 

更新頻度が少なく、企業・ブランドイメージを重視しているサイトで採用されることが多い方法です。

 

3.CMS用プラグインでスマホ対応させる

WordPressをはじめとするCMSでWebサイトを構築している場合、プラグインを入れるだけでスマホ対応させることも可能です。

 

メリットは短時間でできることと、基本的には無料でできることです。HTMLやCSSなどを編集したことがない人でもインストールするだけで手軽にスマホ対応できるので、「とにかくすぐにスマホ対応させておきたい!」という場合に適しているといえます。

 

デメリットは、デザインが画一的であることと、プラグインの影響でWebサイトが表示エラーになってしまう可能性があるということです。特に表示エラーについてはWebサイト運営に支障が出てしまうので、事前にプラグインの情報をよく調べ、テストサイトで試してからインストールするようにしましょう。

 

まとめ

モバイルフレンドリーやスマホ対応は今や必須といえますが、全てのWebサイトでGoogleが推奨しているレスポンシブWebデザインが最良の選択であるとは限りません。

それぞれのビジネスモデル(目的)や事情(日程や予算)にマッチするように、スマホ対応することが大切です。

 

B!

この記事におすすめのオンライン講座

こんな記事も読まれています

VTuberの作り方は?個人勢向けに制作費用、活動に必要なものを解説!

ポートフォリオサイトのおすすめ21選!無料のポートフォリオサイトも紹介!

【受付終了】デジハリ・オンラインスクール学校説明会

モバイルバージョンを終了