あなたのウェブページが機能しているか7つの面からチェックできるオンラインツール -Spur
Post on:2011年9月12日
sponsors
ウェブページのデザインがしっかり機能するかチェックできるオンラインツールを紹介します。
[ad#ad-2]
Spurの使い方
入力フォームにチェックしたウェブページのURLを入力して、「Spur it on」ボタンをクリックします。
画像でチェックしたい場合は、「Spur it on」ボタンの下にある「Upload an image」をクリックします。
クリックすると、ウェブページに7種類のエフェクトを与え、そのままでは気がつきにくい面からさまざまなポイントを確認することができます。
以下、その7種類のエフェクトを紹介します。
Grayscale
グレースケールはデザインからカラーを取り除くことで、ユーザーの目がページのどこに引き寄せられるか確認するのに役立ちます。
- 見出しはブラックの背景にホワイトのテキストで高いコントラストを確認できます。
- ロゴとナビゲーションはコンテンツサイトにドロップバックしています。
- 最新情報のコンテンツはグレースケールになると、コントラストに欠けてしまっています。
- 各パネル間のホワイトの溝はイメージを目立たせています。
Intersections
交差度はページの主要なラインがどこにユーザーのフォーカスを合わせることを強いるか確認するものです。
- 主要となるナビゲーションに交差があります。
- この中心の交差はユーザーの目をひきつけます。このポイントが一番大きなポイントです。
- 広告主は交差がポイントとなる配置を好みます。こういった箇所は多くのクリックを得るでしょう。
- 登録フォームを交差に配置するのもより多くのクリックを増やすでしょう。
Contrast
コントラストは際立たせるのに非常に効果があるテクニックです。ただし、使いすぎるとうるさくなってしまい、どれも目立たず、まとまりがなくなってしまいます。
- ヘッダのデザインは非常にごちゃごちゃしていますが、トップ記事のタイトルのコントラストは非常に目立つものとなっています。
- 注目コンテンツの箇所は非常にごちゃごちゃしていますが、コントラストには影響を与えずバランスのとれたデザインになっています。
- 広告スペースはあまり目立つものではありません。
- ヘッダの上部のコントラストは極めて少ししかなく、混乱の原因となっています。
[ad#ad-2]
Blur
ブラーはほんの数秒ちらっとページを見るときの状態で、ページのソリッドな階層とウエイトを確認するためのものです。
- この見出しは目立ちます。ページで最も目を引くもので、これのためにユーザーはページにフォーカスを合わせようとするでしょう。
- ちらっと見た状態ではサイドナビゲーションを識別することは不可能でしょう。しかし、アイテムの量でどのくらいのプロダクトがあるか知らせることができます。
- 広告は非常にクリアです。こういったのは広告主に喜ばれます。
- ここで認識できるプロダクトは本とeリーダーです。これらが主要商品であるのであれば、それは意味をなしています。
- ページに明確なアクションボタンがありません。このページを見た瞬間、ユーザーは何をすべきか分からないでしょう。
Mirror
デザインをミラー表示すると、不整列な階層とエリアを指摘することができます。
- ミラー表示することで、ページのどのビジュアルが原因でデザインが壊されているか明らかにします。
- 多色を使った広告とFacebookのウィジェットがこのページのデザインを壊している要因です。ミラー表示はページ内のすべてのエレメントがどれくらいばらばらに感じるかを強調します。
- スライダーはコピーがページにごちゃごちゃ感を加えています。
- コピーとのバランスがよくない画像は、その片寄りが強調されます。
Rotate
回転表示させることで、ページのウエイトとエレメントのバランスを確認することができます。
- ページを左に回転させることで、ウエイトが上部に向かって一列に並べられていることが明らかになります。リンクは下方に配置されています。
- コンテンツのボックスが縦列と横列の間に不必要なデザインエレメントを生み出しています。
- リンクを横にして見ると、このページのクリック可能なコンテンツがどれほど密集しているかが分かります。若干のエリアではこれは歓迎されますが、他のエリアでは避けるべきです。
50% Zoom
50%にズームすることで、あなたのサイトをより小さいサムネイルとして見ることができます。あなたのサイトはレイアウトが持ちこたえていますか？ 良いレイアウトは小さいサイズでもストーリーが理解できるものです。
- メインとなる画像はページいっぱいに使用されており、これが写真のウェブサイトであるということを伝えています。
- メインのヘッドラインは少し行方不明ですが、アクションボタンは画像に対して目立っています。
- コピーはぼやけてしまっていますが、3つの見出しはユーザーがサイトで何ができるかを伝えています。
sponsors
