What’s NEW

スマホ用サイトとレスポンシブサイト

更新日:2014/06/10

最近はスマホやタブレット対応のサイトも増えましたね。制作する側にとっても、もはや標準で考えなくてはならなくなっている状況です。
スマホ対応でサイトを作るのにはPCとは別に専用に作る方法と、CSSでデバイスのスクリーンサイズによって見え方を変えるレスポンシブという方法があります。どちらも一長一短あり、どちらが良いかはサイトの内容や目的によって変わってきます。

湯宿・草菴スマホ用サイト http://www.yuyado-souan.jp/sp/
(PCでも閲覧できますが、横広がりになります)
こちらはPCとは別に作成したスマホ専用サイトです。本サイトがすでにできていたのと、ページ数や情報が多いので、内容を絞って専用サイトを別に作成しました。スマホで通常のPC用アドレスにアクセスすると、自動でスマホサイトに飛ぶよう振り分けの設定がしてあります。もちろん、常にPC用サイトにもアクセスできます。

オレゴン外語スクール http://oregon-english.com
こちらはレスポンシブでPC、スマホ、タブレット対応になっています。メディアクエリでブレイクポイントを2箇所、所々ミニタブレット用に3箇所設定しています。PCで見るときに、ブラウザウインドゥの右下をつかんでウインドゥサイズを縮めて見るとレイアウトが変わるのがわかります。
またトップのイメージ画像はスマホの場合、そのままでは小さく見えてしまうのでjQuery-Switchを使ってイメージをスイッチさせています。レスポンシブでサイトを作成する場合、グリッドで分けられるようなデザインにしないといけないのですが、こうすることでデザインに変化を持たせることもできます。

作る手間としてはどちらも同じくらい、PCのみのサイトと比べると3倍くらい(?)大変かな。でも現状と先のことを考えれば、ユーザーにとって見やすいサイトを作ることは最重要だと思いますね。