Webデザインのカンプ制作することになったらチェックしたい5つの勉強法
デザイナーの中には紙媒体が得意な人、Webが得意な人、どちらかというオペレーター寄りの職人タイプの人など、ひとくちにデザイナーといっても人それぞれ得意な分野が違います。
私は普段Web担当をしているのですが、紙媒体のデザインも担当することがあります。少人数の会社の場合、反対に紙媒体のデザイナーさんがWeb用のカンプを作ることもあります。
そのカンプを元にコーディングしていて、紙媒体のデザインとWebデザインには概念の違いという大きな壁があるように感じます。
もくじ
Webデザイン独特の概念と対策
ページ階層
ページが階層ごとに入れ子になっているので、ユーザー（閲覧者）の移動の導線などを考えてサイトマップ（サイト全体の設計図）を作るようにする。
ページの高さ（height）は流動的
決められたサイズの中で配置していく印刷物とは違い、Webはコンテンツに合わせてページの高さを延長できる特徴があります。
ただし、あまりに長くなってしまうと読みやすさが損なわれますし、モニタで見えている部分はページの一部なのでユーザーの視点をイメージしながら制作することが重要です。
テキスト表現が主役
本文も画像で貼付けてしまえばデザインも崩れないし楽なんじゃないか？という素朴な疑問を聞かれることがあるのですが、Webはデータ配信型のメディアです。
コンピュータに内容を正しく理解させる文書構造が検索対策にも重要になってきますし、基本的にテキスト主体の媒体だということを忘れないでください。
仕上がりはユーザー環境に依存する
表示端末の多様化によってモニタサイズや書体の種類など、環境によって見え方が違ってきます。
差異がでても大きく崩れないデザインにするためには、コードを書く前の段階でも考慮が必要です。
モニタを通して見るメディア
発光している画面を見ることは、紙面を見るよりも目に負担がかかります。
可読性を高めるためにはホワイトスペースと色のバランスをチェックしましょう。
色は紙媒体データよりも淡いもの・発色の良い色が好まれる傾向があります。
デザインの流行
Webデザインは技術的な進歩と共にかたちが変わっていくので、デザイン自体の流行が早い傾向があります。
動的な表現
動きのある表現ができることもWebデザインの魅力の一つです。
技術的な面でどのような表現ができるかわからないと、平面的で静的な表現のサイトになりがちです。
Webデザインカンプ制作する人におすすめの勉強法
紙媒体のデザイナーさんからどんな風に勉強していったら良いのか分からないという声をよく聞くので、Webデザイン用カンプを作るときにやっておいた方が良い勉強法について書いてみたいと思います。
1.まずはWebサイトの構造を知る・作ってみる
Webサイトは基本的に
HTML-文書構造→コンピュータに向けた情報
CSS-デザイン→人間の視覚への情報
の2つで成り立っています。
そこに動きを与えるのがjavascript（jQuery）などのプログラムです。
デザインカンプのみを作る場合でも、基本知識があるとWebの概要が掴みやすくなるので、実際にシンプルなサイトを一通り作ってみることをおすすめします。
Webクリエイターボックスさんの連載「実践で学ぶWebサイト制作ガイド」では、企画からPhotoshopでカンプ作り、HTML・CSSのコーディング、サイト公開までWeb制作の一連の流れを学べます。
実践的な内容がコンパクトにまとまっていて、分かりやすいです。
Photoshopでのカンプはすでに作れるという方は、CSSのページからサンプルをダウンロードしてHTMLとCSSのコードを書いてみてください。
CSSでWebサイトのレイアウト組み＋装飾の基本プロセス | Webクリエイターボックス
2.Webギャラリーを見る
Webデザインは紙媒体のデザインより流行が早く、「今のキブン」のようなものが表れやすい媒体です。
また、サイトよって様々な構成のデザインがあり、一見すると共通点が掴みづらいかもしれませんが、細かな配置などにユーザーを迷子にさせないセオリーが詰まっています。
そのあたりのニュアンスは感覚的に覚えていくしかないので、沢山のサイトを見て考察してみてください。
またWebの動的な表現のサンプルとしてもチェックしてみてください。技術から新しいアイディアがうまれることもあります。
3.Webで情報発信しているデザイナーブログをチェック
Webの最新技術や、それに伴うデザインは本の中ではなく、Webの中で見つけましょう。
本は情報分かりやすくまとめられているので、技術の確認や流行の大まかな傾向の把握に適しています。
Webデザインは「ナマモノ」です。
Webデザインの流行を掴むにはリアルタイムの鮮度を大事にしてください。
情報収集におすすめのWebデザイナーさんのブログ
4.家電製品などのUI（ユーザーインターフェイス）をチェック
Webデザインは紙媒体の表現よりも、どちらかと言えば電子的な端末と共通した部分があります。
テレビやゲーム、デジカメなど動きがあるメディアやモニタを通した表現も参考になります。
UIはユーザーが操作する手段や結果のことです。ボタンのデザインや動き、画面移動の様子などヒントになる場面が沢山あります。
ゲーセンのプリクラ機とかも参考になるかもしれません。
5.ユーザビリティ（ユーザーの使いやすさ）は日常の行動をヒントに
お店に入ると、なんとなく見て回る順路やトイレやエスカレーターの場所が分かったり、スーパーやコンビニでは商品の置いてある場所も感覚で分かると思います。
Webサイトにも同じ側面があります。それをユーザビリティ（ユーザーの使いやすさ）と言います。
欲しい物が見つけづらいお店は、お気に入りのお店になるでしょうか？
ユーザビリティを意識することで、ユーザーがより快適にサイトを楽しむことができるように、日頃の行動に意識を向けて研究してみましょう。
あとがき
冒頭で紙媒体とWebでは概念が違うと書きましたが、それでも最終的な目標はどちらも伝えたい情報をユーザー・読者である人間にどう伝えていくか？ということだと思います。
Webに苦手意識のあるデザイナーさんや、これから挑戦したいと思っている方へ、Webデザインのコツや楽しさを発見するきっかけになれば嬉しいです。
Follow me!
