BUSINESS TIPS発注担当者の方へ、発注成功の為のお役立ち情報

スマホサイトをレスポンシブデザインで外注する理由

この数年のスマートフォンの普及によって、国民のほとんどがスマートフォンを利用する時代へと変化しました。それとともにスマートフォン専用のサイトも日々公開されている状況です。それは小さな画面サイズでも快適に見えるように作られたWEBサイトです。スマホ専用サイトのデザインにするべきか、それともレスポンシブデザインにするべきか、制作する際に迷うこともあるようです。ただ、最近ではスマホでもそれ以外のデバイスでもそのデバイスに応じたデザインで崩れることがないレスポンシブデザインが一般的になりつつあります。
> ここでは、スマホサイトをレスポンシブデザインで外注する理由について説明します。

1. レスポンシブとは

最近の企業の多くは、自社のホームページや採用サイトなど、パソコンだけではなくスマートフォンにも対応したサイトを作成することが必要になっています。そのほか、タブレットの普及も進んでいるため、どのようなデバイスから閲覧されても、デザインが崩れることなく表示されることが必須になっているのです。

そこで最近のサイト制作の手法として主流になりつつあるのが、レスポンシブデザインになります。レスポンシブは、一つのHTML、CSSによって制御できるようになっていて、ユーザがどのようなデバイスから閲覧されても、そのデバイスの画面サイズに応じてレイアウトやデザインが最適化されるようになっています。つまり、デバイスのウインドウ幅に「responsive(良く反応)」して、見やすい表示に自動で切り替える仕組みを持つデザインのことを言います。

検索エンジンのGoogleは、2015年4月、モバイルフレンドリーアップデートというのを行いました。これは、モバイル対応済みの検索順位を引き上げるということになります。すなわち、Google自体がWEBサイトをモバイルフレンドリーにする方法として、レスポンシブなテンプレートやテーマを利用することを推奨しているのです。

こういった流れを受けて、レスポンシブは、スマホやタブレットが普及している現代において必要な技術なのです。

2. スマホ専用サイトとレスポンシブデザインの仕組み、メリットとデメリット

スマホ専用サイトは、その名の通りスマホで閲覧することに特化したWEBサイトになります。これは、PCなどのレイアウトとは違うスマホ用に特化した設計になっているため、スマホで見る場合は快適に閲覧しやすくなっています。
ただ、スマホ以外のデバイスで対応しようとするとスマホ専用サイトとは別のHTMLファイルを作成し管理する必要があるため、更新や追加を行う場合は単純に2倍の手間がかかります。

一方のレスポンシブサイトは、上でも説明したようにパソコンでもスマホでもタブレットでもデバイスに偏らず、それぞれのデバイスでデザインが崩れることなく閲覧することができます。ただ、様々なデバイスに対応させる必要があるのでHTMLファイルのソースは長くなります。結果的に、WEBサイトの表示に時間がかかりやすくなってしまうというデメリットがあります。

サイトの仕組みですが、スマホ専用サイトに関してはスマホに特化した制作をしていて、また古いブラウザ対応をする必要がないのでHTMLやCSSの最新バージョンをふんだんに使っており軽くて見やすいです。
しかしスマホ専用サイトは、スマホ以外のデバイスで閲覧しようとするとレイアウトが崩れるというような現象が発生してしまいます。更に、スマホ専用サイトとほぼ同じ内容のものがパソコンサイトなどでも表示されるように作られますので、Googleなどの検索エンジンから見た際にコピーサイトとして誤認識を受ける可能性が高くなります。そうなると、ペナルティを受けて検索結果の上位に表示されなくなるという現象が発生します。重複サイトであるという認識を回避するために、タグの埋込やパソコンユーザへリダイレクト設定をしたりする必要が出てきて、思わぬ工数がかかってしまうのです。

レスポンシブサイトは、基本的にはHTMLファイル1つで全てのデバイスに対応できるように作っていますので、複数のHTMLファイルを書き換える必要がありません。これは、メディアクエリという記述方法によるもので、横幅ごとの見せ方を変更することで、パソコン、タブレット、スマホの3種類のCSSを記述します。

こうした実情から、スマホ専用サイトを、スマホ以外のデバイスでも見られるようにレスポンシブサイトへ移行するケースも出てきているのです。レスポンシブサイトは、1つのHTMLで管理をするため、編集効率もアップし、削除などの作業も簡単に済みます。

3. レスポンシブ対応の料金相場、制作会社の選定

スマホ専用サイトからレスポンシブデザインへの変更は、どれくらいの費用がかかるのでしょうか。外注した場合の費用相場を紹介します。

制作会社の規模や、サイト構成によって費用は異なりますが、1ページあたり1〜2万円程度で見積もっておくのが良いでしょう。必要ページ数分が加算される費用感になります。

では、レスポンシブ移行を依頼する制作会社はどのように選定すれば良いでしょうか。
今回の場合、レスポンシブデザインへの移行になりますので、過去の実績としてどのようなレスポンシブサイトを制作したかを確認した方が良いです。デザインクオリティも確認した方が良いですが、これはデザイナー個人のクオリティに寄ることが多いですので、そこまで聞けるのであれば確認した方が良いです。

あと、デザインはターゲットや傾向がありますので、移行しようと考えている傾向のデザイン実績があるかどうかというところが重要になります。
例えば、30代向けビジネスマンを得意とする制作会社へ、女子高生向けのデザインを無理にお願いしてもなかなか良いものが挙がってくるのは難しいということです。

制作会社の選定をする際は、数社へ見積もり依頼を行って比較をされると思いますが、ただ安いからという会社へ依頼するのは避けた方が良いです。とは言っても金額が高いからクオリティも高いというわけでもありません。
見積額、制作会社の実績クオリティ、レスポンシブ対応の技術力、コミュニケーション力、提案力など総合的にバランスの良い会社を選定されるのが良いでしょう。

4. まとめ

スマホ専用サイトとレスポンシブサイトの違い、そしてスマホ専用サイトからレスポンシブサイトへの移行方法、会社選定についてまとめたものを紹介してきました。
デバイスごとのHTMLソース管理は、手間がかかるということ、Googleが推奨しているモバイルフレンドリーに反してしまうということなど、企業にとってあまり効果的ではないサイトになってしまっている可能性があります。
レスポンシブサイトへ移行するには、少なくとも数十万円からコストがかかってしまいますが、ただGoogleから重複サイトとして認識されてしまう可能性があり、検索結果順位が落ちることがあれば、損害は数十万円では終わらないでしょう。
まだレスポンシブサイトへ移行していないサイトがある場合は、これを機に早めにレスポンシブサイトへ移行することをオススメします。

HTML・CSSコーディングでお困りではありませんか?

仕事の発注先探しや、新規顧客開拓など、ビジネスパートナー探しに役立つ総合ビジネスマッチングプラットフォーム。
それがリカイゼンです。

無料で相談する

HTML・CSSコーディングの関連記事

HTML、CSSの基本と役割の違い、外注へ求めるレベルまとめ

WEB制作をする際、デザインを作成したのち、そのデザインをインターネット上で閲覧できるようにコンピュータが読み込める者へ変換する必要があります。それをコーディングと言います。 コンピュータが読めるようになるには、HTM...

HTMLコーディングの最新情報まとめ【2019年版】

WEBページは、デザイン制作をしただけでは完了しません。 デザインをもとに、HTML、CSSなどのマークアップ言語を使ってWEBブラウザで見える形にして初めてインターネット上で閲覧できるようになります。この一連の作業を...

スマホサイトをレスポンシブデザインで外注する理由

この数年のスマートフォンの普及によって、国民のほとんどがスマートフォンを利用する時代へと変化しました。それとともにスマートフォン専用のサイトも日々公開されている状況です。それは小さな画面サイズでも快適に見えるように作られたW...

SEOに強いコーディングを外注する際に知っておくべきポイント

自社のWEBサイトが検索結果上位へ位置することで、安定的なアクセス流入とサイト価値向上を図れます。このために企業はSEOに力を入れています。しかし、具体的なSEOの知識が自社に無いことから、外部のコンサルタントへ任せっきりに...

コーディングの種類、費用相場、見積もり依頼まとめ

WEB制作の中でもコーディングだけ外注で依頼したいというニーズは多くあります。例えば、自社ページでもデザイナーはいるけれど、コーディングする人材がいないため外注したい、またはSEO対策に特化してコーディングのみをプロの制作会...

HTML・CSSコーディングに関連する記事を見る

記事を探す

キーワードで探す

カテゴリーで探す



案件の相談・見積もり

必須ご相談概要
必須お名前
必須メールアドレス
任意電話番号
利用規約及び、個人情報保護方針にご同意のうえ、送信ください。
本サイトは、reCAPTCHAとGoogleにより保護されています。(プライバシーポリシー利用規約)