jQuery Mobileスマートフォンサイト・デザイン Webクリエイターが身につけておくべき新・100の法則。

jQuery Mobileスマートフォンサイト・デザイン Webクリエイターが身につけておくべき新・100の法則。

¥2,400+税

品種名
書籍
発売日
2014/6/27
ページ数
224
サイズ
B5変形判
著者
石原 悠 著
ISBN
9784844335375

スマホサイト制作に手間をかけていませんか?

モバイルファーストを容易に実現するフレームワーク「jQuery Mobile」を徹底解説! フラットデザインに対応した最新バージョン1.4対応。導入前に知っておくべき基本はもちろん、UIパーツを使いこなす法則やページレイアウトをカスタマイズする法則、スマートフォンならではのジェスチャー操作を生かす法則など、モバイル向けのWebサイト制作に役立つ100個ノウハウを解説!

【本書掲載のソースコードとサンプルサイトについてはこちら】


第1章「jQuery Mobileの基本を知る法則」お試し版無料公開中

PDF形式:お手元にダウンロードしてお読みください。

「読者アンケートに答える」「読者プレゼントに応募」の場合もこちらをご利用ください。

アンケートに答える

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

学校・法人一括購入に関するお問い合わせはこちらへ。

一括購入窓口

詳細

■本書掲載のソースコードとサンプルサイトについて

本書で説明しているサンプルコードと画像ファイルは、本ページ上部の[ダウンロード]からダウンロードできます。
また、本書の著者が提供するサンプルサイトで、実際に法則を体験することができます。iPhoneまたはAndroidスマートフォンで、次のWebサイトにアクセスしてください。なお、サンプルサイトはメンテナンスなどで予告なしにアクセス不可となることがあります。あらかじめご了承ください。

●本書サンプルサイト http://jqm.12px.com/


■著者プロフィール

石原 悠(いしはら ゆう)

会社員として複数の会社でディレクター、デザイナーの経験を経て、2012年1月にフリーランスに。Webサイト、iOS、Android アプリのデザインや実装、ロゴや印刷物の制作など幅広い業務を大小問わず請け負っており、jQuery Mobileなどのフレームワークを用いた構築の実績も多い。デザインだけでなく、プログラミングまですべてを手がけたiOSアプリを複数リリースするなど実装方面の制作も得意としており、Webサイトやアプリの構築に関してさまざまな角度から得た経験と知識を生かした柔軟でスピーディーな対応を得意としている。
●normo(個人事業Webデザイン、iPhoneアプリ制作請負) http://normo.jp


■筆者からのメッセージ

(本書「はじめに」より抜粋)
Webサイトの運営をされている方なら、アクセス数の推移を見てすでにご存知かもしれませんが、近年Webサイトへのアクセスの比重がPCからモバイルのほうへと推移しています。2014 年には「モバイルファースト」というキーワードをよく耳にするようになりました。これまでWebサイトの制作業務では、まずPC用のWebサイトを制作して、余った時間や予算でモバイルサイトを構築する、という流れで進められてきました。それが「まずモバイルで使えるサイトを重点的に作る」という新しい流れも生まれてきているようです。
そうした状況に応じて、モバイル向けのサイト制作が容易になるツールとしてjQuery Mobileをはじめ、Twitter Bootstrapやレスポンシブデザインなど便利で高機能なフレームワークや技術が日々進化してきています。この本を手に取られた方は、おそらくこれから新しくWebサイトを制作されるにあたってその中からjQuery Mobileの導入を検討されているかと思います。jQuery Mobileは数あるモバイルとPC の両方のWebサイトを構築するフレームワークの中で、学習コストも低く、効率的で柔軟性にも優れたWebサイトが開発できる非常に便利なフレームワークになっています。そのサイト制作にこの本が少しでもお役に立てたら幸いです。(石原 悠)

目次

第1章 jQuery Mobileの基本を知る法

法則1 ページの設定と構成要素を理解する
法則2 Ajaxを使ったページ遷移を理解する
法則3 Ajaxによるページ遷移の不具合を解消する
法則4 jQuery Mobileに用意されているボタンを把握する
法則5 ボタンにアイコンを表示する
法則6 ページのヘッダに「戻る」ボタンを表示する
法則7 複数のボタンをグループ化してユーザビリティを高める
法則8 ヘッダを固定して最大限に有効活用する
法則9 フッタのレイアウトを調整して見やすくする
法則10 複数ページにまたがるコンテンツを自由に行き来する
法則11 リストを使ってコンテンツを階層化する
法則12 読み込み専用のリストを使用する
法則13 リストに自動で区切りを挿入する
法則14 新着リストに更新時間を表示する
法則15 画像と簡単な情報をまとめた商品一覧ページを作成する
法則16 下層ページの情報量をリストに表示してユーザーのストレスを軽減する
法則17 状況に合わせた文字入力フォームを選択する
法則18 スマートフォンらしいタッチパネルを生かしたフォームを利用する
法則19 選択入力可能なメニューを利用する
法則20 必須項目が入力されたら「送信」ボタンをアクティブに変更する
法則21 基本要素を理解してユーザーフレンドリーなアンケートページを作成する
法則22 買い物カートを利用したECサイトを作成する
章末コラム iPhoneとAndroidの違い

 

第2章 基本的なUIパーツを使いこなす法則

法則23 検索フォームにプレースホルダーとフィルタリング機能を使う
法則24 オートコンプリート機能を利用してユーザーの入力をサポートする
法則25 フォームの入力内容をあらかじめ指定する
法則26 ダイアログボックスの閉じ方やトランジションをカスタマイズする
法則27 ダイアログボックスの「閉じる」ボタンの位置を変更する
法則28 サイトが単調にならないようにダイアログボックスを使い分ける
法則29 ポップアップウィジェットを使用する
法則30 ポップアップウィジェットの位置や見栄えを変える
法則31 オーバーレイポップアップウィジェットを使用する
法則32 パネルウィジェットを使用して複雑なサイト構造を一覧できるようにする
法則33 パネルウィジェットにリストを設置してより多くのリンクを表示させる
法則34 グリッドレイアウトを使った緩急のあるサイトを作る
法則35 レスポンシブグリッドでモニタサイズや端末の向きに応じたレイアウトにする
法則36 レスポンシブテーブルでモニタサイズや端末の向きに応じたレイアウトにする
法則37 カラムトグルのチェックボックスを使ってコンテンツの表示・非表示を切り替る
法則38 開閉式コンテンツを利用して情報を効率的に格納する
法則39 開閉式コンテンツを複数並べてアコーディオンメニューにする
法則40 開閉式コンテンツのアイコンを変更する
章末コラム CSSのマルチクラスの記述方法

 

第3章 ページレイアウトをカスタマイズする法則

法則41 複雑になりがちなリストを見やすくする
法則42 初期状態の2つのテーマを理解する
法則43 自分で新しいテーマを作成してページに反映する
法則44 ページ遷移のエフェクトを理解して状況によって使い分ける
法則45 ヘッダとフッタを画面外に移動させ、フルスクリーンモードで読みやすくする
法則46 サイト全体に共通でヘッダ、フッタを固定表示する
法則47 ヘッダに複数のボタンを設置してページ全体の情報量を増やす
法則48 レイアウトを工夫してフッタを活用し、サイトをより見やすくする
法則49 ヘッダメニューをプルダウンメニューに変更してボタン数を増やす
法則50 プルダウンメニューに一手間加えて操作感を向上させる
法則51 ページ遷移時に表示されるローダーをオリジナルのものにする
法則52 省略されて「...」と表示される長いテキストを省略しないようにする
法則53 「ホーム画面に追加」をした際のサイトのアイコンをカスタマイズする
法則54 背景にパターン画像を敷いてjQuery Mobileサイトの見栄えを変える
法則55 タブナビゲーションに通知件数アイコンを入れる
法則56 端末の種類や回転方向、解像度を識別してスタイルを反映する
法則57 オリジナルアイコンを作成してサイトのオリジナリティを高める
法則58 CSS3のグラデーションを利用した立体的なボタンを作成する
法則59 CSS3のシャドウを利用した立体的なボタンを作成する
法則60 グローバル設定を利用してサイト全体のレイアウトを統一する
法則61 すべてのページにTwitterとFacebookへの投稿ボタンを設置する
法則62 デフォルトの角丸とドロップシャドウを削除してシンプルなページを作成する
法則63 ページトランジションを自分でカスタマイズする
章末コラム CSSやCSS3の活用

 

第4章 スマートフォンならではのジェスチャーを生かす法則

法則64 スマートフォン独自のジェスチャーに対するイベントを取得する
法則65 画面の回転のタイミングを取得して縦長画像と横長画像を入れ替える
法則66 背景色をスクロール位置に応じて変える
法則67 ページのロードが完了した結果で成功と失敗のメッセージを表示する
法則68 ページを移動するたびにランダムに画像を切り替える
法則69 スクロール位置が変わったときにページトップボタンを表示する
法則70 どのリンクから移動してきたかによってページ上の文章を変える
法則71 複数の開閉パネルを同時に開いたり閉じたりする
章末コラム マウスで操作するサイトとタッチ端末で操作するサイト

 

第5章 フレームワークやプラグインを活用する法則

法則72 スマートフォンサイトでGoogleマップを表示する
法則73 Googleマップにマーカーを付けたりクローズアップしたりする
法則74 端末をシェイクして画面を変える
法則75 スワイプで次の画像に移動するフォトギャラリーを作る
法則76 入力された郵便番号をもとに住所を自動表示する
法則77 リスト要素の右肩にバッジを追加する
法則78 データロードの成功時と失敗時に状況に合わせたアラートを表示する
法則79 Webサイト上で効果を見ながらjQuery Mobileのテーマを作成する
法則80 サードパーティ製のデザインを探してページに反映する
法則81 Twitter Bootstrap風のデザインにする
法則82 jQuery Mobile独自のデザインを利用しないようにする
章末コラム オープンソースのプラグインの選び方

 

第6章 WordPress&EC-CUBEをカスタマイズする法則

法則83 YouTube RSSフィードからJSONをロードして一覧表示する
法則84 検索結果の一覧にサムネイル画像を表示する
法則85 作成したリストをタブで切り替えられるようにする
法則86 通知プラグインを使用して、RSSのロードに失敗したらアラートを表示する
法則87 WordPressで構築したブログを端末に合わせて振り分ける
法則88 WordPressに対応したjQuery Mobileテーマを作成する
法則89 検索サイトからリンクしてきたときにもトップページに戻れるようにする
法則90 「前の記事へ」「次の記事へ」リンクをテキストからボタンに変更する
法則91 パネルウィジェットに固定リンクや外部リンクを格納する
法則92 縦に長くなりがちなページをコンパクトにまとめる
法則93 jQuery MobileでGoogleアナリティクスを使ってアクセス解析を行う
法則94 ブログをソーシャルメディアに対応させ、SNSのボタンを設置する
法則95 WordPressとjQuery Mobileで作ったブログに自作テーマを適用する
法則96 EC-CUBEのメニューをスマートフォン向けにコンパクトにまとめる
法則97 ポップアップウィジェットを使用してログイン関連のメニューをコンパクトにまとめる
法則98 ECサイトにローテーションバナーを設置して訪問者の視線を誘導する
法則99 「おすすめ商品」をスライドバナーからリストビューに変更する
法則100 限定商品に在庫数が表示されたバッジを付けて目立たせる
章末コラム SassとCompassで作成するjQuery Mobileテーマ

関連書籍

好評発売中

できるホームページ・ビルダー22 SP対応

かんたん・きれい・本格的なページを作れる!

好評発売中

できるポケット WordPressホームページ入門 基本&活用マスターブック WordPress Ver.5.x対応

最新WordPress Ver.5.xの使い方がサクッと身に付くポケットサイズの入門書!

ダウンロード

  • 本書で解説しているソースコードなどは、下記のリンクをクリックしてダウンロードしてください。
     

    なお、ダウンロードしたファイルはzip形式で圧縮されています。展開してからご利用ください。 

    3537_sample.zip

お詫びと訂正

誤記のためにご迷惑をおかけし、誠に申し訳ございません。

  • 23ページ ソースコード
    • [誤]
      ソースコード中の「btn」が「btm」になっていました。
    • [正]
      ◎デフォルトのボタンのコード
      <a href="#" class="ui-btn">ボタン</a>

      ◎ボタンの横幅を広げるコード
      <a href="#" class="ui-btn ui-btn-inline">ボタン</a>

      ◎ボタンを小さくするコード
      <a href="#" class="ui-btn ui-mini">ボタン</a>

お問い合わせ

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

お問い合わせフォーム