次のウェブデザインに取り入れたいベストプラクティス

WordPress開発者が請求する費用の差は一体、どのようなところで生まれるのでしょうか？その答えを見出すには、そもそも、何故あなたがウェブサイトを作る必要があるか、ということを考える必要があります。

最終成果物そのもの、つまり美しいウェブデザインになるコードの組み合わせに重きを置く開発者もいるでしょう。

しかし、マーケティングの知識を持つ開発者には、見た目の美しいウェブサイト構築以上に重きを置いていることがあります—そうです、特定の目的を果たしたいクライアントのコンサルタントのような役割を担うということです。

そのことを念頭におくと、あなたの最終的な目標について尋ねてこない開発者にウェブサイトの構築を依頼するのは要注意です。どんなに美しいウェブデザインのサイトであっても、訪問者を顧客として取り込むという観点から見れば最適とは言えない場合もあることを覚えておいた方が良いでしょう。

とは言え、94%の人がウェブサイトのデザインでサイトの信頼性を判断するというのもまた事実。

そのため、デザインを利用して理想的なユーザー体験を実現することが重要です。まずは訪問者が求めている情報を簡単に見つけられるようにしつつ、最終的なコンバージョンへと誘導するような作りにする必要があります。

今回のウェブデザインのベストプラクティスの中では、美しいウェブサイトの構築とビジネスに貢献するサイトの構築の接点を探ります。

ウェブデザインのベストプラクティスの定義とは？

もちろん、素晴らしいデザインのウェブサイトの定義は人によってまちまちです。

そこで、今回は専門家の意見に従って見ていきましょう。

Orbit Mediaは、ウェブデザインのベストプラクティスは次の3つの基準に分類することができるとしています。

• ブランドの基準：このコンセプトについては「ブランディング」「スタイルガイド」「ムードボード」という言葉に置き換えた方が馴染みがあるかもしれません。これらは全てウェブサイトの見た目に関連したもので、カラーやタイポグラフィー、ビジネス固有の要素の使用などを含みます。
• コーディングの基準：ウェブサイトはウェブスタンダードの発展のための国際的なコミュニティであるW3Cで合意されたプログラミングスタンダードに準拠している必要があります。
• アクセシビリティの基準：情報へのアクセスは国連の障がい者権利条約で保障された基本的人権です。また、サイトをアクセスしやすいものにすることには売上だけではなくSEOにもポジティブな効果があります。W3Cではアクセスしやすいウェブサイトをデザインするための基本的な基準のリストを公開しています。関連するウェブデザインのベストプラクティスについては、後ほど詳しくご紹介します。

それでは、それぞれの基準に基づいて、どのように良質なウェブデザインの開発をすべきか見ていきましょう。

ブランドの基準

ブランディングに一貫性のないウェブサイトは見ている人にストレスや混乱を与えることがあります。38%の人が、コンテンツやレイアウトが魅力的でない場合ウェブサイトの利用を中断すると回答しているのも無理はありません。

見た目が全てではないことはお忘れなく。その上で、訪問者が利用したいと感じるウェブサイトを作成するための基本的なデザインの原則をご紹介します。

バランス

バランスはいかに効果的に視覚的な要素を配分するかを決定する要素です。一般的に、バランスのとれたデザインはクリーンで、ナチュラルで、美しい対称なものが多いと言えます（ただし、対称であることは必ずしもバランスが良いデザインの条件ではありません）。

ページレイアウトからバランスの要素を取り入れることができます。

テキストやその他の要素をページの中央に配置するのは最も簡単な方法です。一般的に、ウェブページはグリッドシステムを基にすることでバランスを確保します。CSSの「float」プロパティを用いて、要素をページ上に配置し、ページ上のバランスを取ることができます。

バランスのとれたデザインを実現するには3つの手法があります。

1. 左右対称のデザイン

要素をページ上に均等に配置する手法です。例えば、大きな要素が左側にある場合、右側にも大きな要素を配置します。前述のとおり、中央に配置するのが一番簡単な方法ですが、フラットでつまらないデザインになってしまうこともあります。

ページが単調になってしまわないように、大きな画像とテキストのブロックでバランスをとるなど、異なる要素でバランスをとると良いでしょう。また、中央から放射状に要素を配置する「ラジアルバランス」と呼ばれる対称デザインも存在します。

2. 左右非対称のデザイン

うまく配置するのがやや難しいですが、左右非対称のデザインでは、ページ上に要素を不均一に配置します。例えば、中央に大きな要素を配置し、その遠くに小さな要素が配置されるといった具合です。

カラーやテクスチャなど、デザインの他の要素を使って非対称のデザインのバランスをとることもできます。

3. オフバランス

このタイプのデザインは動きや行動を想起させ、見る人に居心地の悪さを感じさせることもあります。サイト訪問者に（落ち着きや安定よりも）「物事を考える」ように促したい場合には、オフバランスのデザインはもってこいでしょう。

構成

構成とはデザイン要素の配置と構造化を意味します。

特に写真においてバランスのとれた構成を作成するために、三分割法がしばしば用いられます。

スペース

ユーザーがセクションやブロックを区別できるよう、均等にスペースを空ける必要があります。

また、画像の間や周りには余白を設けたほうが良いでしょう。余白は視覚的なノイズを取り除き、読みやすくし、バランスのとれたデザインを作り出します。

デザイン要素の周りにマージンやパディングを追加することで余白を設けることができます。

フォーカルポイント

注目を惹きつけたい場所を一点設けましょう。ページで最も重要な部分にフォーカルポイントを設けます。また、各ページには主なフォーカルポイントは「一つだけ」にするのが理想です。

カラー

カラーはブランディングにおいて重要な要素です。ブランドから連想する色を検討した上でウェブデザインにとりかかるのが理想です。

ウェブデザインにおいては、ブランドのムードボードを使って検討を始めると良いでしょう。

原色と二次色を選び（二次色は原色の補色もしくは対比色を使うと良いでしょう）、そしてそれぞれの色より明るい色と暗い色を選びます。色を使いすぎると目障りになるので注意してください。

Adobe Colorは様々な色の組み合わせを試し、ウェブサイトの要素に使えるパレットを作成する素晴らしい無料ツールです。

また、カラーを決定する時、世界の人口の4.5%を占める色覚異常を持つ人のことを考慮することも重要です。

色覚異常には3つのタイプ（1型色覚、2型色覚、3型色覚）があるため、サイトのデザインは色を識別できない人でも利用できるようになっていることを確認しましょう。

コントラスト

カラーを選択する際、色彩比とコントラストについても気を配りましょう。

カラーコントラストとは背景と文字表示色の明るさの差のことを指します。十分なコントラストのある色を使用することで、ウェブサイトは見やすくなります。一般的に、白い背景に黒の文字を使用するなど、コントラストの大きなカラーを選択するとサイトの文字は読みやすくなります。

ページの要素間のコントラストの差を示す数値として、コントラスト比というものがあります。

ウェブコンテンツ・アクセシビリティ・ ガイドライン (WCAG) 2.0は通常のテキストの場合4.5:1のコントラスト比を推奨しています。

WebAIMでは理想のコントラスト比の色の組み合わせをいくつか提案しています。

この比率を用いて、ウェブサイトをデザインする時に全ての閲覧者（もちろん色覚異常を持つ人を含め）が見やすい色を使うことを心がけましょう。後から修正をするよりも、最初から考慮してしまった方がスムーズな流れになるでしょう。

ヘッダー、フッター、メニューなど、サイト訪問者がクリックする可能性のある箇所全てを考慮するようにしましょう。これらの項目は全て見やすく、利用しやすくなくてはなりません。

次のツールを利用するとカラーのコントラスト比を確認することができます。

• Level Accessの提供するColor contrast checker
• Contrast Ratio
• WCAG 2.0のガイドラインに基づいて作成されたツール、WCAG 2.0 AA & AAAカラーコントラストチェッカー

タイポグラフィー

タイポグラフィーもブランディングにおいてとても重要な要素です。

様々なソースからウェブサイトで使えるフォントを探すことができますが、まずは、エンドユーザーがコンピューターにインストールしているフォントに関係なく、いつでも表示されるフォントを使うべきでしょう。

Google Fontsでは、ユーザーがインストールしたフォントやプログラムに関わらず、きちんと表示される、信頼性が高く豊富な種類のウェブフォントを提供しています。カラーに合うかどうかを確かめるためにムードボードに載せてみるのもお忘れなく。

組み合わせが思いつかないという方のために、Google Fontsは人気な組み合わせを提案してくれます。他にもFontPairのようなサイトでおすすめの組み合わせを確認することもできます。

フォントデータはなるべく軽いものを使用しましょう。ファイルサイズが大きいとページの読み込みスピードが遅くなってしまいます。その点に関して言えば、さらにパフォーマンスを高めるためにGoogle Fontsをローカル環境にホストするのもおすすめです。

ウェブデザインのベストプラクティスに基づいたタイポグラフィーの選び方について、一般的な大まかなルールとして、見出しにはサンセリフフォントをコンテンツにはセリフフォントを使用するというものがあります。少なくとも、読みにくくなるためコンテンツの本文に装飾的なフォントを使用するのはやめましょう。

また、サイトの中でたくさんの種類のフォントを使用するのも避けましょう。一般的には、ロゴに一種類、メニューと見出しに一種類、そしてコンテンツの本文に一種類のフォントを使用するのが良いとされています。またその際、同じフォントファミリーのフォントなど、互いに補完し合うフォントを使うと良いでしょう。

要素のヒエラルキー

ヒエラルキーとは相対的な重要性を示すデザイン要素の配置のことを指します。これは、視覚的なコントラスト、サイズ、配置などの要素を操作して注意を喚起することで実現されます。

例えば、ユーザーがそれぞれの項目を区別できるよう、コンテンツは論理的なブロックに分割する必要があります。

そのために、ユーザーが興味のある項目へスキップできるだけではなく、長文を読みやすい文量に分け、閲覧者が各項目の文脈を理解できるようにする、コンテンツの見出しを利用すると良いでしょう。

これらのデザインコンセプトに関してより詳細な視覚的イラストなどを見たいという方は、Tilda Publishing公開のよくあるウェブデザインの失敗例とその修正方法（本文英語）をご覧ください。

ウェブデザインと書式のベストプラクティス

Orbit Mediaによる調査結果によると、上位50位以内のマーケティングウェブサイトには共通のウェブデザインの基準が採用されているということです。

80%のウェブサイトが似たようなデザインのアプローチを採用していることになります。

• ロゴはページ上部左端に表示
• メインの水平方向のナビゲーションを各ページの上部に表示
• バリュープロポジションはウェブサイトの高い位置、「アバブ・ザ・フォールド（スクロールをしなくても見ることのできる画面領域）」に表示。多くのウェブデザイナーは、ブラウザに絶対的なピクセルの高さが決まっていないため、厳密に言うと「フォールド（つまり明確な境界）」など存在しないと言います。しかし、重要なデザインの要素は大半の訪問者がスクロールしなくても見えるようなページの高い位置に表示するのが一般的です。

一般的なサイトの要素に関するウェブデザインのベストプラクティスをいくつかご紹介します。

画像

画像の使用に関するウェブデザインのベストプラクティスには、数えきれないほどのアドバイスがあるのですが、ここでは必要最低限のものをご紹介します。

• 代替テキストを指定する。画像に代替テキストを指定していないと、スクリーンリーダーで読み取ることができません。また、代替テキストはSEOにも役立ちますが、中には代替テキストをキーワード戦略の補完的な役割でしか活用していない人もいます。代替テキストに画像の説明を指定するとより効果的でしょう。正しいアプローチを取ることにより、検索エンジンのボットとスクリーンリーダーの両方にとって有意義なものになります。
• 人間の顔が描かれた画像の方が、その他のグラフィックスやアニメーションよりも効果的な傾向があります。人間は共感や感情を感じられるものにより惹きつけられるため、画像に対するアクションを起こしやすくなります。
• レスポンシブ対応の画像を使用。ブラウザのサイズによって、拡大したり縮小したりするレスポンシブな画像を使用しましょう。サイトの読み込みスピードとSEOの両方に効果があります。

ウェブサイトナビゲーション

ユーザーは、サイトの中で探しているコンテンツを簡単に見つけることができることを望んでいます。そのため、ウェブサイトのナビゲーションはシンプルで分かりやすいものである必要があります。

ウェブサイトナビゲーションとはウェブサイトの内部のリンクの設計を総合的に示す言葉です。ナビゲーションの最大の目的は、ユーザーがウェブサイトで目当てのコンテンツを簡単に見つけられるようにすること。この基本を忘れてはいけません。

サイト内リンクの設計は（検索エンジンからサイトへのアクセスを助ける）サイトマップの基礎を成します。コンテンツが見つけやすい、きれいに設計されたサイトは検索エンジンからのトラフィックの流入が多いことが分かっています（また、Googleサイトリンクが表示される可能性も高まります）。

メニューナビゲーション

ウェブサイトのナビゲーションを構成する要素はいくつかありますが、ユーザーがサイトを訪れた時に最初に目にするものの一つであるトップメニュー、メインメニューは中でも非常に重要です。

ウェブサイトのメニューには様々な種類がありますが、最も人気なものには次のようなものがあります。

ナビゲーションメニュー

ウェブサイト前面の中央に表示されているのが理想です。いくつかカテゴリーがある場合、ドロップダウンメニューが使用されていることもあります。ただし、テクニカルSEOの観点で言うと、ドロップダウンメニューはあまりおすすめできません（クロールするのが難しいため）。また、多くの人はドロップダウンメニューを好まないことも分かっています。

人間の目の動きは手よりも速いため、ユーザーがクリックする場所を既に決めている時、クリックしてドロップダウンメニューが表示されるのが鬱陶しく感じるものです。これはページへの訪問の減少に繋がりかねません。

ハンバーガーメニュー

モバイルに適したデザインとして主に使われるハンバーガーメニューは、通常ページの上部右側もしくは左側に表示されます。3本のラインが入った四角形をしていて、クリックすると、項目が表示されます。しかし、多くのデザイナーはハンバーガーメニューを嫌っていてモバイル端末のウェブサイトナビゲーションをより楽しく、便利にするような別の方法が開発されてきました。

ウェブデザインのベストプラクティスに基づいた、ナビゲーションのデザインのヒントをいくつかご紹介します。

• 検索バーをつけると、ユーザーはコンテンツを探しやすくなります（WordPressの検索機能を充実させる方法はこちらをご覧ください）。ニュースブログなどたくさんのコンテンツを持つウェブサイトでは特に検索バーは便利です。
• ユーザーが必要な情報にマウスのクリック3回以内で辿り着けるという3クリックルールに従ってサイトを設計する。これは、ユーザーが可能であれば検索をしてその結果を比べるのではなく、サイト上を見て回ることを好むからです。
• メニューのタイトルは説明的なものにする（キーワードを念頭において）ことで、ユーザーは目当ての項目を見つけやすくなり、SEOにも効果的に作用します。
• メニューの項目の配置は重要。最も重要なページは簡単にアクセスできるよう、メニューの最初の方に配置しましょう。
• メニューの項目は最大でも7つにする。これはクリーンなデザインを保つためだけではなく、メニューのカテゴリーが多すぎると検索のランキングに悪影響を及ぼす可能性があります。関連の薄いと思われるカテゴリーが多く、サイトが特定の分野に絞れていないとGoogleに判断されてしまうことがあります。

これについてわかりやすくまとめられたインフォグラフィックもご覧ください。

コーディングの基準

世界中でこれほどたくさんのウェブサイトが作成、閲覧されている状況では、基準化されたコーディングの指針は間違いなく必要でしょう。これらの基準の中には次のようなものが含まれます。

SEO

SEOにより、オーガニック検索で（広告を使用せずに）訪問者の数を増やすことができます。記事の1項目の中でSEOについて深掘りするのは難しいため、この項目について詳しく知りたい方は、SEOチェックリストや、おすすめのWordPress向けSEOプラグインなどの記事をご参照ください。

この後にご紹介するコーディングの基準に関するヒントはSEOと密接な関係があるのでご承知置きください。

モバイルレスポンシブ

レスポンシブデザインはどのようなデバイスやブラウザでウェブサイトにアクセスしたとしても最大のユーザー体験を提供するためにあります。

現在60%以上のネットユーザーが携帯電話からインターネットに接続しており、eコマース取引の半分はモバイルプラットフォームで行われていることを考えると、レスポンシブ対応のウェブデザインにしておくことの重要性は今までになく高まっています。更に、Googleの新たな検索アルゴリズムはモバイル対応のサイトを優先しています。

サイトをレスポンシブ対応にすることで、ユーザーがサイトを見やすくなるだけでなく、エンゲージメントやコンバージョンも向上します。見やすいレスポンシブ対応のサイトを持つブランドを勧める傾向があり、逆に、そうでないサイトの場合買い物をしなくなるだけではなく、他のユーザーにもお勧めしません。

しかし、これほどレスポンシブ対応のサイトのニーズが高まっているにもかかわらず、91%の中小企業がレスポンシブ対応のサイトを持っていないとされています。レスポンシブ対応のサイトを作ることは必ず利益に繋がるので、絶対に対応したほうが良いでしょう。モバイルレスポンシブなサイトを構築した企業の62%で売上の増加が見られました。

サイトをよりモバイルフレンドリーにするにはという記事も合わせてお読みください。中ではWordPressのおすすめのモバイル向けプラグインのリストもご紹介しています。また、おすすめのWordPressテーマという記事ではたくさんのレスポンシブなテーマをご紹介しています。

Googleもレスポンシブなウェブサイトをデザインするためのヒントを公開しています。

ウェブサイトのセキュリティ

もう一つコーディングで重要なのは、ユーザーのセンシティブな個人情報を守る安全なプログラムやウェブサイトを構築することです。一般的にはあまり知られていませんが、ハッカーは特定のウェブサイトを狙ってハッキングを行うのではありません。そのため、どんなに小さなウェブサイトでも攻撃を受ける可能性があるのです。

WordPressは総合的に安全と言えますが、攻撃に備えて更に安全性を高めるよう注意をしておくに越したことはないでしょう。

ウェブサイトのセキュリティに関するベストプラクティスをいくつかご紹介します。

• SSLサーバー証明書を取得する。これは支払いや個人情報を扱うサイトでは特に重要になります。SSLサーバー証明書はハッカーが解読するのが難しくなるよう、ネットワークで送信される情報を暗号化します。また、業界のスタンダードにもなっています。Chromeでは、訪問したサイトがSSLサーバー証明書を取得していない場合、訪問者に警告を表示します。更に、Chromeでは今、古いTLSバージョンのサポートを停止しており、これが検出された際には警告を表示するようになっています。
  HTTPSの有効化（SSLサーバー証明書インストールの一部）もまたGoogleの検索ランキングに影響を与える公式な要素の一つです。
• ログイン認証情報の安全性を確保する。ウェブサイトにハッカーが無理やりアクセスしようとするという攻撃もあります。その対策として有効なのが、ログインページを分ける/隠す（WP Hide Loginプラグインを使用）方法と、ログインを試みる回数を制限する方法です。Login LockDownプラグインを使用すると、ログインが失敗した時に必ずIPアドレスとタイムスタンプを記録し、同じIPからのログインの失敗が短い時間に何度もあった場合には、ログイン機能がロックされます。また、6文字以上、大文字、小文字、数字、記号を織り交ぜた安全なパスワードを使用しましょう。パスワードは頻繁に変更しましょう。更に安全性を高めたいという方はログインに二要素認証を取り入れてもいいでしょう。
• WordPressのコア、プラグイン、テーマを常にアップデートする。プラグインやテーマは信頼のおけるソースからダウンロードするようにしましょう。プラグインやテーマが大勢の人にインストールされていて、最近アップデートされているものであれば安全な可能性が高いと言えるでしょう。プラグインが信頼できるものであるかを見分けるためにレビューを読むのもお忘れなく（こちらにリストアップされたものをチェックしてみてください）。Wordfence、Sucuri、DefenderなどのWordPressのセキュリティプラグインをダウンロードしましょう。脆弱なWordPressプラグインやテーマの2%は無料の自動ツールを使用して見つけることができます。おすすめのセキュリティプラグインの記事もご覧ください。
• 安全なウェブホスティングサービスを利用する。あまり詳しくない方の中には、ウェブホスティングサービスとサイトセキュリティにどんな関係があるのかと疑問に思う方もいらっしゃるかもしれません。しかし、実は攻撃の41%はホスティングプラットホームのセキュリティの脆弱さから引き起こされるのです。そのため、サーバーサイドのファイアウォールや暗号化、NGINXもしくはApacheのウェブサーバー、アンチウィルス/アンチマルウェアソフトウェア、オンサイトセキュリティシステムなどの機能が含まれるプロバイダーや、SSLサーバー証明書、CDNが利用できるプロバイダーを選びましょう。

WordPressのセキュリティについてもっと知りたいという方は「WordPressサイトの安全性を維持するには」という記事をご覧ください。

ページ読み込み速度

全体の約半分のユーザーはサイトが2秒以下で読み込まれることを期待しており、それ以上時間がかかる場合、40%の人がページを離れ、（おそらく）二度と訪れません。

サイトの訪問者数以外にも、コンバージョン率、収益にも影響を与えるため、ページの読み込み速度は非常に重要です。ページの読み込みに1秒かかる毎に、売り上げは27%減少します。一方、ウェブサイトのスピードを早めることにより、コンバージョン率を7%も向上させることができます。

ページの読み込みスピードを速くするためには、次のような方法があります。

• 画像、CSS、JavaScriptなどの静的ファイルをユーザーに地理的に近い位置にあるサーバーを経由して配信するコンテンツデリバリネットワーク（CDN）を利用する。
• 画像の使用方法を検討する。平均的なウェブサイトでは画像を8MB使用していて、これはサイト全体の60%を占めます。これを改善するために、ウェブページをどのようにレイアウトするか再検討しましょう。ページの読み込みスピードを保ちたいのであれば、使用する大きな画像の数を減らし、それらを最適化するようにしましょう。
• 大きな画像をたくさん使わなければならないウェブサイトの場合、WP RocketやImagifyなどGZIP圧縮やキャッシング、画像最適化などの機能を含むプラグインを使用しましょう。ファイルを小さく（画質を損なわずに）し、読み込みが速くなります。
• WordPressのデータベースに保存するプラグインやファイルの数を見直す。これらもまたページの読み込みスピードに影響を及ぼしますので、使用していないものは削除しましょう。その時、PHP、WordPressのコア、プラグインを最新版にアップデートしましょう。

ウェブサイトの読み込みスピード最適化に関する記事も合わせてご覧ください。

アクセシビリティの基準

インターネットは使用しているハードウェア、ソフトウェア、言語、その人の能力や地理的条件に関わらず全ての人が利用できるように作られました。しかし、美しいデザインのためにアクセシビリティを犠牲にする例が多くみられます。

アクセシビリティは全ての人がウェブサイトを利用できるようにするための工夫を意味します。

ウェブサイトのアクセシビリティを確保することは障がいを持つ人たちだけではなく、次のような人々のためになるとW3 は言います。

• 小さな画面や異なるインプットモードの端末などを使用している人
• お年寄り
• 手足の骨折、メガネをなくした人、病気などで「一時的に障がいを持った」人々
• 眩しい太陽の下や公共交通機関など音が聞けない環境でインターネットを利用している人など、「状況的な制限」のある人
• インターネットの接続速度が遅い人

私たち全員が何らかの形で影響を受けるので、アクセシビリティは全ての人に共通する関心事なのです。

サイトのアクセシビリティを高める必要がある理由

今回のウェブデザインのベストプラクティスの中で、本当にアクセシビリティの議論に時間を費やす価値があるかどうかまだ半信半疑というあなた。

次の理由についても考えてみましょう。

• ADAの要求である。障害を持つアメリカ人法（ADA）は障がいを持つ人の市民の権利を守るために1990年に制定されました。その適用する領域は移動や電話通信、雇用、建築基準法にまで及びます。この法律が制定されたのは30年近く前で、そのころはインターネットが今のように普及していなかったため、法律の改定が検討されています。
• 受け入れようとする社会を育む。ピュー研究所による調査によると、障がいを持つ人は、障がいを持たない人と比べてインターネットを利用する頻度が3倍も少ないことが分かっています。専門職に就く人の30%は障がいを持っていて、そのうちの62%がネガティブなバイアスを恐れて目立たないように振舞っているという事実は非常に残念なことです。
• ビジネスの幅が広がる。より開放的になることで合わせて7兆ドルの可処分所得を持つ障がいを持つ人々のネットワークも顧客として取り込むことができます。
• SEO上のメリット。検索エンジンでは、アクセシビリティの高いウェブサイトを増やすために、これらのウェブサイトを優遇しています。

ウェブサイトのアクセシビリティを高めるには

ウェブサイトのアクセシビリティを高める簡単な方法はWP Accessibilityプラグインをインストールすることです。プラグインにより次のような機能を追加できます。

• フォントをリサイズしたり、サイトを高コントラストやグレースケールで表示したりできるツールバーを表示
• カラーコントラストを比較し、ADAの基準に適しているか確認する機能
• コンテンツに挿入された画像からタイトル属性を削除する機能：多くのスクリーンリーダーはこれらを読み取ることができず、代わりにアンカーテキストを読み上げます。
• 直接コンテンツへ移動でき、スクリーンリーダーを利用している人には便利なページ内のリンクであるスキップリンクを有効化する機能

その他、次のような工夫ができます。

• 聴覚障がいを持つ人や、言葉が不自由な人、公共の場でコンテンツを聞くことのできない人のために音声、オーディオブック、動画、ポッドキャストなどのメディアを掲載している場合、字幕やスクリプトを追加する
• 運動障がいがありキーボードしか使えない（マウスが使えない）人のためにキーボードでアクセス可能なリンクやメニューを作る：ドロップダウンメニューはおすすめできませんが、各ドロップダウンメニューにショートカットを指定することで解決できます（ホームは「１」、サイト紹介は「２」を押すなど）。
• 最後に、サイトのアクセシビリティのテストを行う：WAI（ウェブ・アクセシビリティ・イニシアティブ）では、特定のツールの推奨はしていませんが、アクセシビリティのテストをするためのツールのリストを公開しています。

まとめ〜次のウェブデザインに取り入れたいベストプラクティス〜

良いウェブデザインとは外観が美しいデザインとイコールではありません。サイトの使い勝手、ナビゲーションの分かりやすさ、アクセシビリティも同じくらい重要です。今回ご紹介したウェブデザインのベストプラクティスを実践すれば、見た目も機能も素晴らしいサイトを作ることができるはずです。

これはあくまで「ベストプラクティス」です。ウェブサイトの性質によっては全てを完全に取り入れることができないこともあります。しかし、少なくともこれらのルールの意義を知っておくと役に立つでしょう。

今回ご紹介していないウェブデザインのベストプラクティスをご存知でしたら、是非コメント欄でお知らせください！