ウェブデザイン

ウェブデザインの歴史は比較的浅いものの、グラフィックデザイン、ユーザーエクスペリエンス、マルチメディアアートなどの他の分野と関連付けられることもありますが、技術的な観点から捉える方がより適切でしょう。ウェブデザインは人々の日常生活の大きな部分を占めるようになりました。アニメーショングラフィック、さまざまなスタイルのタイポグラフィ、背景、ビデオ、音楽のないインターネットを想像するのは難しいでしょう。ワールドワイドウェブは1991年8月6日に発表され、1992年11月にはCERNがワールドワイドウェブ上で最初に公開されたウェブサイトとなりました。この時期、ウェブサイトは<table>タグを使用して構造化され、ウェブサイト上に番号が作成されました。最終的に、ウェブデザイナーはそれを回避してより多くの構造とフォーマットを作成する方法を見つけました。ウェブの初期の歴史では、ウェブサイトの構造は脆弱で管理が難しく、そのため使用が非常に困難でした。1993年11月には、ALIWEBが史上初の検索エンジンとして作成されました。^{[ 2 ]}

ウェブデザインの進化

1996 年、マイクロソフトは、機能と HTML タグを備えた初の競合ブラウザをリリースしました。これはまた、当時は難解なオーサリング技術と見なされていたスタイル シートをサポートした最初のブラウザでもありましたが、今日では Web デザインの重要な側面となっています。 ^{[ 6 ]}テーブル用の HTMLマークアップは、元々は表形式のデータを表示することを目的としていました。しかし、デザイナーは、それまで不可能だった複雑な複数列のレイアウトを作成するために HTML テーブルを使用する可能性にすぐに気づきました。この頃は、デザインと美観が優れたマークアップ構造よりも優先されているように見えたため、意味論とWeb アクセシビリティにはほとんど注意が払われませんでした。HTML サイトは、デザイン オプションが限られており、HTML の初期バージョンではさらに限られていました。複雑なデザインを作成するために、多くの Web デザイナーは複雑なテーブル構造を使用したり、空のテーブル セルが崩れないように空白のスペーサ .GIF画像を使用したりしなければなりませんでした。^{[ 7 ]} CSS は、プレゼンテーションとレイアウトをサポートするために、1996 年 12 月にW3Cによって導入されました。これにより、HTMLコードは意味論的であると同時にプレゼンテーション的である必要がなくなり、ウェブのアクセシビリティが向上しました。テーブルレスのウェブデザインを参照してください。

1996年にFlash（当初はFutureSplashとして知られていた）が開発されました。当時、Flashコンテンツ開発ツールは現在に比べて比較的シンプルで、基本的なレイアウトツールと描画ツール、ActionScriptの限定的な前身、タイムラインを使用していましたが、WebデザイナーがHTML、アニメーションGIF、JavaScriptの範囲を超えることを可能にしました。しかし、Flashにはプラグインが必要だったため、多くのWeb開発者は互換性の欠如により市場シェアが制限されることを恐れてFlashの使用を避けていました。代わりに、デザイナーはGIFアニメーション（モーショングラフィックスの使用を完全に諦めない場合）とウィジェット用のJavaScriptに戻りました。しかし、Flashの利点により、特定のターゲット市場の間で十分に人気が高まり、最終的には大多数のブラウザに普及し、サイト全体を開発するために使用できるほど強力になりました。^{[ 7 ]}

21世紀に入って以来、ウェブは人々の生活にますます深く浸透してきた。それに伴い、ウェブ技術も進化を続けてきた。また、人々がウェブを利用しアクセスする方法にも大きな変化が生じ、ウェブサイトのデザインにも変化をもたらしている。

ブラウザ戦争終結後、新しいブラウザが数多くリリースされた。これらの多くはオープンソースであり、開発スピードが速く、新しい標準規格への対応も優れている。多くのユーザーは、これらの新しいブラウザはマイクロソフトのInternet Explorerよりも優れていると考えている。

W3Cは、HTML（ HTML5）とCSS（CSS3 ）の新しい標準規格、および新しいJavaScript APIをそれぞれ独立した標準規格としてリリースしました。HTML5という用語は、新しいバージョンのHTMLと一部のJavaScript APIを指す場合にのみ使用されますが、新しい標準規格群全体（HTML5、CSS3、JavaScript）を指す場合にも一般的に使用されるようになっています。

3GやLTEといったインターネット接続の普及に伴い、ウェブサイトへのアクセスの大部分がモバイル端末へと移行しました。この変化はウェブデザイン業界にも影響を与え、より軽快でミニマルなスタイルへと向かわせました。その結果、「モバイルファースト」のアプローチが生まれ、モバイル端末での表示を最優先にウェブサイトをデザインし、それをより大きな画面サイズに適応させるという考え方が重視されるようになりました。

ウェブデザインでよく使われるツールの1つにUXデザインがあります。現代のウェブデザインアートで人気の高い手法で、ユーザーフレンドリーなインターフェースと適切なプレゼンテーションが特徴です。^{[ 11 ]}

ウェブサイトのマーケティングおよびコミュニケーションデザインでは、ターゲット市場に効果的なものを特定することができます。これは年齢層や特定の文化の流れである可能性があり、デザイナーはオーディエンスのトレンドを理解することができます。デザイナーは、デザインしているウェブサイトの種類も理解する必要があります。たとえば、企業間取引（B2B）ウェブサイトのデザインに関する考慮事項は、小売業やエンターテイメント業などの消費者向けウェブサイトとは大きく異なる可能性があります。特にB2Bウェブサイトでは、サイトの美観や全体的なデザインがコンテンツの明瞭さや正確さ、またはウェブナビゲーションの容易さと矛盾しないように、慎重に検討する必要があります^{[ 12 ]}。デザイナーは、サイトが代表する所有者または企業の評判も考慮し、好意的に表現されるようにします。ウェブデザイナーは通常、サイトの機能に関してサイトの開発を監督し、ビジネスニーズに応じて変更を開始することがよくあります。テキスト、写真、グラフィック、レイアウトなどの要素を変更する場合があります。ウェブサイトの作業を開始する前に、ウェブデザイナーは通常、クライアントとアポイントメントを取り、レイアウト、色、グラフィック、デザインについて話し合います。ウェブデザイナーは、時間の大部分をサイトの設計と満足のいくパフォーマンスの確保に費やします。彼らは通常、マーケティングの問題やウェブサイトのレイアウトと構成について、他のデザイナーとテストやコミュニケーションを行います。^{[ 13 ]}

ユーザーがウェブサイトの内容を理解するには、ウェブサイトの仕組みを理解する必要がある。これはユーザーエクスペリエンスデザインの一部である。ユーザーエクスペリエンスは、ウェブサイトのレイアウト、明確な指示、ラベル付けに関連している。ユーザーがサイト上でどのように操作できるかをどれだけよく理解しているかは、サイトのインタラクティブデザインにも依存する可能性がある。ユーザーがウェブサイトの有用性を認識していれば、継続して使用する可能性が高くなる。ウェブサイトの使用に熟練し、精通しているユーザーは、より特徴的だが直感的ではない、またはユーザーフレンドリーではないウェブサイトのインターフェースでも有用だと感じるかもしれない。しかし、経験の少ないユーザーは、直感的でないウェブサイトのインターフェースの利点や有用性を認識する可能性が低い。これが、ユーザーのスキルに関係なく、できるだけ多くのユーザーに対応できるように、より普遍的なユーザーエクスペリエンスと容易なアクセスへの傾向を促している。^{[ 14 ]}ユーザーエクスペリエンスデザインとインタラクティブデザインの多くは、ユーザーインターフェースデザイン で考慮される。

高度なインタラクティブ機能には、高度なプログラミング言語スキルがなくてもプラグインが必要になる場合があります。プラグインを必要とするインタラクティブ機能を使用するかどうかは、ユーザーエクスペリエンスデザインにおいて重要な決定事項です。プラグインがほとんどのブラウザにプリインストールされていない場合、ユーザーはコンテンツにアクセスするためだけにプラグインをインストールする知識も忍耐力も持ち合わせていないリスクがあります。高度なプログラミング言語スキルを必要とする機能の場合、その機能がユーザーエクスペリエンスにもたらす向上効果に比べて、コーディングにかかる​​時間や費用が高すぎる可能性があります。また、高度なインタラクティブ機能が古いブラウザやハードウェア構成と互換性がないリスクもあります。確実に動作しない機能を公開することは、何も試みないよりもユーザーエクスペリエンスにとって悪影響を及ぼす可能性があります。それが必要とされるかどうか、あるいはリスクを冒す価値があるかどうかは、対象となるユーザー層によって異なります。

プログレッシブエンハンスメントとは、ウェブデザインにおける戦略の一つで、まずウェブコンテンツを重視することで、誰もがウェブページの基本的なコンテンツと機能にアクセスできるようにする一方、ブラウザの追加機能や高速なインターネットアクセスを持つユーザーには、より高度なバージョンを提供するものです。

実際には、これはHTMLを介してコンテンツを提供し、技術的に可能な範囲でCSSを介してスタイルとアニメーションを適用し、その後JavaScriptを介してさらに機能強化を適用することを意味します。ページのテキストは、JavaScriptが開始してコンテンツを後から読み込むのを待つのではなく、HTMLソースコードを介してすぐに読み込まれるため、最小限の読み込み時間と帯域幅でコンテンツを読み取ることができ、テキストベースのブラウザを介して読みやすくなり、下位互換性が最大化されます。^{[ 15 ]}

例えば、MediaWikiベースのサイト（Wikipediaを含む）はプログレッシブエンハンスメントを採用しており、ページのコンテンツがページのHTMLソースコードに含まれているため、JavaScriptやCSSが無効になっても使用可能です。一方、EveripediaはJavaScriptを使用して後からページコンテンツを読み込むため、JavaScriptが無効になると空白ページが表示されます。

ユーザーインターフェースのデザインの一部は、ページレイアウトの品質に左右されます。例えば、デザイナーはレイアウトを設計する際に、サイトのページレイアウトを異なるページ間で一貫して維持すべきかどうかを検討する場合があります。また、レイアウトデザインにおけるオブジェクトの配置には、ページのピクセル幅も重要な要素となります。最も一般的な固定幅ウェブサイトは、現在最も普及しているブラウザウィンドウ、画面解像度、モニターサイズに合わせて、同じ幅に設定されています。さらに、ほとんどのページは、大画面での見栄えを考慮して中央揃えになっています。

流動的なレイアウトは、2000 年頃に人気が高まりました。これは、ブラウザが閲覧者の画面の詳細 (ウィンドウ サイズ、ウィンドウに対するフォント サイズなど) に基づいて、流動的なレイアウトに対してユーザー固有のレイアウト調整を行えるようにするためです。流動的なレイアウトは、ページ レイアウト設計の原則とコーディング技術の両方において、HTML テーブル ベースのレイアウトやグリッド ベースのデザインの代替として成長しましたが、採用は非常にゆっくりとしたものでした。^{[注 1 ]}これは、スクリーン リーダー デバイスや、デザイナーが制御できないさまざまなウィンドウ サイズへの配慮が必要だったためです。そのため、デザインは、ブラウザに送信され、ブラウザによって表示ウィンドウに可能な限り適合されるユニット (サイドバー、コンテンツ ブロック、埋め込み広告領域、ナビゲーション領域) に分割される場合があります。このような表示では、主要なコンテンツ ユニットの相対的な位置が変わることがよくありますが、サイドバーは本文の横ではなく、本文の下に配置されます。これは、デバイス ウィンドウに適合しないハード コーディングされたグリッド ベースのレイアウトよりも柔軟な表示です。特に、コンテンツブロック内のコンテンツ自体は変更されずに、コンテンツブロックの相対的な位置のみが変化する場合があります。これにより、ユーザーがページを水平方向にスクロールする必要性も最小限に抑えられます。

レスポンシブウェブデザインは、CSS3 に基づく新しいアプローチであり、CSS@mediaルールの強化された使用により、ページのスタイルシート内でデバイスごとの詳細な仕様を実現します。2018 年 3 月、Google はモバイルファーストインデックスの展開を発表しました。^{[ 16 ]}レスポンシブデザインを使用しているサイトは、この新しいアプローチに対応できる有利な立場にあります。

ウェブデザイナーは、多様なフォントや書体スタイ​​ルを使用する代わりに、類似したスタイルのフォントを少数に絞ってウェブサイトで使用することを選択する場合があります。ほとんどのブラウザは特定の数の安全なフォントを認識し、デザイナーは主にこれらのフォントを使用して複雑な問題を回避するのです。

フォントのダウンロード機能は後にCSS3のフォントモジュールに組み込まれ、Safari 3.1、 Opera 10、Mozilla Firefox 3.5に実装されました。これにより、ウェブタイポグラフィへの関心が高まり、フォントダウンロードの利用も増加しました。

ほとんどのサイトレイアウトでは、テキストを段落に分割し、中央揃えのテキストを避けるために、余白が利用されています。^{[ 17 ]}

モーショングラフィックスの使用は、ページレイアウトやユーザーインターフェースにも影響を与える可能性があります。モーショングラフィックスを使用するかどうかは、ウェブサイトのターゲット市場によって決まるでしょう。エンターテイメント志向のウェブサイトでは、モーショングラフィックスの使用が期待されるか、少なくとも好意的に受け止められるでしょう。しかし、ビジネス、コミュニティ、政府機関など、より真剣な、あるいは公式な関心を持つウェブサイトのターゲット層は、娯楽や装飾目的だけのアニメーションを不要で、気が散るものと捉えるかもしれません。これは、より真剣なコンテンツが、コンテンツに関連したアニメーションやビデオプレゼンテーションによって強化されないという意味ではありません。いずれの場合も、モーショングラフィックスのデザインは、より効果的なビジュアルと、気が散るビジュアルの分かれ目となる可能性があります。

サイト訪問者によって開始されていないモーショングラフィックスは、アクセシビリティの問題を引き起こす可能性があります。ワールドワイドウェブコンソーシアムのアクセシビリティ標準では、サイト訪問者がアニメーションを無効にできることが求められています。^{[ 18 ]}

ウェブサイトのデザイナーは、標準に準拠することを良い慣習と考えるかもしれません。これは通常、要素が何をしているかを明記した説明によって行われます。標準に準拠していないからといって、ウェブサイトが使用不能になったり、エラーが発生しやすくなるわけではありませんが、標準は、読みやすさのためのページの正しいレイアウトや、タグが適切に閉じられていることなどに関連しています。これには、コードのエラー、より整理されたコードのレイアウト、ID とクラスが適切に識別されていることの確認が含まれます。コーディングが不十分なページは、俗に「タグスープ」と呼ばれることがあります。W3C ^{[ 9 ]}による検証は、コードのエラーを強調表示するために使用される正しいdoctype宣言が行われた場合にのみ実行できます。システムは、エラーとウェブデザイン標準に準拠していない領域を特定します。この情報は、ユーザーが修正できます。^{[ 19 ]}

ウェブサイトの生成方法には、静的生成と動的生成の2種類があります。