こんにちは、ブロググループの飯田 (@iishun) です。

2011 年はさらにスマートフォン市場の拡大が加速すると云われています。弊社でも 2010 年 10 月にライブドア全体のスマートフォン関連事業を推進していくスマートフォングループが設立されました。

が、各コンテンツのスマートフォンサイト・アプリは各グループのコンテンツ担当が運用するのでスマートフォン関連の知識は必須になります。

そこで今回は僕がここ最近実践しているスマートフォンに関する勉強法を、実際に使用した参考書籍と共に紹介してみます。これから「スマートフォンの事を勉強しなきゃ!」と思った人に役に立ってもらえればなと思います。

1. HTML5/CSS3 の特徴を知る


HTML5/CSS3 がスマートフォン用のマークアップ言語というわけじゃありませんが、スマートフォンのウェブサイト (Webkit 系) は HTML5/CSS3 の組み合わせで今のところ最適化できます。

当たり前ですが HTML5 と CSS3 が 2 つで 1 つではないので、それぞれ HTML5 と CSS3 の特徴を把握しておきましょう。「HTML5」や「CSS3」でググると無数に情報が出てきますが、その中から少なくとも、
  • HTML5/CSS3 でできること
  • API追加されたプロパティ
  • 変更されたプロパティ
  • 廃止になったプロパティ
ぐらいは「あ、たしか HTML5 ではそれ使えないよ」「そこはあの API 使ってみるとどうだろう?」という感じでサラッと答えられると格好いいですね。新しいプロパティは新たなインターフェースを提供できるチャンスなので、積極的に覚えておきたいところです。

HTML5 の仕様に関しては W3C の変更点を日本語訳サイトがあるのでそちらを読むと良いでしょう。
W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP

日本語訳だけだと実際の勘所は掴みにくいので、僕は以下の書籍を参考にしました。章立てで HTML5 の特徴と実際の記法が学べるのでディレクターも読んで損はありません。

徹底解説HTML5マークアップガイドブック徹底解説HTML5マークアップガイドブック
著者:羽田野太巳
販売元:秀和システム
(2010-02-27)
販売元:Amazon.co.jp
クチコミを見る

Webkit 系のブラウザなら大体のプロパティに対応していますが、HTML5 & CSS3 Support, Web Design Tools & Support ~ FindMeByIP ~ から HTML5/CSS3 の各プロパティ対応状況が確認できます。

他にも、ミツエーリンクスの矢倉氏が slideshare に HTML5 に関する概要や、新しく追加されたプロパティを掻い摘んでとても分かりやすくまとめた資料が共有されていますのでご紹介させていただきます。
HTML5, きちんと。

2. スマートフォンサイト・アプリの特徴を知る


スマートフォンのサイト・アプリではどんなインターフェースが主流なのかどうすれば実現できるのかぐらいは把握しておきたいところです。

2-a. インターフェースの主流

スマートフォンサイトの最大の特徴としては「タップ」「フリック」「ピンチ」 (ピンチが有効でない場合があります)。

この特徴を基準に、「タップしにくいからタップ領域 (リンク幅) を広める?」や「縦に長いサイトをフリックで見た際に、次にユーザが取りたい (取る) 行動は?」といった、どんなインターフェースを提供すれば良いかが見えてきます。

タップ指で画面を叩く。2 回叩くとダブルタップ。タップだと PC のクリックとほぼ同義。ダブルタップだと文字の拡大/縮小・メニューの表示など。
フリック指で画面を弾く (擦る)。PC のスクロールと同義。オブジェクトに指を置いてからフリックするとドラッグになる。
ピンチ2 本の指で画面を摘む/開く画面の拡大/縮小 (サイトによっては不可)

ガラケーのようにカーソルで操作するわけではないのでやや PC と直感的に似ていますが、ガラケー並に比較的小さい画面で操作するため、1 ページの情報量・縦スクロールの長さをバランス良くユーザの負担が少なくなるように検討する必要があります。

また、後述の競合調査の結果も踏まえて、独自のインターフェースにならないよう、コンテンツの特徴を鑑みて判断してください。

2-b. どうすれば実現できるか

自分の場合、書籍や口で読み聴きしても身体に身につきにくいので、自分で組むなり手を動かしてみました。実際にコーディングしてみることで実現方法を根本から理解し、実際の工数も把握することができます。

HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応
著者:谷拓樹
販売元:ラトルズ
(2010-11-24)
販売元:Amazon.co.jp
クチコミを見る

実際の表示検証は、Webkit 系のブラウザでユーザエージェントを切り替えるだけです。僕の場合は Safari でユーザエージェントを切り替えて検証しました。

[環境設定 > 詳細] の [メニューバーに"開発"メニューを表示] にチェックを入れます。
director_01

するとメニューバーに [開発] が表示されるので、[開発 > ユーザエージェント] から検証したいエージェントを選択すれば切り替わります。
director_02

Android の場合はエミュレータが Win・Mac 用両方あるので、Android SDK からエミュレータを取得して確認しています。当然ですが、最後は実機確認も行います。
Android SDK | Android Developers

アプリの場合だとウェブインターフェースとは異なる部分が多く、実現したいデザインによっては工数に大きな違いが発生し思わぬところで時間を取られるので、開発はせずともせめて「最低限ここまでは出来る」ぐらいは知っておきたいですね。

基礎からのiOS SDK基礎からのiOS SDK
著者:鶴薗 賢吾
販売元:ソフトバンククリエイティブ
(2010-10-09)
販売元:Amazon.co.jp
クチコミを見る

ディレクターが実際どこまで把握しておくべきかは難しいですが、開発の際はエンジニアとデザイナーと相談してワイヤーフレームを作成したほうが賢明です。

内容のエントリーがありますのでそちらも参考にしてみてください。

3. 他社のスマートフォン状況を知る


とにかく他社のスマートフォン最適化ページとアプリをチェックして競合調査を行います。といっても数が膨大なので、無理の無い調べ方としては、自分が担当しているコンテンツや関係のあるものにだけ絞って、徐々に範囲を広げていきます。

スマートフォン向けサイトの UI もまだまだ試行錯誤段階にあると思うので、自らノウハウを貯めつつ、事例や参考サイトをチェックしてはスマートフォンサイトの構築に反映していきましょう。

4. メーリングリストから知る


色々と IT 系ニュースから情報を集めるのも良いですが、数も膨大だしノイズが多かったりするので、特定のメーリングリストから情報を取得するのもオススメです。

全部の ML を追うのは無理なので、気になったトピックや自分が開発している部分のトピックが無いかを探して読むぐらいでいいと思います。

5. まとめ


iPad やAndroid の端末傾向を見ると、今後ガラケーと同じように端末やキャリアによって仕様が異なるケースが増えていきそうなので、しばらくは業界の動向から目が離せなさそうです。

ここまで大分簡潔にまとめましたが、ここしばらくはこんな感じでスマートフォンについてノウハウを貯めています。上記以外にも自分に合った勉強法があると思いますので、手段の一つとしていただければと思います。

ライブドアでは新しい領域にも積極的に取り組めるディレクターを募集しています。