ariyasacca

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

• 2006-01-18 ITmediaニュース：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デザイナは、一部のプログラマには笑われているし、案件が来なくなることもあり得る、と私見を述べておく。

▼ [雑記]ヤマダ電機LABI名古屋の上層フロアは閑散としている

ちょっと所用で休日にも名古屋へ行くことになったので、いつもは人がごった返しているB1Fと1Fしか行かないヤマダ電機LABI名古屋で全てのフロアをぶらっと一巡りしてみた。

液晶テレビのフロアなどは閑散としており、びっくりした。1Fのスマートフォンフロアが客寄せとして機能している割に、上層フロアへは人が流れて行かないようだ。ビックカメラと違ってコンピュータ書籍を扱っていないのも微妙に使い難い点かも知れない。

結論としては、ヤマダ電機LABI名古屋は

• フィーチャーフォン
• スマートフォン
• データ通信端末

が揃っていて人も余り居ないB1Fフロアだけ利用するのが良いと思う。

帰りはビールクズした。＾ヮ＾

▼ [雑記][メタル]CDのケースは全部捨てる決意をした

部屋の壁一面を使ってるラック（高さ2m以上ある）が遂に容量不足となって、デスクの上にCDタワーが積み上がるという地震耐性ゼロの状況が長いこと続いているため、CDのプラケースは全て捨てることを決めた。っていうかこれ去年やりかったんだけど、面倒だったのと、何だか勿体無い気がして踏ん切りが付かなかったのだった。

初回限定盤なんかに良くある紙ジャケ系のCDはしょうがないのでそのまま保存するとして、いわゆる量産タイプのプラケースは全部外して保存に必要な体積を減らす作戦とする。そして無印のストッカーにせっせと詰め替えて部屋から出し、ラックは撤去する。このラックは買った当初、「数百枚は入るから10年は持つだろう」と思っていたし、それなりに頑張ってくれた。CDを取り去った後も使いではありそうだが、そうすると再度買ったCDを並べ始めかねないので、甘えた考えを抱かないためにも撤去すると決めた。

音楽に関しては物理メディアを捨てる選択肢は、少なくとも日本の音楽配信を取り巻く現状を見る限りあり得ないと思っているので、これからもCDを買い続けるのであれば、何とか工夫してやり繰りする必要がある。

プラケースから移す不織布ケースは、意識の高い音楽愛好家の間ではタワレコで売っているものを使うのが鉄板のようだが、僕はAmazonでヒットしたELECOMのやつを使うことにした。安いし2006年から取り扱われているロングセラー商品のため、買い足しにも便利そうという印象を持った。

▼ [サバティカル]PyPI設定ファイル移行

睡眠と天候

• 前日就寝：23:50
• 当日起床：04:30
• 当日天候：晴れ、日中は暖か

何故か早朝に起きて目がギンギンに冴えてしまった。睡眠時間どうか安定してくれ～。

前日に計画していた通り、10:00からRebuildのEp 199ライブ配信を聴き始めた。しばらくPerfumeの曲（？）が流れていたのと、マイクトラブルなどでバタバタしていたのが生放送という感じであった。配信終盤でウトウトしてしまい、13:30頃まで寝てしまう。また録音データが上がったら一通り聴き直そう。

数年振りにPyPI（Pythonライブラリの成果物貯蔵庫）サーバーにアクセスしたところ、410エラーになってしまった。エラーメッセージに従い、Migrating to PyPI.orgを参考に自分の設定ファイルを変更してみたら、上手くアクセスできるようになった。本番サーバーはtwineというツールに全任せでアップロードできるけどtestサーバー側が喋るのはレガシーAPIで旧来コマンドを打たないとダメ、という点が微妙にややこしい……。しかしPythonコミュニティは文書化が本当にしっかりしていて迷いにくいのが素晴らしい。