ariyasacca

カテゴリ一覧

Biz | SF | Software | tDiary | Web | ゲーム | サバティカル | スポーツ | ミステリ | メタル | 健康 | 投資 | 携帯 | 時事ネタ | 死生観 | 資格 | 雑記
2004|08|09|10|11|12|
2005|01|02|03|04|05|06|07|08|09|10|11|12|
2006|01|02|03|04|05|06|07|08|09|10|11|12|
2007|01|02|03|04|05|06|07|08|09|10|11|12|
2008|01|02|03|04|05|06|07|08|09|10|11|12|
2009|01|02|03|04|05|06|07|08|09|10|11|12|
2010|01|02|03|04|05|06|07|08|09|10|11|12|
2011|01|02|03|04|05|06|07|08|09|10|11|12|
2012|01|02|03|04|05|06|07|08|09|10|11|12|
2013|01|02|03|04|05|06|07|08|09|10|11|12|
2014|01|02|03|04|05|06|07|08|09|10|11|12|
2015|01|02|03|04|05|06|07|08|09|10|11|12|
2016|01|02|03|04|05|06|07|08|09|10|11|12|
2017|01|02|03|04|05|06|07|08|09|10|11|12|
2018|01|02|03|04|05|06|07|08|09|10|11|12|
2019|01|02|03|04|05|06|07|08|09|10|11|12|
2020|01|02|03|04|05|06|07|08|09|10|11|12|
2021|01|02|03|04|05|06|07|08|09|10|11|12|
2022|01|02|03|04|05|06|07|08|

2006-01-21 (土) [長年日記]

[Web] Webサイト評価は、自分の場合はデザインより親近感で判断

インターネットユーザーはまばたきよりも短い時間でWebサイトの良し悪しを判断できることが、カナダの研究者らの調査で分かった。

わずか0.05秒(まばたきにかかる時間の半分未満)で人々は美的判断を下し、その結果がその後のサイトの利用体験に影響するという。

ユーザスタイルシートを使うようになってからは、一瞬で「このサイトは見たくない」と判断してしまうことは無くなったかな。とりあえず自分の見易いようにしてから、読んでみることにしている。Firefoxの時は設定が面倒なので、見辛いと感じたらスタイルシートをOFFにするだけ。

単純に好き嫌いで嫌いなものを挙げるなら、

  • スキップ出来ないFlashムービーが突然流れる
  • 豆文字(居様に小さい字)が画面に詰まっている
  • 文章の本文エリアが異様に狭い

こんな感じ。目が疲れるのは嫌い。

自分のサイトの文字色と背景色が紺色の文字に灰色の背景である理由は、単に自分の目が疲れにくい組み合わせだから。テキストエディタもターミナルソフトウェアも、全部この組み合わせだ。別にこの配色を押し付ける気は全然無いので、サイト情報に「ユーザスタイルシートをご利用下さい」と書いている。

サイトの常連になる条件

冒頭で引用した記事で第一印象が悪ければ、人々は離れていってしまうだろうとあるが、僕が或るWebサイトを定期的に読む(所謂「常連」になる)条件は、ごく単純だ。

  • 自己紹介ページを読んで共感を持った人のサイトであること
  • 顔を知っている人や付き合いのある人のサイトであること

他人の自己紹介ページって結構好きなので、気合入れて記述してあると熱心に読んでしまう。で、勝手に親近感を抱いて常連になってしまう訳である。逆に自己紹介ページの無いWeb日記に検索等で辿り着くと、さっさと立ち去ってしまうかも。僕は、まず読むのは自己紹介ページと決めている。

顔を知っている人や付き合いのある人のサイトは、もうそれだけで巡回コース入りである。僕は知人友人の近況を手軽に知る手段としてネットを利用している側面が強いので、mixiでも交流と言うよりは、そこでしか読めない友達の日記があるから日々ログインしている。デザインの良し悪しなんかでいちいち判断していたら、mixiなんてとても巡回する気にはなれない気がする。

結局のところ、デザインが気に入ったからブックマークとか、リニューアルして気に入らないデザインになったから巡回中止とか、ナンセンスだなぁと。

[Web] デザイン出来ないのにデザイナを名乗る人が居る

酔った勢いに任せて、うんこWebデザイナの悪口を書いてみる。

うんこWebデザイナとは
DreamweaverのようなWYSIWYG編集に慣れきった、マークアップの意味すら分かっていない自称Webデザイナ。社員なのかバイトなのかも不明。

大した規模でもないWebアプリケーションの案件に、SE兼プログラマ1名が設計>開発>運用をこなし、デザインは全て害虫外注のうんこWebデザイナに任せた時のお話。もちろんこれはフィクションである。前提として、

  • プログラマは、本システムの稼動後も顧客の要求に対して応えて行く
  • うんこWebデザイナは、稼動までの開発期間限定のプロジェクト参加である

こんな感じであることを念頭において頂きたい。良くある話といったレベルではないが、そこそこあり得る事例だと思う。

例えば図書館の蔵書を検索するシステムがあったとして(何だか情報処理技術者試験みたいだなぁ・・・)、PHPで以下の様に実装したとする。

ここで、Bookクラスは蔵書の情報を保持しており、BookListクラスはBookクラスを集約している。

蔵書情報をDBに問い合わせ、検索結果を一覧表示するとしよう。変数$blには、問い合わせた結果のBookListのインスタンスが入っている。かなり適当に書いているので、細かいツッコミはご容赦。型キャストが無いのは、別に端折ったわけではないぞ(PHPは動的型言語であるから、Javaみたいなキャストはいらん)。

検索結果表示の画面は、

<h3>検索の結果<strong><?= $bl->size() ?></strong>件の本が見付かりました</h3>
<ul>
<?
    for($i = 0; $i < $bl->size(); $i ++) {
        print("<li>".htmlspecialchars($bl->getItem($i)->getTitle())."</li>\n");
    }
?>
</ul>

まともにマークアップしていると、こんな感じだろうか。見出しレベルとかは、本当に適当に書いているだけで特に意味は無い。

この時、プログラマは自分がコーディングした画面はどんなデザインになるかは一切意識していないはずだ。「とにかく蔵書の情報をDBに問い合わせて、その結果を順不同リストとして一覧表示する」ことだけを考えてコーディングすれば良い。即ち、保守作業が発生したとして、それがデザインの変更に限定されるものであれば、変更範囲がプログラムのコードに及ぶケースはほぼ無いだろうし、あったとしても少し複雑なデザイン実現の為にリスト自体をdiv要素で大きく囲うとか、id属性を付与するといった程度だろう。つまり、デザインと実装は分離している。

ところが、うんこWebデザイナが持って来た画面設計を使うと、

(とにかく鬼のようなテーブルが続いていると思って欲しい)
<td>検索の結果<span class="red120"><?= $bl->size() ?></span>件の本が見付かりました</td>
(鬼のようにテーブルを閉じる、或いはさらに深いテーブルの入れ子)
<table border="0" cellspacing="0" cellpadding="1">
<?
    for($i = 0; $i < $bl->size(); $i ++) {
        print("<tr>\n");
        print("<td valign=\"top\"><img src=\"list.gif\" alt=\"●\"></td>\n");
        ptint("<td>");
        print("<div class=\"books\">".htmlspecialchars($bl->getItem($i)->getTitle())."</div>\n");
        print("</td>\n");
        print("</tr>\n");
    }
?>
</table>
(ここから、再び目も眩むようなテーブルの嵐)

斯様に一覧性の著しく低いコードが出来上がる。今回はかなり省略して書いたが、実際はこんなものでは済まない

システムとして動くようになってから稼動を始めるまでに、改めて顧客に画面の確認をお願いする。すると、画面の子細に渡って注文が来て、対応することになる。うんこWebデザイナからは、以下のようなお願いがされる。

  • 検索結果件数を表示する箇所のデザインを変えましたので、xx行目からxx行目までを送付するデータと入れ替えて下さい。よろしくお願いいたします。
  • 先方より、本の情報を表示する領域を広げたいとの要望がございました。お手数ですが、xxのセルとxxのセルはcolspanで結合し、さらにxxの後ろにはspacer.gifを挿入するように変更して下さい。よろしくお願いいたします。

ただでさえ見難いコードに、手を加えよという訳である。デザインと実装がごっちゃになっている。

案件のリリース前ならこういったやり取りもあるが、リリースしてから自分だけで運用している時にデザインの変更という話になった時は、この膨大なテーブルレイアウトを解析する作業が発生することになる。馬鹿げている。

思うに、うんこWebデザイナ共はWebオーサリングツールの画面しか見ておらず、コードには興味が無いのだろう。マークアップとは、見出しを見出しと示し、段落は段落と示す、文書構造を明示する情報のデザインである。従って、こいつらはデザインが出来ないのにデザイナを名乗っている(或いは、会社が名乗らせている)のである。

個人のWebサイトでW3Cの勧告に従ってマークアップすべし、とは全然思っていないが、少なくともデザイナを名乗ってメシを食っているなら、シンプルで利用し易い情報のデザインを心掛けて欲しい。後になって余分な作業が発生するのは、いつもプログラマの側である。

プログラマも全員が無知ではない。Webオーサリングツールの吐き出すコードをそのまま納品して満足しているうんこWebデザイナは、一部のプログラマには笑われているし、案件が来なくなることもあり得る、と私見を述べておく。


最近のツッコミ

  1. 雷悶 (2022-08-11(木)17:40)「企業有利といわれる年と、学生有利といわれる年とで、どうしても格差は存在しますねー。通年採用をやってる会社も多少は増え..」
  2. gucho (2022-08-10(水)22:09)「金持ちいいなー。 新卒の時と、民主党が政権を取っていた時の転職活動は、採用している企業が明らかに少なかったので、こ..」
  3. 雷悶 (2022-08-08(月)19:01)「ブログに限らず、一般的なニュースサイトでも採用されちゃってますね。」

参号館  の中の  日記(ariyasacca)

トップ «前の日記(2006-01-20 (金)) 最新 次の日記(2006-01-22 (日))» 編集