top > コラム > ホームページ制作 > サイトをスマートフォンに対応させよう

サイトをスマートフォンに対応させよう

スマートフォンの普及に伴い、スマートフォンからのアクセス率が向上し続けております。

2014年12月16日公開の少し古い記事になりますが、以下のような調査結果もあるようです。

2015年2月27日にはGoogleが、ウェブサイトがモバイル フレンドリーかどうか(スマートフォン向けに最適化されているかどうか)をランキング要素として使用し、2015年4月21日から実施することを発表しました。

特にECサイトではスマートフォンに対応するのは急務です。

まずはご自身のWebサイトがスマートフォンに対応しているかどうかを確認してみましょう。以下のサイトにアクセスして、ご自身のWebサイトのURLを入力してチェックしてみてください。

1.一番簡単なのは、スマートフォン専用のサイトを作ること

すでにPC向けのサイトがある場合、一番簡単なのは、新たにスマートフォン向けのサイトを作ることです。デザインや内容をスマートフォン向けに作れるので、サイト制作が初心者の方は、新しくスマートフォン向けのサイトを作ることをおすすめします。

ただし、2つのWebサイトが存在するので、両方を更新しないといけないので、運営上の手間は2倍かかってしまうことに注意が必要です。

スマートフォン専用のWebサイトの作り方ですが、基本的には「リキッドレイアウト」と呼ばれる、横幅をパーセント表示で指定する方法が用いられます。

初心者の方が、ゼロからスマートフォン専用サイトを作るのは難しいと思いますので、スマートフォン専用サイトが無料で作れるテンプレートを配布しているサイトを紹介します。

さて、その際、2つのWebサイトが存在してしまうわけですが、PCからアクセスした人にはPC専用のWebサイトを、スマートフォンからアクセスした人にはスマートフォン専用サイトを見せたいですよね。

それを切り替えるためにはPHPやJavaScript、.htaccessを使用して、デバイスからのアクセスから閲覧するサイトを振り分けることが出来ます。

ここでは詳しく説明しませんが、以下のサイトが参考になります。どのような方法を使うかでメリット・デメリットがあります。

2.レスポンシブwebデザインにする

PCサイトもリニューアルする予算や時間が有るならば、Webサイトをレスポンシブwebデザインにする方法をお勧めします。現在のWebサイトのスマートフォン向けの対応は、この方法が一番多いと思います。

レスポンシブwebデザインの特徴は、HTMLファイルは1つで、PCからのアクセス用のCSSファイルと、スマートフォンからのアクセス用のCSSファイルを用意し、メディアクエリという手法を利用しCSSの切り替えによって、ブラウザの横幅のサイズによって見え方を変えることです。PCとスマートフォンのブラウザの横幅のサイズの違いを利用した方法です。

メリットとしては、HTMLファイルは1つですので、PC向けとスマートフォン向けで内容を変えることがなく、更新作業が簡単に済みます。

デメリットとしては、設計が大変難しいということです。CSSの高い技術やJavaScript(jQuery)と言ったプログラム言語も必要とします。そのため、初心者の方がレスポンシブwebデザインのサイトを設計するのはかなり大変なことだと思います。

レスポンシブwebデザインのWebサイトの作り方ですが、基本的には「メディアクエリ」によって、CSSをPC用とスマートフォン用で切り分ける方法が用いられます。

初心者の方が、ゼロからスレスポンシブwebデザインのWebサイトを作るのは難しいと思いますので、レスポンシブwebデザインのWebサイトが無料で作れるテンプレートを配布しているサイトを紹介します。(手前味噌ですが、最後のリンクは、当サイトで配布しているHTML5テンプレートです。)

3.その他の方法

その他の方法としては、WordPressというCMS(コンテンツマネージメントシステム)を利用すると、レスポンシブWebデザイン対応のテンプレートがたくさんあったりします。しかしながら、これもPHPというプログラムを利用しているシステムなので、設置方法が難しかったりします。

WordPress自体も英語なのですが、日本語化していますし、日本語対応WordPressテーマ(テンプレート)もたくさんあります。

jQuery MobileBootstrapといったフレームワークを利用する方法もあります。両方、英語なので初心者の方には非常にわかりづらいと思います。

jQuery Mobileの使い方は以下のサイトを参考にしてください。

Bootstrapの使い方は以下のサイトを参考にしてください。

初心者の方には、スマートフォン向けのWebサイトを作るのは、PC向けサイトを作るより難しいと思います。便利なサービスは色々とありますので是非活用してみてください。

ホームページ制作カテゴリの最新記事

目次

※当サイトではWebサイトのことを、一般的な通称の「サイト」、「ホームページ」、「HP」などと表記しておりますが全て同一のことです。


« トップページへ戻る
↑ ページのトップへ戻る