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

伊原 ⼒也

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

ここでコマーシャルです美しすぎる
書道家

SHARP AQUOS
46型液晶テレビI・O DATA
フルHD液晶タッチディスプレイ

Wacom Bamboo Pen&Touch

BUFFALO 外付けSSD

http://taikai.theshodo.com

IE9 大会

検索

http://itpro.nikkeibp.co.jp/article/COLUMN/20110126/356508/

さて本題ですサッポロビール
http://www.sapporobeer.jp

 サイト＋アプリ
 約2ヶ⽉ 1⽉公開（アプリ準備中）
 bA+

ピクセルグリッド

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

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

すぐに提供

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

運⽤後
改修

選択

集中

⽬標
 スマートフォン対応の作業プロセスの把握

 スマートフォンユーザーの直帰率低減・再訪率上昇

2. サイト構造CM

レシピキャンペーン

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

PagesPages

必要なのはコンテンツ

ホームカテゴリトップ

コンテンツ

ホームカテゴリトップ

コンテンツ

×

ホーム

カテゴリトップコンテンツ

○

ホーム

カテゴリトップ

コンテンツ

優先コンテンツの洗い出し

ビジネス
への貢献

流⼊と経路
モバイル
ユーザーの⾏動

優先コンテンツの洗い出し

流⼊と経路

必要⼗分な
調査と検討

モバイル
ユーザーの⾏動

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

流⼊と経路
流⼊ランディング「サッポロビール」を検索

ホーム「⻨とホップ」を検索スペシャルサイト「⻨とホップ キャンペーン」を検索

キャンペーン
応募要項ページ「すき焼き レシピ」を検索
メールマガジン

レシピ
詳細ページ
キャンペーン
応募要項ページ

ホーム

商品
情報

スペシャル
サイト

ビジネスへの貢献
 売上アップへの貢献
 企業ブランディングの向上

モバイルで⾒たときプラスに働く？

プラスになる？
商品情報

レシピ

キャンペーン？

ブランディング

売上アップ

モバイル時のCM

ブランドとキャンペーンをコンパクトに伝えるビジネスへの貢献
CM

ブランディング
売上アップ

レシピ

キャンペーンブランディング

売上アップ

選択

集中

PC版へのリンクも⽤意3. 実装要件

JQuery Templates＋α
JavaScriptで要素を抽出

PC版
HTML

スマートフォン

HTML

テンプレートPhoneGap
App Store

Running App

Web?

特設（Webアプリ）

Web

Running App
新規ケータイ版を調整

コンテンツ

American Home

流⽤?
流⽤

ケータイ版

そこそこ

PC版?

最適化?

PC版

同じHTML

がんばる

別のHTML?

Apple
CSS

JS?
JS

別のHTML実装
パターン

PC版を微調整

そこそこ

最適化?
がんばる

Media QueriesValveat81

JQuery Templates
SAPPORO BEER

CMS Plugin対応
Could

専⽤サイト
Yahoo!

アメリカンホーム
保険会社
http://ahdr.jp

 ベースはケータイ向けHTML meta viewport メリット ローコスト
 軽量
 コンテキストの⼀致

検討要素
設計とデザインの実現性
実装の難易度
パフォーマンス
運⽤とメンテナンス

⼿法の合わせ技もアリサッポロビールの対応端末
 メインターゲット
 iOS4.0以上
 iPhone3GSとiPhone4
 Retina Displayは未対応

 調整中

 Android2.2

 対象外端末 iOS3.2以前、およびiPhone3Gは、可能な範囲で調整
 上記以外の端末や、JSオフの場合はPC版を表⽰

対応端末？
※Windows Phone, BlackBerryのアクセスもアリiOS

Android

OSバージョン

iOS2~4.2

Android1.6〜2.3

端末

iPhone 3G, 3GS, 4,iPad

29機種（発売待ち含）

画⾯サイズ

3種類

数⼗種

ブラウザ

Safari, Opera Mini数⼗種類

ブラウザ設定JSオフ
Cookieオフ
アクセシビリティ設定

JSオフ
Cookieオフ

プラグイン

なし

Flash

組み合わせで対応が⼤きく変わる

どう選ぶ？
 選定の⽅針

 現在のアクセスログ解析
 統計データから予想
 どの端末をターゲットにしたいか いつ決める？

 実装してわかることがある 実装前にすべては決められない

メインと対象外だけ先に決める選択集中

4. 設計とデザイン

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

 「iPhoneらしいユーザーインターフェイス」をデザインする

実例

唯⼀のナビゲーション
ホーム
カテゴリトップコンテンツホーム CM、レシピ、キャンペーン

 新しい順に表⽰
 左右のフリックで切り替え

 タップするとコンテンツに移動（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/

インターフェイスセット

プロトタイプ

実機で確認

スライド間でリンクリンクを再現

本物のように「動く」プロトタイプ

Moviehttp://vimeo.com/13848914

Fireworks
 Fireworks toolkit for creatingiPhone UI mockups

 http://blog.metaspark.com/2009/02/fireworkstoolkit-for-creating-iphone-ui-mockups/

 iPhone GUI as Rich Symbols forFireworks

 http://jcorrea.es/2008/08/07/iphone-gui-asrich-symbols-for-fireworks/複数の書き出し⽅法
PDFの書き出し 書き出し → Adobe PDF
 GoodReaderを使って読み込みHTMLの書き出し

 書き出し → HTMLと画像
 meta viewport を追加
 Safariで表⽰

設計、デザイン、実装をつなぐ
ナイスなツールの詳細は

プロトタイピングツール
http://cacoo.com/

モックアップ作成サービス＆ソフトウェア 25選
http://coolcoding.com/2010/04/mockups/

ペーパープロトタイピング

3M <ポスト・イット>ノート
75mmx50mm

iPhoneステンシル
http://www.act2.com/products/i-stencil.html

注意 iOS Human Interface Guidelines はネイティブアプリが前提

 Safariでは再現しづらいインターフェイスもアリ

どれを使う？

 実装で使うライブラリの確認
 実装担当との確認

選択集中

やり⽅はひとつじゃない
OTONATIC – ⼦どもが背伸びするプレゼント
http://bmkids.kayac.com/kids-present/5. 実装と検証

作ってこそわかることがある作ってこそ そういうものだと認識した上でプロジェクトを設計する

 ライブラリで実装を早期スタート
 わかったことを設計とデザインにフィードバック 妥当な範囲に収めることも必要
 要件とデザインと実装でバランスを取る

 検証は必ず実機で⾏う エミュレータは制作の補助のつもりでアクセシビリティ
 実機でしか確認できない
 VoiceOverでページを読み上げてみる http://www.kaigian.co.jp/taka/vo/

 ホームをトリプルクリックにVoiceOverを割り当て

選択集中

6. 公開と今後

次フェーズへP

フェーズ1公開

PA

D
C

調査分析・改修ADC

まとめ 全体⽅針を常に意識 いま作っているものが⽅針から外れていないかを確認しつつ制作する

 選択と集中＝Mobile First 制約を意識しながらプロジェクトを進めると、⾃然と重要なものを選び取れる

今⽇からできる準備① スマートフォンを⼊⼿② ⾃分がどう使ってるか把握ただいま⼈材を募集しています
プロジェクトマネージャー
マークアップデザインエンジニア
アートディレクター
グラフィックデザイナー
インタラクションデザイナー

http://b-architects.com/careers/jobs

ありがとうございました