訪問済みリンクは何色がいい？ 113
ストーリー by Oliver
君のリンクも真っ赤か 部門より
君のリンクも真っ赤か 部門より
これまで何度か「訪問済みのリンクが黒で見づらい」という意見をもらっていたので、さきほど訪問済みのリンクの色を変えてみた。未訪問リンクの色が各セクションのセクションカラーなので（これは変更の予定なし）、とりあえずは各セクションカラーをすこし暗くしたものに設定したが、いまいちな感じのするセクションもいくつかある。そこで単刀直入に聞きたい：訪問済みのリンクはどんな色が便利だろうか？
リンクの下線についてはいまのところ肯定的な意見が多いようなので、変えないつもりだが、こちらについても是非、意見が聞きたい。
追記(1/14 17:15 JST) by O：設定してみた色が不評で、出されていた案をいろいろ試してみたが、「これだ！」というのがなかったので普通の文字と同じ色に戻した。決定打なくとも、有意義な議論だったと思う。ありがとう。また、ライトモードでも色が指定されてしまっていたバグも修正した。
色って，デザイン上の制約が多いから (スコア:4, 参考になる)
セクションカラーの明度と彩度をメインカラーのオリーブ色と統一すると，読みやすさが向上すると思います。細かく言えば，赤系統は目の解像度が落ちるので赤みは，彩度や明度を若干ひかえめにるすると，より読みやすくなります。それから，色地に色文字は反則。グレー時に色文字は，けっこう微妙ですが，これはグレースケールに変換しても読みやすさを損なわないだけの明度の差があることが条件。色文字は，目立たせる効果はありますが，文章の読みやすさには繋がりません。セクションカラーに白抜きは，文字を大きくしたときは，文字が目にとびこむ強さを本文とバランスを取る効果があります。逆に小さくすれば，とても目立たなくなり，注意書きをうるさく感じない効果がある。
私みたく，リンクを詰め込むタイプのタレコミ者の立場としては，あまりうるさく感じない色のほうが，好感をもたれると思います。たとえば，リンクがすべてボールドしてあるみたいに目立つ色の文章なんて，読んでいてイライラしてくるでしょ。
・・・て。ところでしょうか。専門家のみなさん。
斜点是不是先進的先端的鉄道部長的…有信心
Re:色って，デザイン上の制約が多いから (スコア:1)
「レイアウトの基本」、「画像の効果的な使い方」、「配色の基本」、「サイト構成の基本」の4点を主題に書かれています。
配色については、カラーキューブを使った明度・彩度の基本の解説とか、216色の「ブラウザセーフカラー」に従った配色例とかが取り上げられています。
他にも、いろいろと参考になる考え方や、レイアウト面で駄目の極致のサンプルを段取りを踏んでシンプルで見栄えのよいものに変えていく第2章とか、面白いです。
ところで、今でも「ブラウザセーフカラー」という考え方は通用するんでしょうかね？
Re:色って，デザイン上の制約が多いから (スコア:1)
Webセーフカラーは、そもそもは256カラー発色の異なるプラットフォーム間において、同じ色を出そうという考え方ですので、たとえその前提条件が正しく揃っていても、使用しているディスプレイやPCの利用環境/状況などによって、表示色は左右されますから、何かの根拠としてすがるにはかなり頼りないものではないかと思います。
昨今の風潮というか流行というかからすれば、Vischeck [vischeck.com]などを利用して検証するたぐいで、要するに色弱などの色覚障碍のある閲覧者にも見分けのつく配色という辺りのほうが、根拠としてはすがりやすいのではないかと思われます。この色覚障碍での見え方を背景に配色を設計するのではなくて、設計した配色で問題ないかどうかを検証する、ということですが。
単純に (スコア:3, すばらしい洞察)
色の問題なら、ユーザ設定で変更できるようにする、というのはダメでしょうか？色々面倒なのかも。
ほえほえ
Re:単純に (スコア:2, 参考になる)
ソース見ると
＜style type="text/css"＞
@import url("http://srad.jp/slashdot.css");
a:link{ color: #006666; }
a:visited{ color: #002222; }
a:active{ color: "#000000; }
＜/style＞
ってなってますから、ユーザー側で設定したCSSも読み込めるようにしたら？
@import url("http://srad.jp/user.css");
とかって。
＃と無責任に申しちゃいます。
Re:単純に (スコア:1)
ブラウザのユーザスタイルシート機能を使ってはダメですか？
/. 側で用意する方が無駄なような気が……。
用意したらしたで、あの機能が足りないだの何だのと
言われると思いますよ :-P
「誰がやるのか」って問題もありますし。
自分は、色とフォントは自分の好みを優先するようにブラウザで
設定しています。メインで使ってるブラウザは w3m だし…。
どこのサイトも同じ見た目で、違うのはレイアウトだけ(笑)。
素っ気ないと思うんですが、一日数時間ウェブサーフィンする事を
考えると、ストレスがないものにしたいと思います。
This cookie has a scrap of paper inside. It reads:
If you can't learn to do it well, learn to enjoy.
何変なこと聞いてるんだろ (スコア:2, おもしろおかしい)
Re:何変なこと聞いてるんだろ (スコア:1)
標準状態から変えられると、頭を使わなければいけなくなるので、
微妙にストレスになります。
そのままのほうがありがたいです。
Re:何変なこと聞いてるんだろ (スコア:1)
Copyright (c) 2001-2014 Parsley, All rights reserved.
Re:何変なこと聞いてるんだろ (スコア:1)
Re:何変なこと聞いてるんだろ (スコア:1)
いかにも訪問済みで古い情報だということを感じさせる。
・さわやかなブルーは、まだ触っていない新鮮で
新しい情報があると予感させる。
というわけで、腐った色と新鮮な色という分け方で考ても悪くないかも。
Re:何変なこと聞いてるんだろ (スコア:0)
何で決まってるの？ /.Jで今までそうなってた？
Re:何変なこと聞いてるんだろ (スコア:1)
というわけで(?)、これは仕様とかではなくてユーザビリティの領域になると思われます。
未訪問が青、訪問済みが紫か赤だといっているのはJakob Nielsenです。Top Ten Mistakes in Web Design [useit.com]の8. Non-Standard Link Colorsにて。
さて、未訪問と青というのがイメージとして繋がるのかどうかは、今となってはある意味ではそのように刷り込まれてしまっているところもあるので、この色づかいの根拠というと何ともいえなくなるところでもあるのですが、少なくとも次のようなことは言えるでしょう。
Re:何変なこと聞いてるんだろ (スコア:1)
あー、一応補足しておくと、ブラウザのデフォルトスタイルで訪問済みのリンクが青になっているとかの場合は問題ないと考えています。
制作者スタイルシートにおいて、あえて a[href]:visited { color:blue; } などと指定することが紛らわしい、という意味です。
#666666あたりかなぁ (スコア:2, 興味深い)
今行っているセクションカラーを濃くしたした色設定も、セクションカラーがそれぞれ違う明度を持っているので、単純に濃くする方法をとると、色のバランスが取れない気がします。たとえばSlashdotの緑（#006666）を濃くしてできた#002222は、ほとんど黒に近く見えてしまいます。
Slashdotで使われている色は、00, 33, 66, 99, CC, FFを組み合わせたWebセーフカラーです（インタビューセクションとか、例外は一部ありますが）。で、リンクの色もやっぱりこれに準拠した方が良いのではないかと思います。
それで、先にも述べたように明度の違いを考慮してセクションカラーベースな訪問済みリンク色を設定するのも良いと思いますが、手間がかかりそうなので、Slashdotで使われているキーカラーのひとつ、灰色がよいと感じます。
少し試してみましたが、Webセーフカラーな灰色、文字色と区別がつき、背景色にあまりとけ込まない色は#666666が一番よさげでした、なので#666666に一票。
Re:#666666あたりかなぁ (スコア:1)
Re:#666666あたりかなぁ (スコア:1)
うは、すっかり忘れてました。なんか良い色ないかなぁ。。。
Re:#666666あたりかなぁ (スコア:1)
ユーザビリティ的には、リンク色はブラウザ標準から変更しない方が良いのでしょうが、スラドの色使いでリンク色が青だとかなり「醜い」ことになりそうなので、私も灰色に一票です。
Webセーフカラー？ (スコア:1)
日ごろ、サイト側の指定した色を256色環境でしか表示せず、かつ、スタイルシートも使ってるぜって方は、御使用の環境（OS・ブラウザ・その環境を使う理由）を教えていただけると幸いです。
Re:Webセーフカラー？ (スコア:1)
「でないとまずい」とは書いていませんが。
セーフカラーが良いんじゃないかなと思ったのは、ただSlashdotがセーフカラーを使っていたから、リンク色にもセーフカラーを用いれば素敵かなと感じただけです。あとは、試してみてバランスが良かったから#666666なだけです。
Re:Webセーフカラー？ (スコア:1)
上記の点については、おっしゃるとおりです。
私は、Webセーフカラーに縛られることがWebページのデザインに制約を課しすぎるのかも知れないと考えているので、このような便乗質問をした次第です。
アクセシビリティの問題をWebセーフカラーは解決しな (スコア:1)
色盲色弱の方が直面させられるアクセシビリティの問題を、Webセーフカラーは解決しないからです。
サイト製作者の意図を忠実に反映するかどうか、という観点からWebセーフカラーは選定されていたはずで、この点を混同しても余り有益な議論にならない気がします。
「使いやすくなったでしょう？」は、ちょっとどうかと (スコア:2, 興味深い)
(阿呆すぎて参ったので、もう縁切りました)と、
正に同じ傾向のことを仰ってしまっているように聞こえますね。
というのは、その阿呆、自分の掲示板サイトで、
正にそういうことをやってくれたことが有ったので。
いきなり仕様変更して「ほら。使いやすくなったでしょ？」って…
そりゃ、あんたは使いやすくなったろうけどさ…(T_T)
下手に弄ると、少なくとも「今まで快適だと思っていたから来ていた」人々にとっては
邪魔以外のなにものでもない、という変更になってしまうわけで。
UIの変更は、よほど丁寧にユーザ(^^;に調査してからにしたほうが良いような。
あと、こういう色の問題については「サーバから一切の細工をせず、デフォルト」に俺も一票。
カスタマイズしたい人はすればいいってのは言えてるが、
それならカスタマイズしなければ無加工が一番良し。
理由については色々なかたがたが既に書いているものとほぼ同じなんで繰り返しませんが。
＃あんまり色とかウダウダいじるのって、BestViewForAnyBrowser的には、どうなんでしょう？
え？「ユーザ設定でしかカスタマイズできないと、ACに、みっともない外観を晒すことになる」って？
そんなの俺の知ったことではないです(^^;
＃うわべだけ飾るのは嫌いなのでG7
リンクの下線 (スコア:1)
たしかW3C並みに権威のある文献だったはず...
Re:リンクの下線 (スコア:2, 参考になる)
Re:リンクの下線 (スコア:1)
個人的には、
- anchorのスタイルを極力使わない
- font系(上位のtdやdivやspanなど)のスタイルではcolor設定をしない
といったあたりがオススメです。環境によってデザイナの意図と違う色が出ますが。# リンクはたどられてナンボだと考えてるのでID
---- 何ぃ！ザシャー
Re:リンクの下線 (スコア:1)
それは富士通が決めた自身のウェブサイトにおけるアクセシビリティ指針です。富士通の意思が及ばない大多数のウェブサイトには直接の指針にはなりませんし、あまり重要視する必要もありません(富士通がこういうものを公開している、という姿勢などについては重要視して良いのですが)。
通常、こういう場合に提示するべきは、より標準に近い位置づけの指針となるものだと考えますが、WCAG 1.0 [w3.org]では、リンクテキストがそれだと正しく解釈できることを目論んでいくつかのことを実践すべきである(したほうが良い)とはしているものの、具体的にリンクテキストのアンダーラインの取り扱いについては言及していません。
それもそのはず、リンクテキストにアンダーラインが引かれないブラウザも存在するからです(デフォルトスタイルとして引かれない、ブラウザの機能としてアンダーラインが実装されていない、デバイス的にアンダーラインを表現できない等)。ウェブアクセシビリティとは、可能な限りあらゆる環境や状況での閲覧においての情報取得などに格差をなくしていくための考え方ですから、アンダーラインのようなブラウザやデバイスに依存する機能に頼ってリンクであることを明示するというのは、その考え方に反しているという見方もできると思います。
富士通のアクセシビリティ指針は、なかなか良い内容になっていると思いますが、そもそもこのアクセシビリティ指針は、富士通のウェブサイトのターゲットブラウザ間において指針との矛盾がないようにウェブサイトを設計・実装しているということをアピールするためのものでもあるのだと考えられます。ターゲットブラウザは、いずれもリンクにアンダーラインが引かれることがデフォルトスタイルとなっており、text-decoration:noneを指定することでアンダーラインを消すことができるようなブラウザだけなのでしょう。
極端にいえば、「リンクテキストにはアンダーラインが引かれなくてはならない」と考えているのかもしれないとさえ思えます。WCAG 1.0でも触れられていますが、重要なことは「リンクが意図どおりのリンクとして機能するような配慮」であって、アンダーラインの有無ではありません。
http://jp.fujitsu.com/webaccessibility/27.html [fujitsu.com]には、わざわざこのようなスタイルが定義されています。
「消去しない」つまり「text-decoration:noneを指定しない」という指針にも関わらず、「text-decoration:underlineを指定している」わけです。このように実装することで指針との矛盾をなくそうというのであれば、掲げるべき文章は「リンクのあるテキストは、アンダーラインを引く」としたほうがスジが通っています。もともとアンダーラインが引かれない環境のことも想定すれば、そもそもtext-decorationプロパティを設定する必要がないということは自明なのですから(アンダーラインが引かれるのがデフォルトスタイルな環境では、何もしなければ=noneを指定しなければアンダーラインが引かれるのだから)。
というわけでといいますか、リンクテキストの装飾の扱いとしておそらく一番好ましい捉え方は「アンダーラインが引かれるか引かれないかは閲覧者の環境に準ずる」ということになるかと僕は考えていますし、実際それが現実でもあります。
Re:リンクの下線 (スコア:1)
こんな文章では議論にならないよ。そのベターっと書かれた文字の洪水の中で本当に書かれているのかや、どんな仮定の元にかかれているのかをまったく判断できないでしょ。
それと、何々のブラウザが存在する、というのも無関係。これこれのデファクトスタンダードなブラウザではこうですからというのは重要。
Re:リンクの下線 (スコア:1)
なんでもいい。 (スコア:1)
と言う意見も出そうですが
別に訪問済みかどうかを意識するような
使い方をしていないので どうでも良いのでは？と思います。
Webメールやリンク集ならば 話は別でしょうが。
色は (スコア:1)
青に見えてます。 (スコア:0)
#使う方が悪いと言えばそれまでだけどメインなのでAC
Re:青に見えてます。 (スコア:1)
タイトルバーの変更はtableの入れ子でバイト数的にも処理的にもアレだった前のタイトルバーを改善して、もっと軽くすると同時にPDAなどに搭載されているCSS未対応ブラウザが画像を読まなくていいようにするためにしました。こうしないとマックセクションのタイトルバーをスタイルシートだけで実現できなかった、というのも大きいです。
不具合、不満などはどんどん報告してもらわないと分からないので、よろしくおねがいします。
やっぱ、 (スコア:0)
この色が一番。
Re:やっぱ、 (スコア:1)
セクションごとのカラーリングに揃えるとかのこともせずに、a[href]の前景色・背景色については何もしない、というのが理想形かなと思ったりします。
もっと単純に (スコア:0)
区別できれば色を気にしないという罠。
Re:もっと単純に (スコア:1)
content:"訪問済";
}
てユーザースタイルシート定義するとか。
リンク色 (スコア:0)
セクションごとに違うより一定の方が良いです。
できればウインドウズのデフォルト色にしてください。
Re:リンク色 (スコア:1)
今日も頑張ろうかな
んー見にくいです (スコア:0)
訪問済みリンクの色は灰色、
というのはいかがでしょうか。
どのセクションカラーでも、色のバランスはいいと思うんですが。
ITmediaは読みにくい (スコア:0)
Re:ITmediaは読みにくい (スコア:1)
なぜあそこだけがああなってるのかは謎。
全然関係ありませんが (スコア:1)
参考資料。 (スコア:1)
上のドキュメントから、「But Can They Read It? (...でもそれ、読めるの?)」が、
リンク切れになっているのでこちらからどうぞ。
... でもそれ、読めるの？ [microsoft.com]
# IDで投稿するほどじゃない気もするけどやっぱりIDで。
Re:参考資料。 (スコア:1)
こちらも参考になるのでは。
Re:黒！ (スコア:2, すばらしい洞察)
実際、ここ最近の見た目の変更はことごとく見づらくなっていると感じますし。
あと、liteモード常用者だとまた意見が異なってくるのではないですかね?
私なんかがそうなのですが、セクションカラーとか何とか言ってる割に、liteモードで見れば全てミドリっぽい色のリンクが並んでるだけ。
未訪問リンクも、訪問済みリンクも、同系統の色なんで見分け辛いったらない。
#ハッキリ言って、前の状態に戻すだけで圧倒的に見やすさは向上する(笑)
-+- 想像力を超え｢創造力｣をも凌駕する、それが『妄想力』!! -+-
Re:黒！ (スコア:1)
私としてはコレでなんの問題もないので、あとは好きなようにして下さい。色弱排斥でも、勘違い色設計でも何でもね(笑)
-+- 想像力を超え｢創造力｣をも凌駕する、それが『妄想力』!! -+-
Re:黒！ (スコア:1)
Re:訂正。って言うか (スコア:1)
a:visited:after { content: "(already visited)"; } 位やった方がわかりやすいですよ。
Re:あんまり関係ないけど (スコア:2, すばらしい洞察)
タブブラウザを使っているからこそ 別窓なんていうのは勘弁してください.
Firebirdで 「新しいウィンドウ」と「新しいタブ」を使い分けているので 勝手にウィンドウなんて開かれたら迷惑なんですよね.
これだと タブの状態をBookmarkしたりする機能がとても便利です. ウィンドウはそれぞれ別のデスクトップに置いちゃえばすっきりするし.
……と思うタブブラウザユーザもいるわけですが むしろ少数派かな?