Webサイトをマルチデバイス化しよう

今回、WordPressのテンプレを作るときに気にしたのが「スマートフォン対応はどうするの?」ということでした。
結局ブログの構造が単純なものだったので、CSS3 の Media Queries(メディアクエリ)というものを採用しています。

Media Queriesだけではなく完全にスマートフォンサイトを作成してしまう方法もあるので、一概にコレだ!とは言い切れません。どの方法もメリット・デメリットがありますので、どの方法がいいかはサイトに合わせて選んでください。

以下、まとめです。

1.PC用とは別にスマートフォンサイトを作成する

PCサイトにアクセスしたときにユーザーエージェントを判定してスマートフォンサイトにリダイレクトさせる方法をとります。※.htaccessで振り分けます

例)iPod/iPhone/iPad、Androidの場合は /sp にジャンプ!

RewriteEngine On

# iPod
RewriteCond %{HTTP_USER_AGENT} iPod
RewriteRule ^$ /sp/ [R]

# iPhone
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule ^$ /sp/ [R]

# iPad
RewriteCond %{HTTP_USER_AGENT} iPad
RewriteRule ^$ /sp/ [R]

# Android
RewriteCond %{HTTP_USER_AGENT} Android
RewriteRule ^$ /sp/ [R]

この内容で.htaccessというファイルを作成します。
そしてリダイレクトをかけたいディレクトに配置すればOK!!
※.htaccessの配置に制限がないか事前に確認しておいてください。

2.ワンソースマルチユースにする

文字通りPC・スマートフォンで同じhtmlソースを使用する方法です。
PC、スマートフォンそれぞれ専用のCSSを適用させます。

CSSを振り分ける方法は主にJavaScript、PHP、MediaQueriesの3通りあります。
※ここでは分かりやすく、PCサイト用CSSは[pc.css]、スマートフォン用CSSは[mobile.css]としています。

Javascript:ユーザーエージェントで判別する。

 

PHP:ユーザーエージェントで判別する。

<?php
  $ua=$_SERVER['HTTP_USER_AGENT'];
  $browser = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
    if ($browser == true){
    $browser = 'sp';
  }
?>
<?php if($browser == 'sp'){ ?>
    
<?php }else{ ?>
    
<?php } ?>

MediaQueries:デバイス解像度で判別する。(CSSにそのまま記述する場合)

@media screen and (max-width: 480px) {
	.mobile {
		background: #fff;
	}
}

MediaQueries:デバイス解像度で判別する。(別ファイルで管理する場合)



で、結局のところどれが良いの?

時間がない時は別サイトにする、時間があるときはCSS振り分けで!
実際にどちらも試して感じたことですが…
PCサイトとコンテンツの内容を変えたいとかスマートフォンならではのデザインにしたいということなら、新規でスマートフォンサイトを作成した方が良いです。ですが、2つサイトを作ることになるので時間がかかります。また更新の際にはPCサイトとスマートフォンサイトどちらも手を加える必要があります。
反対にPCサイトとほぼ同じ内容とかレイアウトが単純なものならCSS振り分けで良いと思います。PCサイトでベースさえ作ってしまえば後はCSSをいじるだけ。ただし、運用は少コストでも初期設計をきちんとしておかないといけないので初期コストは高いです。

いろんなサイトを見てみるとスマートフォンサイトを作成するか、CSSを振り分けるか…バラバラです。
どちらを使うにしても最初の設計が肝心!どのデバイスを対応させるのかなどを後々揉めない様に考えておきたいです。

Trackback


まだコメントはありません

感想・質問等受付けております。

Leave a Comment




コメント