EGGG

ヤフー勉強会で学んだメモ その1

デザイン

昨日ヤフー大阪で行われた「ヤフーにおけるビジュアルデザイン」に参加してきました。そこで「なるほど〜」と感じたことが沢山あったのでメモしておきたいと思います。
今回はヤフーの防災系サービスに関わる 小野様が登壇したお話について

フォントは運用性、安全性、再現性の3つの視点から見てフォントを選定


デバイスフォント – 想像通りの見た目に再現することが難しいですが、標準でデバイス入っているフォントなので「突然ライセンスが変更された」「急にフォントが見れなくなった」などの問題が少ない利点があります。

画像 – 再現性は高いですが、後からの修正が聞かないなど運用性の部分で問題があります。

Webフォント – 再現性・運用性は高いが、突然ライセンスの変更などで使えなくなる要素があったり安全性に不安があり、緊急時でもしっかり表示できる安全性を重視する防災系アプリでは不向き。

そのため固定文言のみの部分には画像を、編集が必要な文言にはデバイスフォントを採用されたそうです。

災害アプリなど気象情報の配色は気象庁が決めている。

Yahoo!防災速報の配色は、黄色→赤→紫 の順番で危険度が高くなることを示しています。
ただここで「なぜ赤が紫よりも危険度が低いんだ?」「赤のほうが危険」じゃないかという声が上がると思われますが、これを勝手に変えてはいけない理由があるそうです。

防災速報の配色は気象庁が定めた配色ガイドラインにそって、 気象庁を参考に災害の色を決めているのです。
出典:https://www.jma.go.jp/jma/press/1205/24a/120524_hpcolorguide.pdf

統一した配色で見ている人達を惑わせないためにも、自分たちが勝手に色を決めてつけるべきではないのです。

とはいえ、一般ユーザーの中には赤色が一番危険というイメージを持っている人も多く、そのイメージを変えるのは難しい。
そこで、重要度順に並び替えたりなど表示位置で理解できるように、配色ではなくレイアウトで工夫したとのことです。

アクセシビリティ

よく聞く話ですが、日本人男性の20人に1人は色覚障害を持っていると言われています。
その為、 色を並べた時に同じ色のように見えてしまうと危険度が判断できず問題となります。色覚障害の人のためにまったく一緒にならないような配色、明度差や色の違いをはっきりさせる必要があるそうです。
特に彩度やコントラス比をしっかりつけ、コントラスト比はチェッカーツールを使用して確認をします。

身の安全にかかわるアプリな為、全ての人に伝わるようにデザインすることが必要とされフォントサイズもなるべく大きくすることが必要となります。

感想

以上、勉強会でお話されていた内容の抜粋でした、間違った解釈をしていたら大変申し訳ないです・・。
ただ、気象庁からデザインガイドラインを参考に作っていたことなど、デザイン作成には考えることが沢山あってその作る一つ一つに理由があることを実感できました。

「共通ルールを知り、普及に貢献することも防災コンテンツのビジュアルデザインにおいて考慮すべき重要な要素」と最後に締めくくり、「為になるなぁ〜。」と感じた次第です。

おすすめ記事

デザイン

ヤフー勉強会で学んだメモ その1

デザイン

【後輩向け】自分なりに配色の基礎を紹介

私生活

Yahooの勉強会に行ってきた話