ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

レスポンシブなWEBサイト制作で失敗しないために。発注者が知っておきたい3つのポイントとは?

  • WEBデザイン

どんどん進むマルチデバイス化。さらには、Googleによる「モバイルフレンドリー」大規模アップデートの影響もあって、「できるだけ多くのデバイス、特にスマートフォンに対応したサイトにしなければいけない」と考えている担当者の方は多いのではないでしょうか?

実際、レスポンシブWEBデザインでのサイト制作の需要は増え続けています。しかし、従来のサイト制作に比べて複雑な作業が必要になるため、イメージしたものと違うものができあがったと感じることや、場合によってはトラブルになってしまうケースもあるようです。そこで今回は、レスポンシブWEBデザインでのサイト制作にあたって、企業のWEB担当者などサイトを発注する側の方が押さえておくべき、基本的なポイントをまとめてみようと思います。

ますます増えそうなレスポンシブWEBデザインのサイト

いま、レスポンシブWEBデザインのサイトがどの程度あるのか、最初にひとつの参考データをご紹介しておきたいと思います。

アトラス21が実施した「国内主要企業サイトマルチデバイス対応調査2015年5月版」によると、日本国内では世界主要企業に比べてレスポンシブデザインが少ないものの、増加率ではスマートフォン専用サイトを上回っていることがわかりました。

01

ちょうど、Googleのモバイルフレンドリーアップデートへの対応が一区切りついたと思われる頃の調査ですが、結果レポートの中では、以下のような分析がされています。

日本ではレスポンシブデザイン、スマートフォン専用サイト共に増加しているが、レスポンシブデザインの増加率が上回っていることから、今後世界と同様にレスポンシブデザインの割合がスマートフォン専用サイトを上回ることが予想される。

アトラス21

※調査は日経225選定国内主要企業を対象に実施されたもの。上記に掲載のグラフは、アトラス21のサイトより引用させていただき、当社で一部加工を加えました。
http://at21.jp/web/topic/topic20.html

レスポンシブWEBサイトを発注する前に確認すべきポイントとは?

当社でもレスポンシブWEBデザインのサイトを制作する割合は増えており、今後ますます増えていくだろうと予想しています。ただし、レスポンシブWEBデザインには色々な難しさもあります。サイトの運営者にとっては、作ってみたものの細かい調整がしにくくメンテが難しいという場合も多く、制作会社にとっても、従来のサイト制作に比べてかなり手間がかかる手法だという課題があります。

そのため、レスポンシブWEBデザインでの制作にあたっては、お互いに基本部分での共通認識をもつことが大切だという気がします。そのための大きく3つのポイントをまとめてみましょう。

ポイント1:本当にレスポンシブWEBデザインにする必要があるか?を考える

最初にレスポンシブありきの考え方はNG

トレンドだから、すべてレスポンシブに…という必要はありません。制作するサイトの役割やターゲットを考えた場合に、PCでの閲覧がほとんどになるという場合はスマートフォン対応をさせる必要はありませんし、逆に圧倒的にスマートフォンで見られるというサイトであれば、レスポンシブではなくスマホ専用サイトを作った方が良いかもしれません。

レスポンシブWEBデザインは、どんなサイズの端末で見てもある程度見やすく表示されるようにデザインするという考え方。あくまで多様な画面サイズに適合させるための手法であって、それぞれのデバイスで見た時に必ずしもベストな状態になるわけではありません。また、表示が遅くなりがちなどのデメリットもあります。レスポンシブWEBデザインにするべきかどうかを、最初にしっかりと考えましょう。

Googleもレスポンシブでなければいけないとは言っていない

また、GoogleがレスポンシブWEBデザインを推奨しているからということを気にする方も多いようですが、Googleによるモバイルフレンドリーアップデートの説明記事「モバイル フレンドリー アップデートを開始します」を見ても、スマートフォンなどで見たときにもPC表示のままで文字が小さくて読めないなど、最適化されていない場合に、モバイルでの検索結果順位が下がる、と書かれています。その手法がレスポンシブWEBデザインでなければならないというわけではありません。

このあたりの詳細については、以下の記事の後半に詳しく書いてありますので参考にしてください。
【開始後2か月】実は動いていた!?モバイルフレンドリーアップデートの影響

ポイント2:デバイスの種類にどこまで対応させるかを明確にする

多様化する画面サイズ。すべてにベストな表示をするのは難しい

レスポンシブWEBデザインが広まった理由の1つに、「HTML(WEBページを表示させるプログラム)は1つで、様々なデバイスに合わせた表示ができる」ということがあります。スマホサイトを別に作った場合のようにPCサイトと別のURLになってしまうこともなく、更新作業を別々にしないといけないといった手間もかからないので、サイトの運営管理もしやすい…というわけです。

しかし、レスポンシブWEBデザインは万能ではありません。様々なデバイスに合わせると言っても、すべての端末でベストな表示状態にすることは大変です。いまや、デバイスのサイズは星の数ほどといってもいいくらいあります。iPhoneだけを取ってみても新しい端末が出るごとに変わり、最初はなかったPlusという大きなiPhoneも出ています。iPadでもiPad miniのような小さいiPadもあれば、11月には大型モデルのiPadプロも登場する予定です。多くのメーカーが販売しているAndroid端末の画面サイズは、更に多種多様です。

対応デバイスが増えるほど作業も複雑になる

最適化させなければならないデバイスの数が増えれば増えるほど制作は複雑になり、作業のボリュームが増えます。その結果として料金も工数も上がっていくということは、頭に入れておかなければいけません。制作会社の多くは、基本料金ではここまでのデバイスに対応、その他の端末へのきめ細かな対応は別途料金、などと目安を決めています。説明をよく聞いて、予算とのバランスなども合わせて、相談しましょう。

【参考】以下の記事に、主なデバイスサイズについてまとめられています。代表的な端末だけでも、いかに様々な画面サイズがあるかを知る参考にしてください。
レスポンシブWebデザインサイトを作る時に必要なデバイスのモニターサイズをまとめました

ポイント3:納品後の追加作業についても、事前に話し合っておく

レスポンシブWEBサイトでは制作後の追加作業が発生する確率が高い

従来のPCサイトの制作に比べると、レスポンシブWEBサイトでは制作後の追加作業が発生する確率がグンと上がります。ポイント2にも関係するのですが、画面サイズやOSの種類・バージョンの多さを考えると、すべてにパーフェクトに対応するのは難しくなってくるためです。しかも、それらは時間経過とともに変化していきます。

最初は「iPhone、iPadなどiOSの対応で良い」ということで合意して作業をして納品したものの、その後、Androidで見たときに表示が崩れてしまうのが気になるので直して欲しい…などという話も、制作の現場ではよく起こります。メジャーな機種であればまだしも、マイナーな特定の機種だけバグがでてしまって対応が大変なことに…、などというケースも見かけます。

最初の取り決めを明確に

このような場合でも、最初に「今回の制作ではどこまで対応するのか」を明確にして費用などを取り決め、「それ以外は追加作業とする」などと具体的に決めておけば、トラブルにはなりづらいはず。最初に、そこについてもしっかりと話し合っておきましょう。

まとめ

以上、この先もさらに増えていくであろう、レスポンシブWEBデザインサイトの発注に関する注意点をまとめてみました。PCサイトだけの時代とは違い、マルチデバイス化が進むとともに、WEBサイト制作はどんどん複雑なものになっています。技術的な細かい知識まで持つ必要はないと思いますが、発注側でもこのようなレスポンシブならではの特性や背景について知っておくことで、納得のいく結果を手にできるはずです。

レスポンシブWEBデザインのサイトを作る時には、ぜひ今回の内容を参考にしてください。

<関連情報>
【速報】Google“モバイルフレンドリー”のアルゴリズム変更、何が変わった?
【開始後2か月】実は動いていた!?モバイルフレンドリーアップデートの影響
進むスマホシフト。レスポンシブWEBデザインはマルチデバイス時代の最適解か?
WEBページのスマホ対応でレスポンシブWEBデザインが注目されるその理由

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  7. 7

    結果につなげるLINE@活用。最新集客事例に学ぶ成功の6つのポイントとは?

  8. 8

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  9. 9

    言葉に悩むあなたに。文章作成を助けてくれる便利ツール9選

  10. 10

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  7. 7

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  8. 8

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」