きっかけはホッテントリー
奈良市公式サイトのパンくずが斜め上を行くヤバさな件 – Webディレクターのお仕事ブログ
気持ちはよく分かります。でも「これはアカンやろう」って話で終わっちゃうのはもったいなくて、やっぱWeb屋としては、これはおいしい教材なのでありますよ。
ブコメでは
では、あなたならその膨大な情報量をどうさばく？プロのWebディレクターなら文句で終わらせずに「俺ならこうする」って提案してみせましょうよ。できなきゃそこらの素人に毛が生えた程度っすよ。（煽
なんて煽っちゃってますが、これは本当に考え甲斐のある問題なので、自分でも考えたいと思います。
パンくずリスト問題
参照：問題のページ
考えながら書いているので冗長になりますが、私の脳内の議論の様子をそのまま書き出したいと思います。赤背景が肯定側、青背景は否定側。
-
こういうパンくずリスト、一概に悪とは言えないと思う。
なぜなら、このパンくずリストには以下の利点があるから。
- 上位のカテゴリが分かりやすい。
- 異なるカテゴリからこのページへたどり着いたとき、そのファイルが同じものであることがパンくずリストから把握することができる。
- そのページの情報が、他にどの分野に関連しているかが分かりやすい。
とはいえ、このパンくずリストには、見栄えのほかに以下の問題がある。- 上位カテゴリが重複していることが多い。
- 音声読み上げソフトでこれを読み上げられると、ぶっちゃけうざい。
パンくずリストを重複カテゴリに応じて複数行設けるというのは、僕がコーディングする場合は、むしろやりたいと思う。理由は先に述べたとおり、閲覧者にとっての利点がそれなりにあるから。
ただ、これだけ行数が増えると、欠点の方が目立つようになる。特に音声読み上げソフトでこれやられると、僕が閲覧者ならいい加減にしろって思う。
2つの問題点のうち、1つ目は“情報の整理”がなっていないのではないかという問題に収斂すると思う。例えば、上位階層「こんなときは」だけで5行も記載している。これは無駄だよね。
こういうのはまとめるべきだろうと思う。ただ、何階層目までをまとめるべきか、というのを考えると頭が痛くなってくるけど。
このパンくずリストを出力するコードに、いろいろ条件分岐をつけて制御するのはかなりしんどいと思う。
やってできなくは無いけど、すごく硬直的なコードになって、カテゴリの増大に対応できなくなりそうな気がする。これはやはり、ファイルを置く場所をもうちょっと見直すべきではないだろうかと思う。
見直せといわれても困る。カテゴリのいろんなところにファイルを置いている理由は、利用者が散々階層をたどる面倒をなるべく解消しようと思ってのことなんだから、これは人間ではなく、機械の側でどうにかすべきなんじゃないだろうか。
例えば、該当ページの直上のカテゴリだけが異なり、それ以上は同じであれば同じリストにまとめる、とかいう処理なら、カテゴリの増大などにも対応できるかもしれない。（おいらの今のプログラミング能力では困難だけど）
ただ、それがパンくずリストとして十分に機能しているのか、直上のカテゴリが省かれたりするのが本当に利点なのか、最初に挙げた利点が失われてしまうのではないか、という疑問がある。
また、「PCの画面で見る限り、気にならない」という意見も見られる。一方でスマホでは1画面が丸ごとパンくずリストで埋まる状態になっているとも。
ならば、メディアクエリなどで、スマホサイズの画面や、音声読み上げソフト向けにはパンくずリストを消してしまう、という選択肢もあるのではないだろうか。
結論としては、私の場合、パンくずリストは冗長とはいえそのままにして、小画面と音声読み上げソフト向けには表示しないというのはどうですか？とクライアントに提案します。
理由としては、役所のWeb担当者が「この段階でこの書類にはもうアクセスさせたいよね。」という気配りを、システム上の制約で縛りたくない。また、プログラムを駆使してまとめるのは不可能ではないとはいえ、複雑さが想定外の問題を引き起こす可能性があるし、コストが相当かかる。また複数行パンくずリストの利点が失われたり、分かりにくいパンくずリストになりかねない。多少冗長でもサイトマップ的な機能をスポイルするのは惜しい、といったことが挙げられます。
膨大なサイドバー問題
問題のページ
これはひどい。
とはいえこの問題の解決策は簡単で、ダウンロード一覧をサイドバーではなく、メインカラムの本文の下、“このページのお問い合わせ先”の上に入れる。
また、エクセルファイルとpdfファイルを交互に羅列するのではなく、左右に分けて、（あるいは表組みで）表示する。
これ自体は、コードを入れる位置を変えるだけなのでたいした作業量にはならないはずです。
構造的には上記で終了ですが、運用する担当者には以下の点の改善を申し入れます。それは、
「添付資料を見るためにはビューワソフトが必要な場合があります。必要に応じてダウンロードしてください。」
というのは不親切なのでやめてください、と。
例えばこのページであれば、PDFビューアへのリンクを、このページに貼るべきです。
とはいえ、ただ記載を求めるだけだと、ソフトやビューアについて詳しくない担当者にとってはよく分からないことになるし面倒を感じるでしょう。そこで、編集画面に、掲載しているファイル形式のリスト＆チェックボックスを設けて、それらをチェックしておけば定型文及びダウンロードサイトへのリンクが自動的に表示されるようにプログラムします。チェックを入れるのすら面倒くさいというクレームは拒絶します。（ぉい）
腕のいいプログラマーなら、貼り付けられたファイルの拡張子を読み取って自動的に定型分とダウンロードサイトへのリンクを表示するようにできるでしょう。（おいらの今の技術力では無理ですが）
ただ、このページのレイアウトからは、もっと重要な問題が透けて見えます。
それは、「情報デザインがおかしくないか？」ということ。
このサイトをデザインした人は、「どこに何が入るべきか」を、考え抜いたように見えないのです。
私のWebデザインに対する基本的な考え方として、「ページのヘッダー、サイドバー部には、他ページと共通する事柄を入れる。そのページのコンテンツは、メインカラムに入れる」という原則があります。そうしないと、閲覧する人が迷ってしまうからです。そういった原則のようなものが、このサイトのデザインからは感じられません。
更にデザイン上の問題点を指摘しましょう。
ページをスクロールしていくと、フッターにもパンくずリストみたいなリンクがあります。
ところがよくよく見ると、パンくずリストではありません。しかし、区切り記号に＞を使っているため、パンくずリストにしか見えません。
「このサイトをデザインしたのは誰だぁー！」
ってちゃぶ台ひっくり返したくなりますね。（ほんと誰だよこれデザインしたの）
私の見栄えに関するデザイン能力はかなり乏しいほうですが、さすがにこんなデザインはしませんよ。
その他の目に付いた問題点
文字サイズ調整ボタンは要らないのでは？
確かにJIS規格にそんなことが書いてあったように記憶してますけど。最初から16pxで出しとけばこんなボタン要らないです。あと、文字サイズ「小」はまるっきり意味不明です。
背景色変更ボタンは不要。
これはほとんど無駄な機能です。黒背景白文字は、大活字高コントラストが必要な人には意味があると思いますが、それが必要な人は、既に専用のツールを使っていると思うんですよね。そして、青背景と黄背景は蛇足ではないかと思います。偽色発生するし、いいこと無いんじゃないかと。
で、青背景については「これアクセシビリティ基準満たしているのか？」とちょっと疑ったのですが、チェックしたらちゃんとAAA基準満たしてますよ。
ただですね、機械ではOKでも、実際には純色は目に刺さります。それを背景全面に使ったら、もう目がチカチカしていけません。だれだよこの、今はなき愛生会のサイト的な機能付けたの。
ヘッダーにいろいろ詰め込みすぎてせっかくのイラストが殺されてる
このヘッダー画像、イラスト書いた人泣いてるんじゃないだろうかと思えるほど、いろんなボタンを詰め込みすぎてます。ごちゃごちゃしてもったいない
ここはしっかりと空間を取って、イラストを生かすほうがいいと思います。
まず、左側の大中小ボタンと背景色変更のボタンは消します。こんなもん要らん。
で、自動翻訳で言語を切り替えるボタンは、もうちょっと場所とかを見直したいところです。左上にプルダウンで小さくまとめるかな？
音声読み上げのボタンもヘッダー左上にまとめます。視覚障害者でPC使う人はスクリーンリーダーなどを使っているはずなので、視覚障害者向けとしては、このような機能は不要と思いますが、読み上げ＋読み上げ箇所のハイライト表示は学習障害者などには有用らしいので、この機能は全くの無駄ではないと私は思います。
検索フォームや検索方法に関するボタン類はサイドバーにまとめます。
ヘッダーにあるボタン類の画像の問題
文字を表示しているボタンなのに、画像を使っているためぼやけています。機械的にはアクセシビリティAAを満たしていますが、ぼやけているため読みにくくなっています。これはスマホのような高精細ディスプレイだともっと読みにくくなるでしょう。
同様の問題は、程度は軽いですが、グローバルナビゲーションにも当てはまります。なんで文字まで画像で組んでしまうのでしょうね。フォントはほとんど同じなのだから、背景画像上にテキストを配置してやったほうがくっきりはっきりするはずですが。
また、文字を画像ではなくテキストで組むことで、フォントが本文に完全に一致させることができます。
グローバルナビのボタン、マウスオーバーでさくらのテクスチャが入っていて、結構きれいなんですけど、文字ボケがもったいないです。
他の人はどう考えるのだろう？
とまあ、つらつらとデザイン的な問題について考えてきましたが、他の人はどう考えるのか興味があります。
特にパンくずリストの問題は、ここで書いたやり方とか考え方が最適なのかどうか。自分の中でもこれが最善とは思ってなくて。どんなやり方があるのだろうなぁ、という引っかかりは残ったままです。
なんか、このネタでネットのWeb屋の人たちが、「うちならこうするZe!」ってのがどんどん出てくると面白いなあとか思ったりしてます。
良いデザインを考えるのって、難しいけど面白いよね！
