ホームページ制作トレンド記事

レスポンシブWebデザインのご案内

レスポンシブWebデザインでホームページを構築するとPC・スマートフォンなどに適した表示を実現

スマートフォンの普及で導入サイトも増加。SEO対策にも効果。ホームページの更新も楽になります。ホームページで紹介している商材、サービスにおいてデザインが適しているサイト、向かないサイトもあるでしょう。
まずは、私どもにご相談ください。

レスポンシブWebデザインとは デバイスイメージ

デバイス毎(PC、スマフォ、タブレットなど)にWebサイトをデザインしていてはキリがないです。SEO対策もデバイス毎におこなう必要もあります。

そこで、最近注目されているのが「レスポンシブWebデザイン」という画面サイズやデバイス(OS)にデザインを柔軟に対応して表示させる手法が見直されております。

Googleも推奨しているとか。ホームページを閲覧する場合、AさんはWindowsPC23インチモニター、BさんはiPad、Cさんはアイフォン・アンドロイドなどのスマフォ、CさんはiMacなど多種多様です。

レスポンシブWebデザインとして必要なこと

  1. スマフォ、タブレット、PCなどさまざまな端末で問題なく閲覧できる
  2. サイト運営管理・ページの更新が一度の作業で対応できる
  3. どの端末で閲覧してもデザインに統一感がある
  4. どの端末で閲覧しても同じURLでアクセスできる
  5. SEO対策上でレスポンシブWebデザインは効果がある
レスポンシブ レイアウト

サンプルページをご用意しました。ウィンドウの幅を調整すると、 レスポンシブな動きが実感いただけます。 サンプルページを見る

1. スマフォ、タブレット、PCなどさまざまな端末で問題なく閲覧できる

レスポンシブWebデザインなら、あらゆる画面サイズに対応するウェブサイトを作ることになります。スマフォ・サイズからPC接続の大画面モニターまで、どんな端末でも「問題なく」、快適に閲覧できることはレスポンシブWebデザインが目指すところです。

同様にさまざまな端末で閲覧しても同じコンテンツと機能にアクセスできるユーザーにとって、PCで閲覧していたWebサイトがスマフォで閲覧したときにPCで見れていたコンテンツがなくなっていたり、機能が使えなくなっていることは、不満になります。レスポンシブWebデザインで作成した場合は、どの端末で閲覧しても同様なコンテンツが提供されていることです。

2. サイト管理ページ更新が一度の作業で対応できる

ページ更新は、ホームページ管理上かならずおこなうことになりますが、レスポンシブWebデザインでおこないますと、一度の作業で更新が完了いたします。

レスポンシブWEBデザインでは、1つのHTMLファイルを1回更新するだけで、パソコン、タブレット、スマートフォンに対して新しい情報に更新することができます。

端末別に専用サイト制作した場合は、サイトの掲載内容を書き換える作業を1箇所の更新作業で最低3回作業を繰り返すことになります。更新が一箇所程度ならよいですが、複数個所、複数ページになると作業の負担になり、ミスをする可能性もでてきます。

レスポンシブWEBデザインは、ページ更新の一元管理ができる点で、更新作業の負担やミスを軽減できるメリットがあります。

3. どの端末で閲覧してもデザインに統一感がある

PCでもスマフォでもアクセスする端末によるデザインが統一されているので、サイト内コン通を見やすい一貫性のあるイメージを作り上げることができます。

ナビゲーションメニューなどが端末によって異なっていたりしてユーザーが戸惑う設計は好まれません。もちろん、全く同じレイアウトで構成することは不可能なので、同じコンテンツへの導線等は同じで、ユーザーが同じ情報にたどり着く上で迷わないように工夫をすることが重要です。できるだけデザインに統一感があると安心して閲覧することが出来ます。

4. どの端末で閲覧しても同じURLでアクセスできる

PC版で閲覧していたWebサイトのURLをメール等でスマフォに送って閲覧すると、実際はPC版のWebサイトに飛びリダイレクトされてスマフォ用デザインに制作または変換したURLのサイトが表示されます。

しかし、レスポンシブWebデザインですと同じURLで、どの端末で閲覧しても端末のブラウザーに適したサイズにて閲覧できますので不便な思いをユーザーにさせなくてすみます。
さらにSEO対策上も1つのURLでおなじコンテンツが提供されるので、SEOチューニングも1つのサイトコンテンツにおこなうことで適用されます。

「同一URL、同一コンテンツ」※googleも推奨している → 携帯端末に最適化されたウェブサイトの構築方法

1つのコンテンツに対するURLが1つであることで、ユーザが閲覧したり、リンクを張ることがかんたんになります。たとえば、PCでWebサイトを閲覧中にリンクをクリックしたら、モバイル版専用サイトで、PC版へのリンクが簡単に見つからなかったら不便を感じます。

5. SEO対策上でレスポンシブWebデザインは効果がある

レスポンシブWebデザインではなく、モバイル環境(スマフォなど)とPC環境でコンテンツ毎に別々に構築した場合は、検索エンジンGoogle、Yahooのクローラがインデックスする階層を複雑にします。
レスポンシブWebデザインですと1つのURLでコンテンツが表示されますのでこのような問題が解決されます。

そしてコンテンツの重複を回避できる

Googleは同一URLで同一のコンテンツを提供することを推奨しています。
同一コンテンツを同一URLでさまざまな画面サイズに対応させることができるレスポンシブWebデザインが良いと言っているのです。
https://developers.google.com/webmasters/smartphone-sites/?hl=ja

制作費用に関して

エムシーエスでは、レスポンシブWebデザインでの制作に関してですが、できるだけ安価にトラブルがないように制作することを最優先に考えてみました。

急増するスマフォのディスプレイ大画面化、PCモニターの高解像化という傾向に対応していくために、ある程度テンプレート化したサイト構成デザインが必要と考えました。

メリットとしては

  • 制作後においてトラブルが少ない。表示の崩れ他
  • 制作期間が短期間
  • 制作費用が安価。10ページ 280,000円から
トップページデザイン 5万円(CSS設計、ワイヤーからラフデザインの対応)
階層ページ基本デザイン 3万円
コンテンツデザイン 9ページで 5万円
コーディング費用 10ページ 8万円(1ページ8,000円)
メールフォームプログラム 2万円
企画・制作管理費用 5万円

デザイン面でのオリジナリティは対応。構造面がテンプレートを採用 ※カラー、メニューボタン、ナビなどの仕様はオリジナルで制作。もちろんコンテンツ部分に関してもオリジナルデザインを提供いたします。

+ プラスTry!CMS 導入 TryCMSを導入していただけますと 面倒な更新作業も楽になります。

例えば、

  • キャンペーン告知コンテンツ
  • 新着ニュース記事他、各腫ニュース記事コンテンツ
  • ヘッダー、フッターの共有化。

TryCMS ライトエディション 8万円

(キャンペーン価格 6万円でご案内)

レスポンシブWebデザイン + tryCMSライトエディション

合計 340,000円(税別)

280,000円+60,000円

 


 

レスポンシブWebデザイン ご理解できましたでしょうか。

多少、デザイン面においては制約もあります。またWebでは説明できない所もございます。

まずは個々にご相談させていただけますでしょうか。

簡単なご質問であれば、その場ですぐに回答できます。

お電話いただければ、差し支えない範囲で、
御社の状況に合ったご説明ができますので、お電話ください。

電話でお問い合わせ

このページの先頭へ