あきばれホームページ作成
小さく始めて大きく育てるホームページ作成サービス

WEBマーケティング総合研究所

お問合せ・ご相談はこちら

スマホサイトの作り方~スマートフォンサイト作成入門~

スマホサイトのデザイン

スマホサイトは、その特有の操作性などから、パソコンサイトとはまったく異なるデザインを作成する必要があります。

そのために、まずはスマートフォンとはどんなものなのか、その特性を知っておきましょう。

スマートフォンの特性

これまで私たちがインターネットのホームページを閲覧するのに使用してきたのは、おもにパソコンや携帯電話(フィーチャーフォン/ガラケー)でした。

パソコンで閲覧するときにはPCサイト、携帯で閲覧するときには携帯サイト、といった具合に、それぞれに最適化されたホームページが用意されていました。

とくに携帯電話の画面は非常に小さく、表示できる情報にも限りがあったため、専用の携帯サイトが欠かせないものでした。

画面の操作はボタンやキーで行うしかありません。そのため、携帯サイトの作り方もそれに合わせた独特のデザインになります。

ところがスマホでは、パソコンサイトがそのまま表示できるのです。

本体のほぼすべてが表示画面で画面サイズも大きく、携帯電話のような物理的なボタンはほとんどなく、数字の書かれたテンキーはありません。

電話をかけるときには、電話をかけるためのアプリ(アプリケーション。パソコンでいうパソコンソフトのようなもの)を起動し、画面上に画像として出現する数字ボタンを押してダイヤルします。

スマートフォンという言葉の正確な定義はないようですが、スマートフォンはその名の通りスマート(=賢い)で高機能な携帯電話。

もっとも、電話というよりむしろ「小さなパソコン」といったほうが感覚的には近いものがあります。つまりスマートフォンを持ち歩いているのは、小さなパソコンを持ち歩いているようなものなのです。

パソコンと大きく異なるスマートフォンの操作方法

そんなスマートフォンには、パソコンと大きく異なる点があります。それは、画面操作方法です。

画面全体がタッチパネルになっていて、基本的には、画面に触れることでさまざまな操作を行います。

ここで、スマホ特有の画面操作方法を見てみましょう。

タップ
スマホの画面を1回タッチすること。パソコンのマウスで、左ボタンを1回クリックするのと同じです。
ダブルタップ
スマホの画面を続けて2回タッチすること。パソコンのマウスで、左ボタンを2回クリックするのと同じです。
ピンチイン
親指と人差し指をスマホの画面に載せ、その2本の指を近づけること。画面を縮小します。
ピンチアウト
親指と人差し指をスマホの画面に載せ、その2本の指を離していくこと。画面を拡大します。
スライド
スマホ画面の上で、指を上下左右に滑らせること。ホームページのスクロールや、ページ移動などができます。

テキストで書くと何やら難しそうですが、実際に操作してみるとすぐにその便利さが実感できると思います。

スマホサイトは、こうしたスマートフォン特有の操作方法に合わせ、パソコンサイトとはまったく異なるデザインにする必要があるのです。

スマホサイトで再現できない機能にも注意

スマートフォン特有の操作方法とも関連しますが、パソコンサイトでは可能でも、スマホサイトでは再現できない機能などにも注意が必要です。

たとえばパソコンサイトでは、マウスカーソル(画面上の矢印)をリンクテキストの上に重ねると色が変わる、というような機能をよく使います。

色を変えることで「リンクがここにありますよ」ということをわかりやすく知らせているわけですが、マウスを使用しないスマートフォンでは、そもそもこの方法が使えません。

したがって、目で見てリンクとわかってもらえるようにする必要があり

  • テキストリンクには必ず下線を付ける
  • ひと目でボタンとわかるデザインの画像を使用する

といった対策が必要でしょう。

また、パソコンサイトで多用される「Flash」(フラッシュ)という技術がありますが、たとえばiPhoneではこのFlashを再生することができないのです。

そのため、もしiPhone向けの対策を何もしていないと、エラー表示となってしまい、サイトの印象悪化は避けられません。

そうしたことのないように、iPhoneで表示されたときの対策をきちんと施しておく必要があります。たとえば弊社の「スライド動画」サービスでは、こうしたことに対応するため、iPhoneでのアクセス時には静止画を表示させるという対策をとっており、そうした悪影響がないようにしています。

スマホ専用サイトか、スマホ最適化か

さて、パソコンサイトとスマホサイトのこうしたさまざまな相違点を克服する一番の方法は、「スマホ専用サイト」を新たに作成することです。

スマートフォンでの閲覧だけを前提に、スマホ専用のボタンや、スマホ表示用の画像などを作成し、ページを作成します。

しかし、こうした専用サイトを新規に作成するには、かなりの費用と時間がかかります。

こうした場合におすすめなのが、

パソコン用サイトをそのままスマートフォンに最適化させる

という方法です。

つまり、パソコンサイトのデザインをスマホサイトのデザインに切り替えて、スマートフォンでの閲覧に適した状態にするのです。

これなら、パソコンサイトを作成し、スマートフォンからアクセスがあった場合に、あらかじめ用意しておいたデザインを適用させて、表示させるだけですので、手間も費用もかかりません。

 

3.PCサイトをスマホで表示する場合の問題点

次へ

スマホ用ホームページを無料で作成次はこちらスマホ対応つきホームページ作成はこちら

企業・会社・お店のHPを作りたい方へあるいは初心者でも簡単!ホームページ作り方講座

無料ガイドブック

2013年7月11日配信

HP作成ガイドブック
スマホサイト+ホームページ作成を知りたい方へ

ホームページ入門

ガイドブック無料ダウンロード

メールアドレス: (必須)

メールマガジンの登録
(任意)
※HPの活用方法、SEO等の最新情報をメールでお届け。
※しつこいサービス勧誘や、営業電話等は、行いません。

スマホサイトつきのホームページ作成サービス

ページの一番上へ | このページを印刷

着手可能数(8月22日現在)

  8月 9月 10月 11月
残り 10件 72件 80件 80件
8月は残り10件!申込みはお早めに

お申込みはこちら

※上記は標準パックの申込み状況表です。

※お急ぎの方はお電話(03-5957-1610)でお問合せ下さい。

低価格なHP作成サービス
充実のサポート
サービス詳細
ご相談・お問合せ