Webデザインとは？わかりやすく解説

ウェブデザイン（英: 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属性を指定して画像の概要を説明する。（テキストブラウザや読み上げ式ユーザーエージェントへの配慮）
前景色と背景色のコントラストを大きくする。（視覚障害や印刷した場合への配慮）
言語コードを明示する。部分的に言語が異なる場合は、その部分についても言語コードを明示する。（読み上げ式ユーザーエージェントへの配慮）
文字コードを明示する。
機種依存文字を使用しない。

安全性

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

注釈

[脚注の使い方]

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

出典

参考文献

中村英良、他『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

[1]

[2]

[3]

[4]

[5]

[注釈 1]

[注釈 2]

[6]

[7]

[8]

Webデザインとは？わかりやすく解説

ウェブデザイン

歴史