見出し画像

これからの"オンスクリーンタイポグラフィ" 【#ostd2019】

1本目ののnote更新となります。
よろしくお願いします。

・・・・・・・

1週間前の日曜日に、渋谷 Ameba Towes で開催された「ON-SCREEN TYPOGRAPHY DAY 2019(以下OSTD2019)」に行ってきました。

・・・・・・・

なぜ行ったのか

これまでに、Webフォントの使い方とか、カーニングを印刷媒体と同じような感じで制御できるCSSプロパティ(font-feature-settingsなど)とか、ノウハウ系の話はちらほら出てきました。
しかし、それらもひっくるめての、「オンスクリーンタイポグラフィ」はどうあるべきか、どうあれば最適解なのか、みたいな話はあまり語られてこなかったなあと思い、可能性を探る目的でこのセミナーに行ってみました。

オンスクリーンタイポグラフィの現状

Webは印刷媒体に比べてタイポグラフィ周りの制限が大きく、ある程度は編集の自由度が利かないことは許容され、また、それが印刷媒体と差別化された、Webの特徴の1つになっているのが現状です。

・読みやすい平易なフォントが好まれることが多い
 - 画面をスクロールしながらたくさんの情報を見ていく
 - Webサービスだと「情緒的価値 < 機能的価値」になってくる
・フォントは基本的に端末やブラウザに依存する
・Webフォントに対する一定のハードルがある
 - 導入コスト、ページロード時間など
・文字組が難しい

以上のような背景があり、どちらかというとタイポグラフィよりはコンテンツそのもの(情報の質)にこだわったり、Webフォントが採用できなかったり編集度の高い文字組を再現する場合にはSVGやPNGで書き出して表示させる場合が多いかなと思います。

このセミナーに参加した所感

OSTD 2019 は、導入等も含めますと計7セッションで構成されていました。

進行[関口 裕さん]

Introduction[カワセ タケヒロさん]
- 〝タイポグラフィ〟を怖がらないために

Session: 01[長谷川 弘佳さん]
- 美しいものを作るために“我々は何ができる”か

LT [小久保 浩大郎さん]

Session: 02[後藤 健人さん]
- バーティカル・グリッドでもっと深まるWebタイポグラフィ

Session: 03[桝田 草一さん]
- オンスクリーンにおけるベアボーンタイポグラフィ

Session: 04[土屋 綾子さん]
- コンテキストをピクニックしよう

Session: 05[有馬 トモユキさん]
- そうして言葉は飛んでいく

セミナーの中で特に興味深かったキーワードをあげてみます。

・すべての人に同質の情報を伝えることが大事。
・文字・写真・言葉がそれぞれの機能を果たしながらも、
 一体となって、何か伝わって来るものがあることが大事。
・コンテキストに思いを馳せた上でアウトプットする。
 そこになんらかの働きかけをする。
・放たれたコンテキストには、新しいコンテキストとつながる。
 自分以外の意志がどんどん加わっていく。
・編集点そのものがメッセージになる。

一連の流れを受けて、自分は

「伝えたいメッセージ」を確実に伝えるためには、何ができるのか

を常に問い続け、それを表現・実装することが重要であると感じました。

モバイルファーストやHTMLの要素をどの端末環境下でも同じものを使うというレスポンシブデザインの概念が浸透して5, 6年くらい経ちました。浸透しはじめた当時はPC, スマートフォン, タブレットといった様々な環境で同質な情報を提供できるので便利だなと思いましたが、デバイスの幅が一定ではないので長めのタイトルや見出しは変なところで改行されることもある点が気になっていました。適切なところで<br>を入れても、特定の幅が狭い環境下ではさらに改行されて崩れたようになってしまうこともありますし、難しいところです。。
絶対に見た目がどの環境でも変わらないようにするため、Retinaなどの高解像度でも綺麗に見せることができるSVGで表示させるようにすることもありますが、本文の方はテキストにしているゆえ見た目の統一がとれないこともあります。

そう思っている中で、
講演の中でも紹介のあったOSTD2019のサイトをよく見てみました。

そのなかに、ヘルムート・シュミットの言葉の引用文があります。
HTMLの<blockquote>で書かれたテキスト文になります。
(非常にグッとくるメッセージですね。)

タイポグラフィは
聞こえてくるものでなければならない。
タイポグラフィは
感じられるものでなければならない。
タイポグラフィは
体験できるものでなければならない。

ヘルムート・シュミット 1980

幅をどんなに小さくしても、CSSのcalcによって見た目が変わらないようになっています。
他にも、冒頭メッセージや各講演タイトルなども、画面幅が変わっても意味の伝わりやすい見せ方になるように改行位置が工夫されていたりします。

これはパッと見で見ていたらなかなか気づかないような点ですが、伝えたいメッセージを確実に伝えるために、また、その言葉を持つ独特のニュアンスを崩さないためにも、その1つ1つの言葉にしっかりと向き合って表現・実装がなされているなと個人的に大きく感じました。

これは、先ほどあげたキーワードにつながっているかなと思います。「Web」という大きな海に「言葉」を放出したのなら、その拾い手によって自分なりのコンテクストが加わり、解釈もさまざまになっていきます。そのような状況下の中で、メッセージの芯となる部分をいかにコントロールし、きちんと伝えたいことを伝えることができるのか。それが、先ほどの改行しかり、Webフォントしかり、情報設計、レイアウト・・・数多くの編集点から成り立っていることが伺えます。

これからの"オンスクリーンタイポグラフィ"

テキストを読んでもらう、というよりは、「言葉を受け取ってもらう」ことを念頭に置き、言葉と真摯に向き合いながらデザインや実装をしていくと、どんなに遠くへ届こうともサイトを見る人との親和性が生まれ、より質の高いコミュニケーションをもたらすことができるのではないでしょうか。

ここで再度ヘルムート・シュミットの言葉を出して終わりたいと思います。

タイポグラフィは
聞こえてくるものでなければならない。
タイポグラフィは
感じられるものでなければならない。
タイポグラフィは
体験できるものでなければならない。

ヘルムート・シュミット 1980

この記事が参加している募集

イベントレポ

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