ウェブデザインとは？わかりやすく解説

ウェブデザイン（英: 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]。また、通信への回線の高速化と料金値下げなどからコンテンツの質も向上し、同年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タグを用いることであった。グリッドレイアウトのようにページを細かくレイアウトするためには、しばしば入れ子にされた何重ものテーブルが必要とされた。本来、テーブルはレイアウトではなく、表データのためだけに使われなければならないものだ^{[注釈 1]}。

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

HTML5とCSS3が仕様策定されて以降は特に、多くのブラウザがCSSを最大限に実装している^{[注釈 2]}^[6] ことや、HTML5においてテーブルを用いたレイアウトがmust notという強い言葉で禁止されたこと、ユニバーサルデザインを重視する観点からアクセシビリティの確保やユーザビリティの向上を目指してデザインが行われるようになったことなどを根拠に、CSSを用いてレイアウトを行うことは、ウェブデザイナーの共通認識として確立されつつある。

Flash

Adobe Flashは、ブラウザによってウェブ上に動的な内容と様々なメディア、対話的なページを作成することができる。しかしSafariなどFlashをサポートしていないブラウザもあること、セキュリティ上の脆弱性が存在することなどに問題がある。このため、アクセシビリティの観点からは、代替のHTMLを用意することが望ましいとされる。

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

なお、そして2020年末にFlash Playerの開発と配布が終了する予定であると開発元アドビから発表されている。

動的ウェブ技術

閲覧者や時に応じたコンテンツをアクセス時に生成する方法には2種類ある。

サーバサイド

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

主フレームワーク

ASP
JSP（詳しくはJava Servlet、Javaを参照）
ColdFusion

主な言語

Perl言語
PHP言語
Python言語
Ruby言語

主なデータベース

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

XSLT

クライアントサイド

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

アクセシビリティ

ウェブデザインにおいて、訪問者の誰もが正しく情報を取得できるアクセシビリティは、重要な要素である。どのようなユーザーエージェントを使う場合でも訪問者が内容を正しく取得できるようにアクセシビリティにも考慮したウェブデザインをすることはとても望ましいことである。

注意する点

特定のユーザーエージェントでしか表示・読み上げできないようなコンテンツは避ける。
特定のスタイルシートを適用しない場合でも記事を正しく読めるようにする。
動的なコンテンツ（スクリプトやアプレットなど）が動作しない環境でも記事の内容を読めるようにする。あるいは、動的なコンテンツを使用しない。
画像を表示できない環境でも内容を正しく読めるようにする。画像を使用する場合には、img要素のalt属性を指定して画像の概要を説明する。（テキストブラウザや読み上げ式ユーザーエージェントへの配慮）
前景色と背景色のコントラストを大きくする。（視覚障害や印刷した場合への配慮）
言語コードを明示する。部分的に言語が異なる場合は、その部分についても言語コードを明示する。（読み上げ式ユーザーエージェントへの配慮）
文字コードを明示する。
機種依存文字を使用しない。

職業

ウェブサイトの制作には、主にウェブデザイナーとウェブデベロッパーの2つのタスクがあり、ウェブデベロッパーはウェブサイトを制作する際に密接に協力し合うことが多い^[9]。ウェブデザイナーは、ウェブページのレイアウト、配色、タイポグラフィを含むビジュアル面を担当する。ウェブデザイナーは、HTMLやCSSなどのマークアップ言語にも精通している必要がありますが、その習熟度はウェブデザイナーによって異なります。特に小規模な組織では、ウェブページ全体のデザインとプログラミングに必要なスキルが一人に求められますが、大規模な組織では、ウェブデザイナーがビジュアル・コンポーネントのみを担当することもあります。

ウェブサイト制作に関わるその他の課題には、以下のようなものがある：。

ロゴ、レイアウト、ボタンなど、ウェブサイトのビジュアル要素を作成するグラフィックデザイナー^[10]。
インターネット・マーケティングの専門家は、オンライン・マーケティングとプロモーションのテクニックを駆使し、ウェブサイトへの訪問者を引き付ける戦略的ソリューションで、オンライン・プレゼンスの維持を支援する^[11]。
SEOの専門家は、よりアクセスしやすく、多くの検索エンジンで見つけられるように、特定のウェブサイトに含めるべき適切な言葉を調査し、推奨します^[12]^[13]。
インターネット・コピーライターが、サイトのターゲット層にアピールするページのテキスト・コンテンツを作成。
(UX)ユーザーエクスペリエンスデザイナーは、情報アーキテクチャ、ユーザー中心設計、ユーザーテスト、インタラクション設計、時にはビジュアル設計を含むユーザー中心設計の側面を考慮する^[14]^[15]。

安全性

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

注釈

[脚注の使い方]

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

出典

^ https://mayonez.jp/topic/1758
^ https://qiita.com/a_rcsin/items/0a3c8c98c8d703c49a22
^ http://sandsun.jp/column/video-marketing/web%E5%8B%95%E7%94%BB-%E5%A4%89%E5%8C%96%E3%81%AE%E6%AD%B4%E5%8F%B2%E3%80%821995%E5%B9%B4%E8%AA%95%E7%94%9F%E3%80%9C/
^ ^a ^b 中村英良、他 2009, p. 10.
^ 中村英良、他 2009, pp. 67–68.
^ http://caniuse.com/
^ http://www.adobe.com/licensing/developer/
^ http://www.adobe.com/licensing/developer/fileformat/faq/#item-1-8
^ “Web Designer vs. Web Developer: What’s the Difference?”. insightglobal.com. 2025年3月20日閲覧。
^ “Web Design”. www.design-hero.com. 2025年3月20日閲覧。
^ “Digital Marketing Tactics to Enhance Your Online Presence”. www.geekschip.com. 2025年3月20日閲覧。
^ “Use the Right Keywords to Create Killer Titles”. www.woorank.com. 2025年3月20日閲覧。
^ “How To Do Keyword Research: A Step-by-Step Guide to SEO Keywords”. victorious.com. 2025年3月20日閲覧。
^ “What is User Experience (UX) Design?”. www.interaction-design.org. 2025年3月20日閲覧。
^ “UX Design: Top 12 Important Things You Should Know About User Experience”. idreamcareer.com. 2025年3月20日閲覧。

参考文献

中村英良、他『Webデザインの基本ルール [デザインラボ] ープロに学ぶ、一生枯れない永久不滅テクニックー』ソフトバンククリエイティブ株式会社、2009年。ISBN 978-4-7973-5443-0。

外部リンク

[6] あらゆる局面に於いてテーブルを用いることが問題であると誤解し、表データのマークアップにすらテーブルを忌避するケースも散見される。もちろん、表データをテーブルとしてマークアップすることは適切である。

[7] 最新のブラウザではCSSにおける大きな問題は解決されているが、過去のブラウザ（Microsoft Internet Explorer 6やNetscape Navigator など）ではそうではない。閲覧者は古いブラウザを使用し続けることが多いため、デザイナーは使用できるスタイルなどに注意しておく必要がある。

[1] ttps://mayonez.jp/topic/1758

[2] ttps://qiita.com/a_rcsin/items/0a3c8c98c8d703c49a22

[3] ttp://sandsun.jp/column/video-marketing/web%E5%8B%95%E7%94%BB-%E5%A4%89%E5%8C%96%E3%81%AE%E6%AD%B4%E5%8F%B2%E3%80%821995%E5%B9%B4%E8%AA%95%E7%94%9F%E3%80%9C/

[FOOTNOTE中村英良、他200910-4] 中村英良、他 2009, p. 10.

[FOOTNOTE中村英良、他200967–68-5] 中村英良、他 2009, pp. 67–68.

[8] ttp://caniuse.com/

[9] ttp://www.adobe.com/licensing/developer/

[10] ttp://www.adobe.com/licensing/developer/fileformat/faq/#item-1-8

[11] “Web Designer vs. Web Developer: What’s the Difference?”. insightglobal.com. 2025年3月20日閲覧。

[12] “Web Design”. www.design-hero.com. 2025年3月20日閲覧。

[13] “Digital Marketing Tactics to Enhance Your Online Presence”. www.geekschip.com. 2025年3月20日閲覧。

[14] “Use the Right Keywords to Create Killer Titles”. www.woorank.com. 2025年3月20日閲覧。

[15] “How To Do Keyword Research: A Step-by-Step Guide to SEO Keywords”. victorious.com. 2025年3月20日閲覧。

[16] “What is User Experience (UX) Design?”. www.interaction-design.org. 2025年3月20日閲覧。

[17] “UX Design: Top 12 Important Things You Should Know About User Experience”. idreamcareer.com. 2025年3月20日閲覧。

[1]

[2]

[3]

[4]

[5]

[注釈 1]

[注釈 2]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]


	All text is available under the terms of the GNU Free Documentation License. この記事は、ウィキペディアのウェブデザイン (改訂履歴)の記事を複製、再配布したものにあたり、GNU Free Documentation Licenseというライセンスの下で提供されています。 Weblio辞書に掲載されているウィキペディアの記事も、全てGNU Free Documentation Licenseの元に提供されております。
TANAKA Corpus	Tanaka Corpusのコンテンツは、特に明示されている場合を除いて、次のライセンスに従います： Creative Commons Attribution (CC-BY) 2.0 France.
京大-NICT 日英中基本文データ	この対訳データはCreative Commons Attribution 3.0 Unportedでライセンスされています。
	Copyright © 1995-2025 Hamajima Shoten, Publishers. All rights reserved.
	Copyright © Benesse Holdings, Inc. All rights reserved.
	Copyright (c) 1995-2025 Kenkyusha Co., Ltd. All rights reserved.
	日本語ワードネット1.1版 (C) 情報通信研究機構, 2009-2010 License All rights reserved. WordNet 3.0 Copyright 2006 by Princeton University. All rights reserved. License
	Copyright (C) 1994- Nichigai Associates, Inc., All rights reserved. 「斎藤和英大辞典」斎藤秀三郎著、日外アソシエーツ辞書編集部編
	This page uses the JMdict dictionary files. These files are the property of the Electronic Dictionary Research and Development Group, and are used in conformance with the Group's licence.

ウェブデザインとは？わかりやすく解説

ウェブデザイン

歴史