既存サイトをスマートフォンに対応
現在すでに公開されているホームページをスマートフォンで快適に閲覧可能にするため、スマートフォンサイトを制作します。通常、PCで閲覧するためのWEBサイトは、PC用のデザイン、情報設計、コーディングがされているため、必ずしもスマートフォンで快適に閲覧が可能ではありません。
スマートフォンでも問題なく閲覧が可能なように、デザイン、レイアウト、サイト構成を作り直し、HTML5とCSS3でコーディングされたスマートフォン専用のWEBサイトを構築する事により、爆発的な普及を見せているスマートフォンユーザーをスムーズにサイトに流入、そしてコンバージョン(成約)へ導く事が出来るようになります。
既存のサイトをスマートフォンに対応する場合、基本的にはPCサイトに合わせたデザインで制作します(別途デザインを制作する事も可能です)。
その際、PCサイトでは画像で作っていたボタンをスマートフォンではCSS3でコーディングする事により、ファイルのサイズを軽量化したり、テキストリンクを指でも押しやすいようにボタンに変更したりなど、スマートフォンでもスムーズに閲覧可能なようにデザインを対応します。
また、PCサイトでは横幅を指定したデザインで作られている事が多いですが、スマートフォンサイトではiPhone,Andoridの新旧様々な端末に対応する必要があるため、横幅を端末に合わせて変えられるようなリキッド(可変)のデザインにする事により、多様な解像度の機種に対応可能になります。
スマートフォンでは、ユーザーが目的のページまで出来るだけ少ないページ遷移で辿り着けるような構成が望ましいです。
なぜなら、目的のページまで3ページや4ページも遷移しなければならなければ、回線速度の遅い3G回線では大きなストレスを感じてしまうからです。
そのため、PCサイトでは3階層、4階層まであるサイトも、ページ数を減らし、2階層程度にする事により、スマートフォンでもユーザーがストレス無くサイトを回遊出来るようにします。また、出来るだけシンプルかつ無駄なコンテンツを無くす事がスマートフォンサイトでは大切になってきます。
PCサイトではHTML4、CSS2という言語で構築されているサイトが殆どです。スマートフォンでは、HTML5、CSS3という新しいhtml言語が採用され、以前は画像を作らなければ実現できなかったデザインが、CSS(スタイルシート)のみで実現が可能になりました。
画像は逐一ダウンロードが必要となるため、画像で表示するよりも、CSSで表現する方が大幅に表示スピードが速くなります。
従来型のコーディングをスマートフォン用に最適化する事により、ストレス無くスマートフォンでの閲覧を可能にします。
PCのモニターは横幅1200~1800ピクセルなのに対し、スマートフォンは320ピクセル程度と4分の1以下の横幅です。画面サイズが小さければ、当然1ページに表示出来る情報量が変わってきます。
PC用のサイトでは、コンテンツ部分以外に、ヘッダー、ナビゲーション、サイドメニューなど2カラム、3カラムのレイアウトが主流となっており、コンテンツ以外にもユーザーに様々な情報を見せるように設計されています。
パソコンのモニターでは問題なく閲覧出来ていた横幅が1000ピクセルのWEBサイトでも、スマートフォンで閲覧すると、320ピクセル程度の横幅に合わせて縮小して表示されるため、文字や画像が3分の1くらいの大きさになってしまいます。スマートフォンで実際にPC用のサイトを閲覧すると分かりやすいのですが、画面をタップして見たい部分を拡大しなければ文字を読む事が出来ないため、必ずしも快適な閲覧が出来ない状態です。
パソコンは「光回線」という高速なネット接続が主流となっており、通常のWEBサイトを見る時はほとんどのサイトがスムーズに閲覧可能です。
PCサイトを制作する際は、動画や複雑なFLASHを使用しない限り、特別回線速度を考慮する必要はありません。しかし、スマートフォンは「3G回線」という携帯端末向けの回線でインターネットに接続します。
htmlは通常20~80KB(キロバイト)という軽いサイズのため、3G回線でもほとんど閲覧に支障はありませんが、画像は1個で数十キロバイトというサイズになるため、画像を多用したWEBサイトをスマートフォンで見ると、画像の読み込みに時間が掛ってしまい、1ページが表示されるまでに、かなりの時間がかかります。
通常、PCサイトにはコンテンツ部分だけでなく、ヘッダーやメニューなどコンテンツ以外の部分にも多くの画像が使われているため、スマートフォンで通常のPCサイトを閲覧すると、「重い」と感じてしまいます。
PCはマウスによる操作で、クリックやスクロールをしますが、スマートフォンでは、指を使っての操作(タップ)となります。そのため、マウスではクリックする事が問題なかったサイズの小さいリンクも、指だと押しにくくなってしまいます。
また、マウスを乗せた時に画像やテキストの色を変えたりする事がスマートフォンでは出来ないため、一目ですぐにリンクだと分かるようなデザインにしなければなりません。
リンクやボタンを大きく、分かり易くして、指での操作を想定したデザイン・設計にする事で、スマートフォンでもストレス無く操作出来るように最適化する事が重要です。
爆発的に普及を見せているスマートフォンは近い将来、従来型の携帯にとって代わると言われており、数年後にはWEBサイトのアクセスがパソコンよりも上回ると予想されています。
その中で、スマートフォンに対応する事により、モバイルユーザーを取り込む事が出来ます。
また、スマートフォンならではの、位置情報や電話機能などを活用する事により、外出先からの来店や申込が見込めるサービスでは、大きな効果が期待できます。
スマートフォンユーザーの特徴として、「ネットの利用率が高い」ユーザーであると言えます。
「移動中や外出先でネットを利用する」という事は、「パソコンでも良くネットを使っている」ユーザーであり、ネットでの購買やサービスの利用に積極的なユーザーであるという特徴があります。
スマートフォンに対応する事により、ネット利用率の高いユーザーを積極的にWEBサイトに呼び込む事が可能になります。
実店舗のあるWEBサイトはスマートフォンに対応する事で大きくメリットがあります。例えば、スマートフォンを使うユーザーは移動中や外出先で「行きたいお店やサービス」を探す事が珍しくありません。その際、通常のPCサイトでは知りたい情報へ辿り着くまでに時間が掛り、スマートフォンユーザーを逃していしまう可能性があります。
スマートフォンに最適化されたホームページなら、ユーザーがストレスを感じずに店舗のメニューやアクセスを見れるだけでなく、地図アプリとの連動により、現在位置とお店の位置をマップ上で把握したり、クリックひとつで電話をかける事が出来るので、よりダイレクトに、スムーズにユーザーを店舗へ導く事が出来ます。
個人向けに展開しているサービスのWEBサイトでは、スマートフォンに対応する事により、移動中や外出中でもサイトがスムーズに閲覧可能になります。
また、パソコンをあまり使用しない、”モバイルをメインに使うユーザー”に対して、スマートフォン対応したサイトを用意する事により、他の競合サイトに対してアドバンテージを持つ事が出来ます。
若い世代や女性はパソコンよりも携帯を使ってインターネットを見ている人が少なくありません。事実、大手のECサイトでは、商品を購入するユーザーの30%以上が携帯ユーザーの場合もあります。
ネットで物を買う事が当たり前となった現在、”携帯で物を探す・買う”ユーザーが増えているため、スマートフォンに対応する事により、携帯ユーザーもストレス無く買い物が出来るようになります。
※ECサイトのスマートフォン対応は、静的htmlやワードプレスを利用したショッピングサイトが対象となります。
※利用しているショッピングカートのシステムやECサイトのシステムによっては対応が出来ない場合があります
BtoC(個人向け)の事業を行っている会社では、会社サイトをスマートフォンに対応する事により、スマートフォンユーザーに対して好印象を与える事が出来ます。
また、FLASHなどを多用している場合、スマートフォン(特にiPhone)ではスムーズな閲覧が出来ないため、全くPCサイトが見れない場合もあります。スマートフォンに対応する事により、企業としてユーザーに親身になっている姿勢やIT化に取り組む姿勢をアピールする事が可能になり、イメージアップに繋がります。