トップ

制作料金

制作の流れ

制作実績

Q & A

会社概要

お申込み

お役立ち情報

ホームページを制作するにあたって、様々なお役立ち情報を掲載しております。

是非ご一読頂ければ、今後のビジネスで 大きく影響致します。

ホームページ制作のポイントや注意点を まとめております。

9:スマートフォン対応サイトの重要性について

ECサイトの7割はスマホ経由

ホームページはパソコンで見るもだという常識は完全に過去のものとなっています。たとえばECサイトでは、現在ユーザーの7割がスマートフォンを使って情報を見て、実際に商品を購入しています。

つまり、パソコンにしか対応していないというホームページは、せっかく購入につながるかもしれない見込み客の7割を逃しているということになります。

 

そしてこの割合は今後もっと増加していくことが予想されます。数年後には8割、9割がスマートフォンからのお客様になる、というホームページもあるでしょう。

そういう流れの中で、パソコン対応しかしていないホームページを運営するのは、はっきりいってもったいないです。

パソコンしか対応していないホームページは、スマートフォンで見ると文字が小さく、いちいち、ピンチアウトして画面を拡大しないと何が書いてあるかが分かりません。そうしたホームページはお客様に敬遠されてしまいます。

同業他社のホームページが普通にスマートフォンに対応している、スマホでアクセスしても普通の文字の大きさで読むことができるし、画像も見やすい。でも自社ホームページでは、詳細な情報は載っていても、スマートフォンではものすごく情報が読みにくい、ということがあります。

 

こうしたケースでは残念ながら、同業他社のサイトにアクセスは集中し、結果的にお客様をとられてしまうことになります。

まだ、パソコンでホームページを見ることが当たり前だったころの感覚を持っている、企業のご担当者の方が多いのも現実です。

しかし統計データでも、いまや7割のアクセスがスマートフォンからだ、ということはきちんと押さえておく必要があるでしょう。

スマートフォン対応はむずかしくない

一昔前には、携帯サイトやスマートフォンサイトは、パソコン用サイトとは別に用意する必要がありました。

携帯サイトやスマートフォンサイトを別に用意するということは、費用も2倍3倍になります。でも、今では、レスポンシブウェブデザインなどの、サイズによって見せ方を自動調整できる技術もあります。

スマートフォンサイトを別に作るというわけではありませんので、実は費用もそれほどかからないのです。

仕組みはこんな感じになります。

レスポンシブWebデザインを実現するには3つの技術があります。

 

1.メディアクエリー

メディアクエリーは@mediaがキーワードとなります。

パソコンやスマートフォン、タブレットなど、デバイスごとに画像の解像度変えないと、画像が妙に大きくなったり粗くなったりしてしまうのですが、@mediaを指定してCSSを組むとこうした問題が解決されます。

パソコンで読んだときにはパソコンに最適化。スマートフォン対応サイトではスマホに最適化されます。@mediaはウィンドウの幅や、スマートフォンのように端末の向きなどによって見せたい画面を予め指定できる技術です。

具体的にはこんな感じになります。

 

#sideMenuContents {

    width:20%;

    margin-top:2%;

}

 

@media (max-width: 350px) {

    #sideMenuContents{

        display: none;

    }

}

 

max-width: 350px

 

というところがポイントです。

閲覧している人のMAXのサイズが350pxを越えたら、この表示方法は使わない、そんな指定が可能です。

 

display: none;

というのは、350px以下になった時にはこの設定で指定した表示のイメージは出てきません。

同じように、780px以上とか、そうした細かい指定をすることで、ひとつのCSSの中でどんなサイズの場合にどんな画面を表示したいかを細かく設定することができます。

 

2.フルードグリッド

フルードグリッドは、グリッドを自由に使いこなす技術です

フルードグリッドは、縦横の格子の区切りの中にどんな要素を表示するかを指定する技術です。これ「グリッドデザイン」をと呼びます。

例えば左の上には必ず自社のロゴを載せたいとか、右上には必ず電話番号を乗せたいのかの、要素の指定です。大きさだけを調整してもそうした表示した要素がバラバラに出てしまうと意味がありません。

フィールドグリッドは、「この場所にはこの要素」という指定をすることができます。

 

3.フルードイメージ

レイアウトの調整は1のメディアクエリーで行うことができます。でも、これだけですと画像が大きくなりすぎたり、小さくなりすぎたりします。

大きさ自体は1.メディアクエリーで調整が可能ですが、イメージサイズを大きさによって最適化するためには「フルードイメージ」という技術が必要になります。

小さなスマートフォン画面では、画像も小さく表示して、大きなパソコンではパソコン用の大きな画像を表示する、それが「フルードイメージ」です,

 

ホームページ格安制作.bizでは、スマートフォンサイト対応も初期費用無料、月額費用の中でこうしたCSSを利用したスマーフォトン対応の最新技術をご提供しています。

 

是非、一度ご相談ください。

メールフォームからのご連絡はこちらへどうぞ。 24時間受付しております。(返信は1営業日以内に行います)
お申込みはコチラ! ※クレジットカード決済となります。

※銀行振込でのお支払いをご希望の場合は、その旨をお申しつけ下さい。

 

◀︎ Previous Next ▶︎

フォームなら24時間対応(年中無休)

お問い合わせ・ご相談

ホームページ制作・WEBサイト制作・モバイル/スマートフォンサイト制作なら「ホームページ格安制作.biz」

Copyright 2018 CASK. All Rights Reserved.