関連サイト
出版社による関連ページが公開されています。
内容紹介
“楽しい”“嬉しい”“面白い”“心地よい“スマートフォンサイトを構築するための必携の1冊です。
優れたインターフェイスというだけではユーザーに満足してもらえません。“楽しい”“嬉しい”“面白い”“心地よい“といった「より良い体験＝ユーザーエクスペリエンス」を提供することが大切です。本書では、それらを実現するユーザーインターフェイス設計の基本的な知識から実際のデザインや実装における実践的なテクニックまでを幅広くまとめました。
書誌情報
- 著者: 吉澤富美, 加藤善規
- ページ数: 225ページ(PDF版換算)
- 対応フォーマット: PDF
- 出版社: マイナビ出版
対象読者
スマートフォンサイトのユーザーエクスペリエンスについて学びたい人
著者について
吉澤富美
デジパ株式会社にてディレクタ職に従事。マークアップエンジニア。フリーランスによるウェブサイト制作業務等を経て2010年よりデジパ株式会社勤務。HTML、CSS、JavaScript等ウェブ系フロントエンド技術が主な専門分野。著書に『プロが選ぶWordPress優良プラグイン事典』（共著）がある。神奈川県で海のそばに在住。ガジェット好き。ライブ好き。
加藤善規
デジパ株式会社にてディレクタ職に従事。フリーランスによるウェブサイト制作業務等を経て2004年よりデジパ株式会社勤務。HTML、XML、CSS等、ウェブ系フロントエンド技術、およびIA、ユーザビリティ、アクセシビリティを主な専門分野とし、ウェブサイト制作ディレクション業務、コンサルティング業務の他、個人活動として執筆、セミナー等での講演等も行う。
目次
Chapter 1 UX入門
- 1-1 UXの基礎
- UXとは
- UXに関係する制作者は誰？
- なぜUXなのか？
- 感情を考慮したデザインとは
- 1-2 最先端の企業やサービスでのUX例
- Apple
- Microsoft
- 1-3 なぜスマートフォンサイトが重要なのか
- スマートフォンとPCの違い
- スマートフォンサイトとPCサイトの利用シーン
- 1-4 スマートフォンサイトのUXや注意点
- スマートフォンサイトとPCサイトの行き来
- スマートフォンに最適化したサイト
- Chapter 2 デザインのための基礎知識
- 2-1 スマートフォンの種類
- スマートフォンとは
- スマートフォンのOS
- 2-2 スマートフォンの利用環境
- スマートフォンの利用は「ながら利用」が多い
- スマートフォンの平均利用時間は「1日1時間くらい」
- スマートフォンで人気の機能はインターネットとカメラ
- スマートフォンで人気のサービスはSNS
- スマートフォンの通信環境
- 2-3 スマートフォンの画面
- 画面解像度
- PPIによる差異
- 2-4 モバイルブラウザの種類
- OS内蔵のブラウザ
- 追加インストール可能なブラウザ
- 2-5 スマートフォンの特徴的な操作
- スマートフォン操作の基本は指によるタッチ操作
- 基本的な操作「タップ」
- ダブルクリックに相当する「ダブルタップ」
- 指で払うような操作「フリック」
- タップしたまま指をゆっくり移動する「ドラッグ」
- タップしたまま指をずらす「スワイプ」
- 何かを選択したいときに「ロングタップ（長押し）」
- ピンチインとピンチアウト
- 2本指スクロール
- 3本指タップ
- 4本指以上での操作
- 指での操作に伴う注意点
- タッチデバイスにはマウスオーバーという概念が存在しない
- 2-6 HTML5とCSS3について
- HTML5とは
- CSS3とは
- 2-7 HTML5/CSS3のスマートフォンへの実装状況
- HTML5で追加された各要素はすでに使用可能
- HTML5 API、周辺仕様でも多数が使用可能
- CSS3によって高度な表現が可能に
- 2-8 ビューポート（Viewport）について
- 基本的なViewportの記述方法
- Viewportで指定できる値
- 2-9 メディアクエリーについて
- メディアクエリーの基本
- メディアタイプ
- メディアクエリーで利用できる条件（媒体特性）
- 2-10 スマートフォンサイトのデザインギャラリー
- Mobile UI Patterns
- Pttrns / iOS UI Patterns (beta)
- Android Interaction Design Patterns
- iPhoneデザインボックス
- Chapter 3 スマートフォンサイトの設計
- 3-1 UI（ユーザーインターフェイス）設計の基礎知識
- 小さすぎるボタンに注意する
- 小さすぎる文字に注意する
- マウスオーバーという概念がないことに注意する
- ボタンを配置する位置にも注意する
- ボタンは押したことがわかるようにする
- 文言の選択にも配慮する
- 画面遷移時のアニメーションは無駄ではない
- ロード中でも操作可能な状態を保つ
- 3-2 モバイルファースト
- モバイルファーストとは
- モバイルファーストとUXの関係
- 3-3 レスポンシブ・ウェブデザイン
- レスポンシブ・ウェブデザインとは
- レスポンシブ・ウェブデザインのサイト例
- レスポンシブ・ウェブデザインのメリットとデメリット
- メディアクエリーの指定
- 3-4 スマートフォンサイトのフォームページ
- スマートフォンのフォーム作成時の注意点
- フォームに合わせた入力モードを指定する
- 3-5 スマートフォンサイトへの誘導1 - 種類や特徴
- 誘導の方法
- 強制的にリダイレクトしてスマートフォンサイトを表示させる
- PCサイトとスマートフォンサイトのどちらを表示するか選んでもらう
- PCサイトの目立つ場所にスマートフォンサイトへの誘導リンクを設置する
- 3-6 スマートフォンサイトへの誘導2 - 実装コード
- 強制的にリダイレクトしてスマートフォンサイトを表示させる
- Cサイトとスマートフォンサイトのどちらを表示するか選んでもらう
- PCサイトの目立つ場所にスマートフォンサイトへの誘導リンクを設置する
- 3-7 高デバイスピクセル比環境で画像を綺麗に表示する
- 機種によって異なるピクセルの密度
- 記述方法
- Chapter 4 スマートフォンサイトのデザイン
- 4-1 スマートフォンサイト・アプリのレイアウトパターン
- 縦1列シンプルリスト型
- 上下固定ボタンメニュー型
- タイルメニュー型
- スライドメニュー型
- 4-2 用途に応じた設計とプロトタイピング
- 機能の絞り込みや優先順位
- 想定される利用シチュエーション
- プロトタイピング
- 4-3 Retina（高密度）Displayへの対応
- 高PPIを活かした表示
- <img>タグによる画像の配置
- CSSで指定した背景画像へのサイズ指定
- JavaScriptによる画像の出し分け
- 2倍サイズの画像を使用する場合の注意点
- 4-4 画像の最適化
- 画像を最適化するツール
- オンライン型の画像最適化ツール
- インストール型の画像最適化ツール
- 4-5 CSSを使用したボタンデザイン
- オーソドックスなボタン
- 背景色や文字色を変えてさまざまなバリエーションのボタンを作成
- 背景色以外も変えて、さらにバリエーションを増やす
- 4-6 ウェブフォントを利用したデザイン
- ウェブフォントとは
- 多くのアイコンをウェブフォントで使える「Font Awesome」
- Font Awesomeのデータの入手
- ウェブページでFont Awesomeを利用する準備
- アイコンを表示したい場所へのHTMLの追加
- 4-7 CSSフレームワークを利用したデザイン
- Bootstrapとは
- class名によるデザインアプローチ
- Bootstrapを使用するための準備
- グリッドシステムを利用したレイアウト
- その他のコンポーネント
- テンプレートを利用してデザインの幅を広げる
- 4-8 優れたスマートフォンUIの例
- Clear
- Google Maps
- Mailbox
- 駅探乗換案内
- MyScript Calculator
- Foursquare
- Chapter 5 ストレスなく使えるように
- 5-1 CSSとJavaScriptの最適化
- JavaScriptの記述位置
- CSSの読み込み方
- CSS、JavaScriptファイルの結合
- CSS、JavaScriptの圧縮
- 5-2 画像の転送量を削減するCSS Sprite
- CSS Spriteとは
- 使用方法
- CSS Spriteに利用できるツール
- 5-3 gzipによるファイル圧縮
- サーバで圧縮を有効にする
- 変更されないファイルは事前に圧縮
- 圧縮したファイルが転送されるように設定する
- 圧縮したファイルのMIMEタイプを設定する
- キャッシュによる転送量の削減
- 5-4 CDN
- CDNの仕組みとメリット
- Googleの提供するCDN
- さまざまなCDN
- 5-5 レスポンシブイメージ
- さまざまなデバイスに画像をどう対応させるか
- CSSによって画像を切り替える
- JavaScriptによって画像を切り替える1（Responsive Enhance）
- JavaScriptによって画像を切り替える2（noscriptを利用する）
- サーバサイドで画像を切り替える（Adaptive Images in HTML）
- これからのレスポンシブイメージ
- Chapter 6 開発環境について
- 6-1 CSSを拡張するメタ言語「Sass 」の基礎と導入
- Sassとは
- Sassの使い方
- Compassとは
- Compassの使い方
- Sassの導入
- Sassのコンパイル - コマンド
- Sassのコンパイル - GUIアプリケーション
- 6-2 Sassの具体的な使用例
- Sassでのメディアクエリーの記述
- デバイスピクセル比が高い端末に対応した背景の指定
- Compassによるスプライト画像の作成
- Compassの環境設定を使いコンパイル内容を変更する
- Compassのミックスインを上書きする
- 6-3 CSSフレームワーク
- CSSフレームワークとは
- 960 Glid System
- Blueprint
- BlueTrip
- Twitter Bootstrap
- 6-4 JavaScriptライブラリ・フレームワーク
- jQuery Mobile
- jQTouch
- Sencha Touch
- 6-5 開発中の表示確認・デバッグ環境
- ブラウザで確認する
- iOSシミュレータ
- Androidエミュレータ
- 索引