概要

スマートフォンサイトの設計では，PCサイトはもちろん，携帯サイトのそれともまったく異なるアプローチが必要です。本書では，デバイスやユーザーの特性を踏まえ，サイトの構造や画面をどのように設計していけばよいのか，豊富な実例を使いながら解説します。情報アーキテクチャ（IA）やユーザーインターフェイスデザイン，ユーザビリティの考え方に基づいた，使いやすく魅力あるスマートフォンサイトを実現するノウハウが満載です。

こんな方におすすめ

• Webデザイナー
• Webディレクター
• Web担当者

目次

Chapter1　スマートフォンサイト設計のための基礎知識

1.1　スマートフォンとは

• 1.　スマートフォンとは？
• 2.　モバイルインターネットの進化
• 3.　スマートフォンの代表的特徴
• 4.　ユーザーの利用シーンの変化

1.2　スマートフォンが与えた変容

• 1.　モバイル業界構造の変容
• 2.　モバイルファーストから見る変容

1.3　スマートフォンのOS，ブラウザの違い

• 1.　OSの特徴
• 2.　標準ブラウザのUIの違い
• 3.　OSの違いに柔軟に対応するには

1.4　Webサイトとネイティブアプリの違い

• 1.　Webサイトとネイティブアプリの特徴
• 2.　クロスプラットフォーム対応
• 3.　見つけやすさ
• 4.　外部からの誘導
• 5.　情報配信の基礎としてのWebサイト
• 6.　ツールとしてのネイティブアプリ
• 7.　Webサイトか？ ネイティブアプリか？

1.5　スマートフォンサイトの構築パターン

• 1.　HTMLワンソース型（ PC用ソースを共有）
• 2.　HTMLワンソース型（ フィーチャーフォン用ソースを共有）
• 3.　スマートフォン用HTML作成型
• 4.　ASPサービス利用型

1.6　PC，フィーチャーフォンとスマートフォンの違い

• 1.　スペック･技術面での違い
• 2.　利用シーンの違い
• 3.　UIの違い
• 4.　タブレットデバイスの捉え方

1.7　スマートフォンサイトのマークアップ

• 1.　マークアップを始める前に
• 2.　HTML5
• 3.　CSS3
• 4.　JavaScript

1.8　スマートフォンサイトのアクセス解析

• 1.　サイト設計視点から見る効果検証の考え方
• 2.　スマートフォンサイトでのアクセス解析ツール導入時の注意点

1.9　スマートフォンサイトの検証作業

• 1.　実機での検証
• 2.　PCでの検証
• 3.　開発向けツールでの検証
• 4.　検証方法の使い分け

1.10　複雑化していくWeb制作の現場

• 1.　SNSで多様化する利用シーン
• 2.　複雑になるWebサイト構築
• 3.　ワークフローの変化

Column　正解?　不正解?　レスポンシブWebデザイン

Chapter2　サイト設計と情報アーキテクチャ

2.1　サイト設計にあたって

• 1.　ユーザーのニーズを意識した設計
• 2.　スマートフォンサイト設計と情報アーキテクチャ（IA）

2.2　サイト設計の流れ

• 1.　サイト企画・調査
• 2.　ユーザー分析
• 3.　要件定義
• 4.　情報の整理・分類
• 5.　サイトストラクチャ
• 6.　スキーマ設定
• 7.　画面設計

2.3　ユーザー分析

• 1.　ユーザー分析の目的
• 2.　ユーザー調査
• 3.　ユーザーモデリング
• 4.　シナリオとタスク分析

2.4　要件定義

• 1.　ビジネス要件定義
• 2.　システム要件定義
• 3.　要件の取りまとめとドキュメンテーション

2.5　情報の整理・分類 ～基礎～

• 1.　情報の整理・分類とは
• 2.　既存サイトの情報を整理する
• 3.　スマートフォンサイトにおける情報の整理・分類
• 4.　情報を分類する際の5つのアプローチ「LATCHの法則」

2.6　情報の整理・分類 ～実践～

• 1.　利用シーン／ターゲットユーザーに合わせた情報の分類
• 2.　同業種での情報の標準化について
• 3.　ユーザーに合わせたラベリンク

2.7　サイトストラクチャを知る

• 1.　なぜ，サイトストラクチャを設計するのか
• 2.　サイトストラクチャのパターン

2.8　サイトストラクチャを設計する

• 1.　ハイレベルサイトストラクチャを設計する目的
• 2.　ハイレベルサイトストラクチャを設計する
• 3.　詳細サイトストラクチャを設計する目的
• 4.　詳細サイトストラクチャを設計する

2.9　ナビゲーションを設計する

• 1.　ナビゲーション設計の目的
• 2.　ナビゲーションの種類

2.10　サイトスキーマ設定

• 1.　サイトスキーマとは
• 2.　スキーマ設定の不備に起因するトラブル例
• 3.　スキーマ設定で決めること
• 4.　スマートフォンサイト制作時のスキーマ設定の注意点

2.11　ユーザー行動と画面設計

• 1.　ユーザーの行動を定義する
• 2.　エリア分けによる領域の分類
• 3.　最終目的に合わせた画面設計
• 4.　ユーザーはどういう流入元から来ているか

2.12　レイアウト設計とパターン

• 1.　スマートフォンのレイアウトの考え方
• 2.　スマートフォンサイトのレイアウト
• 3.　レイアウトを組み合わせる

2.13　画面設計 ～基礎～

• 1.　サイト内におけるページの役割
• 2.　インデックス（大分類）
• 3.　カテゴリーインデックス
• 4.　ディティール
• 5.　機能

2.14　画面設計 ～実践～

• 1.　ワイヤーフレームとは
• 2.　ワイヤーフレームで決めること
• 3.　ワイヤーフレーム作成の流れ

Column　Web制作における「モノ」から「コト」のデザインへ

Chapter3　ユーザーインターフェイスの設計

3.1　スマートフォンサイトのインターフェイスの特徴

• 1.　指を使った操作を考慮する
• 2.　男女別に見る操作方法の違い
• 3.　スマートフォンサイトの課題
• 4.　タッチパネルによる操作を考慮する

3.2　誤操作を防ぐオブジェクトサイズと余白

• 1.　オブジェクトサイズの基準値
• 2.　隣接するタッチ要素間の余白
• 3.　まとめ

3.3　端末の特性を考慮したテキスト表示設計

• 1.　フォントサイズ
• 2.　1行当たりの文字数
• 3.　行間
• 4.　CSS3を使用した装飾方法
• 5.　テキストリンク

3.4　機種ごとに異なる画面サイズと解像度の考慮

• 1.　ファーストビューとスクロール
• 2.　画像サイズ，解像度とdevicePixelRatio

3.5　画面をタッチすることを意識した操作設計

• 1.　タップによる動作を予測させる
• 2.　フリックを妨げないオブジェクトの配置
• 3.　ピンチイン／ピンチアウトによる画面の拡大への対応

3.6　レイアウト設計のポイント

• 1.　レイアウト設計のポイント
• 2.　設計で考慮すべきポイント

3.7　入力しやすいフォーム設計

• 1.　入力漏れを防ぐレイアウト
• 2.　入力時のページ表示サイズ
• 3.　項目ごとのまとまりを枠線で示す
• 4.　CSSで操作性を高める

3.8　ユーザビリティを高めるフォームの機能

• 1.　テキストボックスのユーザビリティを高める属性，値
• 2.　プルダウンのユーザビリティを高める属性
• 3.　その他の新属性

3.9　PCサイトからスマートフォンサイトへのUI移行

• 1.　PCサイトからスマートフォンへ
• 2.　UI移行パターン

3.10　インタラクティブUIとは

• 1.　インタラクティブUIとは
• 2.　必ずヒントとフィードバックを与える
• 3.　ラベルの重要性
• 4.　インタラクティブUIを実装する際の注意点

3.11　インタラクティブUIの代表例

• 1.　アコーディオン
• 2.　カルーセル
• 3.　モーダルウィンドウ
• 4.　タブ

3.12　インタラクティブUIのサイトでの使われ方

• 1.　タブ型のUI
• 2.　アコーディオン型のUI
• 3.　スライドナビゲーション型
• 4.　ドロップダウン型のUI
• 5.　モーダルウィンドウ型のUI
• 6.　カルーセル型のUI
• 7.　オートページャー型のUI

3.13　認知的ウォークスルー

• 1.　認知的ウォークスルーとは？
• 2.　認知的ウォークスルーの準備
• 3.　認知的ウォークスルーを行う

3.14　ユーザーテスト

• 1.　定量調査
• 2.　定性調査

Chapter4　実践編　～タイプ別サイト制作の実践～

4.1　実践編を始める前に

4.2　コーポレートサイト

4.3　情報系サイト

4.4　ECサイト

4.5　キャンペーンサイト

サポート

現在サポート情報はありません。