Webデザインを語るとき、ともすれば勘違いしやすいのは、印刷的なグラフィックデザインをイメージしてしまうことです。Webサイトの「サイト」とは、建築物の意、デザインを「設計デザイン」というように考えるべきです。グラフィックデザインは、2次元。Webデザインは、ボタン配置などユーザビリティや、動画、音声などの別要素を加えて3次元と考えるべきです。つまり「性能」の善し悪しがWebサイトの重要な要素となります。
さて各国のWebのデザインを見ているといろいろあって楽しいですね。本当にその国に旅行したような気持ちになるものです。なかでもヨーロッパとアメリカではWebサイト・メディアとして傾向が違います。
一例として、クルマのメーカで見てみましょう。
フォードとBMWです。フォードは、総合ポータルサイト的なデザインです。まず関連企業のロゴが並んでいます。その下には、ショップをはじめとする製品のプレゼンテーション、その下に、サービスと企業情報が並んでいます。明らかに膨大な情報が詰まっていますよ。といった雰囲気です。デザインのテーストもちょっと重厚でよく整理されている。といった感じです。
もう一方は、BMWです。ドイツ本国のこのページは、トップのグラフィックイメージでもわかるようにBMWらしいCIイメージの統一が感じられます。フォードと比べるとサイトの規模も違いますが実にシンプルにデザインされています。BMWはこのデザインが各国サイトに共通化されているとことがすごいところです。
一般的には、アメリカ企業のデザインは、派手で押しが強くカジュアルのものが多く、これに対してヨーロッパ・デザインの傾向は、色使いも個性的で独創的なサイト構造を持っているものが多く見られます。
やはり、文化やライフスタイルが違うとデザインにも違いが出ますね。センスがよいかどうかは、ユーザの好みに大きく影響されます。しかし、世界中の人が一致してデザイン的にもユーザビリティ性能の上でも「良いものは良い」と感じさせるもの作るべきだと思います。先ほどのフォードとBMWの例でもわかるように現時点のWebデザイン的には、どちらも一つの典型です。多くのメニューがあるバイキング料理のように、求める情報にいち早く到達させるには、やはりフォード型になります。これだとメニューを選んで3回クリックするとだいたい必要な情報にたどり着けます。BMW型は、どちらかというと制作者側が想定した見せたいページに導くタイプです。
いずれにしても多くのアメリカ、ヨーロッパの有名なサイトは、日本の現状と比べると一日の長があります。これは、日本よりも早くWebデザインの重要さが社会的に認知され各分野のプロが制作に携わっているからです。単にデザイナーと言うよりは、認知科学の専門家や、マーケテッター、エディター、プログラマーなどがチームを組んで各自の専門知識を動員してきちんと設計されたWebサイト開発しているからです。まずは、このようなサイトを多く見ることが必要なのではないでしょうか。
*参考 Fortune500企業サイト
URL:http://www.fortune.com/index.jhtml
もう一つ重要なことは、日本で制作した英文サイトを海外向けに公開するわけです から「日本で制作した」という意味をより深く考えてほしいと思います。WebWorksで は、「日本発グローバル」というテーマを掲げています。一般的には、いわゆる「わ びさび」的表現=「外国人向け」がよく使われています。こういった表現が外国人に うけることを意識したWebサイトではなくて、現代に生きる日本人のそのままの意識 で海外に問いかける表現であってほしいと思います。
英文Webサイトのタイポグラフィ
タイポグラフィとは単純にいえば文字の構成技術です。こだわった言い方をすれば、文字とその組み合わせについての無限の世界の表現とでもいえるかもしれません。グラフィックデザインの世界では、これができれば一人前といわれれいます。
Webデザインの世界では、一般的にモニター上の可読性、種類およびバージョンによって相違するブラウザの表示性能により印刷物のような厳密なタイポグラフィは、スタイルシートを駆使しても無理なようです。しかしその反面、モーショングラフィックスやキネティックタイポグラフィのような動くタイポグラフィが可能となります。Webデザイナーはこのような新しいタイポグラフィの冒険にチャレンジすべきだと思います。
なお、多くの海外の英文サイトで採用されている文字の構成の基本は、16ピクセル(pixels)以上のタイトル文字などには、表示が荒れるためGIF(画像)とし、なるべくデータ量を抑えて作成しています。
本文書体は、Arial 、Helvetica(サンシェルフ体)、Times(シェルフ体)が一般的です。
また、マイクロソフトがモニター画面用に作成したVerdana(サンシェルフ体)やGeorgia(シェルフ体)もよく使われています。
本文は書体サイズ12ピクセル(pixels)とし、行間は15pixels、400ピクセル(pixels)程度のテーブル・セルに納めると、だいたい1行12ワードとなり、読みやすいレイアウトとなります。
日本語でも同じですが、英語においても小見出しや強調には、太字と大文字を使うと画面上で分かりやすくなります。あまり多用しないのがコツです。
HTML作成時に忘れてはならないことがあります。英文ページの文字コードはISO-8859-1とし、HEAD要素内以下のように宣言しておきます。
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
こうしておくと英語だけではなくフランス語や、ドイツ語、スペイン語などでも英語にない各国語独自文字も問題なく表示できます。
注1*サンシェルフ体:髭なし書体(ゴチック体)
シェルフ体:髭あり書体(明朝体)
注2*書体の大きさの指定はポイントとピクセルがあります。ポイントは、ユーザ環境に左右されるが、ピクセル指定は左右されません。
まとめ:文化や国で変わるサイトデザイン
- Webデザインは建築設計に似ている
- まずは海外の優れたサイトに学ぶ
- 日本発の独自性を発揮する
- Webサイトで半ば標準化しているタイポグラフィ、レイアウトフォーマットを学ぶ