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

オンスクリーン（ウェブ）におけるタイポグラフィの骨格で（ある｜しかない）HTML。そのHTMLから意図を伝えるための手法について述べます。

発表イベント: OnScreen Typography Day https://ost.today/

Transcript

1. オンスクリーンにおける ベアボーンタイポグラフィ . . OnScreen Typography Day @masuP
2. 私
3. 桝⽥ 草⼀ @masuP
5. • フロントエンドエンジニア • デベロッパーエキスパート（アクセシビリティ）
8. イ ン タ ー ネ ッ ト 開 始 ウ ェ ブ 業 界 に 転 職 CA⼊ 社 ブ ロ グ を は じ め る Now 新 卒 で 営 業 マ ン 広 告 代 理 店 で ア ル バ イ ト
9. ‒www.panda-life.com
10. ‒帰ってきた内弁慶 1999 村⽥武彦 “誰かが⾃分の⾔葉を受け取って、 誠実に答えを返してくれる 〜 通じ合えるよろこびを、 これほど感じたことはなかった”
11. HTMLを書いて FTPでアップしたら 世界中の⼈と通じ合える
12. : n
13. n : n
14. n : You : I
15. • In my brain • 僕がペンをにぎれば • 器⽤貧乏の裕福な⽣活 • masuP.net
16. オンスクリーンにおける ベアボーンタイポグラフィ
17. オンスクリーン
18. オンスクリーン ≒ ウェブ
19. ‒Brad Frost - this is the web.
20. ‒Brad Frost - this is the web. Already, This is the web.
21. ベアボーン
22. ベアボーン = 裸、むき出し、⾻格
23. タイポグラフィ
24. ‒関⼝ 裕 “「伝える」ために⾏うすべてのことが、 タイポグラフィなのです。”
25. ウェブにおける 伝えるための⾻格
26. HTML
27. Hyper Text Markup Language
28. マークアップ？
29. ‒マークアップ⾔語 - Wikipedia “「マークアップ」という⽤語は、英語圏で伝統的な 出版の作業過程である原稿の「マーキング・アップ」 という作業から派⽣した。”
30. .視覚的マークアップ .⼿続きマークアップ .意味的マークアップ
31. 視覚的マークアップ ⾔葉からはじめましょう。 あなたはすでに タイポグラファなのですから。 わたしたちは、タイポグラフィと呼ばれるものをただ単に⽂字を配置する技 術だと考えていないでしょうか。 今回、ウェブを中⼼としたオンスクリーンメディア ── わたしたちが仕事 でも娯楽でも、移動中でさえのぞき込んでいるこの魅惑的な⻘く光る画⾯ ── のタイポグラフィについて、広く扱うセミナーイベントを開催するこ
32. ‒Sekiguchi Yutaka / OST-Day-LP.sketch _OST_master
33. ⼿続きマークアップ <big>⾔葉からはじめましょう。<br> あなたはすでに<br> タイポグラファなのですから。</big> <margin direction=“bottom” size=“2”></margin> わたしたちは、タイポグラフィと呼ばれるものをただ単に⽂字を配置する技 術だと考えていないでしょうか。 <margin direction=“bottom” size=“1”></margin> 今回、ウェブを中⼼としたオンスクリーンメディア ── わたしたちが仕事
34. ‒Sekiguchi Yutaka / OST-Day-LP.sketch _Layout/OST__**
35. 意味的マークアップ <h2>⾔葉からはじめましょう。<br> あなたはすでに<br> タイポグラファなのですから。</h2> <p>わたしたちは、タイポグラフィと呼ばれるものをただ単に⽂字を配置す る技術だと考えていないでしょうか。</p> <p>今回、ウェブを中⼼としたオンスクリーンメディア ── わたしたちが 仕事でも娯楽でも、移動中でさえのぞき込んでいるこの魅惑的な⻘く光る画 ⾯ ── のタイポグラフィについて、広く扱うセミナーイベントを開催する ことにしました。スキルや職種にかかわらず、タイポグラフィについて聞
38. ‒Sekiguchi Yutaka / [OST] LP
39. ‒Sekiguchi Yutaka / [OST] LP 意味的マークアップ 視覚的マークアップ 視覚的・⼿続きマークアップ
40. あなたはすでに マークアッパーなのですから
41. わたしたちは、HTMLと呼ばれるものを ただ単にビジュアルを再現する技術だと考えてないでしょうか
42. index.jpgでやれ
44. ⾒た⽬は違う 意味は同じ
45. 意味と視覚の分離
46. HTMLは⼈類共通⾔語
47. ‒HTML Living Standard
48. Imagin
49. 可能性 として
50. ウェブは⾃由
51. マークアップが要らない 未来が来たとしても
52. ‒Emil Wallner / FloydHub Blog — Turning Design Mockups Into Code With Deep Learning The neural network converts the image into HTML markup
53. 視覚マークアップから 意味的・記述的マークアップへの変換
54. ⾔葉の意味を誰かに 委ねるの？
56. 受け取る側を⾒すぎ
57. ⾃分の⾔葉は⾃分で 意味づけしたい
58. あっ はい
59. ‒RHYMESTER Mummy-D ザ・グレート・アマチュアリズム “偉⼤なるアマチュア ドシロウト ⽌まらない初期衝動”
60. いったん仕事の話
61. 意味を定着する責任
62. 制作フローの途中で ⾒失った意味や⾔葉
63. ‒誰とはいいませんが、そういうときあるよね “これをホームページにしてよ （パンフレットドサー）”
64. どうして現場に 原稿が来ないんだ！
65. 視覚的マークアップから 意味的マークアップへ
66. 超越!超越!超越!超越!
67. グレーゾーン
68. ‒五藤 佑典 “みんな開発者でいいじゃん”
69. 気づく、思い出す
70. HTMLで内省する
71. ‒全部⼊りHTML太郎（@_yuheiy） - 制作者のためのHTML “HTML要素を選択したり、階層としての関係性を考 えたり、そうした試⾏錯誤によってHTMLというアプ ローチから盲点を⾒つけ出すことができます”
72. あるべきところに ⾒出しが無い問題
74. 過剰な⾻組み ⾻格でしかないはずなのに
75. 葉を切り刻まない
77. section h4 p div[itemprop=“performer”][itemscope][itemtype=“Person”] div[itemprop=“name”] p[itemprop=“jobTitle”] p[itemprop=“description”]
78. div[itemprop=“performer”][itemscope][itemtype=“Person”] div[itemprop=“name”] 桝⽥ 草⼀
79. div[itemprop=“name”] span 桝 span ⽥ span 草 span ⼀
80. ⾻格とDBの⼀致
81. ⾻格の持つ⼒
82. コンテンツは⾃由になれる
85. 僕にも⾃由があるし あなたにも⾃由がある
89. みたいように、 みたいわ
90. みたいように みないとみえないわ
92. HTMLぽくて 何が悪い？
93. スクリーンを越える タイポグラフィ
96. 1ண 2ண 1 2 3 4 5 6 7 1ண 1ண 1 2 3 4 5 6 7 2ண 1 49.6 40.1 197.0 248.1 134.0 59.8 2 216.1 10.2 15.6 191.4 15.4 57.2 3 119.6 13.0 37.6 291.3 22.7 24.1 4 203.0 4.7 40.8 279.2 47.5 134.0 5 231.0 33.5 93.0 134.0 152.3 478.6 6 304.6 7.4 21.0 59.8 304.6 155.8 7 111.6 19.5 6.4 43.7 372.2 56.7
97. すごくない？
98. おわりに
99. ウェブにはまだまだ ⾔葉が⾜りない
100. ウェブを⼀緒に作ろう
101. ⾔葉からはじめましょう
102. エゴを出そう
103. 僕はあなたの書いた HTMLが読みたい
104. おしまい