×

サイト制作

スマートフォン対応サイトの作りかたの基礎

更新日:2011/11/08 公開日:2015/04/13

All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

みなさま、こんにちは。

普段、All Aboutという情報サイトでウェブサイト制作について記事を連載している西村 文宏(ニシムラ フミヒロ)と申します。

今回は、スマートフォン用サイトの作りかたの基礎についてご紹介させていただきますのでお付き合いいただけますと幸いです。

スマートフォンは、PC用に作られたウェブページをそのまま閲覧できます。

ですから、すでにPC用サイトがあるなら、スマートフォン用サイトを別途用意する必要は必ずしもありません。

しかし、最近の大手サイトでは、PC用サイトとは別にスマートフォン用サイトを用意していることがよくあります。

画面の小さなスマートフォンでは、いくらPC用ページが表示できるといっても縮小表示せざるを得ないため、ユーザに拡大・縮小操作を強いることになるからです。

快適に閲覧してもらうためには、スマートフォン専用ページを用意する方が望ましいということでしょう。

スマートフォン用サイトを作るために、特殊な環境やツールは不要です。
普段、PC用サイトを作っているのと同じツール・方法が使えます。

iPhoneやAndroidといったスマートフォンには、HTML5やCSS3を解釈できる最新のブラウザが搭載されています。初期のiPhoneやAndroidに搭載のブラウザでも同様なので、スマートフォン用サイトを作る際には、過去の互換性を気にすることなく、最新のHTML5+CSS3で作って問題ありません。

せっかく最新の表示環境が整っているのですから、HTML5+CSS3で作るのが望ましいといえますが、必須ではありません。従来通り、HTML4.01などで作っても問題なく表示できます。

ですから、HTML5やCSS3が分からないなら、分からないままでも問題ありません。

特別に新しいことを学ぶ必要なく、今までの知識のままでもスマートフォン用ページは作成できます(もちろん、HTML5やCSS3を使う方が、より多くのデザインや機能を実現可能ですが)。

では、何も注意することなく普通にウェブページを作るだけで、「スマートフォン用ページ」になるのでしょうか。

……実は、そうではありません。

スマートフォン用ページを作ろうとしたとき、1点だけ問題になることがあります。
それは、『勝手に縮小表示されてしまう』という点です。

スマートフォン用ページを実際に作ってスマートフォンで表示させてみると、自動的にページ全体が縮小表示されてしまうという問題に気づくはずです。

スマートフォンに搭載されているブラウザは、PC用ページをうまく表示できるよう設計されていますから、「画面の横幅がPC用画面のように広い場合」を想定してレンダリング(描画)し、それを「スマートフォンの実際の画面横幅に合うよう縮小」して表示する仕様になっています。

スマートフォン側には、表示しようとしているページが「スマートフォン用に作られたページ」なのか「PC用に作られたページ」なのかを判断する方法がありません。

どちらも作り方が同じなのですから当然ですね。

ですから、たとえウェブページの作成者が「これはスマートフォン用だ」と思って作成しても、そのままでは自動的に縮小されてしまうのです。

ウェブページそのものの作り方は、PC用もスマートフォン用も同じですが、スマートフォンに対して「実寸で表示して(縮小せずに表示して)欲しい」と伝える方法が用意されています。

それが、以下の1行です。

<meta name="viewport" content="width=device-width">

上記のmeta要素をHTMLソース内に記述しておくと、スマートフォンで閲覧された場合でも勝手に縮小されることはなくなります。

つまり、ユーザに拡大操作を強いることのない、見やすい「スマートフォン用ページ」が作れます。

スマートフォン用サイトを1から作成する際には、HTML内に必ず上記の1行を記述するようにすると良いでしょう。

記述する場所は、HTMLソースのhead要素内(<head>タグと</head>タグの間)ならどこでも構いません。ぜひ試してみてください。

なお、XHTMLを使ってページを作っている場合は、以下のように記述します。

<meta name="viewport" content="width=device-width" />

次は、PC用に作ったサイトを大きく改修することなくスマートフォンでも見やすくする方法をご紹介いたします。

SHARE

All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。

この著者の他の記事を読む

他の著者をもっと見る

ご注意ください

  • 本記事の内容は、2011/11/08更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
  • 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
  • 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。

カテゴリーから探す

タグから探す

アフィリエイトをはじめよう!
無料新規パートナー登録
広告出稿を希望のかたはこちら
無料資料請求はこちら