『オンスクリーン タイポグラフィ 事例と論説から考えるウェブの文字表現』をほんのちょっぴりお手伝いした話

ツイートは2コマオチにもなってないんですけど、ビー・エヌ・エヌ社から2月17日に発売される『オンスクリーン タイポグラフィ 事例と論説から考えるウェブの文字表現』について、ますぴーさん（@masuP9、以下敬称略1）の担当した章をレビューしました。そういうこともあって、発売日よりも前に出来あがった本を頂戴しましたというのが端的な話です。まあそれだけなら前出のツイートで十分ですし、せっかく頂いたのですから何か宣伝のようなものをしておくのが筋というものでしょう、たぶん。ということで書籍の内容に触れつつ、筆者目線でブログ記事として仕立て上げてみました。

今回レビューさせてもらったのは、「04_Webアクセシビリティとタイポグラフィ[前編]」という章です（ちなみに後編もあるのですが、こちらについては筆者はタッチしていません2）。ウェブアクセシビリティの観点からはいろいろなことが書けるものの、紙面の都合もあって、ぎゅっと押し込むのが難しい側面もあったんじゃないかと思います、というかそれに近しい話はレビューの中でますぴーとやり取りしていた気はします。そういう紙メディア特有の難しさがある一方で、タイポグラフィというお題に沿いつつも、アクセシビリティのWCAGの達成基準をガチでぶっ込んできつつ（今にして振り返ると結構すごい話ではあり）、ますぴーが内容を噛み砕いていい感じにまとめています。なお、先に示した書名のリンクは出版社のリンクだったりしますが、そちらでますぴーの執筆した担当章がチラ見できたりもします。

本書に関する詳しいことは前述したリンク先を見てもらうとして、それぞれ違う方が執筆している全9本の論説と、80例のサイトのスクリーンショットを交えてタイポグラフィのあれこれを紐解いていくものとなっています。9名の中には、ますぴーと、『いちばんよくわかるWebデザインの基本きちんと入門　レイアウト／配色／写真／タイポグラフィ／最新テクニック』で名前を見かけたことのある伊藤庄平氏3、あとはフォントおじさん（@HiroGateJP）こと関口浩之氏の名前もあります。ひきこもりの筆者にして、ますぴー以外の名前を出せたぞ、えらいっ（偉いのか）。

失礼ながら名前を存じ上げない他の方々は、肩書きとしてデザイナーを名乗っている方が多いのかなという印象です。そういうこともあってか、事例としてサイトのスクリーンショットにかなりの紙面が割かれており、そこにコメントが添えられています。コメントを眺めつつサイトのスクリーンショットを印刷物でもって見比べるのも存外面白いものだなあという感想です。文章を読まなくても（いや読めよって話ですけども）、目で楽しめるのは良いですね。

ちなみに、アクセシビリティの事例として挙げているものは、本書の巻末を見た限りではますぴー選みたいです。事例のピックアップの仕方としては、あーなるほどねーわかるわかるー、って感じです。

論説と内容としては、レイアウトの話がされている章があり、その中で自分の中で再発見したのが、floatとshape-outside（CSS Shapes）を組み合わせるという話です。これについては頭の片隅で一瞬おおっ？！と思ったんですけれども、落ち着いて振り返ればそれ昔におおっ？！ってなったやつだよね、ってなりました4,5。

それから、Webの歴史についても触れられている章があるんですけれども、なんと歴史的な流れでのウェブブラウザーとしてOperaの名前がちゃんとあるじゃないですか、素晴らしい…！しかしながら、Mozilla FoundationのFirefoxと書かれている一方で、オペラ・ソフトウェアのOperaとカタカナで書かれているのはどうして…って感じなのですが、まあ間違いではないのでむにゃむにゃ。6,7

あと、ほんの少し残念だなと思ったのは、全章をざっくり目を通した限りにおいて、どうやら誰もjlreq8方面に触れてはいない点です。タイポグラフィと組版はわりと近しいと思っているのですが、あんまりそうでもないのでしょうか。まあこのあたりがタイポグラフィのことをわかっていないゆえんなのでしょうけども。

そんなこんなで、果たして本当に本書の宣伝になっているのかどうかは怪しい面もありますが、ものすごくざっくりとまとめますと、ウェブブラウザーでのスクリーンショットを比較できつつ、比較的ライトな形で、ビジュアルデザインはもとより、CSSの話や（ウェブ）フォント、そしてウェブアクセシビリティをつまみ食いできる本なのかなと思います（つまみ食いというのがあんまり上品な言い回しじゃないですけども）。

前述したところによるつまみ食いをしてみたいと思う方、オンスクリーンなタイポグラフィとウェブアクセシビリティとの関連性を整理してみたいと思う方、ウェブアクセシビリティの事例としてどのようなサイトが取り上げられているのかが気になる方、ますぴーのファンだという方など、興味を持った方は書店で一度手に取ってみてはいかがでしょうか。

オンスクリーン タイポグラフィ 事例と論説から考えるウェブの文字表現

オンスクリーン タイポグラフィ 事例と論説から考えるウェブの文字表現

  1. さすがに初出で敬称を付けないわけにもいかないので「さん」を付けましたけども、なんか「さん」って付けるのもどうにもしっくりこないので、以下敬称略ということでひとつ。↩

  2. レビュワーとしてはタッチしていませんが、ついついWCAGのレベルAAまでの達成基準で考えてしまうクセが付いている一読者の身としては、WCAGに必ずしもとらわれない観点での記事は新鮮であり、勉強になりました。↩

  3. #deisui_html_radioでのますぴーの相方である越智さん(@otiext)の中の人と同姓だけど別の人。ちなみに『いちばんよくわかるWebデザインの基本きちんと入門』の共著者として越智さんも参加しており、そういうこともあって印象に残ってたり。↩

  4. 何言ってんだこいつ、ってなってると思いますけど（自分でも書きながら思ってます）、この記事を書いている時点でCSS Shapes仕様のステータスは2014年に発行されたCRのままだったりします。つまるところ、仕様面での（公開ドラフトとしての）進捗は7年ほど何も動いていないことになります。CSS Shapesちゃんの明日はどっちだ。↩

  5. CSS Shapesって何だったっけという人は、MDNのCSS シェイプあたりを漁ってください。↩

  6. 昔のIT mediaの記事とか日本語版Wikipediaにはそうあります。↩

  7. 正式にはOpera Software ASAだったはず。ちなみにASAはAllmennaksjeselskapというノルウェー語の略称で、簡単に言えば株式会社に相当するみたい。↩

  8. W3Cの発行するRequirements for Japanese Text Layout 日本語組版処理の要件（日本語版）のこと。もっとも、必ず触れなければならない代物でもないと思いますけども。↩