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

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

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

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

タブレットの登場で変わるWEBサイト制作!コンテンツ領域の“横幅”を決める上で失敗しないポイント

タブレットの登場で変わるWEBサイト制作!コンテンツ領域の“横幅”を決める上で失敗しないポイント

先日、会社からiPad miniが支給されました。実際にiPad miniを手にとってまず感じたのが、予想以上に軽くて薄いこと、縦置きと横置きのどちらで使おうか、という2点です。

タブレットは縦向き?横向き?

当初は、手のひらに収まることから、なんとなく縦置き(ポートレート表示)で使用していましたが、カバー装着した後は横置き(ランドスケープ表示)を主として使用するようになりました。そもそも、iPadには「デフォルトのデバイスの向き、またはユーザの期待に従ったデバイスの向きがない」という概念があります。

この為、WEBサイト制作時にタブレットサイトをデザインする際は、ポートレート・ランドスケープどちらもを意識することが求められます。

参考:iPadヒューマンインターフェイスガイド ライン(PDF)

iPadminiとXperia比較

▲iPad mini(7.9インチ)とXPERIA(4.0インチ)とのサイズ比較。iPad miniはXPERIAを3倍にしたぐらいのサイズで、スマートフォンで感じていた画面の小ささからくるストレスは全く感じない。

Yahoo JAPANのタブレット対応が素晴らしい。

以下は、YAHOO!JAPANのタブレット対応サイトをiPad miniで表示させた場合です。

Yahoo!キャプチャ

ランドスケープ表示時は3カラムで構成されますが、ポートレート表示になると2カラムに切り替わります。それだけでなく常に最新情報を入手できる状態を保つことができ、SNSと連携させるなどカスタマイズを楽しむことができます。

このようなタブレットサイトを意識したサイト事例は、レスポンシブウェブデザインを推奨していく上で今後も調査を続けていきます。

タブレット対応サイトは「PCサイト表示が向いている」?

たしかに、タブレット端末でのディスプレイサイズはPC寄りであるため、PCサイトを表示させることで間に合わせることは可能です。

しかしレスポンシブウェブデザインを意識せずに、ガチガチにサイト全体の横幅を固定サイズでサイト制作をおこなった場合、横スクロールが発生してしまうか、サイト全体が縮小表示されてしまい、ピンチアウトしなければコンテンツを読み取れないといった事態に陥ってしまいます。

以下は、min-width: 1000px;で指定してあるPCサイトをタブレットで閲覧した例です。

Macキャプチャ

PCでサイトを閲覧する際は違和感なく表示されますが、タブレット端末を縦にした場合、画面の下半分に大きな余白ができてしまい違和感を感じてしまいます。

逆に、サイト全体の横幅を可変にした場合はどうでしょうか。以下は、widthを100%で指定した場合の表示例です。

デバイスの横幅に応じて画面いっぱいに広がるように拡大してくれますが、実際にiPad miniで表示させてみるとレイアウトに偏りが生じてしまい強引さを感じてしまう内容に陥ります。

タブレット対応サイトを別ソースで立ち上げている事例

以下にPC・スマートフォン・タブレットサイトをそれぞれ別URL、別ソースで構成されているお店をご紹介いたします。

PCサイト

http://www.napolipizza.jp/
PCサイトです。特にこの場で述べるまでもなく違和感を感じることのないPCサイトです。

スマートフォンサイト

http://www.napolipizza.jp/iphone/
サービスの特性上、いつ(営業時間)どこ(位置情報)で何をどのように注文できるかがキーポイントになることから、これらをスマートフォンサイトで適切に表示できていると言えます。

スマホサイトキャプチャ

タブレットサイト

http://www.napolipizza.jp/ipad/
ポートレート表示時はきっちり表示されていますが、メインとなるコンテンツの画像サイズがwidth=”495px”で固定されているために、ランドスケープ表示時では左右に余白ができてしまいます。(赤枠で囲ってあるところ)

せっかくiPad表示用にサイトを制作してあるにも関わらず、横向きにしたときは、両サイドのスペースに余白が生じてしまうのが惜しいところです。

タブレットサイトキャプチャ

それと同時に考えなければいけないポイントが、上記事例はPCサイト、スマートフォン対応サイト、タブレット対応サイトの3ソースから構成されておりワンソースマルチデバイスに対応していない点です。

ソースが3つに別れているので、例えば新着情報の1箇所更新するなどの些細な更新でも3サイト分の更新の手間が発生し、あまり効率的とは言えません。

多くのWEBサイトがPC表示とスマートフォン表示を意識してサイトを制作している中で登場したタブレット端末。今後さらなる表示領域を備えたデバイスが登場していくことを想像すると、今このタイミングでレスポンシブウェブデザインについて取り組みをスタートさせることが、WEBの管理を効率的に行える近道と言えます。

参考サイト:
タブレットサイトに対応させるためのポイント(各タブレット端末の解像度比較表付き)
サイト横幅を決める上で読んでおきたいテクニック

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