スマートフォン用サイト

For Smart Phone

レスポンシブ・ウェブ・デザインでスマートフォン・タブレット表示に完全対応

表示するウィンドウ幅に応じてレイアウトが変化するレスポンシブ・ウェブ・デザインにすべての雛形が対応しています。
まめわざで作成したサイトはすべてスマートフォン・タブレットの表示に対応しています。

レスポンシブ・ウェブ・デザインとは?

レスポンシブ・ウェブ・デザインは、PCサイトがスマートフォンでも見れる仕様であり、Googleが推奨する規格です。
一方、PCサイトとは別にスマートフォン専用サイトを提供する方法があります。
メリット・デメリットを整理するために表にまとめてみます。

レスポンシブスマホ専用サイト
コンテンツ管理のしやすさ×
その他の端末への適性タブレット
ネットブック・ミニノートPC
ウェアラブル・カーナビ・未知の端末×
ブラウザの拡大表示
(高齢者や弱視者へのアクセシビリティ)
×
導入のしやすさ×
PCサイトの閲覧×
(自動転送しない場合は可)
タッチ・フリック操作に適したコンテンツ提供×
表示速度
(軽量にして早くすることが可)

レスポンシブ・ウェブ・デザインのメリット

  • コンテンツを2つ作る必要がなく管理が容易
  • 様々なサイズに対応できるので、1つ作ればタブレット・ファブレット・ネットブックなどのミニノートPCなどあらゆるデバイスに対応可能。ウェアラブル端末・カーナビなど未来の端末への適用も。
  • ブラウザの拡大表示でにも対応しているので、高齢者や弱視者にも優しい

スマートフォン専用サイトのメリット

  • スマートフォン専用の機能を別途提供可
  • スマートフォンからPCサイトを見たい人にも対応可
  • 小規模な場合は、初期導入が比較的容易

レスポンシブ・ウェブ・デザインのデメリット

  • 1から作る場合は導入が面倒
  • スマートフォンからPCサイトを見たい人に対応できない

スマートフォン専用サイトのデメリット

  • 更新時にPC用・スマホ用の2つのコンテンツを修正する必要があり面倒
  • 特定のサイズを想定している場合、それ以外の端末に対応できない
  • 自動転送をしている場合、将来登場する端末に対応できない場合がある
  • 検索エンジンに重複コンテンツとみなされるリスクがある

レスポンシブ・ウェブ・デザインの適性

  • 運用コストを抑えたいサイト
  • 比較的小規模なサイト

スマートフォン専用サイトの適性

  • タッチ・フリックなどスマートフォンの動作にマッチしたユーザーインターフェースを提供したいサイト
  • 独自のCMSなどすでに管理システムを導入している比較的大規模なサイト、または更新をあまり行わないサイト

まめわざは、レスポンシブ・ウェブ・デザインのデメリットである導入の面倒さがなく、将来に渡って拡張性の高いモバイル端末対応を簡単に実現できます。

アノテーション設定機能により既存のPCサイトとの併用も可能

既にPCサイトをお持ちの方は、まめわざをスマートフォン用サイトとしてもご利用いただけます。

PCユーザー用のアドレス例スマホユーザー用のアドレス例
PC・スマホ兼用サイトとして使う場合https://cafe-aiueo.bizweb.jp/https://cafe-aiueo.bizweb.jp/
スマホ用サイトとして使う場合http://cafe-aiueo.com/https://cafe-aiueo.bizweb.jp/

「cafe-aiueo」は例であり、好きなアドレスを設定できます。

スマートフォン用サイトとして使う場合は、PCサイトとスマートフォンサイトの関連をGoogleに知らせるアノテーションを設定できます。
これにより、スマートフォンユーザーの検索結果にはcafe-aiueo.bizweb.jp、PCユーザーの検索結果にはcafe-aiueo.comが表示され、適切にユーザーを誘導できます。また、重複コンテンツと判断されるリスクを回避することも可能です。

レスポンシブ・ウェブ・デザインを体感してみましょう

下のデザインシミュレーターで、タブレットやスマートフォンのアイコンをクリックすると、表示幅に合わせてデザインが変化します。
「次のデザインに切替」をクリックするたびに、ランダムにデザインが切り替わりますので、お好みのデザインを探してお楽しみください。