ホームページ作成/携帯・スマートフォンサイト作成入門

スマホ対応サイトの作り方と6つの注意点(5ページ目)

ホームページをスマホ対応にする方法として、サイト制作前に確認しておきたいポイントや、スマホ用ブラウザの仕様による注意点などを簡単に解説。スマホサイトに特殊な作り方は必要なく、HTML+CSSはPCサイトとほぼ同じ書き方で作成できます。画面の小さなスマートフォンに適したデザインで、モバイル対応Webサイトを作ってみて下さい。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

PC用サイトとスマホ用サイトを自動で振り分ける方法

既存のPC用サイトとは別にスマホ用サイトを用意する場合は、サブドメインを使って分離すると分かりやすいでしょう。例えばPC用サイトのURLが https://www.example.com/ なら、スマホ用サイトは https://m.example.com/ で公開するなどです。

その際、「スマホを使ってPC用サイトにアクセスされた場合」には、自動的にスマホ用サイトへ転送させたいこともあります。その場合には、アクセス者の環境に応じて適切なサイトへリダイレクトする方法が使えます。詳しくは、記事「PC版とスマートフォン版サイトを自動振り分けする方法」をご参照下さい。
 
スマホ用サイトが用意されていても、望めばPC用サイトを閲覧することもできると便利

スマホ用サイトが用意されていても、望めばPC用サイトを閲覧することもできると便利


ただし、スマホ利用者でもPCサイト側を閲覧したいユーザも居るでしょうから、強制的にスマホサイトへ転送するだけではなく、PCサイトを見たいユーザには転送しない仕組みも用意しておけると望ましいでしょう。その方法も上記の記事でご紹介しています。

 

link要素を使ったアノテーション・正規化の書き方

PC用サイトとスマホ用サイトの2つを用意した場合は、それぞれの関連を示す「アノテーション」と呼ばれる書き方を使っておきましょう。HTMLソースにこの記述を加えておくと、PC用とスマホ用とで同じ内容の2ページが別々に検索サイトに登録されてしまうのを防げます。

PC版ページから、モバイル版ページの存在を示す書き方
例えば、PC用ページのHTML内(head要素内)に以下のように記述しておくと、「このページのモバイル版」の場所を示すことができます。
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://mobile.example.com/page1.html" />
上記の場合は、
  • ref属性値: 現在表示しているWebページの別バージョン(alternate)として、
  • media属性値: 画面の横幅が640px以下向けのページが、
  • href属性値: https://mobile.example.com/page1.html に用意されている
……ということを示します。画面の横幅は「640px」でなくても自由に設定できます。

モバイル版ページから、オリジナル版(PC版)ページの存在を示す書き方
また、上記のように記述した場合は、モバイル用WebページのHTML内(head要素内)には以下のように記述します。
<link rel="canonical" href="https://www.example.com/page1.html" />
上記の場合は、
  • rel属性値:現在表示しているページのオリジナル版(canonical)は、
  • href属性値:https://www.example.com/page1.html ページである
……ということを示します。

※これらの記述には、必ず「今表示されているページに対応するページのURL」を指定します。面倒だからとトップページのURLを書いてはいけません。PCサイト内とスマホサイト内の各ページは、1対1で対応するように作る必要があります。このアノテーションの書き方については、Google Developersサイト内の解説にも詳しい情報がありますのでご参照下さい。

 

スマホ用サイトを作る際の注意点

今回は、スマホやタブレットなどのモバイル端末に対応したWebサイトを作成する際の注意点などを簡単にご紹介いたしました。昨今のスマホ普及度から考えると、もはや小型のモバイル端末を無視してのWebサイト運営はできないと言っても過言ではないでしょう。ぜひ、スマホにも対応したWebサイトを作ってみて下さい。

【関連記事】
【編集部おすすめの購入サイト】
Amazon でホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 3
  • 4
  • 5
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます