この1,2年でモバイルといえば携帯サイトだったものがスマホサイトになってしまい、これからどうしようか？ どうすればいいのかと思っている初心者の人も多いと思うので少しまとめました。
まずは、実際にスマートフォンに触れて見る
百聞一見に如かずで実際に触ってみるとわかることが本当に多く、 例えば、タッチパネルの操作ではボタンは押した感触がない反面、フリックやスライド操作ができるので、直感的に操作できることが多くなっています。
Twitterのスマホサイトではアプリケーションのようにスムーズに使えるよう、タイムラインを下に引っ張るとリロードされたり、ツイートをスライドするとReplyやRetweetアイコンが出てきたりします。 一昔前はFlashを使って動かしたりしていたものがJavaScriptの処理が高速化したため、HTML、CSSと連携させてJavaScriptでインターフェイスを作ることが一般的になっています。
Web制作初心者には敷居が高い現実
先ほどのTwitterの事例のように、いつも使うようなサイトに使いやすいインターフェイスが提供され、ブログなどでもメニューボタンを押すとメニューが伸びてきたり、次のページヘ移動する際、更新されるのではなくスライドして次のページに進むようなギミックがあったりと、気にしてみると初心者にはどうやって作っているのかわからないことが数多く出てくると思います。 技術的には少し前に話題になったWEB2.0といわれるものの中の技術が使われ、一昔前に使っていたテーブルレイアウトは姿を消し、HTML+CSSをベースに幅が変わっても対応できるリキッドレイアウトや新たに出てきたレスポンシブレイアウト（デザイン）と言われるようなレイアウト手法が主流になりつつあり、実際にユーザーやクライアントが要求してくるようなスマホサイトを作ろうとするとHTML(HTML5)やCSS(CSS3)そしてJavaScriptの習得が必要になってきます。
ではどうするか？
HTML5とCSS3、JavaScriptを習得してサイトを作ることが出来れば一番いいのですが、より手っ取り早くスマホサイトを作りたい場合には
- Webサイト作成ソフトを使う
- スマホに対応したブログやWebサイトサービスを使う
- プロに頼む
の3つの選択があります。
スマホサイトに対応したアプリケーションが増えてきたので、テンプレートをベースにコンテンツを作っていくような作り方をする際、効率的につくることができます。ただ、仕事を依頼されてデザインやコーディングを行う場合は、テンプレート上、表現の限界があるのでスライドショーは追加できるけれど、フリックで動作しない、ここのスペースには置けないといったことが出てくるので注意が必要です。 主なアプリケーション：BiNDやホームページビルダーなど
ブログやWebサイトサービスを使うとブログを編集するような感覚で比較的簡単にスマートフォンに対応させることができます。サービスを利用することでスマートフォン用に特別な編集をせずページを作成できるので初心者でも使いやすいと思います。主なサービスはJimdoやカラミーショップ(ECサイト向け)など
スマホサイトができたものの、iPhoneではちゃんと表示されるのにGalaxyでは崩れる、タブレットでは文字が小さく、レイアウトが広がって見辛い、画像がなんかぼやける。といったことがよく起こります。それに対応するにはネットで解決方法を探し、ない場合はトライアンドエラーを繰り返し、解決法を身につけていくほかありません。 時間がない場合、自分には難しすぎると感じた場合はプロに頼むという選択肢があることも念頭において、どのように作るかを考えて自分にあった選択肢を考えるといいと思います。
次回は具体的な作り方について書く予定です。