creatersnest

【Web制作】プログレッシブ・エンハンスメントの考え方とは?それを取り入れる必要性は?


近年、Webサイト制作者にとって一般的となったプログレッシブ エンハンスメント
という概念。頻繁に耳にされている方も多いのではないかと思います。
一体、どのような考え方なのでしょうか。
今回は、この概念について説明をしていきます。

 

プログレッシブ エンハンスメント以前の概念

 

プログレッシブ エンハンスメントという考え方が主流となる以前は、クロスブラウ
という考え方が一般的でした。

 

クロスブラウザとは、IE,Google Chrome,Firefox,Safari等の主要ブラウザ間でのソ
ースコードの解釈の違いを考慮して、どのブラウザ環境においても同じ表示や動作
ができるようにソースコードを記述するという概念のことです。

 

Webサイト制作者は、実装前にWeb標準の仕様を正しく理解し、その仕様に沿って
実装していきますが、仕様に対する解釈もブラウザごとに少しずつ違っているため
仕様に準拠つつ調整しながら実装していくというプロセスが必要でした。

 

表示例を見てみましょう。
sample_3同じ条件でもブラウザやバージョンによって表示結果に少しずつ差が見られますね。
これがブラウザごとの解釈の違いです。

 

 

プログレッシブ エンハンスメントという概念と必要性

sample2

近年、Webブラウザの進化は加速しておりHTML5やCSS3に対応可能なモダンブラ
ウザも多くなりました。
さらに様々なデバイスが開発されており、Webにアクセスする際の利用環境の多様
化が進んでいます。

 

このような環境の中で、全てのブラウザや全ての端末の表示や動きを合わせること
はWebサイト制作者にとってはとても大変なことです。

 

そこで焦点を当てられたのがプログレッシブ エンハンスメントという概念となりま
す。

 

どのようなブラウザ環境であっても必要最低限情報がきちんと表示されるように制
作しつつ、新しい環境が整っているモダンブラウザユーザーにはよりリッチな表現
でコンテンツを提供していきましょうという考え方です。

 

 

実際の例を見てみましょう。
samplehttps://www.ana.co.jp/

左:Google Chrome、右:IE7で表示したものです。
赤枠の部分の表示に違いが見られますね。

 

プログレッシブ エンハンスメントは、ブラウザ間の互換性重視のクロスブラウザに
比べて、コンテンツ重視の考え方です。

 

この概念でWebサイトを制作することによって、新しいブラウザにと古いブラウザ
で提供するものを変えることが可能となりました。

 

新しい技術を使いリッチな表現も手軽に行うことができます。

 

まとめ

いかがでしたでしょうか。
Webブラウザを取り囲む環境の変化や多様化によって、Webサイト制作の方法や概
念も必要に応じて変わってきたことが分かります。
新しいものと古いものをどのように扱っていくべきか今後も考えていく必要がある
のではないでしょうか。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleどの形式で保存すればいいの?GIF,JPEG,PNGそれぞれの特徴