View Slide
事例から学ぶスマートフォンサイトの設計⼿法ビジネス・アーキテクツ伊原 ⼒也
Profile伊原 ⼒也ビジネス・アーキテクツ@magi1125mokuva
サイト＋アプリ約2ヶ⽉1⽉公開（アプリ準備中）bA+ピクセルグリッドサッポロビール
1. 全体の⽅針2. サイト構造3. 実装要件4. 設計とデザイン5. 実装と検証6. 公開と今後
1. 全体の⽅針
⽅針１⼿元にスマートフォンがあるときに⾒たいコンテンツをすぐに提供するスマートフォン⾒たいコンテンツすぐに提供
⽅針２スモールスタート、運用しながら改修スモールスタート運用後改修
選択集中
目標スマートフォン対応の作業プロセスの把握スマートフォンユーザーの直帰率低減・再訪率上昇
2. サイト構造
CM レシピ キャンペーン
コンテンツ選定のプロセス
20,000 Pages
必要なのはコンテンツ
ホームカテゴリトップコンテンツ
ホーム×カテゴリトップコンテンツ
ホーム○カテゴリトップコンテンツ
モバイルユーザーの⾏動流⼊と経路ビジネスへの貢献必要⼗分な調査と検討優先コンテンツの洗い出し
モバイルユーザーの⾏動外で：テレビCMを⾒た販売店で：商品を⾒た電⾞で：トレインチャンネルを⾒た新聞や雑誌で：広告を⾒たスーパーで：今晩のレシピを探している会社帰りに：今晩⾏くお店を探している
流⼊と経路キャンペーン応募要項ページメールマガジンレシピ詳細ページ「すき焼き レシピ」を検索キャンペーン応募要項ページ「⻨とホップ キャンペーン」を検索スペシャルサイト「⻨とホップ」を検索「サッポロビール」を検索流⼊ホームランディング
ホーム商品情報スペシャルサイト
ビジネスへの貢献売上アップへの貢献企業ブランディングの向上モバイルで⾒たときどのぐらいプラスに働くか
プラスになる？商品情報 レシピ キャンペーン売上アップブランディング？
ブランドとキャンペーンをコンパクトに伝えるモバイル時のCM
CM レシピ キャンペーン売上アップブランディングブランディング売上アップビジネスへの貢献
PC版へのリンクも用意
3. 実装要件
JQuery Templates＋αPC版HTMLスマートフォンHTMLテンプレートJavaScriptで要素を抽出
PC版を微調整Media QueriesJQuery Templates特設（Webアプリ）専用サイトCMS Plugin対応PhoneGapケータイ版を調整Web?PC版?別のHTML?最適化?最適化?コンテンツ流用?新規App StoreWeb流用 ケータイ版PC版別のHTML同じHTMLそこそこがんばるそこそこがんばるJS?CSSJSRunning AppRunning AppAppleValveat81SAPPORO BEERCouldYahoo!実装パターンAmerican Home
アメリカンホーム保険会社ベースはケータイ向けHTMLmeta viewportメリットローコスト軽量コンテキストの⼀致http://ahdr.jp
検討要素合わせ技もアリ設計とデザインの実現性実装の難易度パフォーマンス運用とメンテナンス
サッポロビールの対応端末メインターゲットiOS4.0以上iPhone3GSとiPhone4Retina Displayは未対応調整中Android2.2対象外端末iOS3.2以前、およびiPhone3Gは、可能な範囲で調整上記以外の端末や、JSオフの場合はPC版を表⽰
対応端末？数⼗種3種類画⾯サイズプラグインブラウザ設定ブラウザ端末OSバージョンFlashなしJSオフCookieオフJSオフCookieオフアクセシビリティ設定数⼗種類Safari, Opera Mini29機種（発売待ち含）iPhone 3G, 3GS, 4,iPadiOS2~4.2iOSAndroid1.6〜2.3Android※Windows Phone, BlackBerryのアクセスもアリ組み合わせで対応が大きく変わる
どう選ぶ？選定の⽅針現在のアクセスログ解析統計データから予想どの端末をターゲットにしたいかいつ決める？実装してわかることがある実装前にすべては決められないメインと対象外だけ先に決める
4. 設計とデザイン
⾒たいコンテンツをすぐに提供するコンテンツを主役にして、ユーザーインターフェイスを減らす「iPhoneらしいユーザーインターフェイス」をデザインする
実例
唯⼀のナビゲーションホームカテゴリトップコンテンツ
ホームCM、レシピ、キャンペーン新しい順に表⽰左右のフリックで切り替えタップするとコンテンツに移動（CMは即再⽣）
CM
レシピ
キャンペーン
「らしさ」がカギスマートフォンらしさナビゲーション要素を減らすラベルをシンプルにするiPhoneらしさ標準インターフェイスの踏襲⼀般的なインタラクション（フリックなど）コンテンツに集中迷わず使える
標準を知るiOS Human Interface Guidelineshttp://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf
標準を取り⼊れる
危険を伴うワークフロー設計 デザイン 実装検証実機だからわかること使用感、パフォーマンスコンテンツボリュームバグ、動作仕様想像は危険
設計設計キット実機でプロトタイピングデザイン実装UIセット実装ライブラリ標準ユーザーインターフェイス
プロトタイピング⼿法
PowerPoint / KeynoteMockApphttp://mockapp.com/Keynotopiahttp://keynotopia.com/Keynote Kung-fuhttp://keynotekungfu.com/
インターフェイスセット プロトタイプ 実機で確認
スライド間でリンク リンクを再現本物のように「動く」プロトタイプ
Demo Movie
FireworksFireworks toolkit for creatingiPhone UI mockupshttp://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/iPhone GUI as Rich Symbols forFireworkshttp://jcorrea.es/2008/08/07/iphone-gui-as-rich-symbols-for-fireworks/
複数の書き出し⽅法PDFの書き出し書き出し → Adobe PDFGoodReaderを使って読み込みHTMLの書き出し書き出し → HTMLと画像HTMLに meta viewport を追加Safariで表⽰
プロトタイピングツールhttp://coolcoding.com/2010/04/mockups/モックアップ作成サービス＆ソフトウェア 25選http://cacoo.com/
ペーパープロトタイピング3M ノート75mmx50mmiPhoneステンシルhttp://www.act2.com/products/i-stencil.html
注意iOS Human Interface Guidelines はネイティブアプリが前提Safariでは再現しづらいインターフェイスもアリ
どれを使う？実装で使うライブラリの確認実装担当との確認
5. 実装と検証
作ってこそわかることがある
作ってこそそういうものだと認識した上でプロジェクトを設計するライブラリで実装を早期スタートわかったことを設計とデザインにフィードバック妥当な範囲に収めることも必要要件とデザインと実装でバランスを取る検証は必ず実機で⾏うエミュレータは制作の補助のつもりで
アクセシビリティ実機でしか確認できないVoiceOverでページを読み上げてみるhttp://www.kaigian.co.jp/taka/vo/ホームをトリプルクリックにVoiceOverを割り当て
6. 公開と今後
Cフェーズ1公開調査分析・改修次フェーズへAPDCAPD
まとめ全体⽅針を常に意識いま作っているものが⽅針から外れていないかを確認しつつ制作する選択と集中＝モバイルファースト制約を意識しながらプロジェクトを進めると、自然と重要なものを選び取れる
今⽇からできる準備① スマートフォンを⼊⼿② 自分がどう使ってるか把握
ただいま⼈材を募集していますプロジェクトマネージャーマークアップデザインエンジニアアートディレクターグラフィックデザイナーインタラクションデザイナー
ありがとうございました
magi1125
62gerente
keithpitt
holman
searls
jrom
sugarenia
sonatard
smashingmag
colly
zakiyama
bluesmoon
hatefulcrawdad