事例から学ぶスマートフォンサイトの設計⼿法

事例から学ぶスマートフォンサイトの設計⼿法ビジネス・アーキテクツ伊原⼒也

Profile 伊原⼒也ビジネス・アーキテクツ @magi1125 mokuva

サイト＋アプリ約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 Queries JQuery Templates 特設（Webアプリ）専用サイト CMS Plugin対応 PhoneGap
ケータイ版を調整 Web? PC版? 別のHTML? 最適化? 最適化? コンテンツ流用? 新規 App Store Web 流用ケータイ版 PC版別のHTML 同じHTML そこそこがんばるそこそこがんばる JS? CSS JS Running App Running App Apple Valveat81 SAPPORO BEER Could Yahoo! 実装パターン American Home

アメリカンホーム保険会社ベースはケータイ向けHTML meta viewport メリットローコスト軽量コンテキストの⼀致
http://ahdr.jp

検討要素合わせ技もアリ設計とデザインの実現性実装の難易度パフォーマンス運用とメンテナンス

サッポロビールの対応端末メインターゲット iOS4.0以上 iPhone3GSとiPhone4 Retina Displayは未対応調整中 Android2.2 対象外端末 iOS3.2以前、およびiPhone3Gは、可能な範囲で調整
上記以外の端末や、JSオフの場合はPC版を表⽰

対応端末？数⼗種 3種類画⾯サイズプラグインブラウザ設定ブラウザ端末 OSバージョン Flash
なし JSオフ Cookieオフ JSオフ Cookieオフアクセシビリティ設定数⼗種類 Safari, Opera Mini 29機種（発売待ち含） iPhone 3G, 3GS, 4, iPad iOS2~4.2 iOS Android1.6〜2.3 Android ※Windows Phone, BlackBerryのアクセスもアリ組み合わせで対応が大きく変わる

どう選ぶ？選定の⽅針現在のアクセスログ解析統計データから予想どの端末をターゲットにしたいかいつ決める？実装してわかることがある実装前にすべては決められないメインと対象外だけ先に決める

選択集中

4. 設計とデザイン

⾒たいコンテンツをすぐに提供するコンテンツを主役にして、ユーザーインターフェイスを減らす「iPhoneらしいユーザーインターフェイス」をデザインする

実例

唯⼀のナビゲーションホームカテゴリトップコンテンツ

ホーム CM、レシピ、キャンペーン新しい順に表⽰左右のフリックで切り替えタップするとコンテンツに移動（CMは即再⽣）

レシピ

キャンペーン

「らしさ」がカギスマートフォンらしさナビゲーション要素を減らすラベルをシンプルにする iPhoneらしさ標準インターフェイスの踏襲⼀般的なインタラクション（フリックなど）コンテンツに集中迷わず使える

標準を知る iOS Human Interface Guidelines http://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf

標準を取り⼊れる

危険を伴うワークフロー設計デザイン実装検証実機だからわかること使用感、パフォーマンスコンテンツボリュームバグ、動作仕様
想像は危険

設計設計キット実機でプロトタイピングデザイン実装 UI セット実装
ライブラリ標準ユーザーインターフェイス

プロトタイピング⼿法

PowerPoint / Keynote MockApp http://mockapp.com/ Keynotopia http://keynotopia.com/ Keynote Kung-fu http://keynotekungfu.com/

インターフェイスセットプロトタイプ実機で確認

スライド間でリンクリンクを再現本物のように「動く」プロトタイプ

Demo Movie

Fireworks Fireworks toolkit for creating iPhone UI mockups http://blog.metaspark.com/2009/02/fireworks- toolkit-for-creating-iphone-ui-mockups/
iPhone GUI as Rich Symbols for Fireworks http://jcorrea.es/2008/08/07/iphone-gui-as- rich-symbols-for-fireworks/

複数の書き出し⽅法 PDFの書き出し書き出し → Adobe PDF GoodReaderを使って読み込み HTMLの書き出し書き出し →
HTMLと画像 HTMLに meta viewport を追加 Safariで表⽰

プロトタイピングツール http://coolcoding.com/2010/04/mockups/ モックアップ作成サービス＆ソフトウェア 25選 http://cacoo.com/

ペーパープロトタイピング 3M <ポスト・イット>ノート 75mmx50mm iPhoneステンシル 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公開調査分析・改修次フェーズへ A P D C A P
D

まとめ全体⽅針を常に意識いま作っているものが⽅針から外れていないかを確認しつつ制作する選択と集中＝モバイルファースト制約を意識しながらプロジェクトを進めると、自然と重要なものを選び取れる

今⽇からできる準備 ① スマートフォンを⼊⼿ ② 自分がどう使ってるか把握

ただいま⼈材を募集していますプロジェクトマネージャーマークアップデザインエンジニアアートディレクターグラフィックデザイナーインタラクションデザイナー

ありがとうございました

事例から学ぶスマートフォンサイトの設計⼿法

事例から学ぶスマートフォンサイトの設計⼿法

More Decks by Rikiya Ihara

Featured

Transcript