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で前者の案はわんさか出てますし、(仕事なら別ですけど)前者までやっちゃうと疲れちゃうので、今回は後者だけで考えることにします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

プラスアルファの改善

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

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

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

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

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

  • コストかけないパターン(案A)で十分だよという意見。確かにそうだと思います。ただ当初togetterでコストかけないパターンの案がいろいろ出ていたので、じゃあ、そうした案以外でどこまでわかりやすくできるのかなと考えてみたんですね(後で案Aも追加したんですが)
  • 最初に提示した案内図で十分という意見。そうですね、それも一案だと思います。ただ考えを補足させてもらうと、南側出入口近くにある1F見取り図(案内サイン)があり、それと似たものを提示するよりかは、具体的な方向提示を行うほうが良いと思って、今のような誘導サインにしたんですね。

参考URL

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

Popularity: 12% [?]

キーワード:

似たもの記事

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

読者のコメント

29

ブックマークコメント

191

他サイトの関連記事

3

読者のコメント

  1. お名前

    名無しさん

    投稿日時
    2011年09月09日
    14時ごろ
    Comment No
    #1

    改善案に3×3のパネル案がないのが残念!

    一つの列か行に矢印をまとめれば、
    一列が同じカテゴリ
    もしくは、
    一行が同じカテゴリ
    になって、現状より判りやすい。

    費用も位置を貼りかえるだけ。
    「設置場所を選ばない且つ低コストを実現している」
    利点も踏襲。

  2. お名前

    これは

    投稿日時
    2011年09月09日
    23時ごろ
    Comment No
    #2

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

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

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

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

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

  3. お名前

    ての字

    投稿日時
    2011年09月10日
    11時ごろ
    Comment No
    #3

    ・このあいだこれを見た直後は、単に1行目2行目3行目のスキマをあければ大分マシになると思いました。
    ・多機能トイレ=車イス利用者用あり、だとすると、「この階のトイレは多機能トイレじゃないからな!」という警告はとても大事ですので(このフロア配置だと、トイレまで車椅子転がしてったあげく、そこから一番遠回りなエレベータに行きなおさなくてはならない)、最も優れているのは3段になっている最後のものだと思います。
    ・2Fのエレベータに関する表示はもともと必要無いのではないでしょうか。健常者だって車イス用エレベータを使えるでしょう。昇降手段がエスカレータしかないのでは荷物も運べません。(ただし利用者数や車イス利用者の到来頻度によっては、車イス用をできるだけ空けておくための配慮が必要になるかもしれません)

  4. お名前

    名無しさん

    投稿日時
    2011年09月10日
    12時ごろ
    Comment No
    #4

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

  5. お名前

    名無しさん

    投稿日時
    2011年09月10日
    12時ごろ
    Comment No
    #5

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

  6. お名前

    お名前(任意)

    投稿日時
    2011年09月10日
    15時ごろ
    Comment No
    #6

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

  7. お名前

    c3po

    投稿日時
    2011年09月10日
    16時ごろ
    Comment No
    #7

    原因は設置業者にデザイナーの意図が伝わってなかった事かなと思っていました。
    パネルを移動させるのも、コストがかかるので、グループどうしの隙間にパネルの長さより短い橋みたいなものを追加で良いのではないでしょうか。
    もしくは、グループ同士の境界の隙間に白以外のテープを貼るのが低コストかと…

  8. お名前

    名無しさん

    投稿日時
    2011年09月10日
    16時ごろ
    Comment No
    #9

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

  9. お名前

    名無しさん

    投稿日時
    2011年09月10日
    18時ごろ
    Comment No
    #13

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

  10. お名前

    これは

    投稿日時
    2011年09月11日
    11時ごろ
    Comment No
    #17

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

    1F/2Fの情報を分ける事には問題がありませんか?
    分けるという事は、健常者や車椅子の方も上の階に行くだけならばさらに見やすくはなるでしょう。しかし、2Fにあるエレベータや多機能トイレを使う人にとっては不親切かもしれません。
    その情報を利用する価値がないなどであれば良いのですが(現地を知らないので)、それらの情報が必要な方にとっては改めて違う項目から探し出さないといけないわけですから、暗示的という意味がちょっとわかりませんが、ここでは併記されている必要はあると思います。

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

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

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

  11. お名前

    えいた

    投稿日時
    2011年09月11日
    17時ごろ
    Comment No
    #18

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

  12. お名前

    名無しさん

    投稿日時
    2011年09月11日
    20時ごろ
    Comment No
    #19

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

  13. お名前

    diablo 3

    投稿日時
    2011年09月12日
    3時ごろ
    Comment No
    #20

    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

  14. お名前

    かずさん

    投稿日時
    2011年09月12日
    22時ごろ
    Comment No
    #21

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

  15. お名前

    名無しさん

    投稿日時
    2011年09月13日
    8時ごろ
    Comment No
    #24

    グル—プになるパネル下部に同じ色テ—プ貼って明示的にパネルのグル—プがわかるようにすればいいだけじゃないかとか言ってみる

    もしくは真ん中のパネルの色をちょっとだけ濃くするだけ

  16. お名前

    名無しさん

    投稿日時
    2011年09月13日
    9時ごろ
    Comment No
    #25

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

  17. お名前

    名無しさん

    投稿日時
    2011年09月13日
    9時ごろ
    Comment No
    #26

    元のデザインはそう悪くない。デザインを変えた改善案はどれもごちゃごちゃして余計に視認性が悪くなってるし。
    元のデザインは上中下の3段のグルーピングになっていることが分かりにくいだけなんで、
    コストをかけずなら、段間に黒いテープを貼るか、中段の3枚にカラーセロファンを貼る程度で十分じゃないかと思う。

  18. お名前

    奈良

    投稿日時
    2011年09月13日
    10時ごろ
    Comment No
    #27

    A案下側は良い点があると思います。
    つまり、多機能トイレの情報は車椅子エレベーターと一緒がいいのではないか(5.2案案などでエレベーター アイコンの下の空き地へ)と思います。現物でこの二つが並んでいるのは原作者もそれを意識したのでは?多機能トイレユーザーは車椅子エレベーターユーザーとの関連が強いとおもいます。
    (エレベーターは二階から、の案内がエスカレーター アイコンの隣なのも同様な思想で行われたのではないかと)

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

  19. お名前

    azs

    投稿日時
    2011年09月13日
    10時ごろ
    Comment No
    #28

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

  20. お名前

    名無しさん

    投稿日時
    2011年09月26日
    18時ごろ
    Comment No
    #29

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

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

Kazabanaさんのプロフィール画像  Kazabana
一方ロシアは白いテープでつないだ。
sige0726さんのプロフィール画像  sige0726
大人の迷子にご注意!
facetさんのプロフィール画像  facet
これブクマしてなかったのか…
isidaiさんのプロフィール画像  isidai
すごー - 勝手にリデザイン:新宿高層ビルの館内施設案内板 - Liner Note:
tailtameさんのプロフィール画像  tailtame
館内図みるとさらにややこしいんだなーw
GiGirさんのプロフィール画像  GiGir
とても参考になる。
元図は上矢印の指し示す先にトイレがあるのが最大の問題で、予算やデザインの制約を加味してもまったく擁護する余地がない。
recyclebin5385さんのプロフィール画像  recyclebin5385
プロの犯行
sauvageさんのプロフィール画像  sauvage
改善案が旧交通営団→現在のJRのサイン
xufeiknmさんのプロフィール画像  xufeiknm
そういえば昔、ワープロの機能わかってなくて、行間と文字間が同じ文書作る人多かったな~。
as365n2さんのプロフィール画像  as365n2
新宿エルタワーの案内板。
見出しという解釈とそれに基づく再構成。
hrmoonさんのプロフィール画像  hrmoon
必要な情報を正しく伝える.
cyborgninjaさんのプロフィール画像  cyborgninja
たしかにこのサイン作った人バカとしか言えないし、周りもOK出すなよ。
めも:新宿高層ビルの館内施設案内板が分からなすぎる - Liner Note
FJV_ZEROさんのプロフィール画像  FJV_ZERO
ユーザーインターフェースのデザインを行う際に何が必要か考察している、実に興味深い。
kazusapさんのプロフィール画像  kazusap
みてれぅ: 勝手にリデザイン:新宿高層ビルの館内施設案内板 - Liner Note
futomoさんのプロフィール画像  futomo
すげー掘り下げてる 参考になる
kyoumoeさんのプロフィール画像  kyoumoe
日本中にトイレの場所を知らせることができたという点で元の看板こそが最高のデザインだと思われるがどうか。
zorioさんのプロフィール画像  zorio
どれもが元のヤツより格段に分かりやすい。
rryuさんのプロフィール画像  rryu
例の謎解き案内板の答えと改善案。
あれは無目的に左上から右に順に見ると難なく理解できるというのが面白い。
kns_1234さんのプロフィール画像  kns_1234
看板のグルーピング 練習問題に良さそう。
riywoさんのプロフィール画像  riywo
あー、この案内板トイレに困ってる時に出会ったわー。。。
evernote--for-thrさんのプロフィール画像  evernote--for-thr
勝手にリデザイン:新宿高層ビルの館内施設案内板 - Liner Note
sudo44ugさんのプロフィール画像  sudo44ug
わかりやすい
umakenさんのプロフィール画像  umaken
結果勝負だからこそ過程を見るのが楽しいのかな RT 勝手にリデザイン:新宿高層ビルの館内施設案内板 - Liner Note
gx9901さんのプロフィール画像  gx9901
分かりやすさって大切。
gkwlさんのプロフィール画像  gkwl
見やすくするデザイン。
参考になる。
n-koboriさんのプロフィール画像  n-kobori
これは勉強になる
tarchanさんのプロフィール画像  tarchan
改善案Aの1か2が見やすいな。
改善案Aの3は分かりにくいままだし、改善案Bはどれも蛇足に思える。
imaginary_lineさんのプロフィール画像  imaginary_line
思考プロセスも添えた丁寧な改善案。
元のデザイナーの9個のタイルを均等に揃えたいという気持ちもわかるけど、本来の目的である機能がなっていないのでは、お話しにならない。
hexolさんのプロフィール画像  hexol
基本中の基本だとおもうんだがね。
設置場所やコスト云々は2の次では。
案の段階で元請けがなぜGOサイン出したのか不思議
Neanさんのプロフィール画像  Nean
同類項はカッコにくくって。
kamezoさんのプロフィール画像  kamezo
グルーピングを明確にするだけで、かなりわかりやすくなる。
こういう例は、紙面でも少なくないよね。
tukananaさんのプロフィール画像  tukanana
是非問題の案内板がある新宿エルタワー管理(株)03-3340-4151に提案を。
jebelxc2002さんのプロフィール画像  jebelxc2002
ユーザビリティ
celitanさんのプロフィール画像  celitan
興味深い考察。
誰もが見て同じ解釈ができるデザインって大事。
cojiさんのプロフィール画像  coji
モノ作る人には自分はデザイナーではないからというのを言い訳にしないでほしいです。
考えればいい。
kmyken1さんのプロフィール画像  kmyken1
問題点を丁寧に分析。
わかりやすいデザインとは?
timetrainさんのプロフィール画像  timetrain
何が問題であるかが整理されていてとてもわかりやすい説明。
デザインに下手に凝ると目的を見失うのだと思い知った気がする。
aiakiさんのプロフィール画像  aiaki
ピクトグラム?ではないか。
元ネタは確実にいやがらせレベル。
tsugo-tsugoさんのプロフィール画像  tsugo-tsugo
改変されるごとにだんだんよくある案内板に変貌していくのがおもしろい
tm_universalさんのプロフィール画像  tm_universal
勝手にリデザイン:新宿高層ビルの館内施設案内板 - Liner Note
mongrelPさんのプロフィール画像  mongrelP
なにがわからないのかがちゃんと分析されてるのが偉い。
T_Tachibanaさんのプロフィール画像  T_Tachibana
実際に現場に行かれた上で考えたリデザイン案/自分は5.2、エスカレータを省いていいなら5.4かな/そもそもAEDの場所はそこでいいのかという疑問が。
そりゃトイレで具合悪くなる人もいるけどさ。
wata300さんのプロフィール画像  wata300
トイレは左だったのか! まずそこにびっくり。
palmyraさんのプロフィール画像  palmyra
行で見るのが正解だったのか
frinksさんのプロフィール画像  frinks
いかに無駄な情報を省けるか
s-tomoさんのプロフィール画像  s-tomo
エレベーターが1階まで抜けてないってどういう工法なの?(そこかよ)
filinionさんのプロフィール画像  filinion
プロの仕事であり思考。
…元のは…なんだろうな…。
/元のというか現状のなんだけどな。
matsuitterさんのプロフィール画像  matsuitter
Aでいいだろ。
こういう改善モチベーション全然理解出来ないが、何だかすごい。
RT 勝手にリデザイン:新宿高層ビルの館内施設案内板 - Liner Note
thakuroさんのプロフィール画像  thakuro
新宿高層ビルの館内施設案内板について、問題点と改善案の提示。
相変わらず、この人はすごいと思う。
考え方もしっかりしているし、改善案も素晴らしい。
raduさんのプロフィール画像  radu
くらえ!ユーザビリティインターフェイス!
julia1985dさんのプロフィール画像  julia1985d
ここまでやって初めてデザイン。
toaruRさんのプロフィール画像  toaruR
トイレの正解は左だったのか;゚Д゚ 現場マップまで有り難い
uk-arさんのプロフィール画像  uk-ar
車椅子用エレベータのピクトグラムの上下マークと直進マークが近接してしまっており、直進マークが2Fに上るマークとして誤解されないかが不安。
ただ、ピクトグラムはできれば現在の国際標準の形状を利用したいし、矢
ruletheworldさんのプロフィール画像  ruletheworld
もうやめて、元のデザイナーのライフはゼロよ!と普通思うものだが、そういう奴は馬の耳に念仏で次のコネ仕事でゴミを作ってるんだろうな
touhousintyakuさんのプロフィール画像  touhousintyaku
おおー
minaminorさんのプロフィール画像  minaminor
ほほう。
Sabaryaさんのプロフィール画像  Sabarya
あ、久々の更新だ。
このサイン、気になっていました。
naqtnさんのプロフィール画像  naqtn
なんでこんなにブクマがついているのか。
記事の良さはさておき、情報デザインに興味ある人がそんなにいるのだろうか(書籍など少ない分野なのに)。
それとも単にwebデザイナ人口がはてなに多いだけなのか。
crimson00さんのプロフィール画像  crimson00
元のデザインだとものっすごく困るw こういう日頃からの訓練っていざって時に引き出しになってるんだよなぁと。
torazukaさんのプロフィール画像  torazuka
分かりづらいUIに接した時に、何が分かりづらいかどう改善すればよいかを考えるのって大事な習慣だなぁ。
takachinoさんのプロフィール画像  takachino
これはいいリデザイン! → 勝手にリデザイン:新宿高層ビルの館内施設案内板 - Liner Note
yasyasさんのプロフィール画像  yasyas
わかった。
この建物の構造そのものがダメなんだ。
mfigureさんのプロフィール画像  mfigure
実際はタイル9枚というフォーマット(これの是非は当然あるが、フォーマットと個別のデザインの担当が同じとは限らないのでは?)の制限内でどう分かりやすく表現するかが、末端のデザイナーの力量だと思う。
okhraさんのプロフィール画像  okhra
こういうの重要
MASASCIANTEさんのプロフィール画像  MASASCIANTE
これって情報を(イラストレーターで)綺麗に整頓しただけでデザインはされてないと思うんだけど。
ayuhoayuさんのプロフィール画像  ayuhoayu
今後、デザイナーになる人にもこれを踏まえて考えると、新しいデザインをおこしやすいんだろうな。
素人ながら時々、こう言うことをやるから勉強になる。
cykelさんのプロフィール画像  cykel
このネタ、デザイン・あ の”はせる"で使えそう。
key07さんのプロフィール画像  key07
サインシステムっていうのかぁ
haru135さんのプロフィール画像  haru135
トイレどこだよぉぉ!例のわかりにくい案内をリデザイン例。
わかりやすくなった
mangakojiさんのプロフィール画像  mangakoji
2が最も分かりやすいが、掲示免責も倍必要
mahalさんのプロフィール画像  mahal
見取り図でええやんという意見があるが、それこそが地図の読めない人的な脳感覚の持ち主を排除する、(元ネタの案内板と同程度には)アンチ・ユニバーサルデザインではないかと。
piyoxxさんのプロフィール画像  piyoxx
なるほど、全く分からんデザインだw
conbichiさんのプロフィール画像  conbichi
ほう
Harnoncourtさんのプロフィール画像  Harnoncourt
色分けは色弱の人には見えずらいこともあるのであまりお勧めできないのねん。
Nao_uさんのプロフィール画像  Nao_u
単にわかりにくいで止まるのではなく、こういう思考実験を日々繰り返すのは重要だな、と思った
hkaさんのプロフィール画像  hka
結局、棒矢印なのか…
furugenyoさんのプロフィール画像  furugenyo
4.3が好き。
エスカレーターの位置関係とも合ってるし。
一方で案内板って見取り図と役割がかぶるよねえ、とも。
Cherenkovさんのプロフィール画像  Cherenkov
看板 サインシステム インフォグラフィックス info graphics
emoyanさんのプロフィール画像  emoyan
勝手にリデザイン:新宿高層ビルの館内施設案内板
hiroomiさんのプロフィール画像  hiroomi
矢印がどれにグループ化されてるのがパッと見分からない?のかなと思うと、パネル毎に関連する装飾施せなのかな…。
 http://j.mp/pCYQeb
cootyeさんのプロフィール画像  cootye
商業施設じゃないみたいだし各出入り口に大きめの見取り図だけで事足りる。
こんな程度で地図が読めない云々ってマジで言ってるのか・・・
gwgwgwさんのプロフィール画像  gwgwgw
段の上下に適切な余白があればまだわかると思うんだけど、元の写真みると二段目と三段目が一つのブロックにおさめるように貼り付けてあるんだよね。
もしかしたらデザインと工事でなにか意思の食い違いがあったのかも
souki_eさんのプロフィール画像  souki_e
簡単に見えてこういう案内は難しい。
自分が分かれば分かるほど、分からない人が分からなくなるジレンマ
hazardprofileさんのプロフィール画像  hazardprofile
やっぱり元のデザインの意図が消えてしまったのは残念
Midasさんのプロフィール画像  Midas
つ【ヒント】立て・撃て・切れキリッ>id:anigoka
ElizaAcolyteさんのプロフィール画像  ElizaAcolyte
正解は←だったか・・・ / 誰だどの方向にもあるとか言ってたの!w
anigokaさんのプロフィール画像  anigoka
関係ないようであるようでやっぱないけど、放射能廃棄物の警告ピクトグラムってどうすんのかね|百万年後の人類が筒井御大の幻想の未来みたいになっちゃってたらピクトグラム自体理解できんだろうなぁ
flaxseedさんのプロフィール画像  flaxseed
もう許してやれよ
brainparasiteさんのプロフィール画像  brainparasite
4-2が好きかな。
けど他の人も指摘してるように、この面積使うんなら俯瞰図の方が…。
yoshi1207さんのプロフィール画像  yoshi1207
僕はアレを見た時、パズルとしか思わなかったので、この発想しかなかった。
f:id:yoshi1207:20110910012646j (やっつけ)
hgsmshdさんのプロフィール画像  hgsmshd
  3x3のグリッドは縦にも横にも読めるので、読ませたい方向に一本線入れとけばいいんじゃね。
utd_sn3781さんのプロフィール画像  utd_sn3781
元のデザイナーは100回これを読んで100回腹筋して来い
holmesさんのプロフィール画像  holmes
とても解りやすい
hitode909さんのプロフィール画像  hitode909
デザイン おもしろい
hysteric_catさんのプロフィール画像  hysteric_cat
”各施設を誰がどのように求めているのか、という視点でまとめ直したほうがわかりやすいのではないか?” ペルソナからシナリオを仮定する、こうしたデザインロジックが添えてあると説得力が増しますね。
Chiseiさんのプロフィール画像  Chisei
こりゃわかりやすい。
blueboyさんのプロフィール画像  blueboy
私の改善案は最も低コストなもの。
井形の隙間のうち、縦線を白で塗りつぶし、横線を黒で塗りつぶすというもの。
二種類のテープだけでで済む。
所要時間は5分間。
……これでいいでしょ?
past5さんのプロフィール画像  past5
横分割してみてね!最悪横分割でスペース空けてあるとマシかな。
縦に見ちゃう
routanさんのプロフィール画像  routan
デザイン
k_oniisanさんのプロフィール画像  k_oniisan
DBの正規化のお話。
wbbrzさんのプロフィール画像  wbbrz
実際に現場まで行って来たのが凄い。
ぜひともしたり顔でこれが、デザインですとか言って欲しい。
toolazyさんのプロフィール画像  toolazy
サインシステムって難しいなぁ
hirsatoさんのプロフィール画像  hirsato
デザインとは伝える力そのものだ。
adstyさんのプロフィール画像  adsty
見る人を戸惑わせるだけのデザインは要らない。
改善案は良く考えられた出来。
okoppe8さんのプロフィール画像  okoppe8
地図で十分。
moerrariさんのプロフィール画像  moerrari
ユーザーインターフェイスな話だと思っていたらLiner Noteの人だった。
jalapeno78さんのプロフィール画像  jalapeno78
トイレは右か直進だと思ってたけどまさかの左でしたかー。
mohnoさんのプロフィール画像  mohno
いいね!
shibutomoさんのプロフィール画像  shibutomo
文字の(左上&左下)は補足情報でしかないから、わざわざピクトグラムにしてメインにする情報でもないような気が
mats3003さんのプロフィール画像  mats3003
こりゃ、すごい。
なるほど、これならわかりやすい。
勉強になる。
hase0831さんのプロフィール画像  hase0831
仕事早いし分かりやすいしすごい
sisyaさんのプロフィール画像  sisya
指示がわかりづらい案内板の続報。
トイレだけでなく、そもそも館内のインフォメーションに問題がありそうな雰囲気を感じる
cocohiguさんのプロフィール画像  cocohigu
案内板って究極に客観視して作らないといけないから簡単なようで難しいですよね。
MAXjeepさんのプロフィール画像  MAXjeep
仕事早くてすばらしい
skymktさんのプロフィール画像  skymkt
4.3 の案が一番わかりやすいかな、4.4は色分けとかされて、色盲色弱の人への配慮を少し追加しないといけないかも。
シンプルなのが一番良いですね。
Uzi_FZさんのプロフィール画像  Uzi_FZ
もちろん最後のが一番見やすいですが、最初の修正案なら標識の置き換えでも実現できそう。
ej_hiraoさんのプロフィール画像  ej_hirao
トイレが左にあるとは思わなかった。
tetzlさんのプロフィール画像  tetzl
わかりにくい看板と修正、サインシステムについて。
面白い。
デザイン案も結構好きだけど今のサイン制作時の制約が何だったのかは気になる。
kwhmさんのプロフィール画像  kwhm
勝手にリデザイン:新宿高層ビルの館内施設案内板
shaketobaさんのプロフィール画像  shaketoba
サインシステムって難しいなぁ
strawberryhunterさんのプロフィール画像  strawberryhunter
1.仕様のところの見取り図でいいよ。
むしろ見取り図が最も適切。
元の案内ではトイレに行き損ねて事故が起きてしまうよ。
warriorkingさんのプロフィール画像  warriorking
勝手にリデザイン:新宿高層ビルの館内施設案内板 - Liner Note
kamanobeさんのプロフィール画像  kamanobe
標識はわかりやすさが最優先されるべきですよね。
atskさんのプロフィール画像  atsk
案内板の内容構成に関する検討が面白い。
これだけ改善案があるのだな。
奥深い。
wacokさんのプロフィール画像  wacok
各階で1枚パネル×9に単色印刷でコストメリットなのだから、くっつけちゃったら製作金額が違ってくる。
そもそものサイン設計(システム)が間違っている。
格子部分を設置時にiida UIみたいに統合分割できる設計必要。
yukikeiichiさんのプロフィール画像  yukikeiichi
良記事。
改善のプロセスが分かりやすく記述されてるのが素晴らしい
gogatsu26さんのプロフィール画像  gogatsu26
ただ残念なことにはこのページのデザインが読みづらい
oiranoさんのプロフィール画像  oirano
読んでないけど、横列3ブロックをくっつけるか、矢印のブロックを左列に揃えれば良いだけじゃないの?
shortcut3さんのプロフィール画像  shortcut3
なるほど〜。
考察が勉強になる。
TERRAZIさんのプロフィール画像  TERRAZI
これを元に、誰かが案内板を掛け替えれば完成。
taku-oさんのプロフィール画像  taku-o
オリジナルは、縦横の幅制限があったのかも。
改善案は、どれもわかりやすいです。
トイレはもともとわかりにくい位置にある気もする。
qinmuさんのプロフィール画像  qinmu
これはグッジョブ。
何よりも現地に行って確認したのが素晴らしい。
結局、化粧室のマスから一番遠いが正解だったのか。
araproさんのプロフィール画像  arapro
わかりやすくなった!・∀・
kagioo2umaさんのプロフィール画像  kagioo2uma
勉強になります
yachimonさんのプロフィール画像  yachimon
主に結論のデザインしか見てないけど、かなりいいと思う。
/俺が一番混乱した原因は、エレベーターの↑↓と方向指示の矢印の見分けがつかなかったところ。
murakami_takさんのプロフィール画像  murakami_tak
メチャメチャ改善されてて素晴らしい。
デザイン性を維持しつつ,AEDみたいな緊急用途のものがもう少し遠目にも認識できないかなぁ。
marsrepublicさんのプロフィール画像  marsrepublic
おお、いい仕事!
ghostbassさんのプロフィール画像  ghostbass
左矢印、防災センター、トイレのブロックの背景色を変えるだけで多少わかりやすくなりそう。
でも建屋全体だと階別に色を変えて発注すると高くつくかな
delico69さんのプロフィール画像  delico69
この前のこっけいなトイレ案内掲示板の改善提案。
タメになる。
haiji505さんのプロフィール画像  haiji505
この間twitterで話題になってたやつがもう考察・改良されている
rti7743さんのプロフィール画像  rti7743
最初の修正案だけでもすごく解りやすい。
個人的に案内板は、渋谷の副都心線駅みたいに壁一面を色分けしてどーんと出してくれると遠くからも見やすくて助かる。
osaragi1999さんのプロフィール画像  osaragi1999
ちょっと感心した。
asystさんのプロフィール画像  asyst
Liner Noteの人が超久々に更新している!
Mistさんのプロフィール画像  Mist
これはすごい。
見るべし!
vidさんのプロフィール画像  vid
元の作った人の話を聞いてみたいところだ(w
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
おぉー
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
notfさんのプロフィール画像  notf
勝手にリデザイン:新宿高層ビルの館内施設案内板 - 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

他サイトの関連記事

  1. ウェブサイト

    [連載]Webデザイン入門(1日目) | Stocker.jp / diary

    投稿日時
    2011年09月27日
    11時ごろ
    Comment No
    #1

    [...] 勝手にリデザイン:新宿高層ビルの館内施設案内板 [...]

  2. ウェブサイト

    分かりづらい新宿エルタワー1Fの案内板 « かもめのたまご@ミニピンと一緒 Part2

    投稿日時
    2011年09月27日
    14時ごろ
    Comment No
    #2
  3. ウェブサイト

    » かっこ悪いなー この看板作った人Web Design Treatment

    投稿日時
    2011年10月26日
    11時ごろ
    Comment No
    #3

    [...] 勝手にリデザイン:新宿高層ビルの館内施設案内板 [...]


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

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

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