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

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

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

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

携帯サイトのスマートフォン対応のポイント! ~スマートフォン表示で最適サイズを設定する「viewport」~

NO IMAGE

1.携帯向けサイトは横幅240px、スマートフォンサイトは320px
2.スマートフォンにあるといい viewport
3.携帯サイトをスマートフォン対応させる

■携帯向けサイトは横幅240px、スマートフォンサイトは320px

携帯電話(ガラケー、フィーチャーフォン)の横幅はほとんどのものが240px前後であり、一般的に携帯向けのサイトは横幅240pxで作られます。

一方、スマートフォンでは、タブレットなどもありますが、片手で持てるタイプのものは320pxのものが主流となっています。

携帯サイトをスマートフォンサイトとして利用するにはこの横幅の問題があり、『画像が小さくなる/レイアウトが崩れる』などの問題が発生します。

■スマートフォンにあるといい viewport

スマートフォンでウェブサイトを閲覧すると、特にPC向けに作られたページの場合は、小さい画面に収まるようにして小さく表示されてしまいます。また、ブラウザ表示のための横幅の初期値は(機種などによってさまざまですが)画面サイズよりも大きくなります。※例えば iPhone では980pxとなる。

なので、せっかくスマートフォン向けに320pxで作ったサイトも、何もしないままだと980pxで表示されてしまいとても小さくなります。これを解決するのが『viewport』なのです。

「viewport」で検索するとたくさんの情報が得られます。ここでは簡単に説明します。viewportはいわゆるmetaタグです。ページを表示する際の画面表示に関する定義をします。これはスマートフォンだけでなく最近のブラウザのいくつかでも利用が可能なようです。

具体的にviewportで何ができるのかですが、横幅指定、縦幅指定、初期の表示倍率、拡大可能な最大倍率、縮小可能な最小倍率、拡大縮小を許可するかどうか、の設定が可能です。

<meta name=”viewport” content=”width=横幅, height=,縦幅 initial-scale=初期倍率, minimum-scale=最小倍率,maximum-scale最大倍率, user-scalable=拡大可否”>

■携帯サイトをスマートフォン対応させる

携帯向けサイトをスマートフォンで利用するには、最初に述べた横幅の違い(携帯は240px、スマートフォンは320px)をviewportで解決することで可能となります。

実際にviewportを設定する前に、スマートフォンらしいレイアウトについて触れておきます。携帯電話の画面サイズは、最近では3インチを越えるものも出てきていますが、一般的にはとても小さな画面です。スマートフォンの場合は小さいとはいえ3インチを超えるものがほとんどです。

携帯電話は小さな画面のためコンテンツを詰めて表示します。しかし、小さいなりにもそこそこ大きいスマートフォンでコンテンツを詰めて表示してしまうととても窮屈な印象となります。スマートフォン向けに最適化されたサイトをご覧になった際に左右に余白があるのを見かけたことはないでしょうか。つまり、左右に余白を設けることで窮屈でない印象を与えるのです。

これらを踏まえると、画面サイズの微妙な違いをviewportで調整するには、『適度な余白を持って設定する』ということになります。また、うまく左右に余白を設けるためにCSSでも調整します。具体的にはこのようになります。

<html>
<head>
<meta name=”viewport” content=”width=240, initial-scale=1.25″>
<style>
<!–
#all { margin: 0 auto; width: 240px; }
–>
</style>
</head>
<body>
<div id=”all”>
すべてのコンテンツを囲む
</div>
</body>
</html>

※240px×1.25=300pxということでサイトの幅は300pxになり、画面サイズが320pxなので左右に10pxずつの調度良い余白ができます。スマートフォンショッピングカートのaiship

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