yuheijotaki.com

【イベント】タイポグラフィを武器にする 〜文字とデザイン、WEBとUI、そしてUXのお話〜

イベント概要

Connpass: タイポグラフィを武器にする 〜文字とデザイン、WEBとUI、そしてUXのお話〜
書籍『オンスクリーン タイポグラフィ 事例と論説から考えるウェブの文字表現』の発売記念イベントとして、この書籍から派生して現場で使えるTipsやあるある話などを共有する会という感じでした。

トークテーマ

  • タイポグラフィをデザイン、実装する上で気をつけていること
  • こんなタイポグラフィはいやだ
  • アクセシビリティ向上はどのように行うのか
  • ブランディングとアクセシビリティ
  • Webならではのタイポグラフィとは

など、実際の現場レベルでのよくある悩みやこれどうしている話をされていました。

登壇者はGoodpatch Anywhereのカワセさん、ハマダさん、SmartHRの桝田さん、編集者の宮後さん。 自分の中ではネット上での昔からの有名人の方々でした。

オンスクリーン タイポグラフィについては、カワセさん、ハマダさん、桝田さんなど計9名の方の論説をまとめている本です。 2/17の発売で今読んでいる最中ですが読書メモは別でまとめます。

勉強になったこと

「ガイドラインを守ることが大事」ではなく、主観によって判断されがちな色の指定などの基準にこういうのを使うといいですよっていう内容

桝田さんはアクセシビリティに大変詳しいエンジニアの方ですが、自己紹介の流れで書籍のコラムの内容についてこのように最初に話していて、そういう心持ちなのかとちょっと意外なところもありました。
個人的な勝手なイメージですがアクセシビリティ詳しい人と詳しくない人って分断されがちで、詳しくない人(自分)は詳しい人を怖がっているところがある印象があります。
それに加えて「善意のバリア」的な見方で、僕の去年読んで一番印象に残った記事にある、「アクセシビリティはさ、誰かのためにとかじゃなくて、自分のためにって思ってやるといいと思うよ」 的なスタンスでのトークだったのでとても自分ごととして勉強させてもらえました。

要素をちゃんと作ってからページデザイン作成

  • カラーパレット作る
  • フォントサイズのジャンプ率作る

コンポーネント作る前にこれらをエンジニアと話して進めるだけで後々の辛さが軽減されるというは納得です。

デザインカンプの一枚絵ではなくレイヤーなどのデザイン構造など中間成果物のなかを見ること

どういうデザインがコーディングしやすいか、みたいな話の流れだったと思いますが、デザインで空けられているスペースが16pxなのか1文字分として空けられているのかはデザインデータ見て分かると実装もしやすいと。
自分もエンジニア側なのでもちろん同感で、リストテキストのline-heightでリスト間のマージンを取っちゃうかline-heightは適正値で取ってちゃんとスペース開けるかで全然違うところかなと感じました。

また難しいデザインが上がってきたときにチーム全体で解決できなくフロント側だけが負荷がかかってしまうことが問題みたいな考え方も、これまでそういう取り組み方で仕事あまりしてないのでなるほどそういう考え方なんだなあと思いました。

アクセシビリティ向上、「向上」は何を持って判断しているのか

定量的な結果ではなく、特定の機能が特定の条件で動く
例えば特定の機能をキーボードのみの操作で完了できるなど。

まとめ

失礼ながら書籍の宣伝的な要素が強いイベントと思ってましたが、その要素がゼロだったので楽しかったです。
参加する前はデザイン的な話がメインかなと思ってましたが、聞いてみると実装のテーマや内容に関してばかり興味が惹かれたり勉強になりました。
登壇のデザイナーさんの話聞いてると実装のリテラシーも高いんだなというのが印象的でした。