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

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

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

ウェブデザインはビジネスのゴールと密接に結びついている

ウェブデザインはビジネスのゴールと密接に結びついている

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

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

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

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

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

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

Web design isn't just about aesthetics. It's a much more complicated world where UX, accessibility, and business goals all should connect. Check out these web design best practices! ✍️🔝Click to Tweet

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

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

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

ブランドの基準

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

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

バランス

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

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

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

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

1. 左右対称のデザイン

左右対称のデザインの一例

左右対称のデザインの一例

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

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

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

左右対称のデザインの一例

左右対称のデザインの一例

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

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

3. オフバランス

オフバランスなデザインの一例

オフバランスなデザインの一例

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

構成

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

構成

構成

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

スペース

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

ウェブデザインにおけるスペースの役割

ウェブデザインにおけるスペースの役割

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

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

フォーカルポイント

一つの要素に注目を惹きつける

一つの要素に注目を惹きつける

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

カラー

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

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

Kinstaのカラーパレットの例

Kinstaのカラーパレットの例

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

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

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

通常のデザインを色覚異常の人が見た場合の見え方の例

通常のデザインを色覚異常の人が見た場合の見え方の例

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

コントラスト

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

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

相性の悪いコントラストでは見づらいことがある

相性の悪いコントラストでは見づらいことがある

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

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

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

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

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

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

タイポグラフィー

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

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

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

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

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

タイポグラフィーの悪い例と良い例

タイポグラフィーの悪い例と良い例

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

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

要素のヒエラルキー

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

要素のヒエラルキーの例

要素のヒエラルキーの例

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

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

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

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

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

ウェブデザインの基準

ウェブデザインの基準

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

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

画像

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

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

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

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

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

メニューナビゲーション

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

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

ナビゲーションメニュー

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

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

ハンバーガーメニュー

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

WordPressサイトで問題が発生しましたか?Kinstaで最高のホスティングサポートをご利用ください!まずはホスティングプランのチェックからどうぞ

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

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

メニューナビゲーションに関するウェブデザインのベストプラクティス

メニューナビゲーションに関するウェブデザインのベストプラクティス

コーディングの基準

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

SEO

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

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

モバイルレスポンシブ

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

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

レスポンシブデザインの例

レスポンシブデザインの例

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

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

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

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

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

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

Info

Kinstaでは、各プランでセキュリティ保証を提供しています。何か問題が置きた場合には、セキュリティの専門家が問題を解決します。

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

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

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

ページ読み込み速度

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

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

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

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

アクセシビリティの基準

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

アクセシビリティは全てのウェブサイトにおいて重要

アクセシビリティは全てのウェブサイトにおいて重要

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

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

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

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

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

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

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

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

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

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

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

Web design isn't just about aesthetics. It's a much more complicated world where UX, accessibility, and business goals all should connect. Check out these web design best practices! ✍️🔝Click to Tweet

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

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


この記事が面白いと思った方は、KinstaのWordPressホスティングプラットフォームも大好きでしょう。ウェブサイトをスピードアップし、当社のベテランのWordPressチームからの24時間365日のサポートを是非ご利用ください。Google Cloudを使用したインフラストラクチャは、自動スケーリング、パフォーマンス、およびセキュリティに重点を置いています。Kinstaの魅力をご案内させてください。当社のプランをご確認ください。