ウェブデザイン （英 : web design ）は、デザイン の一種。ウェブページ やウェブサイト における視覚面（意匠・要素配置等）に対し、整理・再構築・意匠等を施すことである。グラフィックデザイン 的な要素を多く含む一方で、対話的な要素を持つWWW （ウェブ）の性格上、情報デザイン あるいは工業デザイン 的なスキルも求められる。ウェブデザインを行うデザイナー を、ウェブデザイナー と呼ぶ。2007年 より、ウェブの設計技能を検定する国家資格としてウェブデザイン技能士
ウェブデザインの内容は、ウェブサイト全体の情報設計、見た目を中心とするグラフィックデザイン やGUI の設計、ウェブアプリケーション のUI 設計構築など多岐にわたる。
ウェブページの例
世界最初のウェブデザイナーはティム・バーナーズ＝リー であったと言える。彼は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] YouTube やGYAO! が公開され始める[ 3] 2011年 に発表されたBootstrap をはじめ、CSSフレームワークがオープンソース として公開され始め、レスポンシブウェブデザイン を容易に実現できるようになった。同じく2011年にはウェブブラウザ で3次元コンピュータグラフィックス を表示させるための標準仕様WebGL も発表され、これによりウェブデザインの表現も3次元へと拡張されていく。
ウェブページは、閲覧者が使用するブラウザ のウィンドウ によりデザイン領域を制限されている。その中でどのようにレイアウト するかがひとつの課題である。レイアウトの手法には下記のようなデザインが代表される。
ウェブページに含まれるコンテンツの横幅を固定幅で設定する表示方法。デザイナーはブラウザのウィンドウサイズに左右されず、イメージ通りの表示結果を得ることができる。例えば、Yahoo! JAPAN のトップページは幅950pxの固定幅でレイアウトされている（2017年 10月 現在 [1] ）。これは最低画面解像度 XGA(1024×768px)のディスプレイ で最適に表示されるようになっている。
画面サイズに合わせてレイアウト幅を変更する方法。固定幅レイアウトでは画面サイズにより過剰な余白やコンテンツが入りきらない問題があったが、画面サイズにより柔軟な表現が可能となる。例えば、ウィキペディア のこのページはその手法がとられている（2017年10月現在）。
携帯電話あるいはスマートフォンの普及により、パソコン以外のデバイスでウェブページを閲覧する場面が増えたことで、どのようなデバイスでもレイアウトがきれいに表示できるようにする方法。メディアクエリ などによりアクセス元のデバイスサイズを判別してそれによりレイアウトを切り替えることができる。
HTML 4ではウェブページの見た目にはCSS などのスタイルシート を用いることを推奨している。デザインの原則として、HTMLは文書構造を記述し、デザインはCSSで記述する。これに反する代表的な例として、tableタグによるレイアウトが挙げられる。Netscape Navigator 4.xがブラウザ市場を支配していた時代、ウェブページをレイアウトするのにデザイナーが利用した人気の手法はtableタグを用いることであった。グリッドレイアウト のようにページを細かくレイアウトするためには、しばしば入れ子 にされた何重ものテーブルが必要とされた。本来、テーブルはレイアウトではなく、表データのためだけに使われなければならないものだ[ 注釈 1]
ブラウザ戦争 末期、CSSを比較的よく実装していたMicrosoft Internet Explorer が市場を支配するようになると、ウェブデザイナーはページをレイアウトする手法としてCSSを利用し始めた。
HTML5とCSS3が仕様策定されて以降は特に、多くのブラウザがCSSを最大限に実装している[ 注釈 2] [ 6] must not という強い言葉で禁止されたこと、ユニバーサルデザイン を重視する観点からアクセシビリティ の確保やユーザビリティ の向上を目指してデザインが行われるようになったことなどを根拠に、CSSを用いてレイアウトを行うことは、ウェブデザイナーの共通認識として確立されつつある。
Flash
Adobe Flash は、ブラウザによってウェブ上に動的な内容と様々なメディア、対話的なページを作成することができる。しかしSafari などFlashをサポートしていないブラウザもあること、セキュリティ上の脆弱性が存在することなどに問題がある。このため、アクセシビリティ の観点からは、代替のHTMLを用意することが望ましいとされる。
Flashのファイルフォーマット は私企業 であるアドビ （旧マクロメディア 、アドビシステムズ）が策定しており、その仕様は公開されている[ 7] インタプリタ を開発することはできない[ 8]
なお、そして2020年末にFlash Playerの開発と配布が終了する予定であると開発元アドビから発表されている。
閲覧者や時に応じたコンテンツをアクセス時に生成する方法には2種類ある。
WWWサーバ 側に用意した特別なソフトウェア により、ユーザのリクエストに応じたHTMLページを自動的にその場で生成する。ソフトウェアは各種プログラミング言語 により作成されることが多い。また、各種データベース を利用することも多い。
主フレームワーク 主な言語 主なデータベース XMLをHTMLに変換することも行われる
サーバから発信した情報をクライアントサイド （ブラウザやリッチクライアント 環境）が様々に解釈して動的なページを実現する。サーバからスクリプトやアプレットを含めたコンテンツを送り、クライアント側でそのスクリプトやアプレットを実行する。これによりHTMLでは表現できない装飾や動的なページが表現される。クライアント側で用いられる代表的なスクリプト言語はJavaScript である。実行結果が実行環境に依存するため、金銭を扱う場合など僅かな間違いも許されないような場合には使用されることは少ない。また、SEO やアクセシビリティにおいて様々な問題がある。使用する場合は、代替テキストなどが推奨される。
ウェブデザインにおいて、訪問者の誰もが正しく情報を取得できるアクセシビリティ は、重要な要素である。どのようなユーザーエージェント を使う場合でも訪問者が内容を正しく取得できるようにアクセシビリティにも考慮したウェブデザインをすることはとても望ましいことである。
特定のユーザーエージェントでしか表示・読み上げできないようなコンテンツは避ける。
特定のスタイルシートを適用しない場合でも記事を正しく読めるようにする。
動的なコンテンツ（スクリプトやアプレットなど）が動作しない環境でも記事の内容を読めるようにする。あるいは、動的なコンテンツを使用しない。
画像を表示できない環境でも内容を正しく読めるようにする。画像を使用する場合には、img要素のalt属性
前景色と背景色のコントラストを大きくする。（視覚障害や印刷した場合への配慮）
言語コード を明示する。部分的に言語が異なる場合は、その部分についても言語コードを明示する。（読み上げ式ユーザーエージェントへの配慮）文字コード を明示する。機種依存文字 を使用しない。
個人情報を扱うことも多くなった近年では、ウェブサイトの運営にあたってはセキュリティ に注意することも重要である。個人情報を扱う場合、TLS などで通信の暗号化 や組織の実在 証明 を行う、ウェブアプリケーション自体のセキュリティホール（XSS など）が存在しないようにする、ウェブサーバなどの脆弱性 には正しく対応することなどが必要である。
^ あらゆる局面に於いてテーブルを用いることが問題であると誤解し、表データのマークアップにすらテーブルを忌避するケースも散見される。もちろん、表データをテーブルとしてマークアップすることは適切である。
^ 最新のブラウザではCSSにおける大きな問題は解決されているが、過去のブラウザ（Microsoft Internet Explorer 6やNetscape Navigator など）ではそうではない。閲覧者は古いブラウザを使用し続けることが多いため、デザイナーは使用できるスタイルなどに注意しておく必要がある。
中村英良、他『Webデザインの基本ルール [デザインラボ] ープロに学ぶ、一生枯れない永久不滅テクニックー』ソフトバンククリエイティブ株式会社、2009年。ISBN 978-4-7973-5443-0 。
