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

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

仕様

まず、この図から読み取れる情報だけでは何が「正解」かわからないので、実際の現場に足を運んでみました。

そして、館内をぐるっと見学してみて、大体の施設の配置を把握してきました。（ちなみに、ビルの中をウロウロしてると普通に不審者だと思うので、警備員の方に目的を伝え、撮影可否についても尋ねましたが、撮影はNGとのことでした）

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

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

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

問題点・その原因

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

案内板Aの問題点

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

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

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

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

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

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

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

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

むろん、あることによって直接的に問題を起こしているわけではありません。ただ、わからないからこそ案内が必要なわけで、案内板の役割を考えて、掲載・非掲載を考えたほうが良いのではないかと思います。

案内板A以外の問題点

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

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

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

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

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

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

多機能トイレは2階にあると書かれています。

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

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

デザインの意図

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

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

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

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

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

改善案A（コストかけないで改善パターン）

現状の9分割パネルの形は維持したまま、問題点1にフォーカスして、横方向のパネルを近接、縦方向のパネル間隔をあける、ことで対応関係を明確にしてみました。

こちらのコストは、パネルを移動する時間程度でしょうか。

（コストかけないパターン1）" />

また、コメントから気づいたんですが、これは並びを逆にしたほうが良いですね。

（コストかけないパターン2）" />

よりコストを重視してパネルを移動しないことを前提にする場合、一番対応関係が伝わりやすいのは、グループ背景色をつける形でしょうか。上から透明テープをかけるなりの対応になります。

上記の案に比べると、やはり表面的な対処という感じではありますが、それでも答えが類推できるものにはなったのではと思います。

（コストかけないパターン3）" />

改善案B（コストあまり考えずにあるべき姿で改善パターン）

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

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

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

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

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

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

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

プラスアルファの改善

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

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

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

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

追記

参考サイト

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

コメント

名無しさん

素晴らしい。これぞUI改善。

えいた

アクセスが急に増えたので何事かと思ったのですがここからのリンクでした。ありがとうございます。

これは

コメントの承認から表示されて、前の方と同じ様な事を書いていて見て驚いた。

1F/2Fの情報を分ける事には問題がありませんか?

分けるという事は、健常者や車椅子の方も上の階に行くだけならばさらに見やすくはなるでしょう。しかし、2Fにあるエレベータや多機能トイレを使う人にとっては不親切かもしれません。

その情報を利用する価値がないなどであれば良いのですが(現地を知らないので)、それらの情報が必要な方にとっては改めて違う項目から探し出さないといけないわけですから、暗示的という意味がちょっとわかりませんが、ここでは併記されている必要はあると思います。

だって建物の構造が複雑な事実は変わらないもん、クライアントに判りにくいよヴァーカって言われたら、エレベータや多機能トイレの大きさ(もちろんピクトグラムを作って)を小さくしてはいかがですか?、って提案するかな。 ただし、ピクトグラムそのものに対する表現力の限界はある、だからここでの化粧室や車椅子用エレベーターなどに補助説明文が存在する理由じゃないかな。

言語に頼らないピクトグラムで表現する必要性と重要性はあるけど、ピクトグラムに頼りすぎるのもまた難しいのでは?と思うけど。

個人的には、4.改善案Aのsign8の真ん中の矢印と防災センターの部分が入れ替えになっていれば、今のところ僕にはこれが見やすい。縦のレイアウトや、矢印を揃える事に僕は価値を見いだせない、ざっくりでごめんなさい。 偉そうに言えば、他の階の案内板のレイアウトの整合性(統一性)はあるような…。

基準は エスカレータの項目がなくなれば、2Fエレベータの項目の表記が無くなるからというのは、表向きの理由。 これ程酷い案内板はそうそうないだろうけど(探しているときにこれ見たら、憤慨して涙流しながらその場でいろんなのを出す)、知らない場所へ初めて来て色々目が回っている時には、多少蛇足ぐらい説明されていたほうが、方向音痴の僕には助かるかもしれない。

上手に言えませんが、画像で見る限りはあれくらいの距離であれば、エスカレータの項目はある方が、書いていない案内板より、書いている案内板のほうが、今は僕が信用できる気がする。

hash

＞名無しさん あぁ、確かに矢印は横に並べたほうがわかりやすいですね。左右が綺麗に並びますし。追加してみました。 というか、改善案Bではちゃんと考慮してるのになんか忘れてました。。

hash

＞名無しさん そんな吐き捨てるように言われてもね…。

hash

＞c3poさん

区切りを入れて、まとまりをつけるということですよね。おそらく、コスト的に言えばそれが一番効果的だと思います（ただ、私は多少コストが高くなっても、背景色をつけるなどより一見して目立つ形のほうが良いのかなと思いました）

名無しさん

元ネタのすぐ後に出された http://twitpic.com/6h83ag これでいいと思います。

hash

＞名無しさん #4

その方向の改善案もつけてみました

＞名無しさん #5

ですか。

＞名無しさん #6

ご指摘ありがとうございます。

確認してみましたが、確かに目次部分がひどい事になっていますね。画像も縦横比が狂ってしまっている。

取り急ぎ、目次だけ問題が緩和されるよう少しレイアウトを調整してみました。今後デザインリプレースも検討しているので、その際は問題が起こらないように検証してみますね。

名無しさん

個人的には最後の方はむつかしいかんじ 4.2位がいいな

hash

＞これはさん

上記コメントの通り、くっつけた案も加えてみました。

1.健常者が上の階やエレベータや使いたい方の項目 2.健常者がトイレ(化粧室のほうがいい)や防災センターの項目 3.車椅子でエレベータや上の階のトイレに行きたい方の項目だもん、 案に比べたらこれ作った人考えてるんじゃないの?

利用する人や目的の視点でまとめるというのは、確かに重要だと思うのですが、現状だとそれが暗示的すぎて伝わりづらく、かといって後段に書いたように説明してしまうと案内としては複雑すぎると感じたんですね。 そうした伝え方が難しいのであれば、同階層にある施設案内をわかりやすくするという意図で、1F/2Fの情報を分けて表示する方が良いのではと思ったんですね。

あと画像も見たけど、基準になるからエスカレーターはやっぱり消さないほうが良い。

基準というのは何の基準でしょうか？距離なら違うかと思いますし…。

hash

多機能トイレ＝車イス利用者用あり、だとすると、「この階のトイレは多機能トイレじゃないからな！」という警告はとても大事ですので… 難しいところです。

ご指摘はもっともだと思うのですが、ただ、そうした施設って通常のトイレと区別するために、車イスのピクトグラムを配していたりしませんか？こうした施設を利用する方も、それを手がかりとして利用している、と仮定するなら、提案したデザインでも誤認する恐れは低いのではと思ったんですね。

また、一見した時のわかりやすさを犠牲にしてしまうと、案内標識としての機能が大きく落ちちゃうのではと。 その兼ね合いで現状に落ち着いています。

２Ｆのエレベータに関する表示はもともと必要無いのではないでしょうか。健常者だって車イス用エレベータを使えるでしょう。 昇降手段がエスカレータしかないのでは荷物も運べません。（ただし利用者数や車イス利用者の到来頻度によっては、車イス用をできるだけ空けておくための配慮が必要になるかもしれません）

これは、ビル側が車椅子用エレベータがどういう役割として考えているかによるので判断しづらい所があります。 ですが、見たところでは車椅子用エレベータは、かなりひっそりとした場にあって、かなりイレギュラーに使用されるような感じがしました。そういったものを広く利用されるように表現するのは、ちょっと違うのかなと思ったんです。

名無しさん

#26の名無しさんに一票。 目的を疎かにした現状は本末転倒ですが、見た目のクオリティは高いと思います。グループ背景色をつけるパターン以外は見た目がどれも普通過ぎてつまらないと思います。デザイナーさんは「どこにでもある案内板」とはしたくなかったのでは？

azs

デザインより情報処理系の方が向いてると思うよ。

名無しさん

黒のビニールテープを二本貼って、上中下とブロック分けする。 お金も手間もかかりませんし、見た目もそれほど悪くないかと。

名無しさん

グル—プになるパネル下部に同じ色テ—プ貼って明示的にパネルのグル—プがわかるようにすればいいだけじゃないかとか言ってみる もしくは真ん中のパネルの色をちょっとだけ濃くするだけ

hash

diablo 3 #20 Thanks for the compliment

I launched this weblog using Wordpress with home-made theme. The theme is available here. please feel free to use it and have fun! http://note.openvista.jp/2008/wordpress-theme-cielo/ http://lab.openvista.jp/demo/wordpress/wp-content/themes/cielo.zip

diablo 3

I really like your web site.. really good hues & theme. Did you create this web site yourself? Plz reply again as I’m looking to create my own web site and would like to know wheere u received this from. many thanks

かずさん

元のが一番ええけどなあ。だいたい縦にみるやつなんかおんのか？１、２、３段ともちっと隙間あけるくらいが親切か。。。色変えるか。光沢あり光沢なしみたいな感じでもいいかな。

hash

これはさん

コメント返信ありがとうございます。ご指摘について、少しまとめさせてください。

＜前段＞

  1. 問題は適切なグループがなされていないことである
  2. 1Fと2Fの情報を分けることで、2Fの情報を必要とする方が1Fの情報を探してから、また改めて2Fの情報を見なければならないため、不親切である。

(2)については、そもそも問題点2（異種の情報が十分に区別されていない）を問題とするかの違いがあるのかなと思います。 私はそれを問題だと思って、1Fと2Fを区別しました。仰る問題もあるかと思うのですが、問題点2が起こす一見した時のわかりにくさと天秤にかけると、問題点2の方が問題だと思ったんですね。

なお、「暗示的だ」と書いた意味を（言葉が足りておらずすみませんでしたが）説明しますと、3列が（方向以外の）それぞれ特定の意味でグルーピングがされていますが、その意味が明示されておらず、各列2つの標識を見て利用者が意味を見つけ出さねばならない。それは案内標識というパッと見てどこに何があることを把握できるよう求められるものとしてはちょっと弱いのではと思ったということです。

逆に、末尾（sign7.png）のように軸を明示しすぎてしまうと、かえって複雑になってしまうジレンマがあり、難しいと思いました。

＜後段＞ 多少蛇足でもあったほうが確実にサインとしての役割を確認でき、安心感があり、信用がおけるということですね。なるほど、わかりました。

名無しさん

一番手っ取り早い改善方法としては 縦方向のパネルの間隔を横方向の2倍以上に広げるだけで 十分に改善されるんですけれどねぇ・・・

お名前（任意）

そして、このサイトはスマートフォン表示が「分かりづらい」。 環境をお持ちの方はお試しあれ。

これは

提案するなら、“ひっつけて!”でしょう。

この案内板の問題点は適切なグループ化がされていない事で、大きく変える必要はそれほどないと思う。 形で表せば、“囲”から“目”のようになるかな。

1.健常者が上の階やエレベータや使いたい方の項目 2.健常者がトイレ(化粧室のほうがいい)や防災センターの項目 3.車椅子でエレベータや上の階のトイレに行きたい方の項目

だもん、案に比べたらこれ作った人考えてるんじゃないの?

それと、グループ化した上では、グループを上から見るのか下から見るのか、案内板Aの位置の高さから考えればレイアウトの順番は気になる。 でも、これは社会的な合意がいるかな。

あと画像も見たけど、基準になるからエスカレーターはやっぱり消さないほうが良い。 僕みたいなバカや全然知らない人には…。

ての字

名無しさん

元のデザインはそう悪くない。デザインを変えた改善案はどれもごちゃごちゃして余計に視認性が悪くなってるし。

元のデザインは上中下の3段のグルーピングになっていることが分かりにくいだけなんで、 コストをかけずなら、段間に黒いテープを貼るか、中段の3枚にカラーセロファンを貼る程度で十分じゃないかと思う。

奈良

A案下側は良い点があると思います。

つまり、多機能トイレの情報は車椅子エレベーターと一緒がいいのではないか(5.2案案などでエレベーター アイコンの下の空き地へ)と思います。

現物でこの二つが並んでいるのは原作者もそれを意識したのでは？多機能トイレユーザーは車椅子エレベーターユーザーとの関連が強いとおもいます。 (エレベーターは二階から、の案内がエスカレーター アイコンの隣なのも同様な思想で行われたのではないかと)

ちょっと話変わりますが案内板Cが車椅子ユーザーの目の高さを基準に考えた位置にあれば、案内板Bに車椅子エレベーターが記載されていない不備がある程度軽減されたのではないでしょうか？

c3po

原因は設置業者にデザイナーの意図が伝わってなかった事かなと思っていました。

パネルを移動させるのも、コストがかかるので、グループどうしの隙間にパネルの長さより短い橋みたいなものを追加で良いのではないでしょうか。 もしくは、グループ同士の境界の隙間に白以外のテープを貼るのが低コストかと…

hash

たくさんのコメント、どうもありがとうございます。

＞名無しさん

コストをかけないパターン（パネル並び替え）を追加してみました。 Togetterの改善案を見て思ってはいましたが、確かに今回はコストをそれほどかけなくても、割と改善が図れそうですね。

名無しさん

自己顕示欲が透けて見えてやっぱり気持ち悪い

名無しさん

改善案に３×３のパネル案がないのが残念！ 一つの列か行に矢印をまとめれば、 一列が同じカテゴリ もしくは、 一行が同じカテゴリ になって、現状より判りやすい。 費用も位置を貼りかえるだけ。 「設置場所を選ばない且つ低コストを実現している」 利点も踏襲。

紅葉

初めまして、記事を面白く読ませてもらいました。 ただし1点だけ、こういった記事の際には、個別の図にA-1とかA-2といった風に、番号を振って欲しいと思いました。

でないと、この図が良い、あの図がよい、と指し示してコメントする事が大変難しいからです。 案内板の不案内を指摘する記事で、記事内の誘導が不案内というのも、どうかと思いました。

smile書き手

このブログは、私（@hashcc）が日々考えていることをまとめて、つなげて、残しておくためのブログです。
関心領域は Webデザイン（特にUXデザインやUIデザイン関連）、食や観光に関する情報環境の整備、情報の可視化、アクセシビリティなどです。

書き手にご興味があれば自己紹介ページで詳細をご確認ください。

commentsコメント

しばらくお待ちください・・