あなたのウェブページが機能しているか7つの面からチェックできるオンラインツール -Spur

ウェブページのデザインがしっかり機能するかチェックできるオンラインツールを紹介します。

サイトのキャプチャ

Spur

Spurの使い方

入力フォームにチェックしたウェブページのURLを入力して、「Spur it on」ボタンをクリックします。
画像でチェックしたい場合は、「Spur it on」ボタンの下にある「Upload an image」をクリックします。

クリックすると、ウェブページに7種類のエフェクトを与え、そのままでは気がつきにくい面からさまざまなポイントを確認することができます。
以下、その7種類のエフェクトを紹介します。

Grayscale

グレースケールはデザインからカラーを取り除くことで、ユーザーの目がページのどこに引き寄せられるか確認するのに役立ちます。

サイトのキャプチャ
  1. 見出しはブラックの背景にホワイトのテキストで高いコントラストを確認できます。
  2. ロゴとナビゲーションはコンテンツサイトにドロップバックしています。
  3. 最新情報のコンテンツはグレースケールになると、コントラストに欠けてしまっています。
  4. 各パネル間のホワイトの溝はイメージを目立たせています。

Intersections

交差度はページの主要なラインがどこにユーザーのフォーカスを合わせることを強いるか確認するものです。

サイトのキャプチャ
  1. 主要となるナビゲーションに交差があります。
  2. この中心の交差はユーザーの目をひきつけます。このポイントが一番大きなポイントです。
  3. 広告主は交差がポイントとなる配置を好みます。こういった箇所は多くのクリックを得るでしょう。
  4. 登録フォームを交差に配置するのもより多くのクリックを増やすでしょう。

Contrast

コントラストは際立たせるのに非常に効果があるテクニックです。ただし、使いすぎるとうるさくなってしまい、どれも目立たず、まとまりがなくなってしまいます。

サイトのキャプチャ
  1. ヘッダのデザインは非常にごちゃごちゃしていますが、トップ記事のタイトルのコントラストは非常に目立つものとなっています。
  2. 注目コンテンツの箇所は非常にごちゃごちゃしていますが、コントラストには影響を与えずバランスのとれたデザインになっています。
  3. 広告スペースはあまり目立つものではありません。
  4. ヘッダの上部のコントラストは極めて少ししかなく、混乱の原因となっています。

Blur

ブラーはほんの数秒ちらっとページを見るときの状態で、ページのソリッドな階層とウエイトを確認するためのものです。

サイトのキャプチャ
  1. この見出しは目立ちます。ページで最も目を引くもので、これのためにユーザーはページにフォーカスを合わせようとするでしょう。
  2. ちらっと見た状態ではサイドナビゲーションを識別することは不可能でしょう。しかし、アイテムの量でどのくらいのプロダクトがあるか知らせることができます。
  3. 広告は非常にクリアです。こういったのは広告主に喜ばれます。
  4. ここで認識できるプロダクトは本とeリーダーです。これらが主要商品であるのであれば、それは意味をなしています。
  5. ページに明確なアクションボタンがありません。このページを見た瞬間、ユーザーは何をすべきか分からないでしょう。

Mirror

デザインをミラー表示すると、不整列な階層とエリアを指摘することができます。

サイトのキャプチャ
  1. ミラー表示することで、ページのどのビジュアルが原因でデザインが壊されているか明らかにします。
  2. 多色を使った広告とFacebookのウィジェットがこのページのデザインを壊している要因です。ミラー表示はページ内のすべてのエレメントがどれくらいばらばらに感じるかを強調します。
  3. スライダーはコピーがページにごちゃごちゃ感を加えています。
  4. コピーとのバランスがよくない画像は、その片寄りが強調されます。

Rotate

回転表示させることで、ページのウエイトとエレメントのバランスを確認することができます。

サイトのキャプチャ
  1. ページを左に回転させることで、ウエイトが上部に向かって一列に並べられていることが明らかになります。リンクは下方に配置されています。
  2. コンテンツのボックスが縦列と横列の間に不必要なデザインエレメントを生み出しています。
  3. リンクを横にして見ると、このページのクリック可能なコンテンツがどれほど密集しているかが分かります。若干のエリアではこれは歓迎されますが、他のエリアでは避けるべきです。

50% Zoom

50%にズームすることで、あなたのサイトをより小さいサムネイルとして見ることができます。あなたのサイトはレイアウトが持ちこたえていますか? 良いレイアウトは小さいサイズでもストーリーが理解できるものです。

サイトのキャプチャ
  1. メインとなる画像はページいっぱいに使用されており、これが写真のウェブサイトであるということを伝えています。
  2. メインのヘッドラインは少し行方不明ですが、アクションボタンは画像に対して目立っています。
  3. コピーはぼやけてしまっていますが、3つの見出しはユーザーがサイトで何ができるかを伝えています。

top of page

Trackback

Comments

「NTTドコモだけロック」やレスポンシブWebデザインの優れた24の例など今日のまとめ | WDS

on 2011年9月12日

[...] あなたのウェブページが機能しているか7つの面からチェックできるオンラインツール -Spur | コリス webサイトのデザインを多角的に検証できるツールとその解説。日本語が化けてしまい [...]

top of page

©2014 coliss