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

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

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

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

1.カラム数を決める。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

葉糸