なので、手元にある雑誌やポスターを例示されたり、それを元にグラフィックデザイナに作らせた素材が送られてきたりするんですが、たいていの場合それでは役に立たなくてイメージの修正や素材の作り直しをお願いすることになります。
WEBでのデザインってのは、いわば、グラフィックデザインに対して仕様的な制限を掛けた上で、その中で何とか表現していこうと特殊な進化を遂げた分野だと思うのです。どちらが良いということではなくて、ルールが違うのだろうと。
WEBのデザインで制限があるな、と思うことは大きく言うと以下の2点。
- 基本的に矩形しか使用できない
- 殆どは実線で区切られている
矩形というのは要するに長方形。
縦線と横線以外の線をHTMLだけで引くことは出来ないので、どんなサイトであっても各要素は矩形以外の形を取ることは出来ません。
ということは基本的には「画像の形に合わせてテキストを回り込ませる」とか「斜めにした素材を重ね合わせる（ラベルのように）」とかいう表現が難しい。これはHTMLが生まれてから現在まで（仕様としては）解決できていない部分です。
テキストを回り込ませるためには、画像が矩形なら画像の高さをテキストの高さの倍数にしてやれば綺麗に収めることが出来ます。
（ただし、文字サイズ / 行の高さをpxで指定してやる必要がある）
素材を重ね合わせることはCSSだけで実現することは難しくありませんが、その素材が斜めになっている…ということはその斜線は実線ではなくてある程度アンチエイリアスが掛かっている（=背景色の影響を受ける）ので、見栄えがきちんとなるかどうかは…やってみないと何とも言えません。
殆どが実線で区切られていることも重要です。例えば…Yahoo!Japanのトップページを見て貰えれば分かりますが、全ての要素は実線で囲まれています。
唯一の例外は、角丸のアール部分ですが、それも背景色に合わせて極力目立たないように加工されています。
結果として、ページ全体はメリハリのあるものになる場合が多いです。
（もちろん、意匠としてフェードアウトするような境界線を使用しているサイトもあります）
このことから何が言えるかというと…実線で構築されているページ内に、ぼやけた枠線の素材が入ると思ったような印象が得られないのです。そこだけ、一段下がった感じになってしまいます。
結局、素材のデザインとしては十分に綺麗な出来であったとしても、それをWEBサイトに配置したときに十分な効果が得られないと言うことになってしまいます。
あくまで素材の出来/不出来ではなく、印象度のバランスの問題なのでデザイナに作り直しをお願いするのは凄く心苦しいのですが、でも狙いがはずれてしまうことを考えると、それは必要なお願いということになります。
また、上記以外の違いとしては、以下の2点が挙げられます。
- ページ内の各要素のサイズは可変である
- ページのコンテンツは3次元的であり、動かすことが出来る
例えばフライヤーのデザインをするとき日付や出演者の情報を配置しますが、それは配置して自分が次に動かすまでそこに固定されているわけです。それ自体が勝手に大きくなったり小さくなったり、消えてしまったりしません。
しかしWEBのコンテンツは閲覧者がその大きさを自由に変えることが出来ます。フォントの大きさ1つ取っても、ブラウザの設定で各自に大きくしたり小さくしたり出来ます。またテンプレートにテキストを流し込むような体裁を取っている場合、テキストの長さが長くなったり短くなったりします。これは同じ文字数で切って等幅フォントを用いたとしても、どうしても揃いません。
揃え自体はCSSのtext-align: justify;（IEの場合はtext-justify: distribute;）で「両端揃え」が実現できますが（現行のブラウザの多くでは日本語にも対応しているようです）、文字切りとなるとやはりプログラムの計算に任せるしかありません。
そのところの諦めがどこまで出来るかで作業量は大きく変わります。
仮に文字切りが悪いからと言う理由でデータの更新毎にデザインの修正が入ったとしたらそれは多分コーダーは発狂すると思います。
（今時そんなクライアントがいるかどうかわかりませんが）
また、コンテンツが3次元的であるというのは主に企画立案の面で重要です。
WEBデザインの引き出しが少ない人だとどうしてもゲラ（≒β版）を眺めて決定稿を作り上げるという形になりがちですが、実際にはグラフィック上収まりそうにない情報でも、ドロップダウンリストやポップアップを使う、ランダムに表示するようにする、マウスオーバーで変化させるなどの手法や、場合によって別ページを設けることによって盛り込むことが可能です。
逆に、グラフィック的な面から企画の採用/不採用を考えてしまうと「盛り込めない」という思いこみで企画を切ってしまうため出来上がりがスカスカになり気味です。いわゆるフラットでベタなサイトになります。
作業上、企画立案の時点ではホテルの朝のバイキングよろしく、食べられるかどうか分からないけどとりあえず量をたくさん皿に盛っていって、実際にそれを食べられるかどうかは後で体（担当者など）に聞き、本当にダメそうならその時点で初めて切っていく…というのが正しいかと。それは、グラフィックのデザインでは無いことです。グラフィックでは通常、場所のない所には情報は配置できないので。
可変と3次元的の絡みで言えば、“ページの高さが決まっていない”という意味での「可変」もあります。「ファーストビュー」（サイトを開いた初期画面で重要なことを伝える）という考え方もありますが、逆に言えば、サブコンテンツについてはいくらでも下につなげて表示させることが出来るわけです。
一定の領域に縛られて企画を切るくらいであれば、画面下に配置しておいて、定期的に場所を入れ替えてやる方がSEO的にもコンテンツの誘導のしやすさとしても上でしょう。回線速度が上がって、ページ内のコンテンツ量を余り気にしなくて良くなった昨今なら余計に。
この辺りは、企画立案者がWEBを少しでも理解していれば思い当たることなので、多くの場合はそれほど意識されていないと思いますが、企画におけるクライアントの意向が強い場合には苦労することもあるんじゃないかと。いちいち、それこそゲラを作成して確認しなくてはなりませんから。
以上、グラフィックデザインとWEBデザインの違いをまとめましたが、結局の所やはり、出来ることが少ないからそれを何とか活かそうとしてきた…というのがWEBなのかなと。
文中では書きませんでしたが、例えばFlashなんてのはまさに直接的にそれを解決しようという手法でしょうね。素材の形や大きさ、背景色との取り合わせなどを動的に調整してくれますし、余計なことを気にしなくて済みます。
そういったことを踏まえて、WEBデザイナまたはプロジェクトマネージャ側で意識すべき点は以下の通り。
- グラフィックデザイナへの指示は明確に。裁量を任せてもWEBのルールに沿うとは限らないので。
- 場合によってはギミックの説明込みでの指示が望ましい。
- デザイン上出来ることと出来ないことは明確にしておく。回り込みは不可など。
- ある程度の権限があるのであれば、企画のブレストに参加するかそのメモを見せてもらい、領域の不足で切られた企画がないか確認する。
- 簡単に変更を試せるような環境を整えて開発する。どうしても目で見えないと伝わらない部分はあるので。
あと、技術者と非技術者という面で、
- コミュニケーションをきちんと取る。取れているか確認する。
- 我慢する。
ってのも重要ですね。
技術的なことで伝わらないとイラッとしたりするもんですが、それが分かるからこそ仕事を任せられているわけで、その辺の知識量の差はむしろ仕様ですからね。
まぁイラッとするのを変えるのは出来ないですけどね…
ちなみに…
このエントリを書く時に恥ずかしながら初めて知ったことがいくつか…1. 矩形 → 「くけい」と読む
「きょけい」だと思ってたよ…ATOKで変換できないからアレって思ったんだけど、検索しようとしても漢字分からないし、仕方がないからATOKの部首検索で読み仮名を見つけて…「くけい」で変換したら一発。恥ずかしい。
2. 等幅 → 「とうはば」と読む
これも読み仮名。てっきり「とうふく」だと思ってたよ…同じくATOKで変換できなくて発覚。
そうだったのか…
3. 最近のブラウザは日本語の両端揃えが出来るようになっている。
何年か前の記憶だと確か、CSSの両端揃えは実装されてはいるものの、ブラウザ側で日本語に対応していないので使えないだったのだけど…古かった。
text-align: justifyで段落を両端揃えにする – メモログ
ちなみに「text-justify」というのは、IE独自の拡張。IE5/6では「text-align: justify」よりもこっちを優先するらしいです。
ちょっと使ってみようかな。
