FONTPLUS DAYセミナー Vol.27 レポート

FONTPLUS DAYセミナー Vol.27
［ウェブにおけるタイポグラフィ、その後。］
に参加しましたので早速レポートをまとめました。
公式サイト：https://fontplus.connpass.com/event/186544/

前半は多ジャンルの学びをデザインに応用する方法（音楽編）、
後半はWEBコンテンツの編集がメインでした。

◆イベント概要
FONTPLUS DAYセミナー Vol.27は、『デザインの教室』でおなじみの佐藤好彦さんの自宅事務所とフォントおじさんの自宅スタジオをインターネット回線で繋ぎ、「オンラインライブ版」でお送りします。テーマは「［ウェブにおけるタイポグラフィ、その後。］」です。佐藤好彦さんは、2016年12月8日開催のFONTPLUS DAYセミナー Vol.5［Webにおけるタイポグラフィ］で登壇いただきました。3年半ぶりの出演なので、アップデートをかねて、「その後」ということです。深夜放送のノリで、楽しい番組にしたいと思います。

◆登壇者情報
佐藤好彦 (Yoshihiko Sato)
グラフィックデザイナー，Webデザイナー
ウェブなどのメディアのデザインやプランニング、コンサルティングとともに、デザイン関連の書籍や雑誌の執筆も手がけている。
著書に『デザインの教室　手を動かして学ぶデザイントレーニング』『デザインの授業　目で見て学ぶデザインの構成術』『フラットデザインの基本ルール　Webクリエイティブ＆アプリの新しい考え方。』『ビジネス教養としてのデザイン　資料作成で活きるシンプルデザインの考え方』『ウェブサイト制作のワークフローと基礎技術』など。その他、共著多数。
東京造形大学非常勤講師。
Twitter: @yoshihik0

関口浩之 (Hiroyuki Sekiguchi)
1960年生まれ。群馬県桐生市出身。現在、SBテクノロジー株式会社でWebフォント・エバンジェリストとして活動しつつ、フォントの楽しさを日本全国で伝える伝道師「フォントおじさん」として広く一般に知られる。
Web担当者Forum、マイナビ IT Search+、MdN Design Interactive、翔泳社CreatorZine、日刊デジタルクリエイターズ、Schoo（スクー）等のオンラインメディアや、印刷雑誌や情報処理などの専門誌にて、文字に関する記事寄稿、講師など多数出演。CSS Niteベスト・セッション2017にて「ベスト10セッション」「ベスト・キャラ」を受賞。2018年および2019年も「ベスト10セッション」を受賞。フォントとデザインをテーマとした「FONTPLUS DAYセミナー」を主宰。
小さい頃から電子機器やオーディオ（真空管やトランジスタの頃から）のDIY、天体観測や天体写真が大好き。

Twitter: @HiroGateJP

◆佐藤さんが『デザインの授業』を作った経緯
本：デザインの授業 目で見て学ぶデザインの構成術

佐藤さん：デザインは難しい、ネタがないと作れない。一人で学ぶことを考え『デザインの授業』という基礎を学べる本を作成した。多ジャンルから学ぶことでデザインのヒントを得ることができる。
（例：デザインの歴史ではなく、それ以外の建築や音楽などの歴史）

関口さん：多ジャンルから学ぶことが面白い。「トランプ」などジャンルの違うものを使って学ぶことで、よりリアリティを持って学べる。

佐藤さん：違うジャンルから得たヒントを元に、「デザインで例える」と形にできるか？といった点が学べる。

◆多ジャンル
佐藤さん：ベースグリットはデザイナー（制作段階）には見えるが、完成品には見えない。完成品には見えなくても、背後で支えている骨。
音楽の譜面の線も同じように完成品には見えないが、リズムを意識することは重要。それぞれ空間と時間の違い。

空間を積み上げているのがデザイン。音楽も同じで短い音や長い音をバランスよく並べていく。デザインの余白のように、音楽もグループ化し余白をつくることで意味が生まれる。意味が込められているように感じさせる。

グループ化をおこなうとグループ同士のつながりを考える。
細かい単位のパターンをつくり、並べていく。同じ繰り返しだと飽きてしまうため、飽きてきたタイミングで大きな動きをいれる。
デザインに変換させて考えると、大きな写真や素材を入れることで単調な中にバランスがうまれる。

このように、音楽の小節単位とデザインのまとまりグループは同じに考えることができる。ちなみに、マンドリンは4弦だが、弦が複数束ねてあるため重なりのある音になる。揃えようとしても揃え切らないところが魅力。

◆WEBデザイン
関口さん：最初のWEBは目立つために動きの表現が中心だった。
しかしFlashなどがなくなり、目立とうとしなくてもよくなった。FONTPLUSでは2016年頃にWEBフォントを作成し始めた。

佐藤さん：WEB＝目立つ表現だったものが、2013年頃からWEBコンテンツに向いてきた。2016年には派手なデザインではなく、エディトリアルデザインに変わってきた。

このWEB上のエディトリアルデザインの定義とは、書籍や組版のデザイナーのようにコンテンツをつくるデザイナーのこと。WEBデザインといっても、LPだけつくる人・バナーをつくる人・ページのデザインをつくる人というように様々なジャンルがある。その中でコンテンツサイドの方が近しいのではないか、という考え。

関口さん：変化・おかず中心だった表現から、情報の整理やテキストが中心になってきた、ということですね。

佐藤さん：ごはんをまとめて「おにぎり」にすることで、情報を分類して見やすくするような意味合い。まとめ方が重要。余白があるから情報がまとまる。

◆WEBの文字サイズ
佐藤さん：大きなスマートフォンが出てきたが、みんなが同じ理由で大きなスマートフォンを持っているわけではない。

持っている理由の例
・たくさんの情報を見たい
・文字を大きく見たい

じゃあ文字を大きく見たかったら、ピンチアウトにしたらいい。というのもユーザビリティに考慮できていない。だから難しい。

◆フォント
佐藤さん：2020年になった現在もWindowsとMACの日本語のフォントが統一ができていない。PDFで渡すのかどうかなど効率が悪いやり方を行なっていて、ビジネスの現場ではモヤモヤしている。今後すべてのPCに網羅した明朝・ゴシックが共通化されていくと良い。

◆実験
佐藤さん：デザインよりもコンテンツの方が長生きする。だからこそ、文字データに<span>を入れないような工夫ができないかと考えて、実験をしていた。

remの使い方
https://yoshihiko.com/Blog/20160318-5055.html?fbclid=IwAR2E7src35lmIuVLhIkYfNC0SMXZ2bI8kK_DH9W4-5DdrBTKb25fByfZp-o

参考
https://www.hanarenoheya.com/note/between-lines/?fbclid=IwAR2E7src35lmIuVLhIkYfNC0SMXZ2bI8kK_DH9W4-5DdrBTKb25fByfZp-o

Illustratorでのカーニング
イラストレータで文字詰めしたカーニング情報をスクリプトで取り出し、JavaScriptで埋め込みます。
https://github.com/yoshihik0/getKerning?fbclid=IwAR2E7src35lmIuVLhIkYfNC0SMXZ2bI8kK_DH9W4-5DdrBTKb25fByfZp-o

TypeSeparaterの実験
テキストの文字種ごと（漢字・ひらがな・カタカナ・数字など）に分割して、spanタグを入れclassを設定します。CSSで、文字づめなどを詳細に設定できます。
https://github.com/yoshihik0/charaTypeSeparater?fbclid=IwAR2E7src35lmIuVLhIkYfNC0SMXZ2bI8kK_DH9W4-5DdrBTKb25fByfZp-o

◆コンテンツと編集
佐藤さん：書籍を作ると考える時には「残る」と感じるので、WEBでも同じように「コンテンツが残る」という視点を持つことが大事。コンテンツよりもデザインの方が変わる可能性が高い。

最近は日本語の中に入る欧文、和欧混色が一般的になっている。（佐藤さんは）もともと編集をしていたため、編集視点を持っている。デザイン的な観点ではなく編集的な観点を持つことが大事。

2000年始めのとき、WEBに対して編集が必要なくなるのではないか、と感じた瞬間があった。しかし2010年頃から編集の力が重要だと再認識した。WEBの編集にも「紙の編集のような仕事」がいてもいいと思う。WEB系の編集はマーケティングが強いイメージ。

関口さん：従来の雑誌の編集のような仕事。WEBでも構成などの仕事が必要ではないか。

佐藤さん：（FONTPLUSでの登壇を振り返り）前回と改めて考えていることは変わらない。WEBのデザインは幅があり派手な方が盛り上がっていたが、今はエディトリアルのような方がピックアップされつつある。

関口さん：（実験について）最終的にはPhotoshopやIn Designが行ってくれることもあるかもしれない。いろんな制限のあるWEBの仕事をしている。

佐藤さん：実験してこういったことをやりたい、ということを見せていかないと技術のある人に変えてもらえない。遊びのようなものを出していくことで、やってくれる人がいるから遊びは大事。

関口さん：タイポグラフィを組む人やビジネスモデルをつくる人、それぞれの役回りでやっていけばいい。

◆20代の答えを求める人たちへ、どうやって教えるのか。
佐藤さん：大学で教えていることは技術的。学生に対して面白い課題を出すと面白いものをつくってくる。学生たちの面白いものはそのままに、技術が伸びていってほしい。いい時にいい出会いがないと進めない。その人の持っている技術に合わせて、いい縁をつなげることができたらいいなと考えている。

関口さん：どの書体を選んだらいいんですか？といった答えを求められることが多い。でも答えはひとつではない。

佐藤さん：（答えがないデザインと紐づけて）編集は座学では学べない。昔の編集は実務でレイアウトも含んでいた。本当の意味での編集はなかなか学べない。

関口さん：厳しい編集の下で仕事をすることで、学べることが多い。エディトリアルで組む前の状態でも意見を言われることがある。

前半ではLIVEで佐藤さんがマンドリンを弾きながら音楽のリズムをデザインに応用する話をしましたが、よりリアルに体感することができました。リズムという具体的なところから、どうやってデザインに応用するのか聞いていて面白かったです。

後半ではWEBのエディトリアルデザインという、自分にとって新しいワードが刺さりました。日頃noteやTwitterといったコンテンツを見ていて、中身の編集力が重要なのは納得。

生演奏を聴いているうちに、マンドリンが魅力的で購入したくなりましたが、自宅が演奏禁止なのでやめました。

🎉9月25日にも「まちもじ」を題材にした文字祭り開催🎉
FONTPLUS DAY スペシャルライブ2020秋［みんなで愛でよう！私の「まちもじ」特集］

今後もいろいろなセミナーを予定しているようなので楽しみです。