2016年2016年12月8日(木)、FONTPLUS DAYセミナー Vol.5は「Webにおけるタイポグラフィ」のテーマで開催しました。ご来場いただき、ありがとうございました。

第5回FONTPLUS DAYセミナーでは、グラフィックデザイナー、Webデザイナーの佐藤好彦さんを招き、「Webにおけるタイポグラフィ」について皆さまと一緒に学びました。
メディアが成熟するまでは、見た目の第一印象が重視される傾向がありました。ウェブの場合でも、以前は、派手なビジュアルやアニメーションなど、メディアとしての可能性を誇示するような表現が多く見られました。しかし、現在ではウェブというメディアも成熟期を迎えて、情報を伝える、そして気持ちを伝えるツールとして、「文字」の重要性が、以前にまして高まっているように感じます。そして、デバイスの高解像度化や、Webフォントの普及などによって、Webでも文字を美しく表示できる環境が整いつつある昨今、ウェブ上の文字を「より読みやすく、より美しく」表現することが可能になっています。こうした転換期にある今、ウェブにおけるタイポグラフィについて、あらためて考え直してみる機会になったのではないでしょうか。

Webにおけるタイポグラフィ FONTPLUS DAYセミナー Vol. 5 Togetterのまとめ
https://togetter.com/li/1057549


ウェブデザインはエディトリアルに近づいてきている


質疑応答のコーナーで、本文表現で美しいと思うサイトを教えて欲しいという質問がありました、海外の英文サイトですが、これをあげてみます。

GQ Style
http://www.gq.com/story/living-legends-of-jazz

PCサイズだとあまりよくないんですけど、レスポンシブなので、スマートフォンサイズでみると、美しく見えてくるんです。

ボールドのサンセリフの見出し、セリフ体の文章に、「Age:」などが太字で入ってきて、適度に強めてリズムを作っています。写真のキャプションは小さなサンセリフで、グレーにすることで、さらに弱めています。

そこに、中央揃えで大きめのイタリックで表現された言葉とその前後のスペース。

写真は大きく、クオリティも高いですが、あとはテキストの表現、その強弱の付け方でデザインとして成立させています。

英文だから成立しているデザインでもあるんです。文字組みのなかで、大文字と小文字が作り出すメリハリがあり、文字ブロックとして埋め尽くさない美しさがあるように思います。

実は日本語にもそのメリハリはあるはずで、漢字と仮名では、本来、かなり大きさが違います。ところが、ここ2〜30年のデザインでは、仮名を大きくして、メリハリをなくす方向のデザインが多かったように思うんですね。

写植の時代には、仮名の大きい書体、小さい書体を選ぶ事ができたんですけど。

書体の選択肢が広がってくることで、仮名の小さめな書体も出てきていますし、日本の文字組みのなかにもメリハリのある表現がもっとできるようになるといいなあと思います。


登壇者佐藤好彦さんからのメッセージ


師走のお忙しいなか、多くの方に、FONTPLUS DAYセミナーにお越しいただきありがとうございました。

タイポグラフィに関心がある方が、こんなに多くいらしゃるということを体感できて、とても貴重な機会でした。

私も日々、迷うことばかりですが、こうしたことを機会に、タイポグラフィやWebデザインなどについてご意見をうかがったり、語り会える場や機会をもっと作っていけたらと思っています。

また、Webやグラフィックのデザイン、デザイン教育、その他デザイン&アート関連でお力になれることもあるかと思います。お気軽にご連絡ください。既存サイトや制作物に関するアドバイスなども行なっています。

佐藤好彦
http://yoshihiko.com/

セミナーで配布したA3資料のダウンロード
https://goo.gl/dGY6se


■補足資料

○Webフォントの普及

LINE BLOGの書体見本(LINE BLOGのWebフォント機能はスマホ専用です)
http://lineblog.me/design


○Vertical Rhythmの考え方に関する記事

「なぜタイポグラフィにおいてVertical Rhythm(バーティカルリズム)は重要な手法なのか?」
http://postd.cc/why-vertical-rhythms

「脳に優しいデザインを!「Vertical Rhythm」の基本と実現方法」
https://liginc.co.jp/designer/archives/12071


○エディトリアルデザイン

エディトリアル的なWebデザインについても語っているインタビュー記事
「美大の先生に聞いてみよう!イマドキのデザイン教育(第二弾)〜佐藤好彦氏にきく〜」
https://blogs.adobe.com/creativestation/web-teaching-design-tokyo-zokei-sato

Webデザインがエディトリアル的になっていることを指摘するブログ記事
同じ方向性のことを考えている人がいるんだと勇気づけられました。
「デザインの「枯れ」とコンプレクション・リダクション」
http://hanarenoheya.tumblr.com/post/149660612938/complexion-reduction


○行の高さをremにする

行の高さをremにする話のブログ記事
http://yoshihiko.com/Blog/20160318-5055.html

Distの5分の映像
「lineheightから組み立てる書籍的Webレイアウト」 佐藤 好彦
https://youtu.be/W8UUjgYMuGU

Distの資料
https://cdn.rawgit.com/448jp/dist/master/assets/dist.12/sato-yoshihiko.pdf


○字詰め

Webにおける日本語の文字詰めに関する詳細な記事
「文字詰めできるCSSのfont-feature-settingsが凄い!
 日本語フォントこそ指定したい自動カーニング 」
https://ics.media/entry/14087

「FONTPLUS|文字詰め機能 Kerning文字詰め機能」
http://pr.fontplus.jp/kerning/#manual-1-2



■BGM

James Jamersonのベースを中心に

Marvin Gaye
"What's Going On"
"What's Happening Brother"
"God Is Love"
"Mercy Mercy Me"
"Right On"

Stevie Wonder
"My Cherie Amour"
"Angie Girl"

The Temptations
"My Girl"

Earl Van Dyke
"The Flick"

Jackson5
"Born To Love You"

The Marvelettes
"Don't Mess With Bill"

Google Play Musicに加入している方は以下のプレイリストで聴けます。
https://play.google.com/music/playlist/AMaBXynw4_yTSVMeNfPdt2gITZ-rQ0ee_5QL-aE3jmsjGiPRaE-YVgfLrwcR1I5KgGh2WOy1xpNsEkuweV_KaPY2Yz2TBieeBQ==


■ プロフィール
佐藤好彦 (Yoshihiko Sato)
アートディレクター

ウェブなどのメディアのデザインやプランニング、コンサルティングとともに、デザイン関連の書籍や雑誌の執筆も手がけている。

著書に『デザインの教室 手を動かして学ぶデザイントレーニング』『デザインの授業 目で見て学ぶデザインの構成術』『フラットデザインの基本ルール Webクリエイティブ&アプリの新しい考え方。』『ビジネス教養としてのデザイン 資料作成で活きるシンプルデザインの考え方』『ウェブサイト制作のワークフローと基礎技術』など。その他、共著多数。

東京造形大学非常勤講師。

Twitter: @yoshihik0
Facebook: sato.yoshihiko


またの機会に、FONTPLUS DAYセミナーでお会いできることを楽しみにしております。ありがとうございました。