スマートフォンサイトについて

スマートフォンの普及から、スマートフォン向けサイトは無視できません。
これから、何かのサービス(ショッピングモールへの出店、ネット通販システム、ブログなど)を利用してサイトを作ろうとしている方は、スマートフォンサイトの対応がどこまでできるかをチェックして、無料、もしくは有料でスマートフォン向けサイトを作れるサービスを利用したほうがいいでしょう。
最近の良く知られているサービスは、PC、スマートフォン、携帯に対応できるところが多くなっているのではないでしょうか。

では、すでにPC用のサイトをもっている場合で、スマートフォンにも対応したいときはどうしたらいいでしょうか。
現時点で考えられる方法を、メリット・デメリットをあげて紹介します。

(1)PCサイトでスマホもタブレットも対応する

例えば、アップルのサイト
アップルは、PCサイト、スマホサイト、などと別々に作っておらず、スマホでもタブレットでもPCサイトと同じものが表示されます。
デザインは非常にシンプル。

これであれば、URLは一つだし、PC用とスマホ用で別々に更新作業をする必要もありません。非常に効率的です。

ですが、スマートフォンやタブレットで見た場合を考えてPC用も作るため、1ページに情報量が多く必要なサイトには向きません。
現状によっては、PCサイトをリニューアルする必要がでるでしょうし、その場合、構成やレイアウト・デザインにスマートフォンやタブレットで見た場合、というしばりが出てきます。

(2)PCサイトとは別にスマートフォン用サイトを作る

PCサイトとは別にスマートフォン用サイトを作ります。
この場合は、PCサイトとスマートフォンサイトのURLは異なります。
(一緒のURLで切り替えられる方法はあるようですが、ここでは別のURLであるものとして説明します)

スマートフォンサイト制作に、(1)のようなしばりはありません。
PCサイトとスマートフォンサイトでは、ターゲットや目的が違うこともあります。
「PCサイトを単純にスマートフォンサイトにしただけ」というサイトではなく、スマートフォンサイトのターゲットと目的をきちんと把握したうえで、最適なスマートフォンサイトを作ることが大切です。

デメリットは、PC用とスマホ用でそれぞれで更新しないといけないこと。
また、PCとスマホの切り替えや、後に説明するSEOも施す必要があります。

(3)レスポンシブ・ウェブデザイン

「レスポンシブ・ウェブデザイン」という方法があります。
検索すると、その方法で制作されたサイトを挙げたサイトがたくさん出てくるので、お時間があるときにでも検索してみてください。

私も一つサンプルとして作ってみました。
レスポンシブル・ウェブデザインのサンプル
Miraiynetのサイト

ブラウザの幅の変化によって、下のようにレイアウトが変わります。

レスポンシブ・ウェブデザイン

htmlファイルは一つですが、画面サイズに応じて、cssで表示を切り替えています。
今は、パソコンで見る人、タブレットで見る人、スマートフォンで見る人様々です。
見ている環境に合わせて、上記のように表示を切り替えることができるのが「レスポンシブ・ウェブデザイン」です。
htmlは一つなので、サイトの更新は楽ですよね。

もちろん、短所はあります。

htmlは一つですので、デザインに制約がかかったり、分量次第(特に画像)では読み込みに問題が出る場合があります。

また、あくまで画面に合わせて表示される、というだけなので、同じサイトとでもPCから見る人と、スマートフォンから見る人ではターゲットが違うとか、目的が違う、という場合は、PCとスマートフォンでそれぞれサイトを作った方がいいでしょう。

制作会社に依頼する場合ですが、htmlが一つだからPCとスマートフォンと別々に作るより安いだろう、と思ってはいけません。おそらく、同じくらい、もしくはそれ以上するかもしれません。
また、設計等に時間がかかるので、通常のサイトよりも制作に時間がかかるかもしれません。

スマートフォンのSEO

スマートフォンのSEOの考え方は、下記のページの「この話は、プラットフォーム別に提供されているソフトウェアで考えたらわかりやすいかもしれません。~」という箇所を読むとわかりやすいかと思います。

SEO for スマートフォン [1] Google のモバイルに対する考え方

で、具体的にどうすればいいかというと、
PCサイトのページに、それに対応するスマートフォンサイトがある場合、PCサイトの<head>から</head>の間に、

<link rel="alternate" media="only screen and (max-width: 640px)" href="対応するスマフォページのURL" />

と入れます。
そして、スマートフォンのサイトの<head>から</head>の間に

<link rel="canonical" href="対応するPCページのURL" />

と入れます。

参考サイト・書籍
レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法
htmlやcssがきちんとわかっている人向けです。
海外SEO情報ブログ
SEO関係はこのブログでお世話になっています。
技術的な話は難しいかと思いますが、最新情報が掲載されるので勉強になるブログです。