多様なユーザーニーズや閲覧環境に応える、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フロントエンドディベロッパー　佐藤歩様

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

好評の既刊書籍の著者、監修者が再び集結！

ヘイドン・ピカリング

実用デザイナー、ライターで講演を行うかたわら、SMASHING MAGAZINEのWebアクセシビリティ担当エディター、The Paciello Groupのコンサルタントも務める。Webをインクルーシブな場所にするための新しい方法や革新的な手段に関心を持ち、ユーザー調査、システム思考、プレーンで昔ながらのセマンティックを持つHTMLといったものすべてを活用する。文章を書いたり、コードを書いたり、イラストを描いているとき以外は、メンタルヘルスに関するキャンペーンを行ったり、サウンドデザインに挑戦したり、自分でデチューンしたSGのコピーギターでドゥームメタルのリフを繰り返し弾いたり。そしていつも、オリジナルレシピのギネスとナガチリで燃料補給している。

太田良典(弁護士ドットコム株式会社)

エキスパートエンジニア。HTML仕様の翻訳や解説といった個人活動をしながら、2001 年よりビジネス・アーキテクツで大規模企業サイトの制作や管理に従事。Web技術の分野で幅広い専門性を持ち、セキュリティ分野においては「第二回IPA賞（情報セキュリティ部門）」を受賞。 アクセシビリティ分野では、ウェブアクセシビリティ基盤委員会(WAIC)の翻訳作業部会主査として活動。 著書（共著）に『デザイニングWebアクセシビリティ』（ボーンデジタル）など。

伊原力也(freee株式会社)

アクセシブルなインタラクションデザインの実践を標榜し、Webサービスやスマートフォンアプリの設計業務に従事。ウェブアクセシビリティ基盤委員会（WAIC）理解と普及作業部会委員としても活動。HCD-Net認定 人間中心設計専門家。クリエイティブユニットmokuva所属。共著書に『デザイニングWebアクセシビリティ』、監訳書に『コーディングWebアクセシビリティ』（ボーンデジタル）。

1章：はじめに

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

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

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-1 原則ごとの評価における問題点
• 5-2 Custom ElementsとShadow DOM

6章：ナビゲーション領域

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

7章：メニューボタン

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

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

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

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