6/9(日)に行われた「ON-SCREEN TYPOGRAPHY DAY 2019」に参加してきました！

とても大ボリュームのイベントで、途中脳みそ爆発しそうになりながらもメモったので、各セッションごとにレポっていきたいと思います🍒
（レポート書くのすごく遅くなってしまった😘）

〝タイポグラフィ〟を怖がらないために

まず、カワセタケヒロさん（POLAAR）による、タイポグラフィの基本についてのイントロダクション。

|| 01. タイポグラフィとは
このイベントでいう「タイポグラフィ」とは、「デザインの中で文字を扱うこと」全般である。

|| 02. フォントの選び方
ひとつのブランドに対して「ロゴがこのフォントだからサイトもこのフォントを使う」みたいにそれぞれの媒体でフォントを合わせがちだけど、別にその必要はない。
表現するものに合わせて、最適だと思うフォントを自由に選択して良い。

最近だと、SVGフォントや紙活字などが出てきて、さらに文字の表現の幅が広がっている。

|| 03. フォントの用語について

【英字の場合】
・ベースライン
　全ての文字が乗るベース
・キャップライン
　大文字の頭
・アセンダーライン
　lなどの上に飛び出る文字の頭
・ミーンライン
　小文字のxの頭の部分
・ディセンダーライン
　gなどの下に飛び出る部分のお尻
・キャップハイト
　ベースラインからキャップラインまで
・エックスハイト
　ベースラインからミーンラインまで
・ボディサイズ
　ディセンダーラインからアセンダーラインまで
・セット
　文字の横幅

【日本語の場合】
文字の中央を基準にする。
ベースラインが英字と違うので、日本語と英字が混ざると大変。

|| 04. オンスクリーンの人が、タイポグラフィと仲良くなれない理由

・ウェブフォント利用は運用コスト増
・タイポグラフィにこだわると開発コスト増
・タイポグラフィの必要性を説明できない

つまり、デザイナー側から「コストに見合った必要性」を説明できないといけない。

----------
数年前は、ウェブフォント入れるとすごい重くなっちゃって使えない…みたいな、コスト以外の面で断念したりしたけど、最近は進化してそこら辺も改善されてるのかな？👀

|| 05. なぜ画像ではなくテキストが良いのか
全ての人に同質の情報を伝えるため。

高齢者向けサイトなどだと文字サイズが大きくなる。
そうすると、文字だけで画面いっぱい使うことになるので、画像が入る余地がない。
文字だけでも、読みやすく美しくするスキルが必要になる。

美しいものを作るために“我々は何ができる”か

続いては、長谷川 弘佳さんによるセッション。
SUN-ADのサイト制作の事例を元に、ものづくりする上で大切にしていること、美しいウェブデザインとは、ということをお話されてました。

|| 01. 美しいウェブデザインの条件とは
長谷川さんが考える、美しいウェブサイトの条件5つ。

・全体を通して意図が明確に現れていること
・機能的に不自由せず、快適に操作できること
・造形的に美しくあること
・視覚的、体験的に飽きないこと
・文字、写真、言葉がそれぞれの機能を果たしながらも、一体となって、何か伝わってくるものがあること

|| 02. SUN-ADのポートフォリオサイトの事例
https://sun-ad.co.jp/

サイトの構造作りをめちゃくちゃこだわった
SUN-ADは、複雑な仕事やシンプルな仕事が入り混じってたが、全て同列に見せたかった。
実際の作品をサイトデザインに当て込みながら、大きい仕事・小さい仕事でも優劣なく見えているか、作品内容が伝わっているかを徹底的に検証した。

サイトの方針決め
SUN-AD側が決めた「あたらしいサン・アド」という方針をベースにイメージを膨らませた。
サン・アドの作品や制作の姿勢から、「狩猟民族じゃなくて農耕民族っぽいな…」と感じて、グラフィック、パッケージ、映像などの異なるクリエイティブが喧嘩せず一つの田園風景になっているイメージを導き出した。
そこから「上品だけど素朴」「緊張感、上品、愛嬌」というデザインの方針を定義した。

フォントについて
縦書きゴシック＋横書き明朝の組み合わせをベースに、全てウェブフォントを使用している。
ゴシックは、縦幅100%だと読みづらかったので、85%くらいに潰している。
潰すことで、少し可愛らしさと柔らかさを持たせた。
印象的な縦書きゴシックからの、明朝で知的にしめる。

文字を見る目線の順番
ナビゲーションはウェブサイトの命！ここでデザインの良し悪しが決まると言ってもいいくらい。
よくある、ロゴが左上で右にメニューがあって…という形に捉われず、一番自然な目線の動きと情報の優先度、そしてそれがしっかりサイトのデザイン方針とマッチしているかを考える。

情感演出（動き）
ウェブサイトは映像のようなもの。
動きを入れるのは、飽きさせないため、気持ちいい体験のために必須。
作品を見るときは背筋を正してほしいという思いで、作品詳細ページでは2回スライドする動きを入れた。

|| 03. 美しいものを作るために何ができるか
美しいものは、99%の汗と1%の偶然でできている。
汗というのは、試行錯誤、微調整、経験値、知識などの集まりのこと。ひたすら汗をかこう！
機能、見た目、体験、全てが一体となる「佇まい」を作り上げることを目指している。

バーティカル・グリッドでもっと深まるWebタイポグラフィ

続いては、後藤 健人さんによるセッション。
バーティカル・グリッドという手法を取り入れることで、ウェブでももっと文字を美しく・読みやすくできるという、実用的なお話をされてました。

|| 01. ウェブデザインにおける縦方向の扱い
縦方向というのは、余白や行間などのこと。
ウェブは紙のようにフォーマットが決まっていないので、縦の扱いがゆるくなりがち。
「なんとなく」で、余白や行間を決めてしまったりする。

|| 02. FontPLUSの事例
https://fontplus.jp/

FontPLUSは、「文字」が主役のデザインで画像がほぼない。
画像がなくても、文字を主役として成り立たせるために、3つのポリシーを持ってサイトを作った。

・グリッドシステムで精緻な組版を
・意味のある余白で書体を引き立たせる
　画像がないので、文字にビジュアルの役割も持ってもらう
・色をユーザーに預ける

|| 03. バーティカル・グリッドについて
バーティカル・リズム（縦方向のリズム）が大事。
リズムを生み出すには「反復」が必要。「改行」による「反復」で一体感、視線誘導が生み出される。

DTPでは、ベースライングリッドという、文字のベースラインからの行送りによるグリッドシステムがよく使われるが、ウェブではCSSによる行間の挙動が違うため使えない。

バーティカル・グリッドは、グリッドの中央に文字が来て、そこからの行送りになる。ベースのフォントサイズを基準に、何倍の行間で改行するかでグリッドが決まる。

|| 04. バーティカル・グリッド実践編
単位＝グリッドn行分 で考える。
単位を使って、余白や見出し等をパーツ化していく。
このように作っていくと、1pxごとにこだわって余白を決めるよりも、レイアウトが簡単になる。
ルール化されているので、フロントさんの作業効率もUP↑↑

見出しは、文字サイズを2倍にして、行間も2倍にして、グリッド2行分使う。
途中に画像や動画が入ったら、ピッチがずれた場所（画像や動画の下）からグリッドを再スタートすれば、リズムが崩れない。

本文より小さいテキストで狭い行間を使いたい場合は、本文の半分のピッチのグリッドを用意する。
この2種類のグリッドを組み合わせてデザインしていけば、小さいテキストも大きいテキストも同じリズムで使える。
グリッドのピッチが「倍数」であれば破綻することはない。

sketchの設定
・Rowsにチェックを入れる
・Gutter Heightに行間の値を入力する
これだけで使える！かんたん。

CSSのline-height-step
 Chromeのβ機能。
chrome://flags
上記URLから、「experimental web platform」を有効化すると体験できる。
行取りしたくない要素（画像や動画など）は個別にリセットが必要。

|| 05. ウェブ以外にも使える
バーティカル・グリッドはこんなものにも応用できる。

・プレゼンのスライド
・映像のレイアウト
・Appデザイン

ちなみに、Appleヒューマンインターフェイスガイドラインでは、8pxのグリッドを推奨している。

オンスクリーンにおけるベアボーンタイポグラフィ

続いては、桝田 草一さんによるセッション。
ベアボーンタイポグラフィ＝ウェブにおける伝えるための骨格＝HTML
ということで、HTMLという観点からのタイポグラフィについてお話しされてました。

|| 01. マークアップの種類
マークアップには3種類ある。

・視覚的マークアップ
　見た目から構造化する
　デザインカンプがこれにあたる

・手続きマークアップ
　視覚情報を手続き的にマークアップする
　bigなどのタグでコンピュータに見た目を伝える
　デザインカンプ上のデザイナーの指示もこれにあたる

・意味的マークアップ
　h2などのタグでコンピュータに要素の意味を伝える

|| 02. 制作者には、意味を定着する責任がある
・制作フローの途中で見失った意味や言葉…
・現場にライターがいなくて、原稿もなくて、意図がわからない…

こういうことはあるあるだけど、視覚から意味をマークアップしたり、改めて話し合ったりして、制作者は意味付けをしなければならない。

また、意図は職種間のグレーゾーンに落ちていきがちなので、あえてグレーゾーンに身を置いて、落ちていくものを拾うようにしている。

HTMLで内省をする。HTML要素を選択したり階層を考えたりすることで、HTMLというアプローチから盲点を見つけ出せる。

コンテキストをピクニックしよう

続いては、土屋 綾子さんによるセッション。
土屋さんは編集者なので、今までのデザイナーやエンジニアからの観点とは違う、編集者によるタイポグラフィの考え方をお話しされてました。

|| 01. コンテキストをピクニックする、とは
コンテキストとは、関係、背景、状況のこと。
ピクニックとは、ヨーロッパ・ピクニック事件からのイメージで、「コンテキストに思いを馳せてアウトプットする」という意味で使っている。

FontPLUSのウェブフォントのサンプルテキストを作った時は、サンプルテキストのセオリーを抑えながら、この時代に合ったものにアップデートした。

Touch that Sound!のサイトを作った時は、立体音響をウェブ上で伝えるために、スクロールに合わせてボイス再生の速度を変えたり、OGPを立体視できるものにしたりした。

|| 02. ピクニックするためにやること

・情報を集める
・考える
・ガシガシ会話する（雑談する）
　チーム内の会話でそのまま決定まで持ってく
　モヤモヤは正直に言う
　納得度が低いときは持ち帰る
　点ではなく、コンテキストを含めたコミュニケーションをする

そうして言葉は飛んでいく

続いては、有馬 トモユキさんによるセッション。
タイポグラフィの世界を超えて、「作る」とは…みたいな、壮大なテーマを考えさせられるお話でした。

|| 01. 編集点について
アクセシビリティさえ満たしていれば、そしてユーザーに伝われば、何でも自由に編集して良い。
文字だって、テキストでも画像でも良いし、特定の「2」や「s」が気に入らなかったら文字の形状を変えちゃうのもあり。

階層構造、強弱、リズムなどのヒエラルキーはメッセージになる。
デジタルにはメッセージに利用できる軸がたくさんある。

・タイミング​​
・URL
・現在位置
・照度
・ベクトル
・データサイズ
・匿名性

​​「標準」のクオリティが高い時代だからこそ、どこを編集するかという思考が必要になり、編集自体がメッセージになる。

|| 02. 言葉の距離を超えるための何か
言葉の壁は、翻訳エンジンが頭良くなっても解決しない。

感情視点
感情や伝えたいことを瞬間的にカーソルで選び、伝えられるモデルを考え中。
​​現代は、ネトゲなどで言語を超えて場所やメッセージを選んで伝えることが求められる時代になっている。
​もはや言語は関係ない。
​​絵文字は、テキストをグラフィックで表したタイポグラフィである。

道具視点
道具＝思考に縛られないことを意識する。
​​AppleやAdobeなどのガイドライン、ツール、ジャーニーマップが絶対ではない。
グリッドや秩序も大事だが、そこを外したり外さなかったりするのは自由。

​​今では、​​ゲームのSF環境のテンプレをストアで買えたりする。テンプレやベースのデザインが簡単に手に入る時代。
「デザイナーが0から作らないといけない」という固定観念を捨てる。
すでに世の中にあるものを上手く使う。

|| 03. 定型なんてない
TikTokはiOSのUIガイドラインを全く無視している！​​
ルールに沿わないというやり方もある。
​​ルールに合わせたからといって、イケてる・受け入れられるという保証はない。
定型はあるようでない、だからこそ面白い。

常にアップデートされる時代なので、自分が信じているものや常識をいちいち疑ったほうがいい。

標準モデルから脱却しよう。標準は一人一人違う。

感想

以上、全5セッションの濃厚なイベントでした！🐸

バーティカル・グリッドは、実際にデザインに入れ込んだら色々とうまくいかないところが出てきそうだけど、ぜひ試してみたいな〜。

有馬さんの「標準モデルから脱却しよう」は刺さりました。
知らず知らずのうちに、Appleのガイドラインとかデザインルールに縛られがち…「ユーザーに伝えたいことはなんなのか」というのを、一番大事にして作っていきたい。