webmaster

このシリーズは、代表の著書「Webサイト制作・運営に役立つ!ホームページ担当者が最初に覚える100の基本」から、Webサイト制作・運営に役⽴つノウハウをシリーズで紹介しています。

Webサイト制作・運営に役立つ!ホームページ担当者が最初に覚える100の基本

目指せWebマスター! >>目次ページ

PCサイトとスマフォ対応サイトについて(レスポンシブデザイン)

本シリーズ3回目にして早くも(本には書いていない)番外編。。(^^;
CEOブログで、スマートフォンサイトを公開させていただいた話を書きました。
このときはスマフォ専用サイトとしてPCサイトとは別に作成しましたが、PCサイトと共通で作ることも可能です。

レスポンシブデザイン

最近お問い合わせの中でも増えてきている「Webサイトのスマフォ対応」について、その中でも特に「レスポンシブWebデザイン」についてご紹介します。

スマフォへの対応

ご存じのようにスマフォのブラウザではPCサイトを表示することは可能です。
ただし、画面サイズが小さいのでコンテンツを読むには
拡大縮小したり、横スクロールしたりしながら読むことになるので、一応見ることはできるが使い勝手はイマイチ、、ですね。
慣れている人は、PC用サイトでもガシガシ普通に読んで、そこから商品を注文しちゃったりもしていますが、やはりコンテンツを提供する側としては、スマフォユーザーに対応させたサイトを提供したいものです。

レスポンシブWebデザイン

スマフォ対応させるにはいくつか技術的手法があります。
最近よく耳にするのが「レスポンシブWebデザイン」という、画面サイズによって自動的にレイアウトを変えて横スクロールなしで見ることができる技術。

これだとスマフォ用に別途サイトを作る必要がなく、ソースも1本化できるので効率的なように思えます。
が、やはり万能な技術ではないので、デメリットや注意して導入しなければならないこともありますので、そこを押さえておきましょう。

(1) レスポンシブ対応の設計が必要

まず第一に、レスポンシブ対応にするには最初の設計段階からレスポンシブデザインを考慮した設計・レイアウト構成を行う必要があります。
レスポンシブを考慮していないデザイン・レイアウトのサイトに、後から適用するのはとても困難です。

(2) ブロック単位にまとまっているようなレイアウト構成に向いている

レスポンシブデザインは、コンテンツがブロック単位にまとまっているようなサイト構成に向いています。このようなサイトは画面サイズを縮めていったときに、まとまった単位でレイアウトを変えやすいからです。
会社案内のようなクールでカッチリしたコーポレートサイトなどには比較的向いていますが、メルヘンチックやキャラクター系の自由なレイアウトを好むようなサイトには導入しづらいという傾向があります。

(3) スマフォユーザーにPC用と同じコンテンツを見せるだけで良いか?

レスポンシブデザインは、基本的にはPC用と同じコンテンツを小さい画面で見やすくする用途で使われることが多いです。
そもそもスマフォユーザーには、そのターゲット層に見せるべきコンテンツ(ページや見せ方)があるのではないでしょうか。
であれば同じコンテンツを見やすくするだけではなく、スマフォユーザーを対象とした企画設計の「スマフォ専用サイト」を別途作ることも選択肢としてありかと思います。

もちろんレスポンシブデザインで、画面サイズが小さくなったときに見せるコンテンツを制限したりすることもできますが、そこまで凝ってしまうと、もはや何のために1ソースで作るのか、、という根本的な疑問に行き着いてしまいます。

(4) その他

レスポンシブデザインにすることで技術的難易度が上がります。 そうすると、場合によっては後で自社の担当者が更新しようとしても簡単にはできないケースなどもあり得ますので、事前にそのあたりの考慮も必要です。 また、データベースやシステムと連動しているサイトの場合、システムとの連携がスムーズに行くか考える必要があります。

結論

レスポンシブデザインは、その導入するサイトによって、便利になるケースもありますし、逆に返って不便になる(手間・コストがかかる)ケースもあり得ます。 また そのサイトの目的によりPCサイトと同じコンテンツで良いのか考える必要もあります。 導入しようとするサイトの目的や意義をよく考えて、導入可否を慎重に判断しましょう。

目指せWebマスター! >>目次ページ

政令指定都市「横浜市」公式サイト

iPadなど、幅広い閲覧環境に対応

厳しいアクセシビリティ・ユーザビリティ等の基準をクリアするために様々な施策を施しました。コンテンツに最適なUIとなるよう、目的別に探せるインターフェースを中心としたページ構成、Javascriptによる動的な効果を実現し、さらにスマートフォンによるブラウザ閲覧を可能にしました。

Stance制作の考え方

アットライズがすぐにお客様の元に
かけつける理由とは

Flow制作の流れ

最短で「目的=ゴール」に
たどり着くために

Toolsツール

Webサイト制作・運営に役立つ
情報をシリーズで紹介

Contact

どんなことでもお気軽にご相談ください。

  • ホームページをリニューアルしたい
  • 社内でも簡単に更新したい
  • スマートフォンでも見やすくしたい
  • ホームページからの問い合わせがない
  • 制作費を予算の範囲内で収めたい
  • ホームページのアクセスを増やしたい
  • ドメインの取得もお願いしたい
  • Twitterを効果的に活用したい
  • 動きのあるコンテンツを考えている
  • Facebookの記事を表示させたい
  • システム構築をお願いしたい
  • ホームページで商品を販売したい
  • オリジナルブログを開設したい
  • ホームページで新規顧客を開拓したい

様々なニーズに対応し、お客様に最適な「Webの使い方」をご提案いたします。

無料お見積りをする

お問い合わせフォーム

お電話でのお問い合わせ 045-317-5309
FAXでのお問い合わせ 045-320-6575