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

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

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

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

結局どのサイズ表示を意識する?レスポンシブwebデザイン、レイアウトの決め方

結局どのサイズ表示を意識する?レスポンシブwebデザイン、レイアウトの決め方

マルチデバイスの時代到来

photo credit: tribehut via photopin cc

現在スマートフォンのディスプレイサイズは、4~5インチが主流となっていますが、来夏には、6インチのiPhoneが登場するとの噂もあります。タブレットのサイズも、7~10インチと様々で13インチを超えるビッグタブレットも販売されています。

様々なサイズのデバイスが多様化する中ではありますが、WEBサイトを制作する上で「コンテンツサイズ」を決めなければなりません。

一度作成したWEBサイトを頻繁にリニューアルさせるわけにはいきませんし、ある程度の長い期間、レイアウトの変更やコーディングをやり直すことなく表示させるには、どのサイズに基準を置くのか悩ましいポイントです。

この悩みを解決する為に、可変グリッドレイアウトなレスポンシブwebデザインによるコーディングをお勧めします。

ECサイトは1つでいい

1.カラム数を決める。

一般にECサイトでは2カラムもしくは3カラムが主流で、最近では特にインテリアや雑貨のジャンルなどアサイドエリアに2列表示させるサイトも多く見かけます。サイトの特性や商材にあわせて、最適なレイアウトをまず決めます。

カラム数を決める

2.各カラムの比率を決める。

1で決めたレイアウトに対し、メインエリアとアサイドエリアの比率を決めます。

その時メニューやバナーが間延びしないようにmax-widthを決めておくと良いでしょう。他モールとの連携の都合で、商品画像やバナーのサイズが変更できないケースがあります。

その場合はアサイドエリアは固定、メインエリアを可変にすると画像を作り直すことなくレスポンシブサイト化させることができます。

各カラムの比率を決める

例えば、カテゴリページなどの一覧ページでは、サイドエリアは固定、メインエリアのみを可変にすることで、件数に応じてリキッドに表示させることができます。
ポイントとしては決めるものは「比率」です。HTMLソースにpxで絶対値していしてしまうと、リキッドなレイアウトにはなりません。

3.およそのブレイクポイントを決める。

スマートフォンとPCではディスプレイサイズが大きく異なりますが、タブレット・ビッグタブレット・ノートパソコン、PCに関しては、サイズの境界線が曖昧になってきています。

この為ブレイクポイントの推奨をご案内することが難しくなってきているのですが、強いてあげるなら「スマートフォン表示を480px以下とする」です。

しかしこの数字も近い将来変更になる可能性もあります。1で決めたレイアウトを前提に、ブレイクポイントを決めていくことをお薦めします。

4.作りたいように作る。

作りたいように作る

photo credit: Shanghai Daddy via photopin cc

この記事で、最も言いたいこと。それは「作りたいように作ってみる」です。

「レスポンシブwebデザインだから、デザインやレイアウトに制約があるのでは?」 と思われている方もいるかもしれません。

しかしサイトにはそれぞれ特性があり、題材にあわせて見せたいサイズがあるはずです。今後出てくる予測不能なデバイスのサイズにあわせるのではなく、魅力的なコンテンツありきで、制作を進める方が悩まなくて済みます。

カラムの枠を超えたリキッドな表示はできませんが、カラムごとのエリアの中でコンテンツを組み立てていけば良いだけです。

aishipRでは現在も、レスポンシブECサイトを複数構築させて頂いております。お客様にご要望頂くデザインに少しでも近づけるよう、来年も試行錯誤を繰り返していきます。

葉糸

”スマホで売れる”ためには必須の「レスポンシブ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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+