Books for Web Creativeシリーズスマートフォンサイト設計入門

[表紙]スマートフォンサイト設計入門

紙版発売
電子版発売

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 キャンペーンサイト

著者プロフィール

株式会社アイ・エム・ジェイマルチデバイスLab.(かぶしきがいしゃあいえむじぇいまるちでばいすらぼ)

2010年12月設立。マルチデバイス・マルチプラットフォームに幅広く取り組んできたアイ・エム・ジェイグループの豊富な知見・実績を集約し,スマートデバイスやデジタル環境とユーザーの変化を捉え,これからのマルチデバイス時代におけるデジタルマーケティングのための次世代テクノロジーの研究開発を行っている。

マルチデバイスLab.  ホームページ
Twitter:@md_lab
株式会社アイ・エム・ジェイ ホームページ