スマホサイトは、その特有の操作性などから、パソコンサイトとはまったく異なるデザインを作成する必要があります。
そのために、まずはスマートフォンとはどんなものなのか、その特性を知っておきましょう。
スマートフォンの特性
これまで私たちがインターネットのホームページを閲覧するのに使用してきたのは、おもにパソコンや携帯電話（フィーチャーフォン／ガラケー）でした。
パソコンで閲覧するときにはPCサイト、携帯で閲覧するときには携帯サイト、といった具合に、それぞれに最適化されたホームページが用意されていました。
とくに携帯電話の画面は非常に小さく、表示できる情報にも限りがあったため、専用の携帯サイトが欠かせないものでした。
画面の操作はボタンやキーで行うしかありません。そのため、携帯サイトの作り方もそれに合わせた独特のデザインになります。
ところがスマホでは、パソコンサイトがそのまま表示できるのです。
本体のほぼすべてが表示画面で画面サイズも大きく、携帯電話のような物理的なボタンはほとんどなく、数字の書かれたテンキーはありません。
電話をかけるときには、電話をかけるためのアプリ（アプリケーション。パソコンでいうパソコンソフトのようなもの）を起動し、画面上に画像として出現する数字ボタンを押してダイヤルします。
スマートフォンという言葉の正確な定義はないようですが、スマートフォンはその名の通りスマート（＝賢い）で高機能な携帯電話。
もっとも、電話というよりむしろ「小さなパソコン」といったほうが感覚的には近いものがあります。つまりスマートフォンを持ち歩いているのは、小さなパソコンを持ち歩いているようなものなのです。
スマホでの表示に最適化したホームページが作れる
ホームページ作成サービスはこちら
パソコンと大きく異なるスマートフォンの操作方法
そんなスマートフォンには、パソコンと大きく異なる点があります。それは、画面操作方法です。
画面全体がタッチパネルになっていて、基本的には、画面に触れることでさまざまな操作を行います。
ここで、スマホ特有の画面操作方法を見てみましょう。
- タップ
- スマホの画面を１回タッチすること。パソコンのマウスで、左ボタンを１回クリックするのと同じです。
- ダブルタップ
- スマホの画面を続けて２回タッチすること。パソコンのマウスで、左ボタンを２回クリックするのと同じです。
- ピンチイン
- 親指と人差し指をスマホの画面に載せ、その２本の指を近づけること。画面を縮小します。
- ピンチアウト
- 親指と人差し指をスマホの画面に載せ、その２本の指を離していくこと。画面を拡大します。
- スライド
- スマホ画面の上で、指を上下左右に滑らせること。ホームページのスクロールや、ページ移動などができます。
テキストで書くと何やら難しそうですが、実際に操作してみるとすぐにその便利さが実感できると思います。
スマホサイトは、こうしたスマートフォン特有の操作方法に合わせ、パソコンサイトとはまったく異なるデザインにする必要があるのです。
スマホでの操作に最適化したホームページが作れる
ホームページ作成サービスはこちら
スマホサイトで再現できない機能にも注意
スマートフォン特有の操作方法とも関連しますが、パソコンサイトでは可能でも、スマホサイトでは再現できない機能などにも注意が必要です。
たとえばパソコンサイトでは、マウスカーソル（画面上の矢印）をリンクテキストの上に重ねると色が変わる、というような機能をよく使います。
色を変えることで「リンクがここにありますよ」ということをわかりやすく知らせているわけですが、マウスを使用しないスマートフォンでは、そもそもこの方法が使えません。
したがって、目で見てリンクとわかってもらえるようにする必要があり
- テキストリンクには必ず下線を付ける
- ひと目でボタンとわかるデザインの画像を使用する
といった対策が必要でしょう。
また、パソコンサイトで多用される「Flash」（フラッシュ）という技術がありますが、たとえばiPhoneではこのFlashを再生することができないのです。
そのため、もしiPhone向けの対策を何もしていないと、エラー表示となってしまい、サイトの印象悪化は避けられません。
そうしたことのないように、iPhoneで表示されたときの対策をきちんと施しておく必要があります。たとえば弊社の「スライド動画」サービスでは、こうしたことに対応するため、iPhoneでのアクセス時には静止画を表示させるという対策をとっており、そうした悪影響がないようにしています。
スマホでの表示に最適化したホームページが作れる
ホームページ作成サービスはこちら
スマホ専用サイトか、スマホ最適化か
さて、パソコンサイトとスマホサイトのこうしたさまざまな相違点を克服する一番の方法は、「スマホ専用サイト」を新たに作成することです。
スマートフォンでの閲覧だけを前提に、スマホ専用のボタンや、スマホ表示用の画像などを作成し、ページを作成します。
しかし、こうした専用サイトを新規に作成するには、かなりの費用と時間がかかります。
こうした場合におすすめなのが、
パソコン用サイトをそのままスマートフォンに最適化させる
という方法です。
つまり、パソコンサイトのデザインをスマホサイトのデザインに切り替えて、スマートフォンでの閲覧に適した状態にするのです。
これなら、パソコンサイトを作成し、スマートフォンからアクセスがあった場合に、あらかじめ用意しておいたデザインを適用させて、表示させるだけですので、手間も費用もかかりません。
