owExolAA9NFsKq2gjR8VOGjFVxpG43cfNw4xDCYJ88M

レスポンシブデザインにしてデバイスに対応させよう

By simpledesign, 2015/10/09

今回はレスポンシブ・ウェブデザインのお話です。

レスポンシブ・ウェブデザインってご存知ですか?

ホームページを見に来る機器は多々ありますね。

パソコン、タブレット、スマホ、携帯電話等ですね。

その全ての機器での表示に対応させることを、レスポンシブ・ウェブデザインと言います。

あなたがホームページを持っていたり、ネットショップを運営していたら、レスポンシブ・ウェブデザインについて、そろそろ考えないといけない時期になって来たのです。

何故なら、最近のあなたのホームページへの訪問者が、スマホや携帯で見に来ている確率が高くなっているからです。

確かに、パソコンサイトの多くが携帯で見た時は崩れても、スマホで見ると小さくはなるけど崩れていない。

だから、2本指を使って拡大して見てもらえるだろう。

などと思っていませんか?

もし、あなたがiPhoneやアンドロイドだったとして、あるホームページを見に行った時、小さく表示されていたり、拡大して見ていてもどこを見ているのか分からなくなったりしたら、ストレスが溜まって離脱しますよね?

ね? 自分がする事は他人もきっとするはずなんです。

ですから、なるべくレスポンシブ・ウェブデザインに、していく必要があるんです。

例えば、生徒さんと作っているアフィリエイト用のサイト群ですが、Jimdoで作っているのでスマホでも対応しています。

色んなサービスのサイトのポータルとしてのサイトが下記です。

http://simple.sub.jp/images/design1.jpg

同じサイトをパソコンで見た時と、スマホで見た時の様子です。

パソコンサイトで同じチーバ君の画像を大小2つ使っている訳は、スマホの方ではパソコン用のヘッダー画像を読み込まず、メインコンテンツの「◎コンテンツ一覧」から表示させてしまい、導入部分が文字情報ばかりで淋しかったので、わざわざ小さくしたものを入れてスマホにも表示させたからです。^^

パソコンサイトを見た方からすると、同じ画像がサイズ違いで何故ダブっているのか?

と思う人もいるとは思いますが、このサイトはTwitterでアクセスを流し込んでいるので、半数以上はスマホのユーザーなんです。

だから、どちらかと言うとスマホユーザー寄りになっても、しょうがないんです。^^

と言う訳で、あなたのサイトはどの機器から見に来てもきちんと表示されますか?

MTだったら最新にバージョンアップして、スマホ対応のテーマに着せ変えればOKですし、ワードプレスだったらプラグインをひとつ入れればOKです。

ぜひレスポンシブ・ウェブデザインにしてくださいね。