先日、CSS Nite in NAGOYA ♭001（ふらっとわん）に参加してきました。そこで学んだ「スマホ向けサイトへのアプローチ方法」をご紹介します。
スマホ向けのサイトを作る時のアプローチ方法は、大きく分けて以下の３つに分けられます。
- アプリ
- 独自系
- 流用系
アプリ
スマホ向けサイトをアプリとして作った場合は、以下の様にデメリットが多いです。
- iPhone用とAndroid用の両方を作る必要があり、二度手間。
- Apple社の審査を受ける必要があり、リリースできる時期が読みにくい。（iPhoneの場合）
- 登録・販売手数料として30％引かれてしまう。（iPhoneの場合）
- Apple社の規定が急に変わることがあり、マーケットに登録したアプリが突然削除されてしまうことがある。（iPhoneの場合）
また一番のネックは所詮アプリはアプリでしかない、ということです。一度ダウンロードしても、スマホのホーム画面のいつも見る場所に自分の作ったアプリが置かれる確率は非常に低いといえます。
独自系
ここで言う独自系とは、PC向けサイトとは別にスマホ向けサイトを構築することを指しています。独自系には、
- ゼロからスマホ向けサイトを構築する
- jQueryMobileを使用する
の２パターンがあります。
jQueryMobileは、モバイルWebアプリケーションのフレームワークとして今、最も注目されています。わかりやすく言うと、サクっと簡単にスマホ向けサイトを作ることが出来る技術がjQueryMobileです。
便利な反面、見る人が見ればすぐに「あ、jQueryMobileで作ったサイトだな。」と分かるため、 人とは違ったこだわりのあるサイトを作りたい場合には向いていません。
流用系
ここで言う流用系とは、PC向けサイトをそのままスマホで表示させる方法を指しています。流用系にも２パターンあり、
- ほぼPCサイトのまま、微調整のみで表示させる
- レスポンシブWEBデザイン
レスポンシブWEBデザインとは、PC用サイト、スマホ向けサイト、と分けて作るのではなく、ウィンドウサイズに合わせて自動的に見やすく表示されるようにWEBサイトを構築する手法のことを言います。具体的には、ウィンドウの幅によって適用するCSSファイルを切り替えることで、どんな幅のブラウザでも対応出来るようにWEBサイトを構築することを言います。 ※レスポンシブデザインで作られた参考サイトはこちらをご覧下さい。
レスポンシブWEBデザインはスマホ対応に限らず、ブラウザの幅に依存しないユニバーサルデザインの観点からも、WEBサイト制作では取り入れるべき手法であると言えます。
まとめ
弊社のWEBサイトは、現段階ではスマホ対応はしていません。PC向けのサイトがそのままスマホでも表示されている状況です。
今回ご紹介したアプローチ方法の中では、jQueryMobileを使用するのが１番手軽でオススメといえます。自分でもjQueryMobileを使ってみて、お客様に提供出来るようにしたいと考えています。
