出版書誌データベース

スマートフォン最適化とは？ 現場で活きる「基礎知識」と「デザイン手法」

今、急速に普及しているスマートフォン。「Webサイトはスマホからしか閲覧しない」というユーザーも増加し、スマホサイトの制作技術は現場の必須スキルとなりつつあります。今後はさらに「スマホの特性に合った機能的なデザイン」が求められるでしょう。

本書は、数多くのスマホサイト制作を手がけている著者が、スマホ最適化のための具体的なデザイン手法や知識を解説した1冊です。デザイン・設計の基本的な考え方はもちろん、HTML5＆CSS3による制作手法をサンプルを使って解説。さらには現場で求められがちなデザインや動きの実装方法、軽量化のテクニックなど、現場で活きるテクニックも多数も解説しています。

はじめてスマホサイトを手がける方はもちろん、より機能的なデザインを目指す現場のプロにも役立つ1冊です。

PART-1：基本編 ［設計とデザイン］

CHAPTER-01　 スマートフォン市場の今を知る
　01　スマートフォンの普及増加を知る
　02　スマートフォンOSのシェア
　03　スマートフォンの利用動向を知る
CHAPTER-02　 スマートフォンの特徴を再認識する
　01　スマートフォンの特徴と利用シーン
　02　主要機種の画面サイズ
　03　端末の向きのモード
　04　スマートフォンのブラウザ
　05　viewport
　06　Mobile Safariの制限
　07　レスポンシブWebデザイン
CHAPTER-03　スマートフォンサイト設計のポイント
　01　モバイルファーストとは
　02　スマートフォンに最適化された画面設計
　03　ワイヤーフレームを作ろう
　04　スマートフォンサイトならではのUI設計
　05　ガイドラインを読んでおく
　06　UIパーツ設計の具体例
CHAPTER-04　ビジュアルデザインの考え方
　01　device-pixel-ratioを理解しておく
　02　ページのレイアウトはリキッドレイアウトが基本
　03　スマートフォンのデバイスフォントについて
　04　CSS3での装飾表現を活用する
　05　デザインカンプの横幅は320px or 640px
　06　デザインカンプを作る際の便利なTips
CHAPTER-05　本書で制作する作例について
　01　作例1 カフェサイト「SMART CAFE」の設計
　02　作例2 TシャツECサイト「T-Shirts Project」の設計
　06　ケース・スタディ
　01　レイアウト・デザインのパターン
　02　おすすめのギャラリーサイト

PART-2：実践編［HTML／CSS］

CHAPTER-07　開発環境を用意する
　01　必要な開発環境を知る
　02　iOS用の開発環境を用意する
　03　Android用の開発環境を用意する
　04　実機確認用の環境を用意する
CHAPTER-08　HTMLのマークアップ
　01　HTML5を使おう
　02　マークアップをしよう
CHAPTER-09　CSSのコーディング
　01　CSS3を使おう
　02　セレクタを使いこなそう
　03　パーツ別CSSプロパティ レイアウト編
　04　パーツ別CSSプロパティ 装飾編
　05　CSS3で変形やアニメーションを表現しよう
CHAPTER-10　効率よくコーディングするためのツール
　01　便利なツールを使って制作を楽にしよう

PART-3：拡張編［JavaScript／ライブラリ／フレームワーク］

CHAPTER-11　表示ページの振り分け
　01　PHPを使ったサイト表示振り分け方法
　02　htaccessを使ったサイト表示振り分け方法
　03　JavaScriptを使ったサイト表示振り分け方法
　04　メディアクエリを使ってCSSを切り替える
CHAPTER-12　ユーザビリティの高いサイトを作る
　01　電話番号リンクの設定と解除
　02　フォームを最適化しよう
　03　セレクトボックスを使ったメニューを実装する
　04　Facebook風スライドメニューを実装する
　05　タブ切り替えボックスを実装する
　06　主要SNSのボタンを設置する
　07　Webフォントを読み込んでフォントを変える
　08　フリックで操作するスライドショーを実装する
　09　Google Mapに現在地を表示する
　10　iOS用WebClipアイコンを設置する
CHAPTER-13　表現を豊かにするライブラリ
　01　フリック系ライブラリ
　02　表組みを最適化する「Responsive Tables」
　03　ジェスチャーイベントを実装する「QUOjs」
CHAPTER-14　サイト構築を助けるフレームワーク
　01　スマートフォンサイトの代表的なフレームワーク「jQuery Mobile」
　02　軽さと速さが魅力的な「jqMobi」
　03　Webアプリケーション開発に特化した「Sencha Touch 2」
　04　HTML5＋CSSベースの「Lungo」
CHAPTER-15　レスポンシブWebデザイン
　01　CSSフレームワークを使ってレスポンシブWebデザインを実装する
　02　レスポンシブWebデザイン対応のCSSフレームワーク
　03　レスポンシブWebデザイン参考サイト

PART-4：軽量化編［サイトの最適化］

007CHAPTER-16　画像の最適化
　01　画像の最適化とは
　02　画像に適したファイル形式を選択する
　03　画像を最適化するツール
CHAPTER-17　HTTPリクエストを減らす
　01　サイト内の画像を最小限にする
　02　CSSスプライトを使って画像数を削減する
　03　data URIを使った画像の埋め込み
　04　Webフォントアイコンを利用する
　05　キャッシュを有効活用する
CHAPTER-18　ソースコードの最適化
　01　CSSセレクタの効率化
　02　ソースコードを圧縮する
CHAPTER-19　パフォーマンス計測
　01　様々なページパフォーマンス計測方法

APPENDIX　iOS＆Androidバージョン別 CSS3対応表

著：松田　直樹


著：宮山　純