今、急速に普及しているスマートフォン。「Webサイトはスマホからしか閲覧しない」というユーザーも増加し、スマホサイトの制作技術は現場の必須スキルとなりつつあります。今後はさらに「スマホの特性に合った機能的なデザイン」が求められるでしょう。
本書は、数多くのスマホサイト制作を手がけている著者が、スマホ最適化のための具体的なデザイン手法や知識を解説した1冊です。デザイン・設計の基本的な考え方はもちろん、HTML5＆CSS3による制作手法をサンプルを使って解説。さらには現場で求められがちなデザインや動きの実装方法、軽量化のテクニックなど、現場で活きるテクニックも多数も解説しています。
はじめてスマホサイトを手がける方はもちろん、より機能的なデザインを目指す現場のプロにも役立つ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 おすすめのギャラリーサイト
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 便利なツールを使って制作を楽にしよう
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デザイン参考サイト
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対応表
【法人・教育機関のお客様へ】新年度の大口注文・お見積りなど、お気軽にご相談ください
デザインやコーディングなど、Webデザインに役立つスキルが身につく書籍を揃えました
テキスト生成、画像生成、動画生成など、生成AI活用のスキルが身につく本をご紹介
新社会人の役に立つスキルが身につく本。ビジネスパーソンとしてスタートダッシュを切ろう！
小学校から必修化！人気の『ルビィのぼうけん』ほかプログラミング教育の本はこちら
開発・ビジネス・マーケティング・EC運営・営業支援など、幅広いジャンルの講座を開催
