ウェブデザイン ウェブデザインの概要

ウェブデザイン

出典: フリー百科事典『ウィキペディア(Wikipedia)』 (2020/12/07 14:28 UTC 版)

ナビゲーションに移動 検索に移動

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

ウェブページの例

歴史

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

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

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

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

また、仕様の策定も徐々に進むことで、ブラウザ開発ベンダーが仕様をサポートするブラウザを開発するようになる。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上で動画を配信するYouTubeGYAO!が公開され始める[3]。さらに2011年に発表されたBootstrapをはじめ、CSSフレームワークがオープンソースとして公開され始め、レスポンシブウェブデザインを容易に実現できるようになった。同じく2011年にはウェブブラウザ3次元コンピュータグラフィックスを表示させるための標準仕様WebGLも発表され、これによりウェブデザインの表現も3次元へと拡張されていく。

レイアウト

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

固定幅レイアウト

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

リキッドレイアウト

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

レスポンシブレイアウト

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




  1. ^ https://mayonez.jp/topic/1758
  2. ^ https://qiita.com/a_rcsin/items/0a3c8c98c8d703c49a22
  3. ^ 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/
  4. ^ a b 中村英良、他 2009, p. 10.
  5. ^ 中村英良、他 2009, pp. 67-68.
  6. ^ あらゆる局面に於いてテーブルを用いることが問題であると誤解し、表データのマークアップにすらテーブルを忌避するケースも散見される。もちろん、表データをテーブルとしてマークアップすることは適切である。
  7. ^ 最新のブラウザではCSSにおける大きな問題は解決されているが、過去のブラウザ(Microsoft Internet Explorer 6やNetscape Navigator など)ではそうではない。閲覧者は古いブラウザを使用し続けることが多いため、デザイナーは使用できるスタイルなどに注意しておく必要がある。
  8. ^ http://caniuse.com/
  9. ^ http://www.adobe.com/licensing/developer/
  10. ^ http://www.adobe.com/licensing/developer/fileformat/faq/#item-1-8


「ウェブデザイン」の続きの解説一覧



英和和英テキスト翻訳>> Weblio翻訳
英語⇒日本語日本語⇒英語
  

辞書ショートカット

すべての辞書の索引

ウェブデザインのお隣キーワード
検索ランキング

   

英語⇒日本語
日本語⇒英語
   



ウェブデザインのページの著作権
Weblio 辞書情報提供元は参加元一覧にて確認できます。

  
ウィキペディアウィキペディア
All text is available under the terms of the GNU Free Documentation License.
この記事は、ウィキペディアのウェブデザイン (改訂履歴)の記事を複製、再配布したものにあたり、GNU Free Documentation Licenseというライセンスの下で提供されています。 Weblio辞書に掲載されているウィキペディアの記事も、全てGNU Free Documentation Licenseの元に提供されております。

©2022 GRAS Group, Inc.RSS