On-Screen Typography Day 2019
https://gyazo.com/fc672abedab49a73d538bd1235770719
言葉からはじめましょう。
あなたはすでに
タイポグラファなのですから。
フリーランス
ポスターでかっこいい印象
Webサイトで組版をやりつつかっこいい表現をする
縦書き
ostdサイト
文字の基本
フォントがなかった頃
筆で手書き
木版に彫る
活字
木活字
金属活字
デジタルフォント
消えていった文化
ロング・エス
ゑ・ヱ
新しい技術
SVGフォント
透過率などの情報をすでにもっているフォント
紙活字
紙で活字をつくる・レーザーカッター
「タイポ」＋「グラフィ」
「Type（活字）」＋「Graphy（画法・書法）」
デザインの中で文字を扱うこと？
明確な定義はない
さやのもとクリニック
印刷系：丸ミン
サイト：ゴシック体
空間の雰囲気を感じ取って欲しい
縦書きも使用
フォントの選び方
「写真の女性にどういうフォントをつけるか？」
書体は多いので選びきれない
人の顔が千差万別なのと同じような感じ
「個性」
直感と理論をもとにフォントを選ぼう
「迷わない」みたいな記事は同意しかねる
迷ってほしい
bodyにあるのものが基本表示される
titleはhead情報
スクリーンリーダーでは読み上げる
ブラウザの参照
あ＝82a0 という文字コード
font-familyで指定したフォント
自サーバーにフォントデータを経由
フォントサービスのサーバーから経由
フォント
半角と全角という定義
文字ごとに字幅が違う
「明瞭に見えるように」
FONTPLUS
細かいウェイトの指定ができるようになった
書体に関する概念の話
ベースライン
キャップライン
大文字の頭のライン
アセンダーライン
キャップラインよりも上にでるライン
ミーンライン
ディセンダーライン
ベースラインより飛び出る
キャップハイト
大文字の高さ
エックスハイト
小文字の高さ
ボディサイズ
書体の全体の高さ
セット
字幅
英語はベースラインから取る
日本語の場合は「中央」で取る
初号
見出し用の書体
等幅
詰め組み
メイトリクス
リガチャー
合字
Webと紙の違い
原稿とデザインは一緒
紙：製版→印刷→閲覧
Web：コーディング→表示
ユーザーに委ねられる
オンスクリーン製作者がタイポグラフィと仲良く慣れない理由
1. ウェブフォント利用は運用コスト増
2. タイポにこだわると開発コスト増
3. タイポグラフィの必要性を説明できない
コストに見合った必要性の説明
タイポグラフィを扱いやすくする取り組み
FONTPLUSでのオプションプロパティ
https://gyazo.com/fe661f763bb66de8178081c2fdc00506
typography.recipesというサイトを作ろうとしてる
なぜ、わざわざテキストなのか？
すべての人の同質の情報を伝える
点字キーボードで利用できる
高齢者向け対応
ユーザーを置き去りにしてはいけない
Session: 01 美しいものを作るために“我々は何ができる”か
UIデザイナー・インタラクションデザイナー・アートディレクター
works
美しいものを作るために、我々は何ができるか
タイポグラフィという領域が自分の土台になってる
文字のない仕事はほぼない
文字と向き合ってできあがるもの
美しいWebデザインの条件
全体を通して意図が明確に現れていること
機能的に不自由せず、快適に操作できること
造形的に美しくあること
視覚的、体験的に飽きないこと
文字、写真、言葉がそれぞれの機能を果たしながらも、一体になって、なにか伝わってくるものがあること
サントリーの宣伝部が独立した制作会社
Webサイトをきちんと作り直してバリューを伝えたい
プロジェクト
議論だけで半年かかった
情報設計（構成）に時間を取った
構造
関連がたくさんある大きな仕事（映像・グラフィック・イベント等）
単発のシンプルな作品の場合
仕事の規模にかかわらず同列に見せるようにしよう
構造検証
方針
あたらしいサン・アド
イメージは農耕民族っぽい
狩猟みたいにガツガツしてない
田園風景
上品かつ素朴。開放的なデザイン
表現
フォント
縦書きゴシック
こぶりなゴシック
https://gyazo.com/5a3c67172f66fe279867c5df55ffea32
縦を80%潰した
明朝体
レイアウト
https://gyazo.com/0f2e9fe71215afe623a8321966c01f08
ナビゲーションの位置はこだわった
ナビ→ハンバーガーメニュー→ロゴの順番https://gyazo.com/e9663cbc6b7e830f075f932435ebf920
横書きロゴの位置
縦書きナビゲーションとの読む順番・関係性を考慮
中央にあると主張しすぎ？
作品紹介
https://gyazo.com/9d252bac808724a50cde4fd1bb462ba7
サブナビ（ソート機能がある）
詳細ページ
https://gyazo.com/8a936ef6b22a6fc31be32dc286b71711
縦書きの見出しと左読みの見出しとの関係性を考慮
左下のロゴがなくなる
基本は企業のロゴがあると思うが
グロナビの「『サン・アド』について」で考慮
受賞歴
大量の情報を載せたい
https://gyazo.com/9add55fd663b3f21df959c1a8fa20c2c
可変領域
横幅2000でも崩れないように見せたい
情感演出
Webは映像と同じ
動と静を演出
画像の遅延読み込み表示
ローディング
マウスオーバー表現
画像はほのかに拡大
サブナビは移動
ページ遷移
あえて区切りをつける
背筋を正す・一息入れる
まとめ
99.99%の汗と0.01%の偶然
様々な難題を解決しようと試行錯誤はできる
タイポグラフィを用いて
機能
構造
情感
時代性
時間軸
動き
体験など
一体にする佇まいを作り上げることを目指す
そうして人を魅了する美しいものが作り出される
飛び入りLT
CTO室デザイングループ マネージャー
なぜペパボが協賛したのか？
自分がタイポグラフィが好きだから応援したい
レスポンシブ時にテキストの改行調整
和欧文間のスペース調整
何しにペパボに入ったのか
CTOから誘われた
ペパボを10年戦える会社にするためにデザインをヤバくしてほしい
ソフトウェアがあらゆる世界に侵食して変わってきている時代
"Software is eating the world."
Mark Andreesen
不可避な流れになってきた
変わらないもの
言葉をつかったコミュニケーションをする
その言葉は文字として書き表される
Session: 02 バーティカル・グリッドでもっと深まるWebタイポグラフィ
オンスクリーン制作室デザイナー
Webデザイン、フロントエンド、映像、モーショングラフィックス
works
Webデザインにおける縦方向の扱い、どうしてますか？
最近までなんとなくでとらえていた
フォーマットが決まって無く縦に無限に伸びるので扱いがゆるくなりがち
本セッション対象
Webデザイナー（初級者〜中級者）
フロントエンドエンジニア
はじめに
#FONTPLUSためし書き
本文でのテストができる
色を任意に変更できる
字形・太さを調べる
特徴
画像が（ほとんど）ない
「文字」が主役のデザインへ
デザインコンセプト
Vertical Rhythm
グリッドシステムで精緻な組版を
White space
意味のある余白で書体を際立たせる
Selective Color
色をユーザーに預ける
バーティカル・グリッド（基礎編）
バーティカル・リズム
縦のリズム
反復というデザイン原則
繰り返しによって組織化する
改行で縦のリズムが生まれる
ノートの罫線のように見えるもの
バーティカル・グリッドと定義する
余白＝行と考える
1行＝1ピッチとするマスの集合体
ベースライン・グリッドがルーツ
行送りによって作られた一定の縦のリズム
しかしWebとは共同が異なるので活用はできない
行間について
基準となるフォントサイズ × 倍率 ＝ 行間
例：16pxの2倍＝32px
見出しと画像を揃えたとき上が揃わない問題
基準となるフォントサイズ＝Webブラウザの標準文字サイズ
16px
1rem
ベースフォントサイズ
CSSでの実装
code:root.css
:root {
--fz: 1rem;
--lh: 2;
--pitch: calc(var(--fz)* var(--lh));
}
結論は「本文の行間を基準」として考えている
バーティカル・グリッド応用編
n行分という単位
余白、見出しなどをパーツ化する
headingやpで定義していく
各パーツにvar(--pitch)に倍率をあげていく
行取り
DTP用語
見出しが入るスペースや図版のサイズなどを本文の文字の何行分にあたるか表す
そもそも途中に画像や動画が入ったらこのルールが破綻するのでは？
3:2などの比率の場合、次の高さが合わなくなる
ピッチがずれたらそこから再スタートする
本文より小さいテキストを使った場合、行間だと広すぎて困らないか？
半分のグリッドピッチを用意しましょう
グリッドピッチが倍数だったら破綻することはない
バーティカルグリッドはWebだけの技術？
実は万能につかうことができる
プレゼンスライド
映像の文字要素・レイアウト
App
8pxのグリッド推奨
実際にソフトウェアで使うため
リピートグリッドで繰り返す
リピート間隔部分を行間の値に調整
Rowsを有効
Gutter Heightに行間値
バーティカルグリッドの将来
現時点で草案
行どりしたくない要素は個別にリセットする必要がある
まとめ
メリット
1. デザインのルール化ができる
2. コーディングとの相性がいい
3. 読書体験の向上
Session: 03 オンスクリーンにおけるベアボーンタイポグラフィ
フロントエンドエンジニア
変遷
2001インターネット開始
2004 ブログ
2007 22歳新卒で営業
2015 CAに転職
panda-lifeの著者
村田武彦「帰ってきた内弁慶」
誰かが自分の言葉を受け取って誠実に答えを返してくれる〜
通じ会える喜びを、これほど感じたことはなかった
HTMLを書いてFTPでアップしたら世界中の人と通じあえる
1 : nの関係
n : You : Iの関係
ブログタイトル変遷
In my brain
僕がペンを握れば
masuP.net
オンスクリーン＝Webについて
Already, This is the web.
Brad Frost - This is the web
スクリーンを通してつながる
VUIなどスクリーンを通さずつながるものもできてる ベアボーン
裸、むき出し、骨格
タイポグラフィ
伝えるために行うすべてのことがタイポグラフィなのです
テーマ：WEBにおける伝えるための骨格
Hyper Text Markup Language
マークアップ
出版の作業過程である原稿の「マーキングアップ」という作業から派生した（Wikipedia） ３種類
視覚的マークアップ
改行の数、インデントの位置
手続きマークアップ
タグ宣言してコンピュータに命令を送る
意味的マークアップ
見出しレベルがいくつであるかと意味づける
あなたはすでにマークアッパーだったのですから
ビジュアルを再現する手段としてのHTMLだと思ってないか？
index.jpgでやればいいじゃん
ブログをカスタマイズをした経験
見た目は違う、意味は同じ
意味と視覚の分離
HTMLは人類共通言語ではないか？
HTML Living Standard
WEBは自由である
マークアップが要らない未来がきたとき
しかし自分のマークアップはこう表現したいからこそ歪められたくない
マークアップは受け取る側により過ぎてないか？
自分の言葉は自分で表現したい
偉大なるアマチュアドシロウト 止まらない初期衝動
意味を定着する責任をどうする？
分業により遠ざかっている？
制作フローで見失ってないか？
グレーゾーンに身をおいて考えよう
みんな開発者でいいじゃん
HTMLで内省する
コンテンツに問いかけていく
過剰な骨組み
葉を切り刻まない
葉＝テキスト情報
骨格とDBの一致
桝田草一であって「桝」「田」「草」「一」ではない
骨格がしっかりするとコンテンツもしっかりする
ユーザーCSSで明朝体にしたい
ダークモードで読みたい
見たいように見たい
わがままのようで人によってはわがままではない
WinTicketのテーブル表
SpreadSheetやKeynoteにそのまま貼り付けることができる
WEBにはまだまだ言葉が足りない
一緒にWEBを作っていこうよ
Session: 04 コンテキストをピクニックしよう
編集者
Web・コンテンツディレクター
いろいろな経歴があるが共通しているのは「編集者」視点
いつもコンテンテキストに思いをコンテンツを編んでみたい
Context is Godって結局何？
コンテキストとは？
関係、背景、状況、現況、状況
色んな意味が含まれて・色んな状況がある
コンテキストを俯瞰して読み取ってみる
＝コンテキストに思いを馳せる
思いを馳せる＝「ピクニック」と捉える
なぜピクニック？
ヨーロッパ・ピクニック計画（ピクニック事件）
コンテキストとしては重要な問題があったが
もともとは冗談から始まった
問題をそのまま「問題」というのではなく
解決策を実行している
実行の仕方に勇気とウィットがある
ピクニックの事例
Webフォントのサンプルテキストをつくりたい
情状的というFB
カナや数字を先に出したい
国分寺駅の東口から路線バスに乗り5分ほど、いつもの中央公園で日の光がヒラヒラと反射する小川を臨む。ふと手元のスマートフォンを見ると、いろんな名前のWi-Fiが無数に飛んでいる。誰かが思い思いのMessageを込めて海に流したボトルのように、この空気中をふんわりとただよっている。
今っぽいテキストを出したい
いつの間にか来ていた未来。この世界、気づいたら横で寝てる機械。紛れもないRobot。AIに出会い。いつの世にも引かれていた、このLINE。アナログとデジタルの境界線。グラデ描く水平線。急接近する世界線、そこが最前線、これがリアルなフォントの話。本当にホントにFontの話。信じる信じないは関係ない。使うも使わないも問題ない。いつの日にかわかるはずだこの革命。
SONYの空間音響技術で音響作品を展示する
Webだったらどう伝えられるだろうか？
ボイス再生
スクロールの速さでピッチがあがる
逆スクロールで逆再生
立体視のog:image
自社ビジネスで関わる界隈の未来像についてをスタディしたい
自社ポリシーなどは一旦無視してほしい
クライアント事情を推し量らない
特定の製品やブランドによらない
感度の高い人の声
インタビューを行った
意思の伝搬がどんどん行わって、アイデアや種になってほしい
ピクニックのためにやること
情報をあつめる
考える
ガシガシ会話する（雑談）
チーム内での会話でそのまま決定まで持っていく
「でもさーこれのことじゃない？」という瞬間が訪れる
ピクニック事件における冗談
余白、脱臼
お互いの職能を超えて雑談できれば最高
ゴールがあるとき、そこへ向かう道は１つではない
自分で全てをコントロールできない
放たれたコンテンツは新たなコンテキストが生まれる
自分以外の意思も加わってくる
人ならざる意思＝ない意思
ない意思があると考えると注目できる点を探すことができる
点ではなくその場限りのコミュニケーションにしてはならない
Session: 05 そうして言葉は飛んでいく
アートディレクター
美術大学の非常勤講師
なぜ我々はテキストを操作するのかについて考える
デバイステキストとGoogle Fontsで大体いい感じになる
大体じゃ駄目？なんで？
いい感じじゃ駄目？
どこを修正すればいい？
商業的なものでもマネできるように慣ればいいと思って創ることがある
なぜ文字を編集し、修正し、そこに秩序を入れ込むのか？
独自性
メジャーメントとどう戦うか？
カップラーメンは大体食べてる
ヒラギノで何故いいのか？
美しさ
ほらキレイでしょ？と物事をいいたくない
ボロいけど信用できるものとか
機能
字間と行間くらいしかできないんじゃない？
どこまで操作できるかを考えたい
「編集点」について考える
グリフの形状を編集できる
https://gyazo.com/99d23f85bc8932b68cb590171fecf730
アクセシビリティさえ満たせてればテキストデータじゃなくてもいいんじゃないか？
ヒエラルキー＝メッセージになる
H1 - H5
強弱
リズム
編集点をどこにするか
どこをいじったらいいか？というルールはない
観察の裏返しになる
本来誰でも実践できること
操作できる点は無限に存在する
アンカーポイントをへらす？
データ量を減らすこと？
デジタルだったらそれに軸は多く追加されていく
タイミング、URL、形式、データサイズ、現在位置、照度、ベクトル
匿名性すら利用する
地政学的な距離と文脈的な距離
原研哉による「オンスクリーン」の定義
浸透してきている
昔あった言葉が変容してくるパターン
のび太がスネ夫に対しての「おしゃべり」
当時はチクリ屋という意味
解像度が高い言葉はリーチする人との距離は短い
距離を超えるために何をするか？
翻訳の次の問題
言語の壁はとてつも高い
翻訳エンジンでなんとかなるのか？
飛び越すためのアプローチ
感情方向
道具方向
道具＝思考に縛られてないことを意識する
ほかの業界では何が起きている？
これさえあればSFゲームは作れる
音の世界でもグリッドの概念
クオンタイズ
イラレと操作感覚が近い
しかしイラレ自体が取りこぼしはある
スナップ機能がすごい
別の産業で取りこぼしているものを拾っていることは往々して存在している
定形と時間
定形に対する保証はいつもされない
しかし物事の「軸」は変わってきている
デザイン的に正しいか正しくないかじゃない
イケてるかイケてないかという軸はある
それが受け入れられているのか？という観点をもとう
定形はあるようでない、から面白いよねという状態に移行する
承認の力をつかう
愛や恋という歌表現じゃなくても米津玄師が受け入れられる時代 時代を見る＝集合を見ること
総体の中で何を操作するかを気にする
誰にでもできるようなことを気にするのは、現代的な精神な気がする
パネルディスカッション「オンスクリーン・タイポグラフィの今とこれから（仮題）」
縦書きと横書きの使い分け
長谷川
縦書きは意図的。かなりハードルの高い表現
「日本」に趣をおくものには表現としてアリ
レスポンシブ対応が非常にめんどくさい問題
関口
デファクトは縦組みの多段組
縦の自由度が高い
図版のレイアウトが高い
縦ということで表現の選択肢が広がる
有馬
考えたことはない
使うことはあるんじゃない？
書籍の縦組みとか
HTMLはもともと横組み
カワセ
電子書籍は読み心地の設計無視してない？
そもそも目的が違う
小説は組版をしっかりやってるが…
ウェブの構成に行取りを採用するという発想は、いつ、どのように思いつかれましたか？現職の環境がそうさせたのでしょうか
後藤
ウェブデザインはヒーローイメージあってなんぼ
それがない時点で死んどるやんけ
画像で補えない部分をどうすればいいか？
環境で影響してるのはある
完成した時に部分的な甘さはでてしまった
グリッドを使って「空く」問題
いろんなことはやりたいが基本のベースはWeb
デザインもコードも大好き
実現できるかどうかのギリギリを攻める
有馬
縦方向関係だいぶこだわったんでは？
アプリの場合四隅に対してalignをとる
ウェブには出版社が存在しませんが、そういったなかでは編集者の職能を持っている人は必ずしもフローに組み込まれていないのでしょうか
カワセ
Webメディアには編集者は存在するが
それ以外でも編集者の視点は大事
相当ハイレベルなことをしないと編集者たり得ないのでは？
タイポグラフィは建築と通ずるものがある
長谷川
大富豪の色んなルールのなかで頑張るそれに似てる？
モデュロール、コルビジェ
土屋
紙のころから「編集」というものが変な存在だった
職能の濃さで自由であっていい
Webディレクターも一緒では？
ルールはガチガチにすべきなのか？
桝田
デザイナーやマークアッパー、エンジニアなど色々移ることはある
その職能で感じた疑問をもって投げかけるのは大事
ヘルムート・シュミットの引用翻訳については原文がほしいと投げかけた
視覚表現と同様の表現はしたい
難しいけど近いところまでもっていきたい
有馬
デジタルワークフローは巻き戻しができるのがいい
デザイナーってのはエンジニアより後に産まれたのでじゃないか？
細分化できる観察眼がある人はすごい
Amazonの倉庫でロボが動く環境ではロボでしか読めない言葉（QRコード）がある
これを人間と一緒の実生活に浸透させて、両方が読める言葉が生まれたら未来だな
関口
LPをつくるときカンプじゃなくて「原稿」を送らないといけないと思った
工程を入れ替えたいなと思ったことがある
職能に誇りがある人には応えたい
みなさんの好きなフォント、また少し使うのが苦手だなというフォントがあれば聞いてみたいです
関口
Baskerville
游明朝体
有馬
TP Sky
タイポから市民がどの声・表情でも出せるように
長谷川
游ゴシック
土屋
ニューセザンヌ
後藤
たづがねゴシック
Frutiger
目が悪い人がみても見やすいんじゃないか？
和文と混ざった時にきれいに見える
カワセ
筑紫丸ゴシック
パスデータがえげつなさすぎるらしい