Liner Note

情報(ユーザー中心デザイン・ユーザビリティ)と技術(ウェブプログラミング・ウェブサービス)についてのメモ書き

要約:新宿のとある高層ビルの館内案内標識が話題に。後学のために、仕様・問題点を整理、改善案の作成を行ってみました。

Twitterで、あるサイン(案内板)のことが話題になっていました。新宿のあるビルの案内図のようですが、わかりづらいことが問題になっているようです。

…確かにこれはわかりません。トイレを探している時に遭遇したら結構辛いと思いますね。でも、なぜわかりにくいのか、どういう改善案が考えられるのか、もう少し考えてみることにしました。

仕様

まず、この図から読み取れる情報だけでは何が「正解」かわからないので、実際の現場に足を運んでみました。そして、館内をぐるっと見学してみて、大体の施設の配置を把握してきました。(ちなみに、ビルの中をウロウロしてると普通に不審者だと思うので、警備員の方に目的を伝え、撮影可否についても尋ねましたが、撮影はNGとのことでした)

それで、記憶を頼りに書いてみた館内図がこちらになります。案内板Aが問題となる案内板を指しています。なお、階層は1Fです。

案内板にある施設と階層・配置を整理しますと、以下のようになります。つまり、1列ごとにまとまっていると考えると良いようです(2階の情報についてはまとめてよいか微妙ですが)

  • 1F
    • (サイン右側)
    • エスカレータ
    • (サイン左側;正確に言うと左側→直進)
    • 防災センター
    • AED(自動体外式除細動器)
    • 化粧室
    • (サイン直進側;正確に言うと直進→右側)
    • 車いす用エレベータ
  • 2F
    • エレベータ
    • 多機能トイレ

時間がある方は、この情報を基に問題点と改善案を考えてみてください。

問題点・その原因

さて、仕様を整理したところで観察できる問題点をまとめましょう。

案内板Aの問題点

問題点1:矢印と案内標識との対応関係がわからないため、各施設がどこにあるのかわかりづらい

例えば「化粧室」はどこにあるでしょうか?

近接している矢印に対応していると考えるならば、「右方向(→)」あるいは「直進(↑)」の2つの可能性があります。一方で、この標識が1列に1つの矢印があることから、各列ごとに矢印とそれに対応する案内標識がある、という風に考えると化粧室は「左方向(←)」にあることになります。

このように、対応関係が一意に決められないため、各施設がどこにあるかわからず利用者は迷ってしまうことになります。両者の対応関係がうまくついていないことが原因と言えるでしょう。

問題点2:種類が大きく異なる情報が十分に区別されていないため、各パネルの意味が一見して読み取りづらい

書かれているものは違うものの、9枚のパネルの形状・色などは全て同様で特に区別されていません。しかし、これらには矢印と案内、1Fの情報と2Fの情報という異なる情報が書かれてしまっています。よって、各パネルがどういう種類のものか一見して読み取りづらくなっています。

同じ種類の情報のまとまり、違う種類の情報との区別がうまくなされていないことが原因と言えるでしょう。

問題点3:エスカレータの案内表示は、この場面での必要性が低い

館内図を見ても分かる通り、案内板Aとエスカレータはかなり近い場所にあります。というより、どの出入口から入ってもエスカレータの存在に気づくので、わざわざ案内を設けて示す必要性が薄いと思います。むろん、あることによって直接的に問題を起こしているわけではありません。

ただ、わからないからこそ案内が必要なわけで、案内板の役割を考えて、掲載・非掲載を考えたほうが良いのではないかと思います。

案内板A以外の問題点

館内を見てまわると、施設案内という目的に対して生じている問題が、案内板A以外にもあることが観察できます。

問題点4:方向指示が不十分であるため、各施設にたどり着きづらい

お気づきの方もいるかと思いますが、このサインから直進するだけでは車椅子用エレベータにはたどり着けません。そこから右に折れる必要があります。

ただ、これはこのサインの問題ではありません。人間の記憶力はそんなに良くないですから細かい経路まで覚えてられませんし、そうしたものは進んだ先で理解できればいい話です。

かし、先に進んだ案内板Bでは車椅子用エレベータに関する指示はありません(防災センターや化粧室の情報はあります)。実は側にある案内板Cには車椅子用エレベータの方向指示があるのですが、案内板Bに比べて目立たず、見落としやすいように感じられました。方向指示が不十分なことが原因と言えるでしょう。

問題点5:2Fの多機能トイレの位置がわかりにくい

多機能トイレは2階にあると書かれています。しかし、それに従ってエスカレータで2階に上っても、多機能トイレの位置を示す案内がフロアの隅のほうにあるため、気づきづらくなっています。2階に行ってから、どこに多機能トイレがあるのか何らかの指示があると期待していた利用者にとっては、案内を見つけるまで、少し不安になってしまいます。

2Fに上ってから、案内がパッと目につく場所にないことが原因と言えるでしょう。

デザインの意図

改善策を考える前に、現在のサインにどういう利点があるのか、デザイナーがなぜこうしたのか想像して考えてみましょう。

…と思いましたが、あまり浮かびませんでした。格子状の配置は複数の独立した情報を並列的に表示するには情報量がパッと把握できて(セルの数だけ見出しが立っていると捉えやすい)一つの良い方法かと思いますが、今回のように、パネル同士の意味のまとまりを持たないといけないケースでは、デメリットしか考えられません。

と思っていたんですが、Twitterを見たら面白い指摘をしている方がいました。

【新宿案内図2】この案内図は矢印と絵文字のパネルを分割し3×3の大パネルに再構成することで、設置場所を選ばない且つ低コストを実現している点は評価できる。ただ絵文字と矢印の相関関係が分かり難く、案内板の用をなしてないのは論外。http://t.co/LI5LRAK

@T_SONOYAMA – 9月7日のあるツイート

思いつきませんでした。確かにコストメリットはありそうですね。拡張性や工事などで場所が変わった時の柔軟性もありそうです。ということで、改善案はこうしたコスト性・柔軟性に優れた案と、そういうことを気にせず作ってみたわかりやすい案の2案になりますかね。

…でも、Togetterで前者の案はわんさか出てますし、(仕事なら別ですけど)前者までやっちゃうと疲れちゃうので、今回は後者だけで考えることにします。

改善案

実を言うと、Togetterでのディスカッションを見てから考えてしまったので、結構その案に引きづられている面があります。これは失敗しました。。

問題点1への対応(矢印と案内標識との対応関係がわからないため、各施設がどこにあるのかわかりづらい)

矢印と対応する案内標識を近接させてまとまりをつけてみましょう。また、ここで左・直進・右という位置関係の整理も同時に行っています。

問題点2への対応(種類が大きく異なる情報が十分に区別されていないため、各パネルの意味が一見して読み取りづらい)

矢印と案内標識とにそれぞれ背景色を付けて区別してみました。また、1Fと2Fの情報に見出しを添えて区別してみました(現在の階層がどちらかはまぁわかるとは思いますが、1Fを大きく取って強調しています)

問題点3への対応(エスカレータの案内表示は、この場面での必要性が低い)

エスカレータの表示を削除しました

プラスアルファの改善

1Fと2Fの位置関係を考慮して、縦に再配置しました。また、案内標識のそれぞれの意味に沿って、トイレを水色に、緊急時に利用する施設を赤色に、移動系を緑色(これは無根拠)にしてみました。

…とだいたいこんなもんでしょうか。ただ、私自身インフォグラフィックやサインシステムに興味はあれど、得意ではないので、こうするともっと改善できるよって意見をお待ちしてます。ちなみに今私が引っかかっているポイントは以下です。ちょっとまだ答えが出ていません。

  • 各施設を誰がどのように求めているのか、という視点でまとめ直したほうがわかりやすいのではないか?…と考えてみたけど、軸がバラバラで文字も多くなってかえって超わかりづらいですね。だいたい各軸が排他関係でないと、複数の軸に当てはまる人が混乱するし…。
  • 多機能トイレという文言はこれで良いのか?多目的トイレ、だれでもトイレ、いろいろ呼称はあるんですが、結局誰がどう嬉しい施設なのかピンと来ない文言です。ただ、これを主に利用する人にとっては、あぁアレね、みたいな常識的な文言なのかもしれず、調査してみないと判断できないですね。
  • 車椅子用エレベータのピクトグラムの上下マークと直進マークが近接してしまっており、直進マークが2Fに上るマークとして誤解されないかが不安。ただ、ピクトグラムはできれば現在の国際標準の形状を利用したいし、矢印に「直進」など文字を付け加えることも避けたい(多言語併記により、表示が複雑になることを懸念)
  • 1Fにエレベータはないから、3F以降に用がある方は、2Fに上ってからエレベータを利用してくれ、という意図がすぐに伝わるかが不安。エレベータを探している利用者が、この案内板には1Fにエレベータの表記がないが、それは単純にエレベータがこの案内板から離れているからではないか、と考えないか?

ちなみに、今回は労力上、1つのサインだけ取り上げましたが、最終的には単独ではなく、サイン全体がどうあるべきかという視点も併せて語られないといけないと思います(そういう意味ではこの記事はかなりの片手落ちなんですが)。

なんにしろ、とりあえず上記のように考えを整理してみるだけでもいい勉強になりました。サイン計画サインを作られたデザイナーさん、話題を提供していただいた@sekoguchiさん、ありがとうございました。

参考URL

今回、直接参考にしたわけではありませんが、サインシステムについて知る上で有用なリソースだと思いましたので、書き残しておきます。

Popularity: 2% [?]

キーワード:

似たもの記事

読者の皆さんの反応サイト内コメントの更新情報(RSSフィード)

読者のコメント

0

ブックマークコメント

46

他サイトの関連記事

0

読者のコメント

コメントはまだ寄せられていません

はてなブックマークでつけられたコメント

eimsさんのプロフィール画像  eims
同じようなフォントサイズで目が疲れるなぁ。
記事のデザインにもツッコミありそうだな・・・
georgewさんのプロフィール画像  georgew
例の一体トイレどこやねん??状態の案内板。
owiさんのプロフィール画像  owi
このウンコデザインがなぜ仕事の流れの中で濾されることなく具現化できたのか、その経緯が知りたい
odenchiさんのプロフィール画像  odenchi
なるほどと思える考察。
sen59aさんのプロフィール画像  sen59a
これは素晴らしい記事。
ドキュメントをこれ位わかりやすく作りたい。
John_Kawanishiさんのプロフィール画像  John_Kawanishi
素晴らしい
cotajpさんのプロフィール画像  cotajp
ちょっと古臭い感じだけど、これで納得できるね。
そういばJR東日本の区分けが分かりづらい看板にも線が引かれるようになった。
やっつけだけどw
kana-kana_ceoさんのプロフィール画像  kana-kana_ceo
←↑↓→とか矢印を書いてたら、そういえば自称芸術家集団もが名前に入ってたなあ、などと思い出しました。
airj12さんのプロフィール画像  airj12
おおお…
glass-_-onionさんのプロフィール画像  glass-_-onion
駄目デザインを勝手に改善する。
改善例から学べるものが多い。
元の案内板を作った人はデザイナじゃなくてイラストレータでしょ。
たぶん。
cha-cha-kiさんのプロフィール画像  cha-cha-ki
おぉー
yuka_tasoさんのプロフィール画像  yuka_taso
勝手にリデザイン:新宿高層ビルの館内施設案内板 - Liner Note
xevraさんのプロフィール画像  xevra
そもそも見た人を惑わせる事が目的のデザインなんだから改良しちゃダメだろJK。
暗に田舎者は帰れという悪意を込めてある訳だから。
ikemo10さんのプロフィール画像  ikemo10
どうしてその形になったのかわかりやすい。
もともとの案内板もどうしてその形になったのか分かれば納得できるんだろうか?
takuya_1stさんのプロフィール画像  takuya_1st
そして、そもそもの正方形9つのデザインをイカスと満点だったんだけどね
esperanza1004さんのプロフィール画像  esperanza1004
ここまでやって初めてデザイン。
trashtoyさんのプロフィール画像  trashtoy
おおおお、これは分かりやすい!
north_godさんのプロフィール画像  north_god
パネルの並び方を自由に組み合わせられる設計だから、配置と色変更だけで考える方がより変化を感じれたのではと思った
yP0hKHY1zjさんのプロフィール画像  yP0hKHY1zj
化粧室を入れ替えるだけでだいぶわかりやすくなる。
sometkさんのプロフィール画像  sometk
うんうん、これは素晴らしい。
kagakaoruさんのプロフィール画像  kagakaoru
現状のものをそのまま活かすなら、マジックか何かで色分けしてあげればいいんじゃなかな。
問題の大部分は帰属の問題だし、低コストだし。
masakanouさんのプロフィール画像  masakanou
改善案、参考になる
raituさんのプロフィール画像  raitu
良記事。
話題になった新宿高層ビルのひどい案内板について、実際に現場に行った上で修正案を出している。
インターフェイスの問題点をかなり見事に言語化している点が凄い。
言葉もインターフェイス。
night_hikeさんのプロフィール画像  night_hike
デザインとはなんぞや。
さっそくリデザインされた方が
dhalmelさんのプロフィール画像  dhalmel
難しいんだろうなぁ。
最後の例みたいに説明が増えると、こんど日本語わからんとわからん、というのが出てくるだろうし。
ysyncさんのプロフィール画像  ysync
多目的トイレって聞くと、あれこれよからぬ目的が頭をよぎるのでイヤ。
sgyhighさんのプロフィール画像  sgyhigh
俯瞰図を見たあとであらためて問題の案内板を見てみると意外にすんなり把握できた。
つまり件のデザイナーもそういう思考経路だったのかも。
/けっきょく俯瞰の館内図が一番わかりやすい気が。
lotus_tribalさんのプロフィール画像  lotus_tribal
これは素晴らしい良記事!
glat_designさんのプロフィール画像  glat_design
いやいや、かなり面白いと思います。
早速行ってくるとかステキ。
これだけでも考えることたくさんあるんですね
TakahashiMasakiさんのプロフィール画像  TakahashiMasaki
元のカンバンをつくったやつをクビにすべき
matsui899さんのプロフィール画像  matsui899
下の改善例がわかり易い。
まとまり、絵の大きさが区別に特に効くな。
okra2さんのプロフィール画像  okra2
コストメリットしか見えないクライアントがいかに多いか・・・
k-takahashiさんのプロフィール画像  k-takahashi
確かにこれはわかりません。
トイレを探している時に遭遇したら結構辛いと思いますね。
でも、なぜわかりにくいのか、どういう改善案が考えられるのか、もう少し考えてみることにしました
 教材としてGood
REVさんのプロフィール画像  REV
提案されたデザインは、どれも良好だとおもうけど、それにも増して、見やすさ見にくさを言語化しているところが素晴らしい。
俺にはわかった俺にはわからなかったを超えて。
konekonekonekoさんのプロフィール画像  konekonekoneko
何がどこの方向にではなく、どの方向に何が、で分ければいい。
 見ている場所はほぼ固定なのだから。
harradさんのプロフィール画像  harrad
案内板のデザインにツッコミを入れているこのサイト自体がiPhoneで見るとレイアウトが崩れて読みにくくて仕方ないという。
hatsu_newsさんのプロフィール画像  hatsu_news
勝手にリデザイン:新宿高層ビルの館内施設案内板 - Liner Note
bitterdamerungさんのプロフィール画像  bitterdamerung
既存のもので低コストで考えると、縦の隙間を排除して詰めて、横の隙間を倍に、あるいはラインの色プレートを追加したら多少わかりやすくなるかもしれぬ。
knaganumaさんのプロフィール画像  knaganuma
ちゃんと整理して考えないとね。
sakura-zさんのプロフィール画像  sakura-z
わかりやすい。
|
hashiriyaさんのプロフィール画像  hashiriya
ピクトグラムを有効活用するためにレイアウトの果たす役割は大きいということがよくわかる事例。
ku_marinさんのプロフィール画像  ku_marin
すんごいわかりやすくなった…
seiyuDBさんのプロフィール画像  seiyuDB
だんだん知能テストになってきてる
mcgomezさんのプロフィール画像  mcgomez
おー、わかりやすい!素晴らしい!_φ・_・
tanahataさんのプロフィール画像  tanahata
省パネルへの分割で汎用化/低予算化したメリットを残したままリデザインできないかしら。
基本は対応関係を密にし目立たせること。
// 勝手にリデザイン:新宿高層ビルの館内施設案内板 - Liner Note
kaminoakiさんのプロフィール画像  kaminoaki
勝手にリデザイン:新宿高層ビルの館内施設案内板 - Liner Note

他サイトの関連記事

トラックバックはまだ寄せられていません


トラックバックとは
この記事に言及したサイトをこちらに掲載する仕組みをトラックバックと言います。ここでは、このサイトに頂いたトラックバックを一覧表示しています。
トラックバックしてくださる方へ
この記事への言及がない記事など、トラックバック受信方針に沿っていないものは、読者にお見せしても仕方ないこともあり削除させていただいることをご了承ください。
トラックバックを受け取るためのURI

コメント書き込みフォーム

  • メールアドレスはウェブ上で公開したり、連絡以外で使うことはありません
  • コメントを公開したくないが、作者に連絡を取りたい場合は メールで連絡してください
  • 本文中にHTMLコードは使用できません(URLはそのままお書きください)