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

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

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

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

スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(9)~

スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(9)~

前回の記事までに、スマートフォン用の画像サイズについてご案内してきました。
「aishipでは240pxの画面をズームして320pxに拡大表示しているため、240pxちょうどの画像だと少しボケる」ということでした。綺麗な画像をスマートフォンで表示させるためには480~620pxの画像を横幅240px指定にして表示させるのがベストです。

ではこのズームをやめてしまうことは出来るのか?
可能です。

aishipの管理画面には、viewportの設定を読み込むメニューを用意しています。
viewportについては下記の記事が参考になりますよ。
携帯サイトのスマートフォン対応のポイント! ~スマートフォン表示で最適サイズを設定する「viewport」~

このviewport、初期設定では下記のようになっています。

これを下記のように変更していただくことでスマートフォンにぴったりなサイズにすることができます。

あとは画像をページに貼り付ける時にCSSやHTML内の記述で画像の横幅を指定してあげてください。これでズームされない画像をページに貼り付けることが出来ます。

[HTML]<img src="画像のURL" style="width:320;" />

または

[HTML]<img src="画像のURL" class="w-320" />
[CSS] .w-320 {	width: 320px;}

スマートフォンの横幅は320pxが主流になっています。
タイトル画像やロゴを作成する時、デザインをする時にも320pxで作成することも多いと思います。上記の手順を踏んでいただくことで、デザイン画像そのままの画像をページに設置することができます。お試し下さいね!

( スマートフォンECクラウド型ASP『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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+