2011年11月22日火曜日

誰にでも使えて効果がある、視点を動かす要素

スポンサーリンク

「ユーザーの視点を動かしたい!」「この部分に注目させたい!」とは誰しも思うものですが、簡単ではありません。しかし、視点を持って行きやすい方法は存在します。その中でも特に単純な方法を考えてみたいと思います。


視点を動かす要素


視点を惹き付ける方法は色々とあります。
その中にはレイアウトや要素の強調のように全体との比較が前提の方法もありますが、今回は後付けでも使えるより単純な方法を考えます。

一点注意点としては、後付けで何かしら要素を加えるのですから元のデザインはシンプルである程効果的です。ギラギラでピカピカなサイトにはこの方法はほとんど意味がありません。

もっとも、最近のデザインは極力余計な要素を排除したり白基調だったりなので大概は使えると思いますが。

1:矢印




ページ内にボタンがあり、そこに視点を誘導する方法を考えてみます。



最も簡単にして強い要素は矢印です。
なんだそんなことかと思われるかもしれません。しかし、日常的に目にしており記号としての意味が無意識のレベルで刷り込まれている、非常に優れた要素です。加えて、子供やお年寄りやWEBに慣れていない人にもわかる点は大きな強みです。

矢印が優れている点はそれだけでありません。始点と終点に視点を添わせることができるのも強みです。単純な強調であればいきなり強調した部分に意識が行ってしまいますが、始点があるために意図した方向に意図したように動かすことができます。

加えて、実際にサイトへ導入する場合には矢印自体の表現によって様々な印象を与えることができます。

1-1:矢印の強弱



矢印が視点を誘導する力は、矢印の大きさに必ずしも比例しません。むしろ、大きすぎると矢印自体に視線が留まりやすく流れを弱めてしまいます。

重要なのは「流れ」や「リズム」です。
具体的には、矢印の棒部分より先端を大きくする方が流れが強くなります。また、1つの要素内で一部分だけ強調されていると、全体と部分という関係にリズムがうまれて部分への誘導が強くなります。

1-2:矢印の表現



実際に矢印をサイトに用いる場合、サイトのイメージにとけ込む様に作り替えます。必ずしもというわけではないのですが、矢印は異質さで目立つ必要が無いからです。その形を見て矢印だと感じられれば、必要な効果がでるはずですから。



なお、独立した矢印として配置するだけではなく、背景画像として使う方法も有効です。この場合視点を誘導する力は弱くなりますが、視点を動かすために十分な力を発揮してくれるでしょう。

2:丸




丸といってもいろいろですが、今回は丸で囲む方法です。
この方法もありふれた方法です。ノートなどで何かしら強調しようとすると、無意識に丸で囲む方は多いかと思います。それほど普通の方法です。

丸の特徴は矢印と違い方向性を持たないこと。画面に丸が現れると、レイアウトやその他の要素を無視して丸で囲んだ要素に目がいくイメージです。

2-1:丸の表現



ボタンを丸で囲むとその部分が強調され視点が惹き付けられます。が、サンプルとして作成したボタンでは少々違和感を感じます...。コーディングの問題を考えると、ボタンのデザインにもよりますが位置合わせなど微調整が大変そうでもありますし。

丸形や小さめのボタンであれば、使いやすいかもしれません。



より簡単に取り入れる場合には、見出しや商品名などの背景として使用する方法があります。
全体を囲むのではなく、部分的に囲んでいても違和感がありません。違和感無く使う方法としては、自分自身がメモに丸を使うときどうしているのかを参考にするとよいでしょう。

3:数字




最後は数字です。数字には規則性があり、順序をストレートに表します。
特定の要素を強調したり、無理な視点の移動はできません。あくまで迷って混乱しそうな視点の流れを整えるために使います。

なお、ローマ数字や漢数字よりもアラビア数字をお薦めします。
なぜなら日常的に順序を表す場合はアラビア数字だからです。サイト全体として必然性がないのなら、アラビア数字以外では違和感が出てしまいます。そのため補助的な要素としては適しません。

3-1:方向を整える



数字がもっとも効果的に機能するのは、順番が分かりにくい時です。数字を付けることで規則が生まれ、視点は規則に従って移動します。矢印や三角形などで順番を指示することももちろん可能ですが、数字の方が誘導する力は強いはずです。

加えて、実際にコーディングする場合を考えると、数字であればテキストとして入力すれば済みますので手軽です。

ワンポイントとしては、書体を変更することで数字は多彩な表情を持ちます。書体はなにも文字だけに関わる物ではありませんから、求める表情を持った数字を探すことは無駄ではありません。

結び


今回は誰でも日常的に用いる表現方法をとりあげました。

ページ内には視点を誘導する様々要因がありますが、知識やセンスがないと使えない物ばかりではありません。特定部分の強調や順序を整えるのであれば、誰にでもできるのです。
もちろん違和感無くというのであれば経験は必要でしょうが、最低限の機能を果たすことが目的であれば導入するだけで効果はあります。

ディスプレイから顔を上げて辺りを見回すだけでも、ここで上げた以外の要素は見つかるはずです。それをWEBサイトやページに取り込むだけで、思った以上の効果が生まれることもありますので、是非お試しください。

蛇足

ちなみに、今回は見出しに番号を入れています。
番号があると読み飛ばす力より、順番に読もうとする力の方が強くなるのではと考えたからですが...。いかがでしたでしょうか?いつも読み飛ばすけど、今回は全部読み切ったという方がいましたら成功なのですが。

スポンサーリンク

0 件のコメント :

コメントを投稿