Hatena::ブログ(Diary)

elm200 の日記 このページをアンテナに追加 RSSフィード Twitter

2011-11-12

[]ウェブデザインが苦手なプログラマーたちへ「XHML+CSSデザイン 基本原則、これだけ。」

私はウェブデザインができないプログラマーである。以前はデザインはデザイナーさんに任せておけば良いと思っていた。だが、考えてみると、われわれは、デザインされたものしか目にすることはできないのだ。どんなに優れたアルゴリズムをプログラマーが実装しても、残念ながら私たちの目には見えない(反応速度で体感できることはあるにしても)。人もウェブサイトも見た目が9割なのである。

最近、私は「書評人」というウェブサービスを始めた。当然、私にデザイナーを雇う余裕などない。自分でデザインを制作する必要に迫られた。さて困ったどうするか。

私は、ある人気ウェブサービスを運営する友人に尋ねてみた。彼は、昔、一緒に仕事をしたことがあるプログラマーだ。特にデザインを専門的に勉強したことはないはずなのに、彼が作るサイトはどこかあかぬけている。彼に根掘り葉掘り尋ねるうちに、勧めてくれた本がこれ。

XHTML&CSSデザイン |基本原則、これだけ。

XHTML&CSSデザイン |基本原則、これだけ。

結論からいうと、この本はすごくよかった。著者は、実際に働いているウェブ制作関係者たちである。それゆえ内容が非常に実践的なのだ。

さすがデザイナーたちが作った本だけあって、装丁も美しい。見開き2ページで1トピックが簡潔にまとめられているのもいい。ページのレイアウトもきちんとした2カラム構成で読みやすい。まるでそれ自体がウェブページのようである(意図的かどうかは知らないが)。

だが、実践的で見た目の美しさだけが売りの安直なハウツー本ではない。骨太の哲学に貫かれている。引用しよう(p 16)。

Webデザインとは、情報を整理してユーザーに提供するということ

Web デザインというと、どうしても見た目を画像で華やかにしたり、Flash などを使ったインターフェイスを提供することだと考えがちです。確かにそれも Web デザインの一つでしょう。本来 Web は、誰もが環境に左右されず情報を入手できるものであるべきです。わかりにくい Web では意味がないのです。Web サイトに求められていることをうまく整理し、シンプルでわかりやすい情報構造にして伝えなければなりません。

すべてのデザインは、「情報を整理してユーザーに提供する」ために奉仕しなければならないと宣言しているのである。そして、この根本的な命題に沿って、本書は、

  1. ウェブデザインの哲学
  2. マークアップXHTML)
  3. 装飾(CSS)
  4. トラブルシューティング

という順序で記述され、抽象→具象、概要→詳細、幹→枝葉へと見事に構成されている。編集者を交えてよほどよく内容を練った跡がうかがえる力作である。

はっきり言って、些末なデザインテクニックはいまやネットを検索すればいくらでも出てくる。だが、一からウェブサイトを一人で作らなければならないプログラマーにとっては、そもそも「どういう方針でマークアップし、CSS で修飾すればいいか」という基本がわからない。本書を通じて、プログラマーは、ウェブ制作の現場から生まれた非常に実践的なアドバイスを数多く得られるにちがいない。まるで熟練のウェブデザイナーが隣にいて、デザイン初心者である我々プログラマーに助言してくれるかのようだ。

ホント、もっと昔に買っておけばよかった。ちょっと前まで「ふん、情報なんてネットで全部集められるわ!」と意地を張っていたけど、やはりある種の体系的知識はいまでも書籍から得たほうが効率的だ、と認めざるをえない。

出版は2008年4月とやや古く、HTML 5 のような最新トピックは載っていない。だが、CSS の基本は何も変わっていない。これからウェブサービスを自力で作ろうという人たちに強くお勧めしたい一冊である。

(蛇足ながら、いま、アマゾンサイトでは新品が品切れのようだ。だが、定価よりずっと安い値段で古本が手に入る。こんなまっとうな本がこんなに安く買えるのは、ある意味ラッキーかもしれない)

参考リンク:
書評「UIデザインの基礎知識」 - elm200 のノマドで行こう!

追記(11/13):
このエントリの影響か、アマゾンの安い古本がなくなってしまった。残念。「手元にあるけどもう要らないよ」という方は、マーケットプレース等で譲ってあげてください(他のネット書店では売ってるのかもしれないけど使ったことがないのでよくわからないんだよね…)

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。