messaliberty

hulor と開発チームの最新情報

Posts Tagged ‘Webデザイン 視線 MovableType MT’

ユーザーの視線が描くもの

4月 29th, 2006 投稿者: hiro

ようやくひと段落したので、今日からまたブログを好きなだけ書こうと思います(笑)

忙しい中も情報収集(これはもはや趣味)は欠かさなかった僕ですが、興味のあるエントリーを見つけました。

GIGAZINE – ウェブページを見る目の動きは「F」パターン

ユーザーの目線の動きに注目したエントリーです。

つまり人間はページを見る場合、「F」の字を描きながらページ全体を見ているというわけ。

これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうで。

画像付の詳しい解説はリンク先ページを見ていただきたいのですが、要するにページにアクセスしてきたユーザーは次のような流れでページを見渡すのです。

  1. ページの一番上を横にさらっ見る。
  2. ページを少し下に向かってスクロールするように視線を移動させる。そして短く横にスライドさせる。
  3. そのあとひたすら左サイドを縦にスクロールするように眺める。興味がある単語を見つけたらゆっくり。

その結果、ページ全体のコンテンツの 1/3 程度しかユーザーは見ていないと。

他にもリンク先では、ページのジャンルによる目線の違いも紹介されています。ジャンルが違えば当然ユーザーの目線の動きも変わるのですが、おもしろいことにどれも基本的には「F」を描いているのです。

はっきりとこういうデータが出てくると、おもしろいですね。この視線の動きを意識すれば、ユーザーの目線に余計な動きをさせないように、デザインもシンプルで無駄のないサイトを構築して、見せたいコンテンツを前面に押し出すことも考えられると思います。

いやぁ、シンプルデザインも奥が深い。

この話にもつながるのですが、最近何がそんなに忙しかったかに関しても少しだけ書いておこうと思います。

主に取り組んでいたのは、messaliberty トップページにもある謎の(?)システムの開発と、MovableType 導入サイトの構築やカスタマイズです。

messaliberty はこれまで、MovableType 専門の Web サイト制作を行ってきました。現在は新規のご依頼を受け付けていない状態なのですが、これまでに数多くの MovableType 導入サイト構築をさせていただきました。

今後は MovableType サイト構築そのものは受注しない方針なのですが、これまでに培ってきたノウハウをいろんな場所でアウトプットし、MovableType 導入を考えておられる方の支援をさせていただきたいと思っています。

その第1弾として、現在 Web 開発者向けのコミュニティサイトを構築しています。MovableType のインストールからカスタマイズ、スタイルシートによるデザインなどなど、ユーザー同士の質問や情報発信ができるようなコミュニティにしようと、日夜取り組んでいます。

近々正式に発表させていただきますので、そちらのコミュニティサイトも楽しみにしてください。

と、最後にさりげなく CM(笑)