ゼロからはじめるスマートフォン専用サイト（iPhone＆Android）の作り方を学べるサイト集めました

Category : HTML5サイトまとめ | 2011年10月13日

これからのWEB制作はPCサイトだけではなく、iphoneなどのスマートフォンやipadなどさまざまなデバイスでの閲覧を前提として作成しなければいけません。

iphoneサイトやAndroidサイトはHTML5やCSS3にかなり対応しているので簡単そうなイメージもありますが、縦画面、横画面など変化することを前提に構築しなければいけませんし、Androidは機種によって解像度が違う、機種によってCSSが適用されないという昔のモバイルサイトより大変なことがおきているようです。

またシミュレーターを使ったり、実機をたくさん揃えたり、レンタルしたりとPCサイトより手間な制作の時代に逆戻りですね・・。

友人に聞いたら現在は案件よってはiphoneのみ対応、iphoneとdocomoを対応、すべて対応などさまざまなようですね。まあこれは予算によるのかもしれませんね。

僕はまだ本格的なスマホサイトの仕事はしてないですがAUのインフォバーでCSSが効きにくいなど最新機種でもやっかいな状態らしいです。

PCサイトとスマホサイトの作り方（使い分け）としては下記のような作り方になるのかなと思っています。

PCサイトとスマホサイトを別で作成してユーザーエージェントで振り分け
WordPressなどCMSのプラグインで自動的にスマホ専用レイアウトとして表示
メディアクエリーの使い一つのHTMLで画面サイズによってCSSを振り分け
スマホでもPCサイトをそのままても違和感ないようなデザインをする

どのやり方も一長一短あるとおもうのでコンテンツの内容によって使い分けてる状態ですかね？

まだスマホ専用サイトは作ったことがなかったのでこれを機会に触ってみようとおもって初めてでも簡単に勉強のできるサイトを探してみました。

あとはデザインの際にインターフェイスのPSDがあると時間短縮ができますのでiPhoneやAndroidのPhotoshop用無料GUIキットもPhotoshopVipさんでたくさんありましたので載せました。

まずは通常サイトが作れるようになってからjQuery Mobileなども試してみようと思います。

まずはここから初心者向け(基礎知識や画面サイズについて）

スマートフォン向けサイトの作り方

http://www.u-ziq.com/blog/2011/01/post_61.html

スマートフォン向けサイトの画面サイズや画像関連をまとめてあります。スマートフォン独自の仕様 viewportについてのプロパティやiPhone向けSafariでのみ有効な各種設定が書かれています。最後にHTML5でのテンプレートもあるので参考になりました。

今から始めるiPhoneコーディング

http://html-coding.co.jp/knowhow/smtp/000138/
iphone専用ですが特徴やコーディング時の注意、HTML5とCSSの基本テンプレートが書かれているのでそちらを使ってすぐに試すことができそうです。

iPhoneとViewPortとXHTML Mobile DOCTYPEと.mobiドメイン

http://www.rcdtokyo.com/ucb/contents/i000865.php
iphoneの画面サイズについてViewPortと.mobiドメインについて触れています。PC用のサイトをそのままスマートフォンに表示するような仕様は、.mobiドメインではできないとのこと。メモしておこう。

iPhone向けサイト構築基礎文法最速マスター

http://designblog.ecstudio.jp/htmlcss/iphone-master.html
viewportは「表示領域」やiphoneの縦画面、横画面について書かれています。PCサイトと違ってiphoneなどはこの縦横での調整がやっかいそうですよね・・。

iPhone Android など、スマートフォン向けhtmlコーディング/CSS

http://tech.hi-works.com/webcreative/markup/389
こちらもviewportでの画面調整についてまとめています。表示調整に関する注意点などがあるので参考にさせていただきます。

1時間で携帯サイトをスマートフォン対応にする方法

http://labs.gree.jp/blog/2011/04/3282/
既存の携帯サイトをスマートフォンに最適化する方法のチュートリアルがあります。８つのステップでわかりやすく紹介されていました。

iphone対応サイト制作まとめ

http://www.ame-nochi-hare.com/2010/03/08/iphone-site-build/
まず知りたいという画面サイズやiphoneUIについてやよくつかいそうな記述がまとまっていました。

つまづきがちなiPhoneコーディングのTips（JS多め）

http://c-brains.jp/blog/wsg/11/09/27-205656.php
実際のトラブルというかバグ的な部分を紹介してくれているので僕も作成の際は気をつけようとおもいます。

実践！iPhone＆Androidサイト制作ガイド

http://ascii.jp/elem/000/000/543/543575/
iPhoneやAndroidサイト制作の基礎から実践的なテクニックなど更新されています。（2011/09/28段階で第10回）

ASCII.jpさんの連載サイト。PCサイト制作のノウハウを生かして作るスマートフォン（iPhone/Android）対応サイト制作の基礎知識から実践的なテクニックまで解説しています。PCサイト作っている人でしたらこれだけでかなりのことができそうです。

各回の内容を簡単にまとめてみました。

第1回スマートフォン対応サイトの作り方、教えます。

http://ascii.jp/elem/000/000/533/533011/
スマホサイト制作の基礎知識や参考サイトの紹介、複数のスマホサイトの対応方法の紹介などが載っているので初めての場合はまずはこちらから見た方が良いなと思いました。企業提案の際の資料作りにも便利かもしれません。

第2回作って学ぶスマートフォン対応サイトの基本

http://ascii.jp/elem/000/000/538/538092/
WEBサーバーを立てるという項目で敷居が高く感じしてしまう人もいると思いますが、レンタルサーバーでもできるので初心者はXAMPPなど無理にしないでも良いと思います。まずは基本制作編としてベースのHTMLの作成とViewportの変更、確認用シミュレーターの使い方（Macのみ）が載っています。これで開発環境は万全。

第3回サイト制作の前に知りたいiPhone/Androidの仕様

http://ascii.jp/elem/000/000/545/545325/
iPhone/Androidの仕様がまとめられています。一通りまとまっていますので便利です。ただ機種がどんどんでてくるスマホ市場なので常にチェックする必要はあります。

第4回スマートフォン対応サイトを設計するときのノウハウ

http://ascii.jp/elem/000/000/547/547283/
サイト設計ややUIの考え方やスマホならでは構成のポイントなどわかりやすく解説されています。PCサイトしか作ってない人は是非読むとよい記事でした。

第5回スマートフォンサイトをデザインする7つのポイント

http://ascii.jp/elem/000/000/549/549206/
その名の通り7つのポイントが紹介されています。PCサイト作っている人には内容的には簡単なことなのでスマホサイトの特徴を知るという意味で勉強になります。

第6回実例でわかる！スマートフォンサイトの画面設計

http://ascii.jp/elem/000/000/553/553148/
実際のサイトを題材として制作の手順を紹介されています。まずはサイトマップが画面構成など。PCサイト同様このステップは重要だと思います。

第7回 HTML5/CSS3で作るスマートフォンサイトの基本

http://ascii.jp/elem/000/000/555/555233/
デザインする際のPhotoshopのGUIを使ってデザインをしてコーディングの流れを紹介している記事でイメージがわかりやすかったです。

第8回 JavaScriptで振り分けてスマホサイト完成！

http://ascii.jp/elem/000/000/557/557746/
電話番号や地図の設定、ホームアイコンの作成とスマートフォンとPCの振り分けをJavaScriptで行っています。ユーザーエージェントの設定は自分では作成しきれないのでこちらを利用させてもらおうと思います。

第9回 CSS＋jQueryでクロスデバイスサイトを作ろう

http://ascii.jp/elem/000/000/561/561127/
メディアクエリーを使ってクロスデバイスサイトを作っています。こちらは今度実際に試して記事にしてみたい内容です。

第10回 jQueryでiPhone風スライドパネルを作ろう

http://ascii.jp/elem/000/000/567/567729/
jQueryを使用してフリックなどを行うチュートリアルです。こちらも興味があったので今度試してみようと思います。

iphoneやAndroidのPhotoshop無料GUIキット

デザイン作成の際のGUI部分のPSDをダウンロードできるサイトです。PhotoshopVipさんのサイトがとてもわかりやすいのでiphoneやAndroidのPhotoshop無料GUIキットが紹介されているページをまとめました。

Customizing web forms with CSS3 and WebKit

http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit
スマホサイトを結構作っている知人から教えてもらいました。WebKit用ですがiphoneサイトを作るのには便利そうです。

jQuery Mobile

jQuery Mobileについては今度使い方などの記事にしますがまずは基本が勉強できるサイトを集めました。

いまから始める、jQuery Mobileの基本

http://ascii.jp/elem/000/000/607/607366/
jQuery Mobileの基本的な使い方からよく使いそうなサンプルを紹介しています。（2011/09/28段階で第7回）

各回の内容はこのようになっていました。

これは便利かもしれません

スマートフォンサイト用に、フリック・スワイプ対応が簡単に出来るjQueryプラグインいろいろ

http://blog.verygoodtown.com/2011/06/jquery-touchwipe-iphone-ipad-library/

スマートフォンサイトを作る時に便利なフリックが実装できるjQueryプラグイン7選

http://webdrawer.net/javascript/flickjs.html

やっぱりiphoneといえばフリックやスワイプ。Javascriptですがあれゼロから書くのはよくわかりませんよね。jQueryプラグインがたくさんでているようです。こちらのサイトにまとめられていたので今度試してみようとおもいます。

おまけ

サイバーエージェント公式クリエイターズブログ 1 pixel　HTML5 Web Applicationのつくりかた

http://ameblo.jp/ca-1pixel/entry-11009598050.html
内容は難しいですがこんなこともできるようになってくるんですね。

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

http://www.html5-memo.com/design/iphonesite/

以前のエントリーでスマートフォンサイトを集めました。どんなサイトがあるか調べる際にいつも使っているサイトです。

まずはここから初心者向け(基礎知識や画面サイズについて）

スマートフォン向けサイトの作り方

今から始めるiPhoneコーディング

iPhoneとViewPortとXHTML Mobile DOCTYPEと.mobiドメイン

iPhone向けサイト構築 基礎文法最速マスター

iPhone Android など、スマートフォン向けhtmlコーディング/CSS

1時間で携帯サイトをスマートフォン対応にする方法

iphone対応サイト制作まとめ

つまづきがちなiPhoneコーディングのTips（JS多め）

実践！iPhone＆Androidサイト制作ガイド

第1回 スマートフォン対応サイトの作り方、教えます。

第2回 作って学ぶスマートフォン対応サイトの基本

第3回 サイト制作の前に知りたいiPhone/Androidの仕様

第4回 スマートフォン対応サイトを設計するときのノウハウ

第5回 スマートフォンサイトをデザインする7つのポイント

第6回 実例でわかる！スマートフォンサイトの画面設計