HPビギナーレッスン

初心者でも安心のhP制作サービス

このサイトでHPの作り方を学びましょう!あなたはどこから始める?
サイトの目次を開く

ホームページをスマホ対応する方法とは?

生徒

今はもうスマホ時代。ホームページのスマホ対応は絶対必須だね。
スマホ時代?
そうだよ、もうPCよりもスマホでホームページを見てる人のほうが多いんだよ。
え、そんなにですか!? でもスマホへ対応する方法っていくつかあるんですよね。
確かにいろいろあるけど、大きく分けるとスマホ専用か、PCとスマホで兼用するホームページを作るかの2種類だよ。
スマホ専用っていうのはわかりますけど、兼用って?
最近の主流でレスポンシブデザインというのがあってね。ひとつのホームページでスマホだけじゃなくタブレットにも対応できるんだよ。
便利そうですね!詳しく教えてください。

レスポンシブデザインのこと
詳しく解説しましょう!

安くスマホ対応ホームページを作る方法はこちら

【ビジネスパック】

詳しく見てみる

スマホ対応は必要?

必要です! 言い切りましたよ。なぜなら、もうすでにパソコンを持たずスマホだけがインターネットの接点だという人々もたくさんいるからです。

スマートフォンからのインターネット利用者、2015年冬にはPCを超える可能性
今冬にスマホネットユーザーがPC超え、エンタメ利用が伸びる
スマホでほぼ毎日ネットを利用する人はPCの約2倍、10代ネット利用者の45%はスマホだけでアクセス

これらの記事がいっていることは全部同じです。「スマホの勢いがすごいよ」と。ネットの向こう側にいるほとんどは、スマホ越しの人々へとなっていくでしょう。スマホを無視することは、ネットユーザーの多くを無視することになるわけです。

もうすでにホームページを持っていて、今はまだ予算の都合がつかないという場合なら仕方ないです。でも、これから作るホームページをスマホへ対応させない理由はなんでしょう? 「いや〜特に、別に」と理由が見つからないなら、わざわざスマホへの対応を避けることはないですね。素直にスマホに対応したホームページを作りましょう。

スマホ対応の方法

ホームページをスマホへ対応させる方法はいくつかありますが、大きく分けると次の二つです。

  • 1. スマホ専用のホームページを作る
  • 2. パソコンとスマホで兼用できるホームページを作る

スマホだけのホームページか、PCとスマホで1つのホームページを兼用するか、選択肢は2つです。それぞれどんな方向性で対応するかを説明します。

1. スマホ専用のホームページを作る

スマホ専用のホームページを、今所有しているホームページと別に作る場合のことです。この場合のメリットは、ホームページを見せたいターゲットをさらに具体的に絞れるところです。

パソコンとスマホでは、ホームページを見にくるユーザーの動機や目的が異なります。場所を問わず、テレビを見ながら、ベットに寝転びながらと「〇〇しながら」でもいじくれるスマホは、ちょっとした調べ物や暇つぶしに最適です。外に持ち出すのが難しいパソコンと違って、歩きながらでも検索や地図を利用できます。

また、冒頭でもいったように、すべてのネット利用がスマホだということも珍しくなくなってきました。PCを所有せずに、スマホを持つ小・中学生は多いですし、PCは難しいけど、スマホならというお年寄りの方々もいますね。

このように、スマホの利用者のなかから具体的に対象を絞ってホームページを作りたいなら、スマホ専用にしたほうがうまくいきます。ターゲットを絞ることで、好みのデザインやホームページへ掲載すべき情報の質と量を予想しやすくなるからです。

しかし、これには大きな予算が必要ですね。ターゲットごとにホームページを用意しようとすると、ものすごい制作費が必要です。ターゲットを分析し、ターゲットごとに適切なホームページのデザインや機能を企画するにはお金だけでなく、かなりの手間もかかります。

また、ホームページが完成し運営していく過程でも負担が増えます。PC用とは別にもう一つスマホ用のホームページを管理していかなくてはいけません。ランニングコストは増え、更新するときの手間も2倍になります。

確かにターゲットごとにホームページを用意できるのは強みですが、実現するには十分な予算と管理体制が求められます。

2. パソコンとスマホで兼用できるホームページを作る

スマホへ対応するための2つ目の方法が、PCとスマホで兼用できるホームページを作るというものです。ひとつのホームページを作成すればいいので、予算的に余裕が生まれやすく、運営時の手間も少なくできます。

PC、スマホと閲覧側の端末を変えても兼用するために今流行しているのが「レスポンシブデザイン」という方法です。ホームページのデザインが、閲覧側の画面の幅に合わせて柔軟に切り替わります。

Googleもおすすめするスマホ対応の方法で、じつはこのサイトもレスポンシブデザインです。ドラッグして、ブラウザの幅を狭くしていくと、あるポイントでレイアウトが切り替わることがわかります。やってみてください。

レスポンシブデザインとは?

英語で書くと「Responsive Design」です。「Responsive」は敏感に反応するという意味で、全体的に直訳すれば「敏感に反応するデザイン」といえます。

いまのこの時代、ホームページを閲覧できる端末は増えすぎといってもいいくらいに存在します。PCだけを取り上げても、モニタの大きなデスクトップ、持ち運びに便利な小さなラップトップなど、サイズは様々です。

スマホも種類はひとつだけでなく、iPhone、アンドロイドを合わせると数えきれないくらいに色々なタイプがあります。そこにタブレットも混じれば、閲覧側の環境はもう無限大に広がります。

このような無数に存在する端末の画面幅に注目したのがレスポンシブデザインです。種類ごとにバラバラな閲覧側の画面幅に合わせたデザインでホームページを見せることができるのです。

この方法によって、作成するホームページはひとつでよくなります。運営時の管理はらくになり、URLを一本化できることでSEOの効果やアクセスを集中化できるわけです。

しかし、良いことばかりではありません。「兼用」という言葉の響きがイメージさせるように、妥協が必要になる部分があります。異なる画面幅ひとつひとつに完璧な最適化を求めると、かえって制作にかかる手間を増やします。

PCとスマホではネットへの接続環境が異なるところにも注意が必要です。太いネット回線を前提にしたホームページでは、スマホの表示に時間がかかりすぎる恐れがあります。

また、ひとつのホームページで全部のターゲットを満足させるのは難しく、兼用することが「広く浅くのアプローチ」へ繋がることも認めなければなりません。

ただ、そうはいっても、そもそもレスポンシブデザインの目的は、幅広いユーザーへ効率よく最適化できるところにあります。特定の端末に限定して表示具合や動作にこだわりたいなら、その端末だけを想定したホームページを作るべきといえます。

レスポンシブデザインのメリットとデメリット

すでにメリット、デメリット的なことは説明してきましたが、スマホ専用のホームページと比較して、不足しているところも加えて再びリストアップしてみます。スマホ対応の方法としてレスポンシブデザインを検討するときの参考にしてみてください。

メリット

ホームページがひとつで済む
手間も含めランニングコストをおさえられる
更新がらく
URLがひとつ
アクセスを集中しやすい
SEOの効果も集中して構築できる

デメリット

制作に必要な工数が増える
異なる画面幅に合わせたデザインが必要
複数の端末で動作確認が必要
ターゲットを絞りきれない
特にスマホでは表示が遅くなりがち

ざっとあげるとこんな感じでしょうか。スマホ対応を成功させるには、スマホ対応の目的とターゲットを明確にして、最適な方法を選ぶことが必要です。スマホ対応の方法に迷っている方はぜひご相談ください!

格安・月額無料のホームページの作り方はこちら

【ビジネスパック】

実は私たちも「ビジネスパック」というホームページ作成サービスを提供しています。予算にあまり余裕がない個人事業主さま・中小企業主さまへ大変好評をいただいてます。初期費用90,000円、月額費用は不要です。価格だけでなく品質にもこだわってますので、ぜひ一度ご検討よろしくお願いいたします。

詳しく見てみる

ビジネスパックの特長

安くて高品質なホームページの作り方はこちら