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

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

スマートフォンサイト制作のコツ:レスポンシブウェブデザイン

スマートフォンサイト制作のコツ:レスポンシブウェブデザイン

1.スマートフォンサイトは横向きで見ることもあります
2.レスポンシブウェブデザインとは
3.通なスマホサイトを作ろう

■スマートフォンサイトは横向きで見ることもあります

以前の記事『スマートフォンサイトは横向きで見ることもあります』で触れているとおり、スマホサイトは横向きで見ることもあります。縦長(ポートレイト)で見るときのレイアウトと横長(ランドスケープ)で見るレイアウトが同じでいいでしょうか?

縦長レイアウトを横画面でもそのまま表示してしまうと左右の余白がもったいなく、上下が窮屈に感じます。得られる情報量も少ないです。これを解決するコーディング方法が『レスポンシブウェブデザイン』なのです。

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

レスポンシブウェブデザインを簡単に表現すると「画面のサイズ/幅に合わせてレイアウトが柔軟に変わる」というテクニックです。例えばdocomoのスマホ向けポータルサイト『dメニュー』をPCのブラウザChromeやSafariでアクセスしてブラウザのウィンドウの横幅を狭めてみてください。するとどうでしょう、ウィンドウの幅に合わせてレイアウトが変わっていくのがわかると思います。

このようにそのときの画面サイズ/幅に合わせてレイアウトを柔軟に変えることで見ているひとに最適なレイアウトを提供することがレスポンシブウェブデザインなのです。そしてこのテクニックは難しいプログラムで実現しているわけではなく、ウェブサイトをデザインする際に使うCSSだけを使って実現しているのです。

■通なスマホサイトを作ろう

では、上記に例としてあげた商品一覧の表示をレスポンシブなウェブデザインを使うとどのようになるかを見てください。

縦画面の時は商品を横に2商品ずつ2行で表示していましたが、横画面の時は横に長いことを意識して横に4商品並べています。

これを実現するのはCSSのテクニックだけです。方法はいろいろありますが一番わかりやすいのがメディアクエリです。メディアクエリを使って縦画面(ポートレイト)と横画面(ランドスケープ)とで適応するスタイルを切替えることができるのです。『dメニュー』がこの方法を採用しています。

    @media screen and (orientation:portrait){
        縦長画面向けスタイル
    }

    @media screen and (orientation:landscape){
        横長画面向けスタイル
    }

今回の新着商品では各商品情報の固まりを1つのdiv(.product-inline-block)で囲みそれらをインラインブロック要素とすることで横に並ぶようにしています。このとき縦画面では横幅144pxなので3つ目の商品情報は画面幅320pxに収まらないため折り返して表示されます。横画面では横幅を96pxにしています。これで折り返されることなく横一列に並ぶわけです。

    @media screen and (orientation:portrait){
        .product-inline-block {
            display:inline-block;
            width:144px;
        }
    }

    @media screen and (orientation:landscape){
            .product-inline-block {
                display:inline-block;
                width:96px;
        }
    }

世間一般ではあまりウェブサイトを横画面で見ているひとを見かけませんが、ちょっとした一手間により訴求力を高めることができます。またこれらのテクニックこそがスマホサイト制作の醍醐味であるとも言えます。ぜひトライしてみてください。

ちなみにネットショップのスマートフォン対応ASP「aiship(アイシップ)」では今回紹介した新着商品やランキングなどの商品情報コンテンツを簡単に作れる『商品ブロック機能』があります。この機能を使うとこれらのことを意識することなく実現することができます。

( スマートフォンECクラウド型ASP『aiship(アイシップ)』河野 )

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

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

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

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。

スマートフォンカテゴリの最新記事