この記事の所要時間: 約 10分29秒
先週、先々週と、「スマホウェブ開発」についてセミナーを行いました。
先々週は、「スマホアプリ開発者向け IDCFクラウド活用セミナー」で
先週は、テクノブラッド社で社内セミナーを行いました。
IDCFセミナーの様子
テクノブラッド社セミナーの様子(大原さん撮影 ありがとうございます!)
両方のセミナーで行った内容を、ブログにもまとめておきたいと思います。
ちなみに、セミナー資料をSlideShareにアップしたら
12,000PVを超えていました。ビックリです!
みなさんの参考に、少しでもなれば嬉しいです。
短期間でのスマホ向けWeb開発
View more presentations from Manabu Uekusa
ということで、セミナーで話した内容を紹介したいと思います。
市場状況
![rapid_spweb.003.png Rapid spweb 003](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.003.png)
フィーチャーフォンとスマートフォンの出荷比率の割合は、
スマートフォンが7割にもなってきました。
![rapid_spweb.004.png Rapid spweb 004](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.004.png)
タブレットも、倍々で増えてきています。
![rapid_spweb.005.png Rapid spweb 005](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.005.png)
スマートフォンのOSシェアは、iOSとAndroidをあわせると
8割にもなります。半分以上がiOSになっています。
![rapid_spweb.006.png Rapid spweb 006](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.006.png)
iOSであれば、種類を絞れますが
Androidは、色々な種類の端末が出てきています。
スマートフォンサイト
最近は、スマートフォンに対応したサイトを作るのが
多くなってきています。
![rapid_spweb.008.png Rapid spweb 008](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.008.png)
http://www.tokyo-skytree.jp/
スカイツリーの公式ページも、スマホ対応しています。
タップしやすく、分かりやすいメニューに絞っています。
![rapid_spweb.009.png Rapid spweb 009](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.009.png)
http://www.hikarie.jp/
Shibuya Hikarieも、同じデザインで統一して
分かりやすいメニューを、表示させています。
![rapid_spweb.010.png Rapid spweb 010](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.010.png)
http://www.softbank.co.jp/
ソフトバンクのホームページも同様に
デザインは統一していて、タップしやすいメニューにしています。
トップの画像は、フリックすると入替るようになっています。
![rapid_spweb.011.png Rapid spweb 011](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.011.png)
このように、スマートフォン対応のサイトを構築するには
情報を絞って、Simpleに作ることがこつです。
![rapid_spweb.012.png Rapid spweb 012](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.012.png)
また、文字は13文字以内にすると
分かりやすく、理解しやすくなります。
Yahoo!トピックスも、9〜13文字以内だそうです。
スマホWeb
![rapid_spweb.014.png Rapid spweb 014](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.014.png)
みなさんは、スマホでサービスをするとなると
アプリ開発というイメージが、強いのではないでしょうか?
最近では、スマホはウェブでも一通りのサービスが出来るようになりました。
アプリとウェブで、機能比較をしてみたいと思います。
![rapid_spweb.015.png Rapid spweb 015](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.015.png)
アプリだと、ダウンロードの必要が出てきます。ウェブにすれば
リンクから誘導すれば、アプリのインストールが不要で、すぐに使えます。
また、公開時の申請もウェブは必要ありません。
アプリにすると、公開前に申請が必要になります。
2〜4週間程度リリースするまでにかかってしまいます。
GPSは、アプリだけでなく、ウェブでもHTML5 APIを利用すれば
位置情報を取得することが、可能になりました。
写真と、Push通知を行う必要がある場合は、
アプリを作成する必要が出てきます。
HTML5のCacheManifestを使うとオフライン(圏外)でも
ウェブを表示することが可能になりました。
![rapid_spweb.016.png Rapid spweb 016](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.016.png)
最近では、アプリ内にウェブ画面を表示させる
「ハイブリッド型」のアプリもよく見るようになってきました。
コンテンツをウェブにすることで、オンラインで更新が出来るため
コンテンツの更新を行う度に、アプリ更新が不要になります。
選択肢として、アプリ開発だけでなく、ウェブでも開発できると
分かっているだけでも、開発スピードが速くなり便利になります。
解像度
![rapid_spweb.017.png Rapid spweb 017](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.017.png)
スマートフォン・タブレットの解像度を意識して
開発をする必要があります。iOSだけのウェブ開発であれば、
iPhone / iPadの2種類を考えれば良いので楽です。
アプリであれば、Retina対応で、それぞれ倍の解像度を
意識して作る必要があります。
![rapid_spweb.018.png Rapid spweb 018](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.018.png)
Android端末を対応させるとなると、多くの解像度に対応する必要が出てきます。
iPad XGA 1024 x 768 px
iPhone HVGA 320 x 480 px
HD 1280 x 720 px
ダブルVGA 960 x 640 px
QHD 960 x 540 px
フルワイドVGA++ 960 x 480 px
フルワイドVGA 854 x 480 px
ワイドVGA 800 x 480 px
Androidは8種類の、解像度があります^^
![rapid_spweb.019.png Rapid spweb 019](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.019.png)
解像度ごとに対応するか?非常に悩みます。
![rapid_spweb.020.png Rapid spweb 020](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.020.png)
ウェブであれば、レスポンシブ・ウェブ・デザインという手法があり
CSSを、解像度の違う端末で準備して入れ替える手法です。
![rapid_spweb.021.png Rapid spweb 021](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.021.png)
ただし、これもCSSを何種類か準備しないといけなく、大変です。
![rapid_spweb.022.png Rapid spweb 022](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.022.png)
jQueryMobileのような、スマホウェブのフレームワークを使うと
端末の解像度にあわせたUIを、作成してくれて便利です。
![rapid_spweb.023.png Rapid spweb 023](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.023.png)
jQueryMobileは3つのグレードに分けて、OS・端末のサポートをしてくれています。
jQueryMobile事例
![rapid_spweb.024.png Rapid spweb 024](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.024.png)
jQueryMobileは、様々なサービスで使われています。
Disney World
http://m.disneyworld.disney.go.com/
IKEA
http://m.ikea.com/se/sv/
Sony Vaio S
http://vaio-s.de/
Adobe HTML5 特設サイト
http://adobe-html5.jp/sp/
COOKPAD
http://cookpad.it/
Slideshare
http://www.slideshare.net/mobile
angrynerds
http://www.atlassian.com/en/an……nerds.html
CAPCOM FIGURE BUILDER
http://m-cfb.com/
![rapid_spweb.025.png Rapid spweb 025](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.025.png)
東京カレンダー
http://www.tokyo-calendar.tv/
excite 天気
http://weather.excite.co.jp/
じゃらん
http://www.jalan.net/smart/
丸善&ジュンク堂書店
http://www.junkudo.jp/
DODA
http://sp.doda.jp/
マイナビバイト
http://baito.mynavi.jp/sp/
SELECSONIC.com
http://www.selecsonic.com/sele……sonic/top/
こくちーず
http://kokucheese.com/s/
codiqaを使えば、ドラッグ&ドロップで
jQueryMobileを使ってスマホサイトを作れます。
HTMLを書かなくても、簡単に作ることが出来ます。
![rapid_spweb.026.png Rapid spweb 026](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.026.png)
http://codiqa.com/
こんな感じで、簡単にサイトを作ることができます。
Webアプリのこつ
![rapid_spweb.029.png Rapid spweb 029](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.029.png)
シンプルに作るのが、とても大事です。
スマホは画面が小さいため、余分なものは削る必要があります。
![rapid_spweb.030.png Rapid spweb 030](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.030.png)
メニューは、直感的に分かるように
ビジュアル重視にします。
![rapid_spweb.031.png Rapid spweb 031](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.031.png)
たとえば、iPhoneのホーム画面のような
アイコンを並べる、メニューが分かりやすく
ユーザーも慣れているため、使いやすいメニューになります。
![rapid_spweb.032.png Rapid spweb 032](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.032.png)
また、リストメニューにサムネイルを出すのも効果的です。
文字よりも、画像の方がすぐに判断が付きます。
![rapid_spweb.033.png Rapid spweb 033](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.033.png)
「ゲーミフィケーション」には、フィードバックという特徴があります。
ユーザーが操作を行った際には、すぐに分かるように工夫をします。
![rapid_spweb.034.png Rapid spweb 034](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.034.png)
たとえば、入力された件数を表示したり
入力した結果を、すぐに表示してフィードバックを行います。
![rapid_spweb.035.png Rapid spweb 035](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.035.png)
プレビュー画面も効果的で、同じデザインにすることで
プレビューも分かりやすい画面になります。
![rapid_spweb.036.png Rapid spweb 036](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.036.png)
アップルのガイドには、ボタンのサイズは
縦横44px以上というガイドがあります。
jQueryMobileを使えば、自動的に大きさも調整してくれます。
![rapid_spweb.037.png Rapid spweb 037](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.037.png)
リスト表示をする際には、3〜4行でまとめると
見やすいリストになります。dividerで分けるのも効果的です。
![rapid_spweb.038.png Rapid spweb 038](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.038.png)
スマホは、入力が大変なため
極力選択で操作できるようにUIを考えます。
一度入力した文字は、選択できるような工夫が必要です。
![rapid_spweb.039.png Rapid spweb 039](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.039.png)
jQueryMobileや、codiqaを利用する際には、
使えるコンポーネントに慣れておくと、作る際に楽になります。
どんなコンポーネントがあるのか、色々試しておくと
スマホウェブを作るときにも、工夫して作ることが出来ます。
タブレット
![rapid_spweb.041.png Rapid spweb 041](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.041.png)
タブレットもタップしやすい画面にする必要があります。
jQueryMobileを活用するのも、とても効果的です。
![rapid_spweb.042.png Rapid spweb 042](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.042.png)
左側に、Viewが出ることに慣れているため
メニューなどを、左側にリストで出すのも効果的です。
![rapid_spweb.043.png Rapid spweb 043](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.043.png)
事例で出した、「Mobile Perfect SP」は
ワンコイン(月額100円)で、簡単に
スマートフォン・タブレットを活用するサービスです。
BCP対策や、営業支援、イベント支援などのサービスを提供しています。
Mobile Perfect SP
https://www.softbanktech.jp/mo……perfectsp/
まとめ
![rapid_spweb.045.png Rapid spweb 045](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.045.png)
スマートフォン・タブレットサービスは、速く開発するのがコツです。
120% 完璧なものを出すよりも、速くリリースできる方が良く
jQueryMobileなどを利用して、開発速度を速くすると効果的です。
![rapid_spweb.046.png Rapid spweb 046](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.046.png)
どんなサービスなのか、目的をハッキリしておく必要があります。
ボタンを削るときも、目的がハッキリしていれば、
いるのか、いらないのか判断を付けることが出来ます。
![rapid_spweb.047.png Rapid spweb 047](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.047.png)
ユーザー視点で考えることは、非常に大事です。
サービスは、ユーザーに分かりやすいか?
UIはユーザー視点で見て、使いやすいか?など
必ず、ユーザーの立場になって、考える必要があります。
![rapid_spweb.048.png Rapid spweb 048](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.048.png)
スマホで作るウェブは、Simpleにする必要があります。
シンプルなUI・サービスは、使いやすく分かりやすいので
ボタンを付ける際にも、本当に必要なのか考えて追加します。
![rapid_spweb.049.png Rapid spweb 049](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.049.png)
繰り返し改善していくことは、とても大事なことです。
ウェブの利点は、即時反映が出来ることです。
繰り返し改善していくことで、UI・サービスもより良くなっていきます。
![rapid_spweb.050.png Rapid spweb 050](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.050.png)
完璧を目指すよりまず終わらせろ
- Done is better than perfect -
完璧を目指すよりも、終わらせてリリースすることが大事です。
いくら机上で考えていても、良いものは生まれません。
まず終わらせてリリース、その後、繰り返し改善するスタイルが大事です。
![rapid_spweb.051.png Rapid spweb 051](http://blog.bot.vc/wp-content/uploads/2012/06/rapid_spweb.051.png)
沢山チャレンジすることで、良いものが
沢山、作れるようになります。
みなさん一緒に、より良いサービスを作って行きましょう!
共に、沢山チャレンジしていきたいと思います。
今回は、ちょっと長くなりましたが
セミナーで話した内容を、ブログにまとめておきました。
まとめた内容を、実際に聞いてみたいなどあれば、
気軽に連絡して下さい♪ 時間にあわせて講演します〜☆