Webタイポグラフィの制作の変遷と現代的常識

2020年12月10日 01:09

2021年2月17日に、株式会社ビー・エヌ・エヌから発行される
『オンスクリーンタイポグラフィ－事例と論説から考えるWebの文字表現』にて、共著者として私が執筆した拙稿の冒頭部をここに紹介する。
ぜひ、本書も一度、手に取っていただきたい。

ISBN：978-4-8025-1207-7
定価：本体3,000円＋税
仕様：B5判変型／192ページ
発売日：2021年02月17日
著者：伊藤庄平、佐藤好彦、守友彩子、桝田草一、カワセタケヒロ、ハマダナヲミ、きむみんよん、関口浩之、生明義秀
デザイン：田中良治（Semitransparent Design）

出版社オフィシャルウェブサイト
http://www.bnn.co.jp/books/10844/?fbclid=IwAR06VHN2CHhwF9YVh9PKpnBwv68yN1KluwPw0sW93DsOY8O2u6x0vYx1WYA

Amazon
https://www.amazon.co.jp/dp/4802512074/ref=cm_sw_em_r_mt_dp_wieeGbQY80BFN

序文

Webが誕生して以来、WebデザインとWebタイポグラフィは大きな変遷の連続であった。

1990年代のCSSをまったく利用できなかった黎明期に始まり、2000年代前半の幾多の問題を抱えたInternet Explorerの隆盛、2000年代後半のWeb標準の常識化とモダンブラウザの勃興、2010年代前半の急速に普及する多様なデバイスへの対応、そして2010年代後半のHTML5とCSS3の定着というように、変化の激しいWebの歴史に合わせて、Webデザインのつくり方も移ろいできたのだ。

本稿では、Webにおけるタイポグラフィの制作手法とその変遷を時代に沿って振り返り、また、現代的な手法についても考察してみたい。

黎明期のHTMLデザイン時代（Webの誕生から1990年代末まで）

1993年4月に、ティム・バーナーズ=リーが発明したWorld Wide Web（以下Web）をCERN（欧州原子核研究機構）が無料で誰でも利用できるよう開放を発表した直後から、Webは当時のIT業界やインターネット関係者はもとより、多くの産業界からも注目を集め、昇竜の勢いで世界中のビジネスや市民の生活に浸透していった。

最初期のWebブラウザであるNCSA Mosaicを開発したマーク・アンドリーセンがネットスケープコミュニケーションズを設立し、Netscape Navigatorをリリースするとまたたく間に普及し、最初のデファクトスタンダードなWebブラウザとして人気を博す。しかし、まもなくマイクロソフトから登場したInternet Explorerとシェア争いをするようになり、いわゆる第一次ブラウザ戦争が勃発する。1998年にはシェアがひっくり返り、
Internet Explorerが世界で最も利用される時代を迎え、それが10年ほど続いた。

いわゆるHTML（HyperText Markup Language）は、Webページの文書構造を指定するためのものである。そのHTMLに対し、視覚的なビジュアルデザインやタイポグラフィなどの「見た目」を指定するのがCSS（Cascading Style Sheet）である。その誕生は意外に早く、ティム・バーナーズ=リーと同じくCERNに勤めていたホーコン・ウィウム・リーによって、1994年には提唱されていた。1996年12月に、Webの標準化団体であるW3C（World Wide Web Consortium）からCSSの最初の勧告であるLevel 1が、1998年5月にはLevel 2が出された。

しかし、シェア争いの最中にあるNetscape NavigatorおよびInternet ExplorerともにCSSへの対応状況が低く、また、独自の機能やHTML要素（タグ）の搭載を各々が利己的に進めた結果、HTMLのみの同一のソースに関わらず、表示結果はまったく様相が違うものであった。
CSSを使うことが不可能だったこの時代の、ビジュアルデザインやタイポグラフィを具現化する方法は二つあった。

一つは、HTMLのみでビジュアルデザインを行うというもの。本来であれば、HTMLはHyperText Markup Languageという名の通り、ハイパーテキストと文書構造を記述するための形式言語である。決して視覚の指定を記述するためのものではなく、それはCSSが担う役割である。しかし、当時のCSSのLevel 1と不揃いのWebブラウザの仕様規格の状況では、HTMLを駆使するより他の策がなかった。その最たるところが、テーブル要素でビジュアル的なレイアウトを施す、いわゆるテーブルレイアウトである。

また、90年代に活用された古典的なHTMLには、ビジュアル的な指定をするための要素が用意されていた（図1）。このfont要素やcolor属性は非推奨
（Deprecated）のものであり、現在は使用禁止の指定がされている。当時は文字の色の変更以外にも文字のサイズや行の揃え位置などもHTMLで施されていたが、もちろん現代では非推奨である。

図1: ソースコードと表示例。font要素は現在、非推奨として使用が禁じられている

<p><font size="4" color="#669933">山路を登りながら、こう考えた。知に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安いところへ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生まれて、画ができる。</font></p>

CSSの代わりとなっていた二つ目の方法は、文字をビットマップ画像にして張り込んでしまうというものであった。Webは本来英語圏で生まれ開発されたということもあり、ゆえに当時のWebブラウザは欧文にのみ最適化されている仕様であったため、特に日本語などの非欧文の環境では、そのまま文字をHTMLに流し込んだだけでは読みづらかった。例えば、デフォルト（初期設定）のままでは文字サイズが小さめであったり、行送りの高さが狭いといった具合である。特に当時のHTMLでは行送りを変更できる方法がなかったため、やむなく最終的手段として文字が表示される箇所を完全画像化するという方法が採られた。本文も含め、Webページ上のすべての文字が丸ごと画像で張り込まれるという事例もあった。

さらには、Webフォントサービスがまだ登場していない時代であるため、デザイナーが意図するフォントを指定できないことも、文字の画像化を押し進めた一因でもあった。

また、当時はWebデザイナーという専門職の存在はごくまれであり、グラフィックデザイナーが片手間のようにしてWebデザインからコーディングまで請け負うことは珍しくなかったため、印刷物と同様な成果物の「終わり（見た目）よければ、すべてよし」という発想のもとに制作が進むことが往々にあり、セマンティックへの配慮やソースコードの正当性が無視されたWebサイトが多数を占めた時代であった。

CSSの利用解禁とその普及（2000年代前半）

2000年代に入る頃には、ようやくWebブラウザのCSS対応が進み、Webサイトの制作側も部分的にCSSを使いだすようになる。特に、文字サイズや行送り、文字色など、Webページのビジュアルに与える影響が大きいタイポグラフィ関連の部分が先行して、CSSの利用が進んだ（図2）。

図2: ソースコードと表示例。HTMLとCSSは、分離して記述することが望ましい

p.sample {
	font-size: 125%;
	line-height: 1.75;
	color: #669933;
}

<p class="sample">山路を登りながら、こう考えた。知に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安いところへ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生まれて、画ができる。</p>

この時代はInternet Explorerの最盛期であり、一時期は世界中の利用者シェアが95%を超えたが、バグとも取れるW3Cの勧告と相容れないCSSの解釈と実装などのため、Webコンテンツを表示する際に不具合や不都合が伴った。さらには、Internet Explorerはメジャーアップデートの度に表示の仕様や特徴が変わり、自身のバージョン間の互換性すら保持できなかった。

これらの問題は、Web業界やWeb制作者にとって重い負担を強いることになり、また、W3Cが推奨するWeb標準の普及を大きく遅らさせることになった事実は、人類全体にとって大きな不幸であった。

Internet Explorerによって文字サイズの設定に制約があった事例をここに挙げる。絶対単位であるpxを用いたWebデザインをするのであれば、文字サイズの単位にもpxを設定したところだが、当時のInternet Explorerはpxで文字サイズを指定すると、閲覧者側で文字の表示サイズを変更できなくなるというユーザビリティやアクセシビリティにかかる致命的な問題があった。そこでpxの代わりに%を文字サイズの単位に使うことでこの問題に対応していたが、CSSのfont-sizeプロパティは子孫へ継承するため、先祖要素が持つ%値の煩雑な掛け合わせの算出が必要になり、Webデザインやコーディングの大きな負担になった（図3）。

図3: font-sizeプロパティは継承するため、単位%で文字サイズを指定した場合、先祖要素の文字サイズが掛け合わされてgrandsonの文字サイズが決まる

body {
	font-size: 100%; /* 16px */
}
.parent {
	font-size: 150%;
}
.child {
	font-size: 75%;
}
.grandson {
	font-size: 125%;
}

<body>
	<div class="parent">
		<div class="child">
			<p class="grandson">16px × 150% × 75% × 125% = 22.5px</p>
		</div>
	</div>
</body>

また、この時代はMacromedia（後にAdobeと合併）のFlashもWebコンテンツのプラットフォームとして隆盛を極めた。よりリッチなコンテンツの需要が高まったことがその理由であるが、クライアントサイドでFlashのプラグインが機能してさえいれば、OSやWebブラウザから大きな影響を受けることなく一様のコンテンツを表示し動作させられたことも理由の一つである。

Web標準の一般化とモダンブラウザの勃興（2000年代後半）

2000年代も後半になると、CSSを駆使してWebのビジュアルデザインを具現化する制作手法がWebデザイナーやコーダーらに浸透する。また、Web制作業界に「Web標準」の啓蒙が進み、それがようやく一般化し常識に至った。

Internet Explorerの牙城を少しずつ切り崩しながらシェアを伸ばしてきたMozilla FoundationのFirefoxやアップルのSafari、オペラ・ソフトウェアのOperaなど、新興Webブラウザに追随する形で2008年にGoogle Chromeが参戦し、第二次ブラウザ戦争が勃発する。1990年代の第一次ブラウザ戦争と違い、マイクロソフトのInternet Explorerのみが前時代的な機能性や動作速度など旧態依然のままであり、他の競合Webブラウザのように先進的なバージョンアップも図れなかったことが、そのシェアを落とすことにつながった（図4）。

図4: InternetExplorerのシェアは2002年に絶頂期を迎え、その後、転落の一途をたどる（https://ja.wikipedia.org/wiki/ブラウザ戦争#/media/ファイル:Browser_Wars_(en).svgより）

また、この時代のWeb制作は、個性がばらばらだった当時の各Webブラウザのどれであっても一様に表示できるコーディングが求められ、Webブラウザに搭載されたデフォルトのCSS（ユーザエージェントCSS）を最初に書き換えて、地ならしをして均一化を図る「リセットCSS」という手法が普及する。また、Internet Explorerの各バージョン固有の「癖」に対応するためのテクニック（IEハックと呼ばれた）も合わせて流行した。

2007年には、世界最初のスマートデバイスであるiPhoneがアップルから発表され、利用者が急増する。スマートデバイスの登場に合わせて、Flashはその電力消費量やCPUの占有率などが大きいこと、プラグインのセキュリティーホールがあまりにも多いことなどが理由で淘汰されていった。

（本書にて続く）

『オンスクリーンタイポグラフィ－事例と論説から考えるWebの文字表現』
ISBN：978-4-8025-1207-7
定価：本体3,000円＋税
仕様：B5判変型／192ページ
発売日：2021年02月17日
著者：伊藤庄平、佐藤好彦、守友彩子、桝田草一、カワセタケヒロ、ハマダナヲミ、きむみんよん、関口浩之、生明義秀
デザイン：田中良治（Semitransparent Design）

出版社オフィシャルウェブサイト
http://www.bnn.co.jp/books/10844/?fbclid=IwAR06VHN2CHhwF9YVh9PKpnBwv68yN1KluwPw0sW93DsOY8O2u6x0vYx1WYA

Amazon
https://www.amazon.co.jp/dp/4802512074/ref=cm_sw_em_r_mt_dp_wieeGbQY80BFN

この記事が気に入ったらサポートをしてみませんか？