wiki のデザイン

またあれから変更を加えている．変更点は以下の通り．

• リンクは基本的に，「マウスオーバー時に(輝度が下がり)暗くなり，下線がつく」を徹底
• サイドバー右横にある縦線を薄く

文章におけるリンク

誰か始めたかはしらないが，いつしかリンクは「ブラウザデフォルトのスタイルである青色下線付きは上書きするもの」が常識とも化してきた．

確かに，デフォルトの青は目に優しい訳でも上品な色でもないから，それぞれの色彩にあわせるべきだろうとはおもうし，下線が常時表示されているのは，少々うるさい．ただ，いわゆる文章みないたものは，color: blue;ではないにしても 青系統の色に下線付きを守ってきたし，また印刷物などのデザインでもわざとウェブへのリンクは青下線のようにしてりう場合もあることから，青色で下線といえばリンクであるというのは既に重要で明確な記号になっていると思われる．

今時のデザイナーのウェブページ(検索エンジンで「best 100 web design」などのように検索するとよくでてくる．整った文書にあうものをお好みなら，W3Cの仕様書や，Haskell・Pythonなどをあたるとよい．)や，ウェブ系スタートアップのアプリページを見ると，以下のようなものが見受けられる．

• 下線つき (text-decoration: underline;)

• 点線やダッシュの下線つき (text-decoration: none; border-bottom: 1px doted(dashed) #xxx;)

• マウスオーバー時のみ下線あり
• 常になし

また，組み合わせ技で

• リンク部の背景にハイライトがつく

もあった．

ハイライト

まず，ハイライトは，設計としてのデザインというより，美観的なデザインである．さいきんだと，紙に蛍光ペンで引いたような感じのデザインなんかが，ウェブに限らず印刷物などでもみうけられる．(いちばん最近だと，「CITY2.0 のときに配られた紙が，白地にグレーの文字へ，ピンクの蛍光ペンを重ね合わせたふうだった．)
こういうものは，全部のページまで含めてひとつの作品であるもの—デザイナーのポートフォリオとか—などには向いているが，あくまでデザイン部と文章本体がわかれたような，wikiに対する汎用的なデザインとしては難しい．そこで却下．

下線

次に，下線付きは検討してみたのが以下の通り．

{{{!wiki dotted }}}

{{{!wiki dotted }}}

wiki は，配置で構造化された集合体というよりは，リンクでつながりあった集合体である．あわせ，技術文章のようなものは基本的に参照が多くなる．したがって，wiki では 一般的にリンクの密度が高くなりがちと考えられる．こういったとき，やはり常時表示はうるさかった．以下の例ではより顕著である．

{{{!wiki dotted }}}

よって，下線はなしのものを採用した．

輝度

また，マウスオーバー時は，逆に普段のリンクが下線なしでおとなしいこと，およびマウスオーバーで見た目を変化させるなら，下線が出る出ないだけではかえって中途半端な差異で微妙な気持ちになるということで，暗くさせることにした．このとき，色の変化が，たとえば彩度や明度までもあわせて変わると気持ち悪いので，基本的には輝度だけ落とすようにした．

アプリケーションにおけるリンク

いまだに確証を持てないのがアプリケーションにおけるリンク・・・つまり，サイドバーとヘッドバーのUIとしてのリンクである．

文章部分はいいにしても，サイドバーやヘッドバーなどのUIとしてのリンクは、同じようにあつかう必要があるのか．ボタンやメニューがマウスオーバーで光らないように，わざわざ同様にする必要はないのではないか．

そういう風に考えてはしまうのだが，一方，使ってみた直感では，やはり良いように思われる．

確かに，タブにマウスを当てたときにタブの色が変わるデザインはあるし，Dockのアイコンへマウスをあてるとアプリ名が表示される．ファイルメニューも，選んでいるものの色が変わる(青とか)．マウスカーソルが変わるだけではなく，はっきりと「ここはクリックすると何かが起こる場所ですよ」と知らせるデザインのほうが，よいのかもしれない．

Googleの例

ちなみに，どうしたものかと思っているのが，Googleの例である．Googleは，UIにあたるヘッダー部分のリンクは，色も下線もデフォルトのままである．あれにはどういった意図があるのか，よくわからない．もしかしたら，さほどないのかもしれない．