MdN Web Mook すべての人に知っておいてほしいスマートフォンサイトデザインの基本原則
エムディエヌコーポレーション / 2012年08月27日 / 全226ページ
【Web制作に携わる人が、いま、一番知っておきたいこと。】
スマートフォン大流行の現在、Web制作業界では、まず初めにスマートフォンに対応するサイトから構築していこうという考え方が広がっています。対応サイトの導入が注目・促進されるなかで、スマートフォンサイト制作のための情報やノウハウはまだまだ不足しています。また、一般的な解説と実際の現場で起きていることに温度差が生まれているといった側面もあるのではないでしょうか。本書は、第一線で活躍するクリエイターらを執筆陣を迎えた、現場の生のノウハウを詰め込んだ実用性の高いスマートフォンサイトデザインの解説書です。
スマートフォン大流行の現在、Web制作業界では、まず初めにスマートフォンに対応するサイトから構築していこうという考え方が広がっています。対応サイトの導入が注目・促進されるなかで、スマートフォンサイト制作のための情報やノウハウはまだまだ不足しています。また、一般的な解説と実際の現場で起きていることに温度差が生まれているといった側面もあるのではないでしょうか。本書は、第一線で活躍するクリエイターらを執筆陣を迎えた、現場の生のノウハウを詰め込んだ実用性の高いスマートフォンサイトデザインの解説書です。
目次
- 扉
- 免責事項
- はじめに
- 目次
- 本書の使い方
- ■Chapter 1 スマートフォンサイト制作の基礎知識
- 1-01 スマートデバイスとは
- 1-02 スマートフォンの種類と特長
- 1-03 なぜスマートフォンのサイトが必要なのか?
- 1-04 ネイティブアプリとウェブアプリの違い
- 1-05 スクリーンの解像度とViewportについて
- 1-06 モバイルブラウザの種類
- 1-07 HTML5とCSS3について
- 1-08 HTML5およびCSS3の実装状況
- Column モバイルサイトやアプリのデザインギャラリー
- ■Chapter 2 スマートフォンサイトの設計
- 2-01 モバイルファーストとは?
- 2-02 設計の方針:プログレッシブエンハンスメントとは?
- 2-03 設計の方針:グレイスフルデグラデーションとは?
- 2-04 設計の方針:クロスブラウザとは?
- 扉
- 免責事項
- はじめに
- 目次
- 本書の使い方
- ■Chapter 1 スマートフォンサイト制作の基礎知識
- 1-01 スマートデバイスとは
- 1-02 スマートフォンの種類と特長
- 1-03 なぜスマートフォンのサイトが必要なのか?
- 1-04 ネイティブアプリとウェブアプリの違い
- 1-05 スクリーンの解像度とViewportについて
- 1-06 モバイルブラウザの種類
- 1-07 HTML5とCSS3について
- 1-08 HTML5およびCSS3の実装状況
- Column モバイルサイトやアプリのデザインギャラリー
- ■Chapter 2 スマートフォンサイトの設計
- 2-01 モバイルファーストとは?
- 2-02 設計の方針:プログレッシブエンハンスメントとは?
- 2-03 設計の方針:グレイスフルデグラデーションとは?
- 2-04 設計の方針:クロスブラウザとは?
- 2-05 レスポンシブ・ウェブデザインの概要
- 2-06 スマートフォン専用サイトの設計
- 2-07 PCサイトとスマートフォンサイトを分けない設計
- 2-08 サイト構築のワークフローについて
- 2-09 サイト構築に必要な開発ツール
- 2-10 UI(ユーザーインターフェイス)の設計
- 2-11 スマートフォンサイトのフォームページ
- 2-12 ラフスケッチの描画からワイヤーフレーム、モックアップの作成
- Column PCサイトで使われるインターフェイスの落とし穴
- ■Chapter 3 スマートフォンサイトのデザイン
- 3-01 スマートフォンサイトのレイアウトパターン
- 3-02 垂直シンプルリストパターン
- 3-03 サムネイルリストパターン
- 3-04 フィッシュアイリストパターン
- 3-05 インフィニットリストパターン
- 3-06 グリッドパターン
- 3-07 カルーセルパターン
- 3-08 ページネーションパターン
- 3-09 カバーグラフィックのデザイン
- 3-10 アイコンや装飾パーツのデザイン
- Column ウェブデザインの高度なレイアウト技術
- ■Chapter 4 スマートフォンサイトのコーディング
- 4-01 基本マークアップ
- 4-02 イメージ(画像)の最適化
- 4-03 基本デザインのスタイル指定
- 4-04 ナビゲーションのスタイル指定
- 4-05 Viewportの指定
- 4-06 タブレットやPCにも対応するサイトのワークフロー
- 4-07 レスポンシブ・ウェブデザイン(1)
- 4-08 レスポンシブ・ウェブデザイン(2)
- 4-09 スマートフォン特有の機能を指定
- 4-10 Retinaディスプレイ対応
- 4-11 JavaScriptフレームワーク・ライブラリについての基礎知識
- 4-12 jQuery Mobileフレームワークの活用
- 4-13 テスト・デバッグ環境の構築
- Column iOS、Androidに続く「Windows Phone」
- ■Chapter 5 スマートフォンサイト制作の応用知識
- 5-01 パフォーマンス最適化のテクニック
- 5-02 ビデオの組み込み
- 5-03 オーディオの組み込み
- 5-04 CSS3アニメーションの基本
- 5-05 専用ツールでCSS3アニメーションを作成
- 5-06 CreateJSを利用したFlashアニメーションの変換
- 5-07 ウェブフォントの活用
- 5-08 SVGによるグラフィック表現
- 5-09 CSS3による縦書きレイアウトの表現
- 5-10 スマートフォン向けに最適化した画像だけをダウンロードさせる
- さくいん
- 執筆者一覧
- 奥付
- カバー
※このデジタル雑誌には目次に記載されているコンテンツが含まれています。それ以外のコンテンツは、本誌のコンテンツであっても含まれていません のでご注意ください。
※電子版では、紙の雑誌と内容が一部異なる場合や、掲載されないページがある場合があります。