スマートフォンサイト構成書作成超入門編

© 2013 enomotoS. All Rights Reserved.

スマートフォンサイト構成書作成手法“超”入門編

2013年9月26日

ver,2.00

榎本里美

スマデバ塾：2限目

スマートフォンサイト構成書作成～超入門編～

自己紹介

氏名榎本里美（ENOMOTO Satomi）

職種 Webディレクター

経歴

2005年4月に大手印刷会社に新卒入社。

各種銀行の帳票設計や製造工程設計のディレクション、及び

キャラクター版権管理ビジネス、キャラクター開発分野での

企画・プロデュースを担当していました。

2011年7月より、Web制作会社にて

スマートデバイス専門のテクニカルディレクターとして

大手企業サイトや商品紹介サイト、キャンペーンサイト

などのスマートフォン最適化をディレクションしています。

趣味写真旅行／世界遺産巡り

Satomi Enomoto

Facebookページやってます。 → → → Webディレクター視点

@enos_tw

© 2013 enomotoS. All Rights Reserved. 2


目次

© 2013 enomotoS. All Rights Reserved.

はじめに

構成書とは

Step1：コンテンツを洗い出す

Step2：ページ遷移を考える

Step3a：構成をつくる（既存のPCサイトがある場合）

Step3b：構成をつくる（モバイルファーストで設計する場合）

おまけ的な本題

参考

3


はじめに

4© 2013 enomotoS. All Rights Reserved.


はじめに


この講座は、

「構成書を作るの初めて・・・」

「とにかくどうしていいかワカラナイ・・・」

といった、超初心者向けの講座です。


はじめに


ホントはいろいろあるのですが

詰め込みすぎると

前に進めなくなるので、

最低限のことのみまとめます。


構成書とは



構成書とは


質問

「構成書」は、

何のために作るのでしょうか？


構成書とは


答え

サイトの構成要素を共有／明示するため。


構成書とは


では・・・

「サイトの構成要素」とは何でしょう？


構成書とは


サイトの構成要素

1. 掲載する情報（＝コンテンツ）

2. ラベルや文章などの文字要素

3. 商品サムネイルや、イメージ画像、動画など

4. 遷移するためのリンク

5. アコーディオンやギャラリーなどの、Javascript


はじめに


つまり、

構成書に必要な情報とは


はじめに


構成書に必要な情報

1. 掲載する情報（＝コンテンツ）の明示

2. ラベルや文章などの文字要素

3. 商品サムネイルや、イメージ画像、動画などがどこに、いくつ配置されるのか

4. どこが、どのページへのリンクになるのか

5. どのような動きのJavascriptを実装したいのか




まず、スマートフォンサイトに

掲載する情報（=コンテンツ）を洗い出します。




【ポイント】

・どのようなページが、何ページくらい必要か

・スマホ用は作らず、PCと共有するか




【例：ブランドサイトの場合】

・商品一覧（５点）

・商品詳細（５ページ）

・販売店情報

・企業情報

・CM・商品コンテンツ

・Q&A・お問い合わせ

・利用規約

・個人情報保護方針

・ソーシャルメディアポリシー




【例：コーポレートサイトの場合】

・会社概要

・事業案内

・IR情報

・採用情報

・アクセスマップ

・お問い合わせ

・利用規約






【例：キャンペーンサイトの場合】・キャンペーン概要

・参加方法

・エントリーフォーム（入力/エラー/確認/完了）

・結果ページ（当選）

・結果ページ（落選）

・ランキング

・賞品一覧

・FAQ・お問い合わせ

・利用規約






前述のものが

いわゆる、「コンテンツリスト」です。

↓

コンテンツリストを元に、サイトマップ（ツリー上のもの）や

ディレクトリマップ（ディレクトリ構造を明示したもの）を作ると良いです。




必要なコンテンツ（＝ページ）を洗い出すことで

見積もりの精査も行えるようになります。




洗いだしたコンテンツ（＝ページ）をもとに

それぞれ、構成を作っていきます。




が、その前に。




洗いだしたコンテンツに漏れがないか

もう一手間かけて、確認＆明確化しましょう。




つぎに、「ページ遷移図」を

作ります。




コンテンツを洗い出しただけでは

意外と、ページの抜け漏れが発生しがちです。

（例）

エラーページ／入力フォームの確認画面、完了画面、エラー画面／

ログイン画面／詳細画面 etc..




そこで、ページ遷移を考えながら

抜け漏れがないかをチェックするのです。




【ページ遷移図例：ユーザ参加型キャンペーンサイト】

投稿

詳細

MENU

A：TOPページ

（記事一覧）

E:このサイトについて

D-1:投稿記事詳細,

B:ログイン（エントリー）

C-1：投稿

→投稿フォーム

C-3：投稿

→確認画面

C-2：投稿

→投稿フォーム

（エラー）

C-4：投稿

→完了

G:個人情報保護方針

H:免責事項

ログイン中

Y

N

←Facebookで認証

エラー

有り

無

↑エラー画面内で修正可とする

F:よくある質問




ページ遷移の設計

││ユーザの導線設計




ユーザビリティを損ねないよう

ページ遷移を工夫しましょう

↓

・階層を深くしすぎない

・TOPに戻らなくても、他のコンテンツに自在に行き来できるようにする

・エラーや確認、告知などユーザへのレスポンスを的確に返す

・セッションなどの維持ができるように考慮する


Step3：構成をつくる（既存のPCサイトがある場合）





PCサイトがすでにある場合は

それを参考に、スマホサイトを構築すると

やりやすいです。




ただし！

PCサイト並に要素を盛り込むのはNGです。




スマートフォンの小さい画面を考慮して

要素の取捨選択や

文言のリライトを行います。




では

さっそく手順を見て行きましょう。




例：Yahooの場合


1 エリアを区分け



h



手順１：エリアを区分けする

同じ意味を持つエリアでまとめつつ、区分けする

i

a

b

c

d

e

f

g

a. ロゴ＋グロナビ

b. 検索窓

c. 記事一覧

d. ログイン＋メール＋天気

e. サービスメニュー

f. Facebookログイン

g. おすすめのセレクション

h. その他トピックス

i. フッター


2 プライオリティを設定





エリアの優先度（＝情報の優先度）を決める

1 a. ロゴ＋グロナビ

2 b. 検索窓

3 c. 記事一覧

4 d. ログイン＋メール＋天気

5 e. サービスメニュー

6 f. Facebookログイン

7 g. おすすめのセレクション

8 h. その他トピックス

9 i. フッター

h

i

a

b

c

d

e

f

g

手順２：プライオリティを設定する


3 情報の整理





全部は盛り込めないので、必要な情報を整理します。

5 e. サービスメニュー 8 h. その他トピックス

優先順：必要な機能＞ユーザに見せたい情報＞一応必要な情報

ユーザの利用頻度が高い、下記9項目に絞る

• ヤフオク！

• 知恵袋

• スポーツ

• ニュース

• 映像トピックス

• ショッピング

• お気に入り

• GREE

• 路線

アクセスのたびに、いずれかの一覧を表示

• ピックアップ

• 映像トピックス

• 特集

• みんなのアンテナ

手順３：情報を整理する


4 ユーザの導線設計／UIの最適化





整理した情報を、見やすく・使いやすいように配置する。

スマホサイトらしいUIパーツを使う（＝ターゲットユーザが慣れているパーツを使う）。

ユーザの利用シーンを考慮して、片手操作／両手操作のし易いように設計する。

▼使用しているUIパーツ

• タブ

• 左右フリック

• もっと見るボタン


• 左右フリック


• 一覧ボタン


• MENUボタン

※ターゲットユーザによって、向いていない場合がある

手順４：ユーザの導線設計／UIの最適化を行う


5 ラベル・文言のリライト





項目名や、ボタンのラベルは一目で意味が把握できるよう

PCサイトよりもさらに簡潔に・短くまとめるのがベストです。

また、アイコンボタンは画像だけでなくラベルを併記するのがオススメです。

手順５：ラベル・文言をリライトする


Step3：構成をつくる（モバイルファーストで設計する場合）





世の中の流れは、

もはやパソコン中心ではありません。




なぜなら、ユーザの生活に

一番近いところにある端末は

スマートデバイスだからです。




ユーザの固有情報も

趣味も、思考も、居場所も

すべてスマートデバイスが知っています。




スマートデバイスを想定せずして

Webコンテンツ（≒Webコミュニケーション）

の設計を行うことは、できない時代なのです。




つまり、




「スマートデバイス中心」の

モバイルファーストで設計・構築する

スキルが必須なのです。




とはいえ、基本的な設計思想は

パソコンもスマホも一緒です。




パソコンと違う点は

大きく分けると２点。




タップデバイスであること

画面が小さいこと

PCサイトとスマホサイト設計思想の相違点とは




「指でタッチする」というユーザの動作

＆

「小さい画面」で

「屋内外問わず、いろいろな場所で」閲覧する

ことを意識して、設計しましょう。


1 情報の整理／プライオリティの設定





１．掲載したい情報の項目名を、箇条書きで洗い出す

２．情報の優先順位を決める。

優先順：必要な機能＞ユーザに見せたい情報＞一応必要な情報

手順１：プライオリティを設定する


2 ユーザの導線設計／UIの最適化





1. ユーザシナリオを想定する

2. ユーザ導線に従って、情報を、見やすく・使いやすいように配置する。

3. スマホサイトらしいUIパーツ（＝ユーザが使い慣れているパーツ）を使う。

4. ユーザの利用シーンを考慮して、片手操作／両手操作のしやすいように設計する。

手順２：ユーザの導線設計／UIの最適化を行う




超初心者向けの

構成書作成講座は

以上です。




え？これだけ・・・？！




と、思ったそこのアナタ。




もちろん、これだけでは

ちゃんとした構成書

は作れません




では、どうすれば

ちゃんとした構成書が

作れるようになるのでしょうか




答




構成書作りは

経験値です。




とはいえ、だれでもスタート時は

経験値ゼロ。




そこで、初心者の皆様は

次ページの項目を実践して

経験値を稼ぎ

レベルアップを目指しましょう！




1. 毎日、３つ以上のスマホサイトを見るようにする

2. スマホサイトを見るときは、実機で見て操作感を体験する

3. 閲覧したサイトの「良いところ（真似たい点）」と、

「改善点」をそれぞれ１つ以上見つける

＋α：気に入ったサイトのワイヤーフレームを模写する（余裕があればぜひやってみてください）

構成書作成スキルアップのための３箇条


参考



参考


【その他のポイント】1. リンクには、それとわかるように下線を入れる。ボタンも同様。

2. 外部リンクか、同一サイト内か、別ウィンドウかを明示する。

3. Androidでは、デバイスフォントでの太字表現はできない。

4. ラベルは短く。簡潔に。PCをリライトする。

5. 遷移先のURLを明示する。

6. ページ名／カテゴリ名の整合性を、ドキュメント全体で統一する。

7. どこがデバイスフォントで、どこが画像なのかをわかるように。

8. Androidでは、モーダルウィンドウやシックボックスのような、要素がページの上にかぶる実装は避ける。

（端末によって不具合が出て、タップできなくなる）

9. 振り分け（とくにタブレット）を意識する。

10. テキストリンクはなるべく使わない。

11. リストは横ぶち抜きにする。

12. 画面の右下にボタンを配置しない（機種により、ブラウザデフォルトの操作ボタンとかぶって押せなくなる）。

13. Androidでは、CSSでの角丸の描画がジャギるので、デザイン上での乱用は控える。

14. タブ／ボタン／アコーディオンの役割分担を整理する。


参考


まとめサイトいろいろ

iPhone Design Box

丁寧・わかりやすく

まとめられているサイト。

http://design.web-hon.com/

スマートフォンサイト集めました。

色別・業種別にカテゴライズ

されているので便利。

http://sp-web.jp/

UI Archive

UI毎にまとめられているので、

設計の参考になるサイト。

http://www.uxarchive.com/

スマートフォンサイト構成書作成 超入門編

Design

スマートフォンサイト構成書作成超入門編