画像圧縮プラグイン『EWWW Image Optimizer』の一番簡単な設定方法
kanri
空創デザインオフィス
パソコン・スマホ・タブレットに対応したホームページを作成する２つの方法
kanri
本記事はこんな方にオススメです
- ホームページの新規作成、リニューアルをお考えの方
- スマホ、タブレットに対応したホームページを作成したいとお考えの方
ホームページをスマホにも対応したいんですが、どういう方法がありますか？
クライアント様より、よくこういったご質問をいただきます。
最初に結論からお伝えすると、下記２つの方法があります。
- 方法１：デバイス毎に別々のページを作成する（パソコン版とスマホ版のページを分けて作成する）
- 方法２：レスポンシブウェブデザインにする
私のオススメは方法１です！
今回の記事では、この「パソコン・スマホ・タブレットに対応したホームページを作成する２つの方法」について詳しく解説していきたいと思います。
Contents
パソコン・スマホ・タブレットに対応したホームページを作成する２つの方法
現在は、パソコン、スマホ、タブレットなど、様々なデバイスがあります。
ホームページをどのデバイスでも見やすく表示するために、現在は大きく分けて２種類のホームページ作成方法があります。
方法１：デバイス毎に別々のページを作成する（パソコン版とスマホ版のページを分けて作成する）
パソコン、スマホ、（タブレット）のページを、それぞれ別々に作成します。
そして、パソコンでアクセスした時にはパソコン版のページ、スマホでアクセスした時にはスマホ版のページが表示されるように、切り替えのプログラムを入れておきます。
このように、それぞれのデバイスに合ったページを用意しておくことで、どのデバイスでも見やすいページを表示させることができます。
ただ実際には、タブレット版は作成せず、パソコン版とスマホ版のみ作成し、タブレットではスマホ版を表示させるようにすることが多いです。（タブレット版とスマホ版は見た目がほぼ同じになるため）
この方法のメリット
- デバイス毎にページを用意するので、レイアウトやデザインの細かい調整が可能
- 比較的、低コストで開発可能
この方法のデメリット
- デバイス毎にURLが分かれてしまう
…SEO対策的には非推奨とされています。ただ、大きく不利になることは無いと思われます。
「パソコンで見たらパソコン版を表示」といった切り替えプログラムを入れるため、ユーザーが不便をすることもありません。 - 更新時は、各デバイスのページを修正する必要がある
個人的には、この方法１のほうがオススメです。
方法２：レスポンシブウェブデザインにする
レスポンシブウェブデザインとは、ページは一つで、画面サイズによって、レイアウトが変わるように作ることを指します。
繰り返しになりますが、レスポンシブウェブデザインは上記方法１とは違い、ページは一つです。デバイス毎にページを用意するわけではありません。
例えば、「パソコンで見た時は横並びに表示する、スマホで見た時は縦並びに表示する」といったように、デバイス毎のレイアウトをCSSを使って設定します。
ただし、レスポンシブウェブデザインの場合は、レイアウトに融通はあまり利きません。
あくまで一つのページなので、デバイス毎に細かい違いを出すのは難しいということです。
この方法のメリット
- URLが一つのため、SEO対策的に有利と言われている
この方法のデメリット
- ページが一つのため、レイアウトやデザインの細かい調整が難しい
- 開発コストが上がる
方法１の「パソコン版とスマホ版を作成する」がオススメ
下記のように比較すると、個人的には方法１のほうがメリットが勝ると考えます。
| 【方法１】 デバイス毎にページを作成 | 【方法２】 レスポンシブウェブデザイン | |
| メリット | ・デザインの細かい調整が可能 ・比較的、低コスト | URLが一つのため、SEO対策的に有利 |
| デメリット | ・デバイス毎にURLが分かれてしまう →SEO対策的には不利 切り替えプログラムを入れるため ユーザーに不便はない ・更新時は、各デバイスのページを修正する必要がある | ・デザインの細かい調整が難しい ・開発コストが上がる |
方法１の一番のデメリットは「SEO対策的に不利」と言われていることですが、ユーザーにとって役立つホームページを作成していけば、検索順位は自然と上がります。
時々、SEO対策のテクニックのことしか見えていない方もいらっしゃるのですが、検索順位のことだけを考えてホームページを作っても、ユーザーにとって役立つホームページでなければ、利益にはなりません。
SEO対策のテクニックはたしかに存在します。これをホームページに適用していくことは大切です。
でも、まず最初に、ユーザーにとって役立つかどうかを考えるほうがはるかに大切です。
ユーザーにとって役立つホームページを作り、その上で＋αの要素として、SEO対策のテクニックも加えていくことで、検索順位は自然と上がるようになります。
なので、ユーザーにとって役立つホームページを作るということを最優先するならば、方法１を選択し、デバイス毎に最も見やすいデザインにしてあげることが最適解といえると思います。
ただ、上記はあくまで私の考え方であり、レスポンシブウェブデザインが絶対にダメというわけではありません。
ホームページの内容やデザインによっては、レスポンシブウェブデザインにしたほうが良い場合もあります。ケースバイケースです。
ですので、パソコン・スマホ・タブレットに対応したホームページの作成を考えている場合は、ぜひ一度ご相談ください。下記よりお気軽にお問い合わせください！
まとめ：デバイス毎にレイアウトやデザインを細かく調整ができる【方法１】のほうが、個人的にはオススメ
パソコン・スマホ・タブレットに対応したホームページを作成する方法は、次のとおりです。
- 方法１：デバイス毎に別々のページを作成する（パソコン版とスマホ版のページを分けて作成する）
- 方法２：レスポンシブウェブデザインにする
| 【方法１】 デバイス毎にページを作成 | 【方法２】 レスポンシブウェブデザイン | |
| メリット | ・デザインの細かい調整が可能 ・比較的、低コスト | URLが一つのため、SEO対策的に有利 |
| デメリット | ・デバイス毎にURLが分かれてしまう →SEO対策的には不利 切り替えプログラムを入れるため ユーザーに不便はない ・更新時は、各デバイスのページを修正する必要がある | ・デザインの細かい調整が難しい ・開発コストが上がる |
オススメは、【方法１】です。
ホームページから利益を得たいと思うなら、
まず、ユーザーに役立つホームページを作ることが大前提です。
その上で＋αとしてSEO対策のテクニックを加えていくことで、検索順位は自然と上がっていきます。
そのため、デバイス毎にレイアウトやデザインを細かく調整ができる【方法１】のほうが、個人的にはオススメです。
ただし、ケースバイケースの面もあるため、パソコン・スマホ・タブレットに対応したホームページの作成を考えている場合は、ぜひ一度ご相談ください。
開発コストを抑えるなら、スマホ版だけを作成するというのも有りです。
空創デザインオフィスでは、既存ホームページのスマホ（タブレット）対応、各デバイスに対応したホームページの新規作成などを承っております。
下記お問い合わせフォームより、まずはお気軽にお問い合わせください！お見積りは無料です！
ABOUT ME
2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！
