ウェブデザイン

歴史

世界最初のウェブデザイナーはティム・バーナーズ＝リーであったと言える。彼は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を使用したデザインが注目されるようになり、この頃よりDreamweaverやホームページ・ビルダーといったWebオーサリングツールが発売され始める。
ウェブデザインはコンピュータの進化とともに表現方法を多岐に広めていった。2005年、Googleは、JavascriptのAjax技術を使ったGoogle Mapを発表し、 非同期通信による通信結果に応じてダイナミックHTMLで動的にページの一部を書き換える有用性を広く知らしめた。また、通信への回線の高速化と料金値下げなどからコンテンツの質も向上し、同年2005年にはWeb上で動画を配信するYouTubeやGYAO!が公開され始める。さらに2011年に発表されたBootstrapをはじめ、CSSフレームワークがオープンソースとして公開され始め、レスポンシブウェブデザインを容易に実現できるようになった。同じく2011年にはウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様WebGLも発表され、これによりウェブデザインの表現も3次元へと拡張されていく。

レイアウト

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

固定幅レイアウト

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

リキッドレイアウト

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

レスポンシブレイアウト

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

デザインの分離

HTML4ではウェブページの見た目にはCSSなどのスタイルシートを用いることを推奨している。デザインの原則として、HTMLは文書構造を記述し、デザインはCSSで記述する。これに反する代表的な例として、tableタグによるレイアウトが挙げられる。Netscape Navigator 4.xがブラウザ市場を支配していた時代、ウェブページをレイアウトするのにデザイナーが利用した人気の手法はtableタグを用いることであった。グリッドレイアウトのようにページを細かくレイアウトするためには、しばしば入れ子にされた何重ものテーブルが必要とされた。本来、テーブルはレイアウトではなく、表データのためだけに使われなければならないものだ。
ブラウザ戦争末期、CSSを比較的よく実装していたMicrosoft Internet Explorerが市場を支配するようになると、ウェブデザイナーはページをレイアウトする手法としてCSSを利用し始めた。
HTML5とCSS3が仕様策定されて以降は特に、多くのブラウザがCSSを最大限に実装している ことや、HTML5においてテーブルを用いたレイアウトがmust notという強い言葉で禁止されたこと、ユニバーサルデザインを重視する観点からアクセシビリティの確保やユーザビリティの向上を目指してデザインが行われるようになったことなどを根拠に、CSSを用いてレイアウトを行うことは、ウェブデザイナーの共通認識として確立されつつある。

Flash

Adobe Flashは、ブラウザによってウェブ上に動的な内容と様々なメディア、対話的なページを作成することができる。しかしSafariなどFlashをサポートしていないブラウザもあること、セキュリティ上の脆弱性が存在することなどに問題がある。このため、アクセシビリティの観点からは、代替のHTMLを用意することが望ましいとされる。
Flashのファイルフォーマットは私企業であるアドビシステムズ（旧マクロメディア）が策定しており、その仕様は公開されている。ライセンス上、仕様書を利用してそのファイルフォーマットのインタプリタを開発することはできない が、ファイルを出力するソフトウェアを実装することは誰にでも可能である。
なお、そして2020年末にFlash Playerの開発と配布が終了する予定であると開発元Adobeから発表されている。

動的ウェブ技術

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

クライアントサイド

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

アクセシビリティ

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

安全性

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

出典

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