この記事は検証可能な参考文献や出典が全く示されていないか、不十分です。
出典を追加して記事の信頼性向上にご協力ください。（2017年10月）

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

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

1 歴史

2 レイアウト

2.1 固定幅レイアウト

2.2 リキッドレイアウト

2.3 レスポンシブレイアウト


3 問題

3.1 デザインの分離

3.2 Flash


4 動的ウェブ技術

4.1 サーバサイド

4.2 クライアントサイド


5 アクセシビリティ

5.1 注意する点


6 安全性

7 脚注

8 関連項目

9 出典

10 外部リンク

歴史

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

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

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

1990年代後半では、FlashやSilverlightをはじめとするリッチクライアントの登場により、動きのある高機能なウェブデザインが登場し始める。

また、仕様の策定も徐々に進むことで、ブラウザ開発ベンダーが仕様をサポートするブラウザを開発するようになる。1996年にはCSS 1.0が勧告、1997年はJavaScriptの中核的な仕様がECMAScriptとして標準化され、同年HTML 4.0もW3Cより勧告された。標準化されたCSSをサポートするブラウザが登場することにより、CSSを使用したデザインが注目されるようになり[1]、この頃よりDreamweaverやホームページ・ビルダーといったWebオーサリングツールが発売され始める。

ウェブデザインはコンピュータの進化とともに表現方法を多岐に広めていった。2005年、Googleは、JavascriptのAjax技術を使ったGoogle Mapを発表し、 非同期通信による通信結果に応じてダイナミックHTMLで動的にページの一部を書き換える有用性を広く知らしめた[2]。また、通信への回線の高速化と料金値下げなどからコンテンツの質も向上し、同年2005年にはWeb上で動画を配信するYouTubeやGYAO!が公開され始める[3]。さらに2011年に発表されたBootstrapをはじめ、CSSフレームワークがオープンソースとして公開され始め、レスポンシブウェブデザインを容易に実現できるようになった。同じく2011年にはウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様WebGLも発表され、これによりウェブデザインの表現も3次元へと拡張されていく。
レイアウト詳細は「ウェブユーザーインターフェース」を参照

ウェブページは、閲覧者が使用するブラウザのウィンドウによりデザイン領域を制限されている。その中でどのようにレイアウトするかがひとつの課題である。レイアウトの手法には下記のようなデザインが代表される。
固定幅レイアウト

ウェブページに含まれるコンテンツの横幅を固定幅で設定する表示方法[4]。デザイナーはブラウザのウィンドウサイズに左右されず、イメージ通りの表示結果を得ることができる。例えば、Yahoo! JAPANのトップページは幅950pxの固定幅でレイアウトされている（2017年10月現在 [1]）。これは最低画面解像度XGA(1024×768px)のディスプレイで最適に表示されるようになっている。
リキッドレイアウト

画面サイズに合わせてレイアウト幅を変更する方法[4]。固定幅レイアウトでは画面サイズにより過剰な余白やコンテンツが入りきらない問題があったが、画面サイズにより柔軟な表現が可能となる。例えば、ウィキペディアのこのページはその手法がとられている（2017年10月現在）。
レスポンシブレイアウト詳細は「レスポンシブウェブデザイン」を参照

携帯電話あるいはスマートフォンの普及により、パソコン以外のデバイスでウェブページを閲覧する場面が増えたことで、どのようなデバイスでもレイアウトがきれいに表示できるようにする方法。メディアクエリなどによりアクセス元のデバイスサイズを判別してそれによりレイアウトを切り替えることができる。
問題
デザインの分離

HTML4ではウェブページの見た目にはCSSなどのスタイルシートを用いることを推奨している。デザインの原則として、HTMLは文書構造を記述し、デザインはCSSで記述する[5]。これに反する代表的な例として、tableタグによるレイアウトが挙げられる。Netscape Navigator 4.xがブラウザ市場を支配していた時代、ウェブページをレイアウトするのにデザイナーが利用した人気の手法はtableタグを用いることであった。