多様なユーザーニーズに応えるフロントエンドデザインパターン

インクルーシブHTML+CSS & JavaScript

パソコン、スマートフォン、タブレット、時計、テレビなどのインターネットコンテンツの多様化が進む中で、あらゆる人・検索ロボットやユーザーエージェントなどのマシーンを含む、幅広いターゲットにとって使いやすいコンテンツやインターフェイスのデザインをHTML, CSS, JavaScriptでどのように実現するのかを解説します。

在庫あり

ご注文日から最短2営業日でお届けいたします。詳しくはこちら。 この商品は送料無料にて、ボーンデジタルが直接販売、発送いたします。

定価 3,024円(税込)
判型 B5正寸
総ページ数 264
発売日 2017年11月2日
ISBN 978-4-86246-387-6
著者 ヘイドン・ピカリング
監修 太田良典、伊原力也
翻訳 Bスプラウト
発行 株式会社 ボーンデジタル

イメージ:インクルーシブHTML+CSS & JavaScript

数量

送料無料

※後からでも冊数変更できます

  • ご利用ガイド
  • 内容
  • 目次
  • 立ち読み
  • お詫びと訂正

多様なユーザーニーズや閲覧環境に応える、HTML+CSS & JavaScriptの実装をマスターしよう!

この書籍は、パソコン、スマートフォン、タブレット、時計、テレビなどのインターネットコンテンツの多様化が進む中で、あらゆる人・検索ロボットやユーザーエージェントなどのマシーンを含む、幅広いターゲットにとって使いやすいコンテンツやインターフェイスのデザインをどのように実現するのかを解説するものです。HTML5、CSS3、JavaScriptといったフロントエンド言語のデザインパターン(プログラムのパターン)を豊富なコンテンツやインターフェイスの実例とともに紹介します。

原書のInclusive Design Patterns – Coding Accessibility Into Web Designは2016年10月にドイツ Smashing Magazineから刊行され、高い評価とレビューを得ています。

この書籍は、上記書籍の日本語版として、プロフェッショナル/学生を問わず、今日のWebサイトやWebアプリケーションを設計、デザイン、実装(プログラミング)するあらゆる従事者の方をターゲットに制作しました。

既刊のデザイニングWebアクセシビリティ、コーディングWebアクセシビリティの実装面の理解を深めるために

HTMLやCSSに関する書籍は、主にレイアウトなどの見た目を実現するためのHTMLやCSSのパターン集が多くなりますが、本書はWebの本質に立った、「あらゆる環境やユーザーにとって使える(つまり除外しない)」WebサイトやWebアプリケーションの実装のアプローチ方法について解説しています。これは、弊社刊行のデザイニングWebアクセシビリティなど限られた書籍でしかアプローチされていません。

弊社既刊「デザイニングWebアクセシビリティ」や「コーディングWebアクセシビリティ」をお読みいただいた方は、豊富なコードパターン解説を通じて、実装面の理解をぜひ深めてみてください。

推薦コメント:株式会社サイバーエージェント Webフロントエンドディベロッパー 佐藤歩様

一見して見慣れない「インクルーシブ」という主題だが、フロントエンド開発の本質を実によくとらえている。利用環境がどのような条件下にあっても使用に耐えうる堅牢な実装は、サービスやコンテンツの価値を最大化するために不可欠である。本書が取り扱う事例は決して新奇なものではない。しかし、一般的な事例を「インクルーシブ」な視点から再考することによって、優れたフロントエンド開発者のみが実践してきた秘伝を学ぶことができるはずだ。

目次
  • 第1章 はじめに
  • 第2章 ドキュメント全体
  • 第3章 パラグラフ
  • 第4章 ブログ記事
  • 第5章 パターンごとの評価
  • 第6章 ナビゲーション領域
  • 第7章 メニューボタン
  • 第8章 インクルーシブ・プロトタイピング
  • 第9章 商品リスト
  • 第10章 フィルターウィジェット
  • 第11章 登録フォーム
  • 第12章 テスト駆動マークアップ

第1章

はじめに


第1章:はじめに より

  • 1-1 Webデザインを考え直す
  • 1-2 インクルーシブデザイン
  • 1-3 インクルーシブなボタン

第2章

ドキュメント全体


第2章:ドキュメント全体 より

  • 2-1 DOCTYPE
  • 2-2 lang属性
  • 2-3 レスポンシブデザイン
  • 2-4 フォントサイズ
  • 2-5 プログレッシブエンハンスメント
  • 2-6 アセットの管理
  • 2-7 フォントのサブセット化
  • 2-8 <title>要素
  • 2-9 <main>要素
  • 2-10 ページを見てみよう
  • 2-11 フレームワーク、プリプロセッサ、タスクランナーについての注意

第3章

パラグラフ


第3章:パラグラフ より

  • 3-1 書体
  • 3-2 組版
  • 3-3 インラインリンク
  • 3-4 自動化されたアイコン
  • 3-5 パラグラフの記述
  • 3-6 まとめ

第4章

ブログ記事


第4章:ブログ記事 より

  • 4-1 <main>要素
  • 4-2 見出しの構造
  • 4-3 <article>要素
  • 4-4 プログレッシブエンハンスメントと相互運用性
  • 4-5 Flesch-Kincaidリーダビリティテスト
  • 4-6 見出しとリンクテキスト
  • 4-7 ビデオ
  • 4-8 フローシステムの確立
  • 4-9 まとめ

第5章

パターンごとの評価


第5章:パターンごとの評価 より

  • 5-1 原則ごとの評価における問題点
  • 5-2 Custom ElementsとShadow DOM

第6章

ナビゲーション領域


第6章:ナビゲーション領域 より

  • 6-1 ナビゲーションランドマーク
  • 6-2 サイト内共通のナビゲーション
  • 6-3 目次
  • 6-4 まとめ

第7章

メニューボタン


第7章:メニューボタン より

  • 7-1 アイコンの表示方法
  • 7-2 ラベルづけ
  • 7-3 古いブラウザ
  • 7-4 操作
  • 7-5 タッチターゲット
  • 7-6 まとめ

第8章

インクルーシブ・プロトタイピング


第8章:インクルーシブ・プロトタイピング より

  • 8-1 ペーパープロトタイピング
  • 8-2 紙からコードへ

第9章

商品リスト


第9章:商品リスト より

  • 9-1 リストの長所
  • 9-2 カギとなる情報
  • 9-3 商品のサムネイル
  • 9-4 「今すぐ購入」アクション
  • 9-5 SERP
  • 9-6 まとめ

第10章

フィルターウィジェット

  • 10-1 見た目の例
  • 10-2 マークアップ
  • 10-3 CSSによる拡張
  • 10-4 JavaScriptによる拡張
  • 10-5 検索結果をもっと読み込む
  • 10-6 表示オプション
  • 10-7 動的なコンテンツへの柔軟な対応
  • 10-8 まとめ

第11章

登録フォーム

  • 11-1 コンテキストに応じたフォーム
  • 11-2 基本のフォーム
  • 11-3 必須フィールド
  • 11-4 パスワードを表示する
  • 11-5 フォーム検証
  • 11-6 マイクロコピーライティング
  • 11-7 まとめ

第12章

テスト駆動マークアップ


第12章:テスト駆動マークアップ より

  • 12-1 セレクタのロジック
  • 12-2 テスト駆動のタブインターフェイス
  • 12-3 1つですべてを賄う必要はない

画像をクリックすると拡大表示いたします。

多様なユーザーニーズに応えるフロントエンドデザインパターン

インクルーシブHTML+CSS & JavaScript

3,024円(税込)/B5正寸/264ページ/2017年11月2日

カートに入れる

関連商品

イメージ:紙版デザイニングWebアクセシビリティ

紙版デザイニングWebアクセシビリティ

アクセシブルな設計やコンテンツ制作のアプローチ

イメージ:紙版コーディングWebアクセシビリティ

紙版コーディングWebアクセシビリティ

WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション

Design Log

WORKS ONLINE BOOK STORE BLOG

CGWORLD.JP

WORKS_TW

CGWJP_TW

CGKENTEI