BLOG

パソコン・スマホ・タブレットに対応したホームページを作成する2つの方法

kanri
本記事はこんな方にオススメです
  • ホームページの新規作成、リニューアルをお考えの方
  • スマホ、タブレットに対応したホームページを作成したいとお考えの方

ホームページをスマホにも対応したいんですが、どういう方法がありますか?

クライアント様より、よくこういったご質問をいただきます。

最初に結論からお伝えすると、下記2つの方法があります。

  • 方法1:デバイス毎に別々のページを作成する(パソコン版とスマホ版のページを分けて作成する)
  • 方法2:レスポンシブウェブデザインにする
えりー
えりー

私のオススメは方法1です!

今回の記事では、この「パソコン・スマホ・タブレットに対応したホームページを作成する2つの方法」について詳しく解説していきたいと思います。

パソコン・スマホ・タブレットに対応したホームページを作成する2つの方法

現在は、パソコン、スマホ、タブレットなど、様々なデバイスがあります。

ホームページをどのデバイスでも見やすく表示するために、現在は大きく分けて2種類のホームページ作成方法があります。

方法1:デバイス毎に別々のページを作成する(パソコン版とスマホ版のページを分けて作成する)

パソコン、スマホ、(タブレット)のページを、それぞれ別々に作成します。

そして、パソコンでアクセスした時にはパソコン版のページ、スマホでアクセスした時にはスマホ版のページが表示されるように、切り替えのプログラムを入れておきます。

このように、それぞれのデバイスに合ったページを用意しておくことで、どのデバイスでも見やすいページを表示させることができます。

ただ実際には、タブレット版は作成せず、パソコン版とスマホ版のみ作成し、タブレットではスマホ版を表示させるようにすることが多いです。(タブレット版とスマホ版は見た目がほぼ同じになるため)

この方法のメリット
  • デバイス毎にページを用意するので、レイアウトやデザインの細かい調整が可能
  • 比較的、低コストで開発可能
この方法のデメリット
  • デバイス毎にURLが分かれてしまう
    SEO対策的には非推奨とされています。ただ、大きく不利になることは無いと思われます。
    「パソコンで見たらパソコン版を表示」といった切り替えプログラムを入れるため、ユーザーが不便をすることもありません。
  • 更新時は、各デバイスのページを修正する必要がある

《SEO対策とは》
Googleなどの検索エンジンで、検索順位を上げるための対策。

えりー
えりー

個人的には、この方法1のほうがオススメです。

《参考:ホームページの横幅の基準》
※px=ピクセル

  • デスクトップ(PC):1200px~1600px
  • スマホ:320px~414px
  • タブレット:768px~1024px

方法2:レスポンシブウェブデザインにする

レスポンシブウェブデザインとは、ページは一つで、画面サイズによって、レイアウトが変わるように作ることを指します。

繰り返しになりますが、レスポンシブウェブデザインは上記方法1とは違い、ページは一つです。デバイス毎にページを用意するわけではありません。

例えば、「パソコンで見た時は横並びに表示する、スマホで見た時は縦並びに表示する」といったように、デバイス毎のレイアウトをCSSを使って設定します。

CSS(Cascading Style Sheets)は、ホームページの見た目を指定するためのプログラミング言語です。「シーエスエス」または「スタイルシート」と呼ばれています。

ただし、レスポンシブウェブデザインの場合は、レイアウトに融通はあまり利きません。

あくまで一つのページなので、デバイス毎に細かい違いを出すのは難しいということです。

この方法のメリット
  • URLが一つのため、SEO対策的に有利と言われている
この方法のデメリット
  • ページが一つのため、レイアウトやデザインの細かい調整が難しい
  • 開発コストが上がる

方法1の「パソコン版とスマホ版を作成する」がオススメ

下記のように比較すると、個人的には方法1のほうがメリットが勝ると考えます。

【方法1】
デバイス毎にページを作成
【方法2】
レスポンシブウェブデザイン
メリット・デザインの細かい調整が可能
・比較的、低コスト
URLが一つのため、SEO対策的に有利
デメリット・デバイス毎にURLが分かれてしまう
→SEO対策的には不利
切り替えプログラムを入れるため
ユーザーに不便はない
・更新時は、各デバイスのページを修正する必要がある
・デザインの細かい調整が難しい
・開発コストが上がる
パソコン・スマホ・(タブレット)対応方法の比較

方法1の一番のデメリットは「SEO対策的に不利」と言われていることですが、ユーザーにとって役立つホームページを作成していけば、検索順位は自然と上がります。

「自然と」上がるというところがポイントです!

時々、SEO対策のテクニックのことしか見えていない方もいらっしゃるのですが、検索順位のことだけを考えてホームページを作っても、ユーザーにとって役立つホームページでなければ、利益にはなりません。

SEO対策のテクニックはたしかに存在します。これをホームページに適用していくことは大切です。

でも、まず最初に、ユーザーにとって役立つかどうかを考えるほうがはるかに大切です。

ユーザーにとって役立つホームページを作り、その上で+αの要素として、SEO対策のテクニックも加えていくことで、検索順位は自然と上がるようになります。

なので、ユーザーにとって役立つホームページを作るということを最優先するならば、方法1を選択し、デバイス毎に最も見やすいデザインにしてあげることが最適解といえると思います。

ただ、上記はあくまで私の考え方であり、レスポンシブウェブデザインが絶対にダメというわけではありません。

ホームページの内容やデザインによっては、レスポンシブウェブデザインにしたほうが良い場合もあります。ケースバイケースです。

ですので、パソコン・スマホ・タブレットに対応したホームページの作成を考えている場合は、ぜひ一度ご相談ください。下記よりお気軽にお問い合わせください!

まとめ:デバイス毎にレイアウトやデザインを細かく調整ができる【方法1】のほうが、個人的にはオススメ

パソコン・スマホ・タブレットに対応したホームページを作成する方法は、次のとおりです。

  • 方法1:デバイス毎に別々のページを作成する(パソコン版とスマホ版のページを分けて作成する)
  • 方法2:レスポンシブウェブデザインにする
【方法1】
デバイス毎にページを作成
【方法2】
レスポンシブウェブデザイン
メリット・デザインの細かい調整が可能
・比較的、低コスト
URLが一つのため、SEO対策的に有利
デメリット・デバイス毎にURLが分かれてしまう
→SEO対策的には不利
切り替えプログラムを入れるため
ユーザーに不便はない
・更新時は、各デバイスのページを修正する必要がある
・デザインの細かい調整が難しい
・開発コストが上がる
パソコン・スマホ・(タブレット)対応方法の比較

オススメは、【方法1】です。

ホームページから利益を得たいと思うなら、

まず、ユーザーに役立つホームページを作ることが大前提です。

その上で+αとしてSEO対策のテクニックを加えていくことで、検索順位は自然と上がっていきます。

そのため、デバイス毎にレイアウトやデザインを細かく調整ができる【方法1】のほうが、個人的にはオススメです。

ただし、ケースバイケースの面もあるため、パソコン・スマホ・タブレットに対応したホームページの作成を考えている場合は、ぜひ一度ご相談ください。

えりー
えりー

開発コストを抑えるなら、スマホ版だけを作成するというのも有りです。

空創デザインオフィスでは、既存ホームページのスマホ(タブレット)対応、各デバイスに対応したホームページの新規作成などを承っております。

下記お問い合わせフォームより、まずはお気軽にお問い合わせください!お見積りは無料です!

ABOUT ME
えりー
えりー
Web・グラフィックデザイナー / ブロガー
2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web制作のことや、就職・転職に役立つ情報を発信しています。
error: Content is protected !!
記事URLをコピーしました