【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

失敗するレスポンシブWebデザインにありがちな2つのミス

失敗するレスポンシブWebデザインにありがちな2つのミス

レスポンシブ化を失敗する2要素

こんにちは、ECプロデュース部の岡本です。

官公庁のWEBサイトも次々とレスポンシブWebデザインを採用し、今まで以上にマルチデバイス対応の重要性が上がっているのだなとひしひしと感じております。

しかしこちらのスライドのように、「レスポンシブWebデザインにすれば何でも上手く行く」という考え方はとても危険です。

そこで今回はレスポンシブWebデザイン化する際に、「失敗しやすい2つのポイント」を紹介します。

1,画像内に文字を入れる

ありそうな商品画像サンプル
楽天のショップなどを見ていると「文字が入った画像」を非常に多く見かけます。

ちょっとした専用ソフトがあれば誰でも簡単にデザイン性の高い文字を追加できるので、この「文字入り画像」は非常に便利です。

しかしレスポンシブWebデザインにする場合、この「文字」が「思わぬ問題」を生み出します。

それは「スマートフォンで文字が潰れてしまう」という問題です。

画像サイズにあわせて文字も縮小されるため、小さい画面から見た時に何が書かれているのかが全く読み取れないということがよくあります。

そのためレスポンシブWEBデザイン化する際には、「大きな文字のみ画像に入れること」や「文字をhtml/css化してスマートフォンでは別のデザインに変更させる」といった手法をとることをおすすめします。

2,ブレークポイントを細かく設定しすぎる

ブレークポイントが細かすぎる
デバイスの横幅毎にスタイルシートを設定できるメディアクエリ(@media)は非常に便利です。

やろうと思えば1px毎に細かくレイアウトが変化する、まるでFLASHでも使っているかのようなデザインを実装することも(理論上)可能です。

ただし、あまりにも細かく設定すると「オープン後」非常に困ったことが発生します。

コンテンツの追加やちょっとしたレイアウトの変更を実施しようとした時、設定した全てのメディアクエリで問題なく表示されているかを確認しなければならなくなります。

そのためサイト更新の手間を減らす為に導入したはずのレスポンシブWebデザインが、却って作業量を増やしてしまう事態に陥るのです。

ではメディアクエリはどれくらいの数に抑えるべきなのでしょうか?

以前紹介したモバイルファースト型フレームワークの「Responsive Grid System」では、メディアクエリの数はたったの1つでした。

参考:今までの常識を覆す!?レスポンシブかつ超軽量なCSSフレームワーク

しかしIE8などのレトロブラウザ対応やサイドバーの表示切り替えを行うなど、サイトのボリュームが大きいサイトでは流石に2デザインで対応させるのには難しいという実情もあります。

ですので基本はTwitterBootstrapが採用しているような「スマホ・タブレット・PC」の3分割スタイルが自由度の高いレイアウトと管理の手間削減を両立させるのではないかと思います。

まとめ

いかがでしたでしょうか。

それぞれのデバイスに完全特化させたWebサイトを作成されたい場合は、レスポンシブWebデザインよりも専用サイトの方が有効です。

ですが更新頻度・サイト情報量が非常に多くなるECサイトやポータルサイトでは「どのデバイスにも対応できる」レスポンシブWebデザインが有効です。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+