Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

サイト＋アプリ 約2ヶ⽉ 1⽉公開 （アプリ準備中） bA+ ピクセルグリッド サッポロビール

Slide 5

Slide 5 text

1. 全体の⽅針 2. サイト構造 3. 実装要件 4. 設計とデザイン 5. 実装と検証 6. 公開と今後

Slide 6

Slide 6 text

1. 全体の⽅針

Slide 7

Slide 7 text

⽅針１ ⼿元にスマートフォンがあるときに ⾒たいコンテンツをすぐに提供する スマート フォン ⾒たい コンテンツ すぐに提供

Slide 8

Slide 8 text

⽅針２ スモールスタート、運用しながら改修 スモール スタート 運用後 改修

Slide 9

Slide 9 text

選択 集中

Slide 10

Slide 10 text

目標 スマートフォン対応の 作業プロセスの把握 スマートフォンユーザーの 直帰率低減・再訪率上昇

Slide 11

Slide 11 text

2. サイト構造

Slide 12

Slide 12 text

CM レシピ キャンペーン

Slide 13

Slide 13 text

コンテンツ選定のプロセス

Slide 14

Slide 14 text

20,000 Pages

Slide 15

Slide 15 text

必要なのはコンテンツ

Slide 16

Slide 16 text

ホーム カテゴリトップ コンテンツ

Slide 17

Slide 17 text

ホーム カテゴリトップ コンテンツ

Slide 18

Slide 18 text

ホーム × カテゴリトップ コンテンツ

Slide 19

Slide 19 text

ホーム ○ カテゴリトップ コンテンツ

Slide 20

Slide 20 text

モバイル ユーザーの⾏動 流⼊と経路 ビジネス への貢献 必要⼗分な 調査と検討 優先コンテンツの洗い出し

Slide 21

Slide 21 text

モバイルユーザーの⾏動 外で：テレビCMを⾒た 販売店で：商品を⾒た 電⾞で：トレインチャンネルを⾒た 新聞や雑誌で：広告を⾒た スーパーで：今晩のレシピを探している 会社帰りに：今晩⾏くお店を探している

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

流⼊と経路 キャンペーン 応募要項ページ メールマガジン レシピ 詳細ページ 「すき焼き レシピ」を検索 キャンペーン 応募要項ページ 「⻨とホップ キャンペーン」を検索 スペシャルサイト 「⻨とホップ」を検索 「サッポロビール」を検索 流⼊ ホーム ランディング

Slide 24

Slide 24 text

ホーム 商品 情報 スペシャル サイト

Slide 25

Slide 25 text

ビジネスへの貢献 売上アップへの貢献 企業ブランディングの向上 モバイルで⾒たとき どのぐらいプラスに働くか

Slide 26

Slide 26 text

プラスになる？ 商品情報 レシピ キャンペーン 売上アップ ブランディング ？

Slide 27

Slide 27 text

ブランドとキャンペーンを コンパクトに伝える モバイル時のCM

Slide 28

Slide 28 text

CM レシピ キャンペーン 売上アップ ブランディング ブランディング 売上アップ ビジネスへの貢献

Slide 29

Slide 29 text

選択 集中

Slide 30

Slide 30 text

PC版へのリンクも用意

Slide 31

Slide 31 text

3. 実装要件

Slide 32

Slide 32 text

JQuery Templates＋α PC版 HTML スマートフォン HTML テンプレート JavaScriptで 要素を抽出

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

対応端末？ 数⼗種 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のアクセスもアリ 組み合わせで対応が大きく変わる

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

選択 集中

Slide 41

Slide 41 text

4. 設計とデザイン

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

実例

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

CM

Slide 47

Slide 47 text

レシピ

Slide 48

Slide 48 text

キャンペーン

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

標準を取り⼊れる

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

プロトタイピング⼿法

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Demo Movie

Slide 60

Slide 60 text

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/

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

ペーパープロトタイピング 3M <ポスト・イット>ノート 75mmx50mm iPhoneステンシル http://www.act2.com/products/i-stencil.html

Slide 65

Slide 65 text

注意 iOS Human Interface Guidelines は ネイティブアプリが前提 Safariでは再現しづらい インターフェイスもアリ

Slide 66

Slide 66 text

どれを使う？ 実装で使うライブラリの確認 実装担当との確認

Slide 67

Slide 67 text

選択 集中

Slide 68

Slide 68 text

5. 実装と検証

Slide 69

Slide 69 text

作ってこそ わかることがある

Slide 70

Slide 70 text

作ってこそ そういうものだと認識した上で プロジェクトを設計する ライブラリで実装を早期スタート わかったことを設計とデザインにフィードバック 妥当な範囲に収めることも必要 要件とデザインと実装でバランスを取る 検証は必ず実機で⾏う エミュレータは制作の補助のつもりで

Slide 71

Slide 71 text

アクセシビリティ 実機でしか確認できない VoiceOverで ページを読み上げてみる http://www.kaigian.co.jp/taka/vo/ ホームをトリプルクリック にVoiceOverを割り当て

Slide 72

Slide 72 text

選択 集中

Slide 73

Slide 73 text

6. 公開と今後

Slide 74

Slide 74 text

C フェーズ1公開 調査分析・改修 次フェーズへ A P D C A P D

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

ありがとうございました