グラぽ

名古屋グランパスについて語り合うページ

メニュー

[コラム] Jリーグの背番号・選手名フォント統一について ※再追記あり

2020年9月15日、Jリーグオフィシャルネーム&ナンバー導入が発表されました。

J.LEAGUE KICK
J.LEAGUE KICK

画像引用元: https://www.jleague.jp/news/article/17893

オフィシャルネーム&ナンバーの導入の理由

上記のURLには以下のように説明されています。

【視認性向上の取り組みについて】

「これまでのネーム&ナンバーのデザイン選定には視認性を確保するための基準などが明確に定められておらず、観戦・視聴環境によっては背番号の視認が困難なケースも見受けられました。この度、ユニバーサルデザインを取り入れた統一デザインを採用し、使用するネーム&ナンバーとユニフォームとのカラーコントラストにも一定の基準を設けるなどの取り組みによって、Jリーグ公式試合全体の観戦・視聴環境の向上につなげていきたいと考えています。」

(2020年9月22日追記)上記の言葉にもあるように、DAZNで視聴するということは、明るい大画面のスクリーンで見るケースばかりではないということです。たとえば想像して欲しいのが、昼間の屋外でDAZNを視聴するケースです。スマートフォンの多くは液晶ディスプレイを使用しています。液晶ディスプレイはバックライトを光らせる仕組みになっていますが、太陽の光に比べてバックライトが暗いため、どうしても低コントラスト状態になって見づらくなってしまいます。そういう視聴スタイルにも対応できるような視認性の高いフォントを求めていた、というのはあると思います。

退場者取り違え事件

2017年の名古屋グランパスを見ていた人は思い出してみて下さい。

2017年8月16日のJ2リーグ 第28節FC町田ゼルビアvs名古屋グランパスの試合です。この2014年くらいからインカムで審判同士でコミュニケーションを取っていることが知られています。DAZNのジャッジリプレイという番組では「ラストタッチ、32→10→9」のように背番号ベースでコミュニケーションを取っているところを紹介されています。この試合ではプレーに関与していない平戸選手が誤って退場処分を受けてしまうということがありました。

濃青の地に鈍い金色は、明るいところではよく視認できるかもしれません。しかしその試合で夜の少し暗い環境下ではすごく読みづらい状況だったのを覚えています。これがフォント導入の理由ではないと思いますが、観戦者や審判、選手にとっても視認しづらいというのは望ましくありません。これも背番号のフォントをわかりやすく設定をすることが求められた原因の一つだと思います。

ユニバーサルデザインとは

これを読まれている人のほとんどは、「あの試合で番号が読みづらいなんてことはなかった!」と感じられたかも知れません。

実はわたしは「色弱」と通称言われる色覚異常です。色弱は色が見えないわけではなく、色を見分ける力が弱いという異常です。そのため、コントラストの低い文字は読み取ることが難しくなっています。

このような色覚異常は、軽度のものを含めれば男性では20人に1人も居ます。(女性は100人に2人しかいません)

男性の20人に1人は、コントラストの低い状態では判別が難しいのです。

目の障害と言えば、色覚以外にも、近眼や視野障害、光覚障害、様々なものがあります。

文字にかかわるようなものであれば、様々な障害があったり、見えづらい状況でもできるだけ読みやすいように配慮することをユニバーサルデザインと呼びます。

「すべての人のためのデザイン」、子どもからお年寄りまで、健常であってもなくても、男女の別もなく、しかも能力の違いに無関係に使えるデザインというように定義されています。

ユニバーサルデザインの7原則

ユニバーサルデザインは、「あらゆる人に利用しやすいデザインである」という視点を軸に、下記7原則から構成されています。

  1. 誰にでも使えること。(Equitable Use)
  2. 使う上で柔軟性があること。(Flexibility in Use)
  3. 使い方が簡単で、直感的にわかること。(Simple and Intuitive Use)
  4. 必要な情報がすぐにわかること。(Perceptible Information)
  5. 簡単なミスが危険に繋がらないこと。(Tolerance for Error)
  6. 身体的な負担が少ないこと。(Low Physical Effort)
  7. アクセス・利用しやすい十分なスペースが確保されていること。(Size and Space for Approach and Use)

引用元:THE PRINCIPLES OF UNIVERSAL DESIGN

ユニバーサルデザインフォント

ユニバーサルデザインの考え方に基づいて設計されたフォントを「ユニバーサルデザインフォント」と呼びます。

フォントメーカーのモリサワが挙げたユニバーサルデザインフォントの特徴は以下のようになっています。

UDフォント(モリサワ)
UDフォント(モリサワ)の特徴

「モリサワUD書体は、「文字のかたちがわかりやすいこと」「文章が読みやすいこと」「読み間違えにくいこと」をコンセプトに開発されました。その過程では、“小サイズですべての文字が問題なく判別できること”をひとつの基準として、ベースとなる書体の各文字が見直され、繰り返しUD書体のコンセプトに適合しているかどうかを検証しました。」

引用元:https://www.morisawa.co.jp/fonts/udfont/

なをなとして認識しやすく、ブの濁点をより認識しやすく。今回採用されたユニバーサルデザインフォントはそういうところを留意して作られてます。

背番号のフォント(J.LEAGUE KICK)

背番号をそもそも視認できないというのは問題外ですが、見えたとしても発生しがちな見間違えは、「4」と「9」、「3」と「8」があります。

3と8は見る角度によっては間違え安いのですが、「え?4と9なんて間違えないでしょう?」

よくよく見てみると4も9も、デザインによっては囲みの下に線が延びてる形に見えるのです。これこそデザインで解決できる見やすさです。このフォントでは4の縦棒は一番上まで伸びておらず、4と9が見分けやすくなるわけです。そういう意味ではユニバーサルデザインフォントとして十分よく考えられたものということがわかります。

視覚ユニバーサルデザインとして色はどうなのか

今回採用されたフォントでは色が「白・青・赤・黒・黄」と定められています。

なぜ色を定めるかというと、色をある程度制限したほうがフォントの制作がしやすいというのがあるのではないでしょうか。

J.LEAGUE KICKでは、この5色の決定のため、「Jリーグで過去3年に選手番号で使われた色」を調べたそうです。(Jリーグ報道資料より)

  • 白:51.3%
  • 黒:25.4%
  • 紺:5.1%
  • 青:4.1%
  • 赤:3.6%
  • 金:3.2%
  • 黄:1.5%
  • オレンジ:1.3%
  • ピンク:1.2%
  • 緑:1.1%

上位7位までで、5色が選ばれていることがわかります。便宜的に紺と青は同系色としてまとめることができるでしょう。

色覚異常の種類

医学的な分類はものすごくたくさんあります。

http://www.shiga-med.ac.jp/~hqophth/farbe/bunrui.html

滋賀医科大学の記事でも理論上10種類あると言われます。一番多いと言われているのがP型色覚です。

色を感じる仕組みは錐体というもので構成されています。錐体には、L(赤)、M(緑)、S(青)の3種類があり、どのような波長の光を主に感じるか(分光感度)が異なっています。P型色覚には、3種の錐体のうち赤い光を主に感じるL錐体が無い人(P型強度:いわゆる色盲)と、L錐体の分光感度がずれてM錐体と似通ってしまっている人(P型弱度:いわゆる色弱)がいます。

背番号のフォントでの色の決定プロセス

J.LEAGUE KICKでは、P型色覚での検証を多く行い、そのなかで濃い赤色は黒に見えてしまうということがわかりました。結果、赤を採用するとしたら、かなり彩度の高い赤にすることになりました。

同じようなこと上位各色をP型以外も含めた色覚に繰り返し、細かい色を決定していきました。

以上のように、色の決定にはユニバーサルデザインが十分に配慮していることがわかります。

もう1つの考え方:WCAG

ウェブの企画をとりまとめるW3CのWeb Accessibility Initiative (WAI)から、どんなヒトでもアクセスできるウェブを制作するために2008年末に勧告されたのがWeb Content Accessibility Guidelines 2.1(WCAG2.0: ウェブコンテンツのアクセシビリティのための指針 2.1)です。

これはウェブを制作する上で考えなければならない様々な項目を網羅して定めているものです。WCAGで色について定めているのは以下の通りです。

コントラスト比は、色のコントラスト(明度(明るい・暗い)・彩度(鮮やかさ)などの差)を数値化したものです。

その達成レベルとして、AA(達成)、AAA(高いレベルで達成)があります。その中で、色のコントラスト比は次のように定められています。

文字の種類 AA AAA
通常文字 (22px未満) 4.5 以上 7 以上
巨大文字 (22px以上) 3 以上 4.5 以上
太文字 (14px以上) 3 以上 4.5 以上

簡単にまとめると以下のようになります。

「情報を伝えている文字の色と背景色とのコントラスト比が4.5:1以上、可能ならば7:1以上確保されているか」

コントラスト比が低い場合はこんな風に見えてしまいます。過去にあるチームが白地に金番号のユニを採用してなかなか視認が難しかったこともあります。

低コントラスト比の例
低コントラスト比の例

引用元:https://weba11y.jp/know-how/guidelines/color-contrast-ratio/

色のコントラスト比は、無償のチェックツールなどを利用して手軽にチェックすることができます。

https://contrast-finder.tanaguru.com/

このサイトでは背景色と文字色を設定して、そのコントラスト比を調べることができます。

例えば、背景がグラデーションになっている場合や背景が写真の場合には、最もコントラスト比が低くなる色の組み合わせで判定します。多くの場合、文字の背景にはさまざまな色があるため、デザインによっては部分的にコントラスト比が不足してしまい、文字が読み取りづらくなることがあります。そのような場合は、文字を縁取ったり、文字の部分だけ背景に色を敷くなどして、コントラスト比を確保するように工夫します。

読みづらさの実例(2020年9月22日追記)

 この投稿のあと行われた名古屋グランパス対ヴィッセル神戸戦で、ここで指摘していた問題の実例を見ることができました。

この写真では古橋亨梧の背番号11を識別することはかなり難しいのではないでしょうか。

またグラデーションの影響をこんな風に取り上げてくださった方もいます。

J.LEAGUE KICKの問題点

J.LEAGUE KICKでは、報道資料によると地色が単色やストライプなどでの検討を行っていましたが、現在のユニフォームデザインなどではグラデーションや複雑な模様が入っているものも少なくありません。そのためあまり単純に考えることはできなそうなのです。

色を5色に決定してしまうというのは、あまり良い方法には思えません。

背番号フォントのパターンを決められてしまうと言うことは、そのパターンによってユニフォームのデザイン(グラデーションなどのデザイン)が制限される可能性があるということです。ユニバーサルデザインのために、全体のデザインが犠牲にされるのでは本末転倒に思えるのです。

(2020年9月18日11:30追記)清水エスパルスや、東京ヴェルディのように色も含めたコーポレートブランド(企業の個性・特徴を明確に提示し、イメージの統一を図るための戦略やその実装系)を整備したチームもあります。フォントについてはユニバーサルデザインを尊重するにしても、例えば以下の清水エスパルスの場合はコントラスト比も高く、ユニバーサルデザイン的にはまったく問題はありません。このような色が許可されないというのは各チームのブランドに影響が出てしまう可能性も考えられます。

https://www.s-pulse.co.jp/rebranding/03_index/ 画像引用元も同じ

OUR ORANGE, OUR SYMBOL

クラブの色というのはある程度尊重するべきと考えます。見づらいものであれば変えていく必要がありますが、そうでなければサポーター・ファミリーにとって愛着のある色。その色を身にまとうことでチームを盛り上げたいという気持ちがあると考えています。それが変わってしまったら・・・。ユニフォームによる収入はクラブにとっては大きなもの。ここに影響が出る可能性はないでしょうか。

クラブのユニフォームデザインの多様性を確保するために、フォント色は自由化し、コントラスト比を確保させるという方法を提案します。2022年度からでも良いので検討してください。Jリーグ様。

About The Author

グラぽ編集長
大手コンピューターメーカーの人事部で人財育成に携わり、スピンアウト後は動態解析などの測定技術系やWebサイト構築などを主として担当する。またかつての縁で通信会社やWebメディアなどで講師として登壇することもあり。
名古屋グランパスとはJリーグ開幕前のナビスコカップからの縁。サッカーは地元市民リーグ、フットサルは地元チームで25年ほどプレーをしている。

Leave A Reply

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pocket
Evernote
Feedly
Send to LINE