Webサイトをデザインする5つの作業手順

新しくWebサイトを構築する場合、大きくわけて、顧客、プロジェクトリーダ、Webデザイナ、Webデベロッパ、場合によってはデザイナとデベロッパの中間を担当するコーダといった役柄で仕事を回す。大規模なプロジェクトになればデータベースであったりインフラ、ネットワーク、デプロイなどなど、要所ごとに担当が増える。逆に小規模なプロジェクトや、1、2名で回すプロジェクトでは、Webサイトデザインも開発も同じ人が担当することになる。

WebデザイナはWebサイトの構築手順の典型的な作業プロセスについては知っているだろう。しかしWebデベロッパがデザインも兼任することになった場合、作業プロセスがよくわからないため、とりあえずDreamweaverやPhotoshopを起動したり、開発可能なコードに画面を作る感じで作業を進めるかもしれない。

いきなりデザインをはじめて作業をするというのは、なかなか困難なことだ。そんなケースでは、Jennifer Farley氏がSitePointに掲載したDeveloping Your Design Processを一度参考にしてみるといいかもしれない。Webデザインのやり方が簡潔にまとまっている。紹介されている手順は次のとおり。

1. サイトの目的をはっきりさせる。サイトの主要な目的をひとつ、それに関連する目的を1つないし2つあたり明確にしておく
2. サイトの構造とコンテンツを考える。サイトの構造は新しいコンテンツを追加する場合に煩雑にならないようにしておくことが大切
3. サイトのアウトラインスケッチを書いてみる。レイアウトやサイトコンテンツが整理できるし、ページの関係を表現したりユーザビリティを検討できる。アウトラインスケッチにはiPlotzやOmniGraffleのような専門ツールを使ってもいいし、IllustratorやVisioなどを使ってもいい。ただしJennifer Farley氏は、個人的にはと断ったうえで、紙に書く方が簡単で素早いと意見をあげている
4. ここまで来たら、1-3のデザインをベースにより包括的なデザインを作成する
5. サイトを構築したらとにかく試験する。できれば自分以外のユーザにチェックしてもらってフィードバックを得る

3までは紙とペンでできる作業だ。4からPCとソフトウェアが必要になる。Webデザインには決まりきったプロセスがあるわけではないが、まったくプロセスがないわけではない。Webデザインはとくに変遷がはやく、デザイントレンドに気がついたときにはすでに古いデザインになりはじめていることも多い。しかしWebデザインの背後にはある程度の作業プロセスと、問題を避けるための作業プロセスやティップスが存在しており、そこにトレンドを組み合わせて新しいWebサイトデザインに取り組んでいくことになる。