『The Essential Web Design Handbook』読んだ

Rafal Tomalの書いた『The Essential Web Design Handbook』という本を読んだ。初心者のためにWebデザインの基本となる知識を広く紹介している。構成としては、筆者がWebデザインを行うときのプロセスをまず最初に紹介し、その各段階を追っていきながら、「この作業は無視されがちだけどこういう点で効率的だからやった方がいい」「これを考えるときにはこういう知識を使う。今回の例ではこうやって考えた」という具合に進んでいく。

プロセス

筆者が推奨するWebサイトのデザインプロセスは次の通り:

  1. 調査して計画をつくる
  2. 発想を膨らませる
  3. スタイルガイドをつくる
  4. ワイヤーフレームを組む
  5. モックアップをつくる
  6. コードを書く

調査と計画

調査するというのは、明確なクライアントがいる場合は要求を聞くことであったり、競合サイトの様子を調べてくることであったり、使えそうな資料を広範にわたって集めてくるということ。この話は 『アイデアのつくり方』読んだ - ✘╹◡╹✘ にも通じる。

計画するというのは、デザインに入る前に、今からやるプロジェクトの説明や、要求されている事物や目標を整理するということ。この過程は無視されがちだけど、経験を積めばこの段階の重要さが分かってくると筆者は言っている。根幹に関わることなので、ここがひっくり返るとその先のプロセスの全てが無駄になる危険性がある。計画段階で決めた方が良い基本的な要素について説明があって、大体次のようなことだった:

  • プロジェクトの説明 (「何を作っているのか?」に明確に答えられるようなもの)
  • プロジェクトの目標 (「いま達成できているか?」に明確に答えられるようなもの)
  • ターゲット層 (例えば若いフリーランスのエンジニアをターゲットとするとか)
  • 成果物として出来上がるもの
  • プロジェクトの管理方法 (Trello使うとかSlack使うとか)
  • サイトマップ (Webサイト作るときはこれがあると全体観が誰にでも分かりやすいとのこと)

発想

発想を膨らませるというのは、集めた資料を元にアイデアを発散させていくというやつ。ブレインストーミングなどをすると良いと言っている。ブレインストーミングをするときに大体よく言われるルールとかも紹介されていて、この段階ではアイデアの評価はひとまず置いといてとりあえず案を出すとか、生まれたアイデアや発想は全て記録しておくとか、出たアイデアを他人と共有してみるのが良いということが紹介されている。

スケッチ

発想を膨らませるときにはスケッチを残すことも有用だとしている。スケッチを描くということをしないデザイナーも多いけれど、視覚的にスケッチを残していくことは「どう想像したか」を保存しておくためにも重要。筆者がスケッチを残すときにこういうことに気を付けてるという小話があって良かった:

  • 完璧にしない
  • 注釈を残す (スケッチの絵だけ見ても意図が思い出せないことがある)
  • 組織化する (ノートにまとめるとか通し番号を振っておくとか)
  • 日付と簡単なタイトルを付けておく

パフォーマンス

創造性を発揮する時間を無駄にしないようにしようという話が良かった。人間の習慣には色々個人差があるけど、日光を浴びると目が覚めるとか、夜眠くなるとか、大体のパターンがある。例えば創造性を最も発揮する時間が起床後二時間程度だとすると、その間にソーシャルメディアを見て時間を過ごすのは勿体無い。お前はどうだ、という話。朝が最適であるという話でも無いし、最適な時間以外に創造性を発揮できないという話でもない。自分の最適な時間を見付けて大事にしようということを言っている。

終わり

ここまでは前半の話で、後半は実際デザインしていく中での細かい知識が書いてある。例えばタイポグラフィの話があって、いかに重要かということから始まり、フォントの大まかな分類 (Serif, Sans serif, Slab serif, ...) や、選択するときに大きな失敗を避けるための基準とか、CGMでは特にコンテンツ量が意図せず変化しやすいので気をつけようとかいう具合。他に、色とか、空白の置き方、レイアウトとか、ワイヤーフレームやモックアップの作り方とか。後半の手法に関する部分は他の情報でも比較的紹介されやすい内容なので、前半部分が特に良かったなあという印象だった。でも$45は高い気がする。Webサイトでサンプルも配っているので、読んでみて気に入って金なら出すという人が買うと良さそう。