ウェブデザイン

出典: フリー百科事典『ウィキペディア（Wikipedia）』

ウェブデザイン（Web design）は、デザインの一種。ウェブページやウェブサイトにおける視覚面（意匠・要素配置等）に対し、整理・再構築・意匠等を施すことである。グラフィックデザイン的な要素を多く含む一方で、インタラクティブな要素を持つWWW（ウェブ）の性格上、情報デザインあるいは工業デザイン的なスキルも求められる。ウェブデザインを行うデザイナーを、ウェブデザイナーと呼ぶ。

ウェブデザインの内容は、ウェブサイト全体の情報設計、見ためを中心とするグラフィックデザインやGUIの設計、ウェブアプリケーションのUI設計構築など多岐に渡る。

ウェブページの例

[編集] 歴史

世界最初のウェブデザイナーはティム・バーナーズ＝リーであったと言える。彼はWWWを発明し、1991年に世界初のウェブサイトを立ち上げた。

CGIが発明されたことで、WWWは大きな転機を迎える。それまではウェブサイト作成者が発信した情報を閲覧者が受け取るだけであったWWWという世界に、CGIは双方向性のあるコミュニケーションをもたらした。そのことによってウェブデザインもまた大きな転機を迎えた。

また、インターネット接続環境の進歩もウェブデザインに大きな影響を与えてきた。ダイヤルアップ接続が一般的だったころには、通信料金を考慮し、画像の使用をも極力控えてデザインがなされた。インタレースGIFやプログレッシブJPEGもナローバンドに対応した画像ファイルフォーマットであった。動画においても比較的サイズの小さいアニメーションGIFが用いられた。しかし、ADSLやFTTHなどのブロードバンドが普及してからは、ファイルサイズを気にすることなく大胆に画像や動画を使用することが可能となった。その結果、ウェブデザインの幅は更に広がった。

Flashをはじめとするリッチクライアントの登場により、リッチで高機能なウェブデザインも増えてきている。

[編集] 問題

[編集] レイアウト

ウェブページは、ユーザのブラウザのウィンドウによりデザイン領域を制限されている。その中でどのようにレイアウトするかがひとつの課題である。

多くのデザイナーは、ウェブページ全体を固定幅のテーブルで包むことでこの問題を解決している。これによりデザイナーはブラウザのウィンドウサイズに左右されず、イメージ通りの表示結果を得ることができる。例えば、Yahoo! JAPANのトップページは幅710pxのテーブルの中でレイアウトされている（2006年 5月現在[1]）。これは最低横800px×縦600pxのディスプレイで最適に表示されるようになっている。

しかし、レイアウト幅を固定することは、ユーザの選択を無視することにもなる。そこで、幅を固定しないレイアウトを用いることもある。固定しない場合、ウェブページのサイズはブラウザのウィンドウサイズに合わせて自動的に整えられる。例えば、ウィキペディアのこのページはその手法がとられている（2006年5月現在）。

デザイナーがどのレイアウトを使用すべきかは、文字の量や画像の多寡にもよるが、アクセスするユーザの利便性を考えて決めるべきである。

[編集] CSS対テーブル

HTML4ではウェブページの見ためにはCSSなどのスタイルシートを用いることを推奨している。しかし、Netscape Navigator 4.xがブラウザ市場を支配していた時代、ウェブページをレイアウトするのにデザイナーが利用した人気の手法はテーブルを用いることであった。グリッドデザインのようにページを細かくレイアウトするためには、しばしば入れ子にされた何重ものテーブルが必要とされた。

本来、テーブルはレイアウトではなく、表データのためだけに使われなければならないものだ^[1]。それにも係わらずCSSが用いられなかったのは、Netscape Navigator 4.xのCSSの実装があまり良いものではなかったからである。なお、ウェブオーサリングツールによってはいまだにこの手法を用いたテンプレートを実装している。

ブラウザ戦争末期、CSSを比較的よく実装していたMicrosoft Internet Explorerが市場を支配するようになると、ウェブデザイナーはページをレイアウトする手法としてCSSを利用し始めた。

今日、大半の現代的なブラウザはCSSを最大限に実装している^[2]ことや、昨今のユニバーサルデザインを重視する風潮を踏まえてアクセシビリティの確保やユーザビリティの向上を目指してデザインが行われるようになったことなどから、CSSを用いてレイアウトを行うことは、ウェブデザイナーの共通認識として確立されつつある。

[編集] Flash

Adobe Flashは、ブラウザによってウェブ上にダイナミックな内容と様々なメディア、インタラクティブなページを作成することができる。現在では、Flashの採用により全くHTMLを使用しないウェブサイトも多い。しかし、Flashをサポートしていないブラウザもあり、そのようなブラウザでは何も表示されないという問題がある。このため、アクセシビリティの観点からは、代替のHTMLを用意することが望ましいとされる。

Flashのファイルフォーマットは私企業であるアドビシステムズ（旧マクロメディア）が策定しており、その仕様は公開されている^[3]。ライセンス上、仕様書を利用してそのファイルフォーマットのインタプリタを開発することはできない^[4]が、ファイルを出力するソフトウェアを実装することは誰にでも可能である。

[編集] ダイナミック・ウェブデザイン

HTMLによるページは、どの閲覧者に対しても予め記述された内容をそのまま返すという意味で静的である。閲覧者に応じてコンテンツを動的に生成する方法は2種類ある。

[編集] サーバサイド

WWWサーバ側に用意した特別なソフトウェアにより、ユーザのリクエストに応じたHTMLページを自動的にその場で生成する。ソフトウェアは各種スクリプト言語、プログラミング言語により作成されることが多い。また、各種データベースを利用することも多い。

主なプログラミング言語・スクリプト言語

ASP（厳密には言語ではない）
JSP（厳密には言語ではない。詳しくはJava Servlet、Javaを参照）
Perl
PHP
Python
Ruby

主なデータベース

マークアップ言語を使用するものもある

ColdFusion

XMLをHTMLに変換することも行われる

XSLT

[編集] クライアントサイド

サーバから発信した情報をクライアントサイド（ブラウザやリッチクライアント環境）が様々に解釈して動的なページを実現する。サーバからスクリプトを含めたコンテンツが送られ、クライアント側でそのスクリプトを実行するケースが多い。これによりHTMLでは表現できない装飾や動的なページが表現される。クライアント側で用いられる代表的なスクリプトとしてJavaScriptがある。実行結果が実行環境に依存するため、クリティカルな領域で使用されることは少ない。また、SEOやアクセシビリティにおいて様々な問題がある。使用する場合は、代替テキストなどが推奨される。

[編集] アクセシビリティ

あ	あ
左は絶対値（17px）、右は相対値（150%）で指定されている。左はブラウザで文字のサイズを設定しても反映されないという処理系も存在する。

ウェブデザインにおいて、訪問者の誰もが同様に情報を取得できるアクセシビリティは、重要な要素である。特に、ウェブページは訪問者のブラウザやオペレーティングシステムによっても表示結果が異なる。ウェブページを作成するのは簡単である。HTMLの知識がなくても簡単に作成できるツールやサービスがあり、たとえHTMLを誤って記述しても大抵のブラウザは正しく理解し表示することができる。しかし、訪問者がどのような環境でも同様に表示し、アクセシビリティにも考慮したウェブデザインをすることはとても難しいことである。

[編集] 注意する点

機種依存文字を使用しない。
文字コードを指定する。
ターゲットとする環境上で動作確認をする（Mac OS XなどのOS、Mozilla Firefoxなどのブラウザ）。
Web Safe Colorを使用する。
画像を使用する<img>タグにはalt属性を指定して画像の概要を説明する。

[編集] 安全性

個人情報を扱うことも多くなった近年では、ウェブサイトの運営にあたってはセキュリティに注意することも重要である。個人情報を扱う場合、SSLなどで通信の暗号化や組織の実在証明を行う、ウェブアプリケーション自体のセキュリティホール（XSSなど）が存在しないようにする、ウェブサーバなどの脆弱性には正しく対応することなどが必要である。

[編集] 脚注

[ヘルプ]

^ あらゆる局面に於いてテーブルを用いることが問題であると誤解し、表データのマークアップにすらテーブルを忌避するケースも散見される。もちろん、表データをテーブルとしてマークアップすることは適切である。
^ 最新のブラウザではCSSにおける大きな問題は解決されているが、過去のブラウザ（Microsoft Internet Explorer 4やNetscape Navigator 4など）ではそうではない。ユーザーは古いブラウザを使用し続けることが多いため、デザイナーは注意しておく必要がある。
^ http://www.adobe.com/licensing/developer/
^ http://www.adobe.com/licensing/developer/fileformat/faq/#item-1-8

[編集] 関連項目

[編集] 外部リンク

W3C - World Wide Web Consortium（英語）
UK Web Design Association（英語）
Web Design Library（英語）
Web Design Bayerischer Wald- site in german

カテゴリ: ウェブデザイン

See also ebooksgratis.com: no banners, no cookies, totally FREE.