デバイスやビジターを選ばずに、HTMLとCSSとJavaScriptを使った最適な実装方法が身につくオススメの本

インクルーシブとは直訳すると、包括、全てを含むこと。Webデザインにおいて、ビジター・デバイスなどあらゆるものを排除せずに全てを受け入れるようにすることです。

デスクトップやスマホなどデバイスを選ばずに、健常者やお年寄りなどビジターを選ばずにアクセスできるよう、HTMLとCSS、そしてJavaScriptを使った最適な実装方法が身につくオススメの一冊を紹介します。

HTML, CSS, JavaScriptは関係ないと思ってるデザイナーやディレクターもデザインの在り方、これから必要となるフロントエンドのデザインパターンについて、理解を深めるために役立ちます。

Amazonでは発売日が11/4になっているようですね。
予約注文で、11/4にゲットです！

紙面のキャプチャで、中身を少しだけご紹介。

Webデザインの大きな特徴は、不変ではない、ということです。例えば紙のデザインであれば、紙のサイズや質は決まっており、そこに掲載するコンテンツも決まっています。しかし、Webデザインは表示するデバイスはさまざまなものがあり、コンテンツも動的や更新などで変わる可能性があり、不変ではありません。
そこで重要になるのが「インクルーシブ」です。アクセシビリティは障害者のためだけではなく、ビジターやデバイスなどあらゆるものを排除せずに全てを受け入れます。

本書ではこのインクルーシブを取り入れるために、どのように実装するのがよいか、その考え方から具体的なコードまで詳しく解説されています。

レスポンシブに対応するのもインクルーシブにおいて重要です。
ブレイクポイントはどのように設定していますか？ 特定のデバイスのサイズを基準するのでは、数が多すぎます。デザインの段階から柔軟なコンテンツを設計し、コンテンツのレイアウトが切り替わるところにブレイクポイントを設定すると、さまざまなデバイスで最適なレイアウトを提供できます。
この方法を使用すると、未来のiPhoneでサイズが変更されても問題は生じないでしょう。

フォントのサイズをどのようにするか、悩むWeb制作者も少なくないと思います。Media Queriesで使う単位にpx, em, remのどれが一番いいと思いますか？
「PX, EM or REM Media Queries?」は当ブログで翻訳しているので、参考にどうぞ。
参考: Media Queriesで使う単位はpx, em, remのどれが適しているか検証

3つ前に掲載した、DOCTYPE、lang属性、レスポンシブデザイン、フォントサイズなど、インクルーシブなドキュメントを構成すると、HTMLのひな形が完成します。

何かを作る時は、目標を定めておくことも大切ですよね。
本書では採点方式で、その恩恵を誰が受けるのかを考えています。

ひな形が完成した後は、コンテンツの個々の実装について学びます。外部リンクにアイコンが添えられていると非常に分かりやすく、アクセシブルな情報をユーザーに提供することができます。もちろん、実装の負荷は最小限にし、制作者への負担も少なくします。

見出し関連の仕様はHTML5.0で一旦大きく変わり、HTML5.1でまた大きく変わりました。見出しはどのように構造化させるとよいのか、main要素はどのように使うのか、一読すると迷うことはなくなります。
また、本書の大きな特徴が監修者による注釈です。これは原書と日本の差異を埋めるだけでなく、刊行のタイムラグも埋めており、2017年現在の最新情報で解説されています。

マークアップをした際に、要素を視覚的には隠し、スクリーンリーダーには読み上げるようにしたいことがあると思います。display:none;やvisibility:hidden;などではうまく機能しません。そんな時は「.visually-hidden」を使用すると期待通りに機能します。

コンテンツのグルーピングと分離もWebページを実装する上で、頻繁にでてくると思います。パラグラフを並べたコンテンツ、リストを使ったコンテンツ、これらをどのようにグルーピングし、どのように分離させるのか、ユーザーにも制作者にも分かるように実装する必要があります。

ナビゲーションの現在位置をどのように実装しますか？ ユーザーが今表示しているページが分かればサイトはより使いやすくなり、やり方を間違えなければ、このユーザビリティの向上はインクルーシブなものに繋がります。

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

1. はじめに

   Webデザインを考え直す

   インクルーシブデザイン

   インクルーシブなボタン

2. ドキュメント全体

   DOCTYPE

   lang属性

   レスポンシブデザイン

   フォントサイズ

   プログレッシブエンハンスメント

   アセットの管理

   フォントのサブセット化

   <title>要素

   <main>要素

   ページを見てみよう

   フレームワーク、プリプロセッサ、タスクランナーについての注意

3. パラグラフ

   書体

   組版

   インラインリンク

   自動化されたアイコン

   パラグラフの記述

   まとめ

4. ブログ記事

   <main>要素

   見出しの構造

   <article>要素

   プログレッシブエンハンスメントと相互運用性

   Flesch-Kincaidリーダビリティテスト

   見出しとリンクテキスト

   ビデオ

   フローシステム

   まとめ

5. パターンごとの検証

   原則ごとの評価における問題点

   Custome ElementsとShadow DOM

6. ナビゲーション領域

   ナビゲーションランドマーク

   サイト内共通のナビゲーション

   目次

   まとめ

7. メニューボタン

   外観

   アイコンの表示方法

   ラベルづけ

   古いブラウザ

   操作

   タッチターゲット

   まとめ

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

   ペーパープロトタイピング

   紙からコードへ

9. 商品リスト

   リストの長所

   カギとなる情報

   商品のサムネイル

   「今すぐ購入」アクション

   SERP

   まとめ

10. フィルターウィジェット

    見た目の例

    マークアップ

    CSSによる拡張

    JavaScriptによる拡張

    検索結果をもっと読み込む

    表示オプション

    動的なコンテンツへの柔軟な対応

    まとめ

11. 登録フォーム

    コンテキストに応じたフォーム

    基本のフォーム

    必須フィールド

    パスワードを表示する

    フォーム検証

    マイクロコピーライティング

    まとめ

12. テスト駆動マークアップ

    セレクタのロジック

    テスト駆動のタブインターフェイス

    1つですべてを賄う必要はない

本書は「コーディングWebアクセシビリティ」の続編で、前書に比べてより実践的な内容になっています。前書を読んでない人でももちろん大丈夫です。
コンテンツをはじめ、ナビゲーションやボタンやリストやフォームなどを実装する際にコーダーが悩むポイントを詳しく解説されています。
参考: コーディングWebアクセシビリティの紹介記事

献本の御礼

最後に、献本いただいたボーンデジタルの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス