Books for Web Creativeシリーズスマートフォンサイト設計入門
2012年7月10日紙版発売
2012年8月24日電子版発売
株式会社アイ・エム・ジェイマルチデバイスLab. 著
B5変形判/216ページ
定価2,728円(本体2,480円+税10%)
ISBN 978-4-7741-5181-6
ただいま弊社在庫はございません。
書籍の概要
この本の概要
スマートフォンサイトの設計では,PCサイトはもちろん,携帯サイトのそれともまったく異なるアプローチが必要です。本書では,デバイスやユーザーの特性を踏まえ,サイトの構造や画面をどのように設計していけばよいのか,豊富な実例を使いながら解説します。情報アーキテクチャ(IA)やユーザーインターフェイスデザイン,ユーザビリティの考え方に基づいた,使いやすく魅力あるスマートフォンサイトを実現するノウハウが満載です。
こんな方におすすめ
- Webデザイナー
- Webディレクター
- Web担当者
この書籍に関連する記事があります!
- スマートフォンサイトのレイアウトパターン
- Webサイトをスマートフォンに対応させることはもう当たり前のこととなりました。小さな画面にタッチ操作。この2点だけをとってもPCとは大きく異なるスマートフォンですから,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 キャンペーンサイト
この本に関連する書籍
-
スマートフォンサイト制作入門[レスポンシブ・ウェブデザイン対応]
本書は,スマートフォンサイト制作とレスポンシブ・ウェブの基礎の両方を,一冊で学ぶことができます。HTML5+CSS3+jQueryで基本的なスマートフォンサイトを制作し,さ...
-
スマートフォンデザインでラクするために
iPhone,Androidケータイなどのスマートフォン,そしてiPadやAndroidタブレット……。 次々出てくる新デバイスに対応したWebサイトにするために,制作工数は増える一方。...
-
Webサイト制作者のための HTML5+JavaScript スマートフォンサイト実践講座
本書は,HTML5/CSS3/JavaScriptはひととおり知っている読者を対象に,スマートフォンサイト制作の実践的なテクニックを解説します。サンプルコードを提示しながら詳し...