あなたのウェブサイトのデザイン監査を実施する方法

公開: 2017-06-27

あなたのウェブサイトが成長するにつれて、そのデザインがやや古くなって見える可能性があります。 デザインのトレンドは常に進化していることを忘れないでください。サイトをモダンで「新鮮」に見せたい場合は、これらの問題を見つけることができることが重要です。 さらに、優れたエクスペリエンスを提供するには、デザインのすべての側面を均一に（そして使用可能に）見せておく必要があります。

これらの問題を見つけて修正する最良の方法は、Webサイト全体の設計監査を行うことです。 この記事では、これらの監査とは何か、そしてそれらがどのように役立つかをお教えします。 次に、3つの簡単なステップで実行する方法を最後に示す前に、実行に役立ついくつかのツールについて説明します。 仕事に取り掛かろう！

設計監査とは何か（そしてそれがどのようにあなたを助けることができるか）

デザイン監査とは、座ってWebサイトまたは会社の視覚的なブランド要素を確認することです。 ほとんどの場合、均一性を求めていますが、このプロセスは、デザインがまだ新鮮に見えるかどうかを確認する絶好の機会も提供します。

正直なところ、「監査」という用語は、全体を実際よりもはるかに威嚇するように感じさせます。 いずれにせよ、あなたのウェブサイトの定期的なデザイン監査を実施することにはいくつかの利点があります。 例えば：

  • あなたのデザインをチェックする機会。 デザインのトレンドが流行に左右されるにつれて、視覚要素が少し古くなって見える可能性もあります。 設計監査は、現実のチェックとアップグレードを行う機会を提供します。
  • ブランディングを確認します。 ほとんどのWebサイトには、ロゴ、タグライン、ヘッダー画像などの複数の視覚要素に基づいた独自のブランドがあります。 時間の経過とともに、これらの要素が一致しなくなる可能性があり、それがブランドの認識に影響を与える可能性があります。
  • コンサルティングサービスとしてご利用いただけます。 設計監査を成功させた経験がある場合は、サービスを他の企業に売り込み、そのプロセスを支援することができます。 多くの企業は彼らが提供する利点を認識していないので、あなたが彼らに彼らが必要であると納得させることができれば機会は熟しています。

他のWebサイトにサービスを提供するために逃げる前に、すべての設計監査の基本的な手順を知っておくことが重要です。 ご想像のとおり、途中で役立つツールがいくつか必要になるので、いくつかの上位のオプションを確認してみましょう。

Webサイトのデザインのユーザビリティを監査するのに役立つ3つのツール

あなたがデザイナーなら、あなたはあなたの人生を楽にすることができる無数のツールがオンラインにあることを知っているでしょう。 ただし、このセクションでは、サイトの要素を監査し、デザインに欠陥がないかどうかを確認するのに役立つものだけに焦点を当てることにしました。 それらのうちの3つを見てみましょう。

1.クレイジーエッグ

クレイジーエッグのホームページ。

Crazy Eggは、サイトの問題領域を見つけるのに役立つ分析ツールです。 ヒートマップテクノロジーを使用して、ページで最も注目を集めている要素と、十分に描画されていない要素を確認できます。 さらに、ユーザーがコンテンツをスクロールしているかどうかを確認するのに役立つ機能も含まれています。 Crazy Eggはまた、訪問者がどこから来ているかについての貴重なデータを提供し、それに基づいて彼らの行動をセグメント化します。

設計の観点から、このタイプのツールは、最も助けが必要な設計の領域に焦点を合わせることができるため、非常に貴重です。 たとえば、ヒートマップで、重要な召喚状（CTA）が必要なほどの牽引力を獲得していないことが明らかになった場合は、次の設計監査でその分析に優先順位を付けることができます。

主な機能：

  • Webサイトにヒートマップを実装します。
  • 訪問者がページを下にスクロールしている距離を追跡します。
  • トラフィックソースを監視し、それらに基づいてユーザーのデータをセグメント化します。

価格：月額$ 9、年払い| 詳しくは

2. UsabilityTools

UsabilityToolsホームページ。

ヒートマップは、ユーザーの行動を理解するのに役立つ強力なツールですが、ユーザーがサイトとどのように相互作用するかを段階的に確認することに勝るものはありません。 UsabilityToolsを使用すると、マウスの動き、フォームの操作、クリックなど、ユーザーがサイトで実行するすべてのアクションを記録することでこれを行うことができます。

やり過ぎのように聞こえるかもしれませんが、サイトのどの要素がユーザーを適切に引き付けていないのかを理解するのに苦労している場合、これはユーザーを識別するための優れた方法です。 さらに、ユーザビリティツールを使用すると、訪問者から収集したすべてのデータをセグメント化して、すばやく分析できます。

主な機能：

  • ユーザーのマウスの動き、クリック、およびサイトでのフォームの相互作用を追跡します。
  • 簡単に分析できるように、収集したデータをセグメント化します。
  • チームのメンバーと録音を簡単に共有できます。

価格：月額$ 19 | 詳しくは

3. UsabilityHub

UsabilityHubホームページ。

最後になりましたが、UsabilityHubがあります。 これは少し異なります。これは、いくつかのツールを含むプラットフォームであり、いずれも設計監査を成功させるのに役立ちます。

これには、ユーザーがサイトのデザインを思い出せるかどうかを判断する5秒間のテストと、使いやすさを測定するクリックテストとナビゲーションテストが含まれています。 最後に、オーディエンスアンケートにアクセスして、デザインが気に入っているかどうか、どのような変更を望んでいるかを判断することもできます。

主な機能：

  • 複数のテストを使用して、サイトのユーザビリティとデザインの受け入れを評価します。
  • ニーズに合わせて、好きなテストを組み合わせてください。
  • 各テストをカスタマイズして、最も関心のある要素を測定します。

価格：テストへの応答ごとに$ 2.50 | 詳しくは

あなたのウェブサイトのデザイン監査を実施する方法（3つのステップで）

使用できるツールのいくつかを検討したので、次に、設計監査を成功させるための手順について説明します。 Webサイトと目標によっては、これまでに説明したすべてのツールを使用できるとは限りませんが、それはあなた次第です。 ステップ1にジャンプしましょう。

ステップ1：すべてのビジュアルブランディング要素を収集する

Instagramのホームページ。

Instagramは、シンプルでありながら一貫性のあるブランディングを備えたWebサイトの優れた例です。

デザインに問題があるかどうかを判断する前に、Webサイトのブランド要素をすべて収集する必要があります。 そうすれば、彼らのスタイルの間に不協和音があるかどうかを見つけることができます。

これを行うと、鳥瞰図ですべての主要なブランディング要素を分析し、それらが一緒に意味をなすかどうかを確認できます（これについては次のステップで説明します）。 要素をまとめるのは不必要に聞こえるかもしれませんが、全体像を見るまで、デザインのいくつかの欠陥が明らかにならない場合があります。

収集する必要のある要素については、開始するための簡単なリストを次に示します。

  • すべての形式のWebサイトのロゴ。
  • 背景画像とヘッダー画像。
  • サイト全体で使用するすべてのアイコン。
  • コンテンツに使用するすべてのフォントのサンプル。
  • デザイン全体で使用するトーンのカラーパレット。

今のところ、これらの要素を最も使いやすい形式で保存することをお勧めします。 簡単に共有できるPDFを作成したり、物理的なコピーをチームに渡したりすることができます。 コンパイルファイルまたはドキュメントの準備ができたら、作業を開始します。

ステップ2：ウェブサイトの視覚的要素を分析する

Netflixのホームページ。

Netflixのブランディング戦略はシンプルですが一貫性があり、可能な限りロゴを使用するようにしています。

前に述べたように、ステップ2は、視覚的なブランディング要素を調べて、デザインの不整合や欠陥を見つけることです。

デザインは（もちろん）多くの点で主観的ですが、それはあなたのウェブサイトのスタイルが改善できないという意味ではありません。 たとえば、すべてのビジネスは一貫したデザインスタイルを提示する必要があります。そうすれば、顧客はそれに慣れ、製品に関連付けることができます。 同じことがウェブサイトにも当てはまります。ロゴ、コンテンツ、画像はすべて同じスタイルを共有し、一貫性を保つ必要があります。

あなたのウェブサイトの視覚的要素がこれらの側面でマークを打つことを確認するためにいくつかの簡単なヒントを見てみましょう：

  • ロゴがすべてのページで一貫しているかどうかを確認し、一貫していない場合は、必要に応じて置き換えます。
  • 背景画像が同じようなスタイルを共有していることを確認してください。そうすれば、ページとセクションの間の移行が不快になりません。 型に合わない画像を見つけた場合は、それらを変更してください。
  • アイコンが同じようなスタイルを共有していることを確認し、そうでない場合は、Font Awesome Icons（Diviと統合可能）などの単一のファミリの代替アイコンに置き換えてみてください。

これまではオンライン要素についてのみ説明してきましたが、設計監査ではオフラインの視覚要素も対象にすることができ、またそうすべきであることに注意してください。 ビジネスに物理的な対応物がある場合は、手に入れることができるブランドアイテム（パンフレット、Tシャツ、コーリングカードなど）を集めて、手順1と2を繰り返します。

ステップ3：Webサイトの設計標準マニュアルを作成する

ブランドマニュアルの例。

アーバンアウトフィッターズのブラン​​ドガイドラインマニュアルでは、ブランドの独自性について説明しています。

今、将来の計画を立てる時が来ました。 これを行うための最良の方法の1つは、サイトに対する将来の設計変更のためのルールの編集を作成することです。これは、設計標準マニュアルとも呼ばれます。

このドキュメントの目的は、今後、設計作業を細かく管理することなく外部委託できるようにすることです。 さらに、Webサイトが大きくなるにつれて、作業チームにメンバーを追加する可能性があります。 標準マニュアルは、ビジュアルブランディングをよりよく理解するのに役立ちます。 実際、これは非常に賢明な慣行であり、多くのトップ企業がこれに取り組んでいます。

マニュアルに含めるルールの種類については、いくつかのアイデアを検討して開始しましょう。

  • ロゴとそのバリエーションの使用方法に関するガイドラインを含めます（ちなみに、これも一般的な方法です）。
  • 投稿者がサイトで使用する必要のある画像の種類の例、画像の表示方法に関するルール、および投稿者が避けるべきコンテンツの種類を添付してください。
  • 利用可能なオプションが複数ある場合は、Webサイト全体で使用する必要のあるフォントと、それらを使用する必要がある状況について話し合います。
  • デザインで使用するボタン、アイコン、およびその他の同様の要素の種類の例を提供します。

2つの設計標準マニュアルが同じになることはないことに注意してください。 Webサイトで使用する要素に応じて、またオフラインブランディングについて話したい場合は、おそらくルールを追加する必要があります。 ただし、これを早期に設定することで、将来の設計監査がよりスムーズに行われるようになるだけでなく、チームへの新しい追加をより迅速にトレーニングするのにも役立ちます。

結論

時間が経つにつれて、ほとんどのWebサイトでは、デザインに関して修正が必要になるのが普通です。 たとえば、一部の要素は視覚的に相互にうまく機能しない場合がありますが、完全な設計監査を定期的に実施しないと、これを見つけるのは難しい場合があります。 さらに、そうすることで、訪問者は今後もサイトで素晴らしい体験を続けることができます。

Webサイトの設計監査を実施するための3つの基本的な手順は次のとおりです。

  1. オンラインとオフラインのビジュアルブランディング要素をすべて収集します。
  2. 収集した要素を分析します。
  3. Webサイトの設計標準マニュアルを作成します。

あなたのウェブサイトのデザイン監査を成功させる方法について質問がありますか？ 下のコメントセクションで質問してください！

Darko 1981 /shutterstock.comによる記事のサムネイル画像