ログイン
編集不可のページディスカッション情報添付ファイル
"chmod/diary/2011-02-06"の差分

MMA
1と4のリビジョン間の差分 (その間の編集: 3回)
2011-02-06 12:34:54時点のリビジョン1
サイズ: 20
編集者: chmod
コメント:
2011-02-06 13:08:37時点のリビジョン4
サイズ: 3919
編集者: chmod
コメント:
削除された箇所はこのように表示されます。 追加された箇所はこのように表示されます。
行 1: 行 1:
== a ==
=== a ===
== wiki のデザイン ==
またあれから変更を加えている.変更点は以下の通り.

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

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

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

今時のデザイナーのウェブページ(検索エンジンで「best 100 web design」などのように検索するとよくでてくる)や,ウェブ系スタートアップのアプリページを見ると,以下のようなものが見受けられる.

 * 下線つき (`text-decoration: underline;`)
 * 点線やダッシュの下線つき (`text-decoration: none; border-bottom: 1px doted(dashed) #xxx;`)
 * マウスオーバー時のみ下線あり
 * 常になし

また,組み合わせ技で

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

もあった.

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

==== 下線 ====
次に,下線付きは検討してみたのが以下の通り.

{{attachment:スクリーンショット(2011-02-06 12.54.52).png}} {{attachment:スクリーンショット(2011-02-06 12.55.25).png}}

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

{{attachment:スクリーンショット(2011-02-06 12.55.51).png}}

よって,下線はなしのものを採用した.

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

wiki のデザイン

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

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

リンク

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

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

今時のデザイナーのウェブページ(検索エンジンで「best 100 web design」などのように検索するとよくでてくる)や,ウェブ系スタートアップのアプリページを見ると,以下のようなものが見受けられる.

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

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

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

また,組み合わせ技で

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

もあった.

ハイライト

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

下線

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

スクリーンショット(2011-02-06 12.54.52).png スクリーンショット(2011-02-06 12.55.25).png

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

スクリーンショット(2011-02-06 12.55.51).png

よって,下線はなしのものを採用した.

輝度

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

chmod/diary/2011-02-06 (最終更新日時 2011-02-06 14:13:47 更新者 chmod)