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

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

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

本の表紙

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

本のキャプチャ

インクルーシブHTML+CSS&JavaScript
[Amazonでみる]
[楽天でみる]

著:
ヘイドン・ピカリング
監訳:
太田良典、伊原力也
出版社:
株式会社ボーンデジタル
発売日:
2017/11/2

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アクセシビリティの紹介記事

本のキャプチャ

インクルーシブHTML+CSS&JavaScript
[Amazonでみる]
[楽天でみる]

著:
ヘイドン・ピカリング
監訳:
太田良典、伊原力也
出版社:
株式会社ボーンデジタル
発売日:
2017/11/2

献本の御礼

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

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

top of page

©2017 coliss