グレイスフル・デグラデーションとは何か？プログレッシブ・エンハンスメントとの違いを含めて解説
グレイスフル・デグラデーションの概要
グレイスフル・デグラデーション（graceful degradation）とは、システムが破壊されたり操作不能になったりした場合に、システムダウンを発生させずに限られた機能を維持できるように設計する手法です。
ウェブサイトだけでなく、機械や電子システム、セキュリティシステムなどにも実装されています。
ウェブ開発におけるグレイスフル・デグラデーション
ウェブサイトやアプリケーションを開発する際の課題の１つにユーザビリティがあります。ウェブサイトへのアクセスに使用されるブラウザは常に最新のものとは限らず、古いブラウザだと正常に表示されない可能性があるからです。
このため、開発者はユーザビリティのために、どのブラウザでもウェブサイトが表示されるよう設計しなければなりません。
グレイスフル・デグラデーションは、最新のブラウザの機能に合わせて開発したウェブサイトやアプリケーションの機能を制限することで古いブラウザでも表示できるように設計する手法です。
旧バージョンのブラウザを使って動作しない機能を確認して削除し、代替となるテキストや画像を用意します。
モバイル最適化もグレイスフル・デグラデーションの活用例の１つです。
ウェブサイトのデスクトップ版を開発した後にモバイルデバイスでも表示できるように機能やデザインを調整していきます。
グレイスフル・デグラデーションを実装するメリット
グレイスフル・デグラデーションにより、ユーザビリティが向上します。
古いバージョンのブラウザやモバイルデバイスを使用していてもウェブサイトが表示されるからです。
ただし、機能が制限されていたりウェブサイトの見た目が最新のブラウザで表示されるものと異なったりする可能性はあります。
グレイスフル・デグラデーションが実装されていない場合は、新しいブラウザをダウンロードしないとウェブサイトが表示されません。
グレイスフル・デグラデーションによって機能は制限されてもウェブサイト自体が表示されることで、ユーザーがウェブサイトから離れる可能性も低くなります。
プログレッシブ・エンハンスメントとの違い
グレイスフル・デグラデーションと同様に新旧どのバージョンのブラウザを使ってもウェブサイトが表示されるように開発する手法の１つにプログレッシブ・エンハンスメントがあります。
両者の主な違いは、設計をどこから始めるかです。
- グレイスフル・デグラデーション…最新のブラウザの機能を備えたウェブサイトやアプリケーションを開発し、古いブラウザに合わせて機能を削除する。
- プログレッシブ・エンハンスメント…新旧すべてのブラウザがサポートする基本機能を備えたウェブサイトやアプリケーションを開発し、最新のブラウザの機能を追加していく。
グレイスフル・デグラデーションの例
「このページを印刷する」リンク
航空券の予約ページなど、印刷を前提としたウェブサイトには画面上にも「印刷」ボタンが配置されています。
ところが、使用しているブラウザでJavaScriptが無効になっている場合や一部のモバイルデバイスなどでは「このページを印刷する」リンクが機能しません。
そのような場合にはグレイスフル・デグラデーションにより、リンクが機能していない可能性とその理由、代替ソリューション等をユーザーに表示します。
以下のソースコードでは、印刷できなかった場合に「noscript」タグの内容を表示するという機能の低下を実現させています。
<p id="printthis">
<a href="javascript:window.print()">このページを印刷する</a>
</p>
<noscript>
<p class="scriptwarning">
ページを印刷するには JavaScript が必要です。
JavaScriptをブラウザで有効にしてください。
</p>
</noscript>