みなさま、こんにちは。
普段、All Aboutという情報サイトでウェブサイト制作について記事を連載している西村 文宏（ニシムラ フミヒロ）と申します。
今回は、スマートフォン（以下スマホ）用サイトの作り方の基礎についてご紹介しますので、お付き合いいただけると幸いです。
HTMLについて詳しく知りたいかたはこちら！
PC用サイトとスマホ用サイトの違い
スマホでは、PC用に作られたウェブページをそのまま閲覧できます。
そのため、PC用サイトがすでにある場合、スマホ専用サイトを新たに作る必要はないと考える人も多いでしょう。
しかし、スマホの画面はPCよりも小さいため、PC用ページをそのまま表示すると縮小表示になり、ユーザーは頻繁に拡大・縮小操作をしなければなりません。文字が小さく読みにくかったり、ボタンが押しづらかったりすると、ユーザーは離脱してしまう可能性もあります。
そのため、快適に閲覧してもらうためには、スマホ専用サイトを用意するほうが望ましいでしょう。
「スマホ用サイトを作るには特殊な環境やツールが必要では？」と不安になるかもしれませんが、安心してください。普段PC用サイトを作るために使っているツールや知識（HTMLやCSS等）をそのまま活用できます。
スマホ用ページ特有の問題点
スマホ用ページを作成する際、多くの初心者がつまずくポイントは、先ほどもお伝えしたとおり「勝手に縮小表示される」という点です。
スマホのブラウザは、PC用ページをそのまま縮小して表示する仕様になっています。スマホ画面の横幅はPCに比べてはるかに狭いため、デフォルトではページ全体を縮小して収めようとするのです。このため、たとえ「スマホ用に作ったページ」であっても、そのままでは縮小されてしまい、文字や画像が小さくなりすぎて見づらくなります。
スマホ用ブラウザが縮小表示してしまうのを回避する方法
この問題を解決するために、スマホに対して「実寸で表示して（縮小せずに表示して）欲しい」と伝える方法が用意されています。
<meta name="viewport" content="width=device-width">
この1行をHTMLソースのhead要素内（<head>タグと</head>タグの間）に記述することで、スマホに「このページはスマホ画面の横幅で表示してほしい」と伝えることができます。
これにより、縮小表示が防がれ、文字やボタンが適切なサイズで表示されるようになります。初心者でも簡単に導入できるので、ぜひ試してみてください。
PC用サイトのページをスマホでも見やすくする方法
「スマホ専用ページを作る余裕はないけれど、既存のPC用ページをスマホ対応させたい」と考える場合もあるでしょう。その場合、大幅な改修を避けつつ、最低限の手間でスマホでも見やすくする方法があります。
どれくらいまで横幅を狭めても大丈夫なのかを調べる
まずは、レイアウトが崩れないギリギリの狭さを調べましょう。
具体的には、PC上のブラウザでウェブページを表示し、レイアウトが崩れてしまう直前までブラウザのウィンドウ幅を少しずつ狭めてみてください。
最小横幅をmetaタグのviewportの値に指定する
仮に「640pxまで狭めても大丈夫！」だとわかったら、「画面の横幅が640pxだと仮定してレンダリング（描画）してから縮小する」ように、スマホ用ブラウザに指示を出します。そうすれば、縮小率を必要最小限に抑えられるため、自動縮小によって文字サイズが小さくなりすぎるのを防ぐことができます。
例えば、640pxの場合は以下のように記述します。
<meta name="viewport" content="width=640">
この設定により、スマホで表示する際の縮小率を抑え、文字や画像が小さくなりすぎるのを防ぐことができます。
固定幅レイアウトページをスマホ対応させる方法
もし固定幅で作られたPC用ページがある場合は、その横幅をそのままmetaタグに指定します。
例えば、横幅800px固定でページのレイアウトを作っている場合、以下のように記述します。
<meta name="viewport" content="width=800">
この設定により、ページがスマホでも適切に表示されるようになります。
このように、HTMLソースにたった１行のmeta要素を追記するだけで、PC用に作られたページを縮小されすぎることなくスマホで表示させられるようになります。
「スマホ専用ページを作る余力はないが、既存ページをスマホでも見やすく表示させたい」という場合には、ぜひ試してみてください。
たった1行で済むので、とてもお手軽でおすすめです。
スマホ対応は手軽に始められる！まずは一歩を踏み出そう
スマホ対応サイトを作る際は特別な知識やツールがなくても誰でも手軽に始められます。
まずは、metaタグの追加から試してみてください。少しずつ改善を重ねていくことで、より良いユーザー体験を提供できるようになります。
以上、今回はここまでです。
最後までお付き合いいただきまして、ありがとうございました。
ご注意ください
- 本記事の内容は、2024/12/05更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら