はじめてのスマートフォンサイト制作

iPhoneが日本で発売された2008年から3年————。あっという間に一般に広がり、各キャリアもスマホ販売をメインに移行しつつある昨今において、Webページのスマホ対応も急務になってきた感があります。そんな流れの中、私もスマホサイトを制作することになったので、「スマホサイトって普通のPCサイトとなんか違うん？」ってのを調べてみることにします。

1.スマートフォンを用意する

まずはじめに用意するものとして挙げるのは「スマートフォン」です。制作自体はPCでやるし、表示確認もPCでだいたいできますが、やっぱり実機で確認しないと使用感覚が分かりませんよね！スマホ自体の情報はこちら↓が参考になりそう。

そもそもの話として、私、スマホ持ってなかったんです。いわゆる普通の携帯電話しか持ってませんでした。しかし、スマホ対応サイトを制作するにあたってやはり実機が必要！ということで買いました（正確には買ってもらいました）。スマホ対応サイトを作る人がスマホ触った事無いとかお話しになりませんしね(；^ω^)なので制作の打ち合わせまでにひたすらスマホをいじりまくって、ユーザーがどんな使い方をするのか、スマホで見る各Webサイトの使用感などを研究します。

2.エミュレータを手に入れる

スマホ実機で確認するとは言っても、やっぱり作業中の細かい表示確認はPC上でやりますよね。ってことでその環境を整えます。

Mobilizer | Springbox

iOS、Android、Blackberry、webOSのデバイスの確認ができる。Mac／Win両方に対応したAdobe AIR製のフリーウェア。

3.基礎を調べる

私ははじめての技術を導入する際は、手元に参考書等を持ってやりたい人なので、スマホサイト制作に関する基礎などを調べるのに本「iPhone & Android スマートフォンサイト制作の教科書（MdN）」を買いました。これは基本的な知識から実制作の技術的なことまで、私みたいにはじめてスマホサイトを作る人にとってはかなり重宝する本ですので、超オススメです！

知識収集ならWebでいいべ。って人には、この辺↓のサイトがなんだか参考になりそうです。

4.デザインを知る

iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design – かちびと.net

iphoneやスマートフォン専用サイトのデザイン作成の参考にするまとめサイトをまとめました[11サイト＋おまけ6] | HTML5でサイトをつくろう

iPhone／スマートフォン ギャラリーサイトまとめ | アキバデザイン事務所

Photoshop VIP ☞ 保存版、iPhone等のモバイルGUIデザイン作成用Photoshop用PSDファイル60個まとめ

スマホサーチ！

スマホに対応したサイトを検索できる検索ツール。スマホサイトの調査に役立ちそう！

5.構築する

iPhoneもAndroidも他のスマホも搭載されている初期ブラウザがHTML5とCSS3に対応しているということから、スマホサイトの構築にはHTML5+CSS3が使われていることが多いようです。IEのこととか気にしなくていいんですものね！これでやっと気兼ねなくHTML5+CSS3を使える！と喜び勇んでHTML5を使っているWeb屋の皆さんの顔が目に浮かぶようですw

スマートフォン向けサイトの作り方｜ユージック

スマートフォン独自仕様「viewport」について詳しく書いてあります。

CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

Media Queriesとはなんぞや？から分かりやすく解説されてます。

【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 – CSS HappyLife

ソースファイルの基礎セットみたいなテンプレートみたいなもの。はじめてのコーディングの際はお勉強になりそう。

jQueryMobileを使ってのスマートフォンサイトの構築メモ at HouseTect

スマホサイトを構築して行くにあたって必須になりそうなTipsもまとめてあります。

6.javascriptを使う

スマホでは従来の携帯電話と違ってjavascriptが使えます。flashはiPhoneが対応してないため、動きを付けたいときはjavascriptが使えます。PCサイトでは「jQuery」や「Prototype」などのフレームワークが主流になってますが、スマホでJSフレームワークといえば「jQuery Mobile」が主流でしょうか！PCでjQueryを使ってた流れから入りやすい気がします。(個人的に)

jQuery Mobile

本家サイト。

jQuery Mobile 1.0b1 日本語リファレンス

本家リファレンスの日本語訳版。

jQuery Mobile Gallery

jQuery Mobileを使ったサイトを集めたギャラリーサイト。参考になりそう♪

jQuery mobileに関する役立ちそうなまとめ

swipejs

何かのプラグインとかではなくこれ単独で使えます。スマホでスムーズなスワイプエフェクトを実装してくれるjavascript。

FlexSlider

ウィンドウサイズに合わせて自動で大きさを調整してくれるjQueryスライダー。スマホでもタブレットでも、もちろんPCでも！

参考

jQuery Mobileのプラグインも一緒にまとめようと思ったのですが、長くなりそうなのでまた今度！

, , , , , , , ,

コメントを残す

キャプチャ画像
画像のリフレッシュ
*

WP-SpamFree by Pole Position Marketing