顔を知っている人や付き合いのある人のサイトは、もうそれだけで巡回コース入りである。僕は知人友人の近況を手軽に知る手段としてネットを利用している側面が強いので、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デザイナは、一部のプログラマには笑われているし、案件が来なくなることもあり得る、と私見を述べておく。

[ツッコミを入れる]