既存サイトをスマートフォンに対応

デザインをスマートフォン用に対応

• ボタンやリンクを押しやすく
• 画像の使用を抑えて表示速度を早く
• 画面の向きや解像度が変わっても崩れないレイアウトに

既存のサイトをスマートフォンに対応する場合、基本的にはPCサイトに合わせたデザインで制作します（別途デザインを制作する事も可能です）。

その際、PCサイトでは画像で作っていたボタンをスマートフォンではCSS3でコーディングする事により、ファイルのサイズを軽量化したり、テキストリンクを指でも押しやすいようにボタンに変更したりなど、スマートフォンでもスムーズに閲覧可能なようにデザインを対応します。

また、PCサイトでは横幅を指定したデザインで作られている事が多いですが、スマートフォンサイトではiPhone,Andoridの新旧様々な端末に対応する必要があるため、横幅を端末に合わせて変えられるようなリキッド（可変）のデザインにする事により、多様な解像度の機種に対応可能になります。

サイト構成をスマートフォン用に

• 構成をシンプルにしてユーザーが目的のページ（情報）に辿りつきやすくする

スマートフォンでは、ユーザーが目的のページまで出来るだけ少ないページ遷移で辿り着けるような構成が望ましいです。
なぜなら、目的のページまで3ページや4ページも遷移しなければならなければ、回線速度の遅い3G回線では大きなストレスを感じてしまうからです。

そのため、PCサイトでは3階層、4階層まであるサイトも、ページ数を減らし、2階層程度にする事により、スマートフォンでもユーザーがストレス無くサイトを回遊出来るようにします。また、出来るだけシンプルかつ無駄なコンテンツを無くす事がスマートフォンサイトでは大切になってきます。

コーディングをスマートフォン用に

• CSS3の採用により、画像を使わなくてもリッチなデザインが可能に
• 出来るだけ画像を使わないコーディングにより、3G回線でもストレスなく表示

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サイトを閲覧すると、「重い」と感じてしまいます。

画像を出来るだけ使わないデザインに変更する事により、3G回線でも表示の速度を早くする事が可能です。

③操作性の違い

PCはマウスによる操作で、クリックやスクロールをしますが、スマートフォンでは、指を使っての操作（タップ）となります。そのため、マウスではクリックする事が問題なかったサイズの小さいリンクも、指だと押しにくくなってしまいます。

また、マウスを乗せた時に画像やテキストの色を変えたりする事がスマートフォンでは出来ないため、一目ですぐにリンクだと分かるようなデザインにしなければなりません。

リンクやボタンを大きく、分かり易くして、指での操作を想定したデザイン・設計にする事で、スマートフォンでもストレス無く操作出来るように最適化する事が重要です。