デザイン: 2009年9月アーカイブ

ＷＥＢ制作をする上で切手も切り離せないユーザビリティ。
このサイトでも何度もご紹介していることです。

少し古い記事ですがＷＥＢページを見る人の目の動きを検証した記事を見つけたので
ご紹介します。

「 http://www.useit.com/alertbox/reading_pattern.html 」

人の目は「Ｆ」の字を書きながらページを見ていきます。


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


その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描いていく。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。


第1段階：
訪問者は最初にページの一番上のコンテンツエリアを水平に視線移動させる。これが「F」の一番上の水平ラインになる。

第2段階：
次に訪問者はページを少し下に向かって視線移動させてから、再び第2の水平移動をする。この第2の水平運動は最初の水平運動よりも短い。これが「F」の字の上から2番目の短い水平ラインになる。

第3段階：
最終的にユーザーは左サイドから垂直下方向に向かってページをスキャンするようにして視線移動させる。時折ゆっくりとした速度で、そして機械的に見ていくとのこと。中にはまだら状に視線移動させる人もいるとのこと。いずれにしろ下方向に移動するので、これが「F」の最後の要素になります。

なお、この図の色は何を示しているかというと、最も見られているのが赤色、次が黄色、最小が青色。全く見られていないのが灰色とのこと。

結果、累計パターンとしてはコンテンツの内容によって大体以下の3パターンに分類されるらしい。


パターン1：記事



企業のウェブサイトにある会社概要や一般的な記事の場合がこの画像のパターン。典型的な「F」パターンです。

パターン2：製品ページ


これもF字のパターン。一番上のタイトルを見てから製品写真を見て、あとは説明をざっくりと見ているようです。

パターン3：検索結果


各検索結果のタイトルを見ていくわけですが、トップページの上位しか見ていないことがわかります。


ＷＥＢで調べ物をするときなどは自分がほしい情報を見つける為にかなりのページを見ると思います。
そのなかで自分にマッチングしたものしか集中的に見ないと思います。

ページ構成を考える際、見せたいものを効果的に配置すること、重要です。

先日は補色についてお話しましたが、今日は「近似色」について。

補色は色相環の反対側の色でしたが、「近似色」はその名の通り、基本的に色相環で近い色となります。



近似色を使うメリットとしては、「色調が整う」「見た目の統一感が出る」などですが、「目立たなくなる」というデメリットもあります。

なので、近似色で構成するとき、たいていの場合は補色やそれに近い色などを織り交ぜてアクセントをつけるのが基本的です。


近似色の例


補色（の近似色）例


もちろん補色にこだわる必要はなく、違和感のない色であれば織り交ぜていくが良いでしょう。

ただしその場合も色の使い過ぎには注意です。

色を使いすぎると、キーカラーが何なのか分かりずらくなり、バランスも崩れてしまいます。

トータルバランスを見て、色を使うようにしましょう。

また色関係のお話です。

webデザインに関わる方々の間では、「補色」というのをご存じの皆さんも多いかと思います。

この「補色」というもの、これは何かと言いますと、

「色相環で反対側に位置する色」です。

ちなみに「色相環」はこちら。



RGBでは、混ぜると白になる色ということらしいです。

サンプルはこちらです。



見てわかるとおりですが、コントラストの対比がハッキリしていて、まさに「反対側の色」ですね。

この補色には、互いを強調しあう効果があるそうです。

外でよく見かける看板などにも使用されていることは多いです。

web上では片方の明度などを調整して、より見やすく（目に痛くない程度）で配色されているのをよく見かけます。

ただし見やすい配色ではありますが、無計算な多用は危険のようで。

いつでもそうですが、ベストなタイミングと場所で使っていただけると効果大だと思います。

web制作とは切っても切り離せない「色」との付き合い。

企業やロゴのイメージカラー、装飾用のカラー、注目度を与えるワンポイントカラー...などなど。

様々な状況・どう見せるか？など、色の使い方は千差万別です。

方程式のように明確な答えがあるものでもないので、使い方をマスターするのは大変難しいですね。

最近制作上で色を改めて考える必要があったので、初心に帰り基本色の人に与える印象を調べ直してみました。



赤　...　情熱、興奮、怒り、危険、激しい、愛情、熱い、炎、派手さ、力強さ、など

橙　...　新鮮、明るい、活発、元気、親近感、元気、明朗、開放的、新鮮、話し上手、など

黄　...　快活、幸福、光明、歓喜、希望、愉快、注意、緊張、軽率、友達、など

緑　...　平和、安全、永久、自然、若さ、爽やか、健康、癒し、安息、安定、思慮深さ、など

青　...　冷静、知性、忠実、誠実、冷たい、清潔、涼しい、憂鬱、静寂、インテリジェンス、など

紫　...　高級、神聖、神秘、高貴、豪華、崇高、優雅、精神世界、エキゾチック、など

白　...　清潔、明るい、純粋、素直、真実、真理、正しさ、涼しさ、など

黒　...　豪華、厳粛、重厚、高級、深い、男性的、悪、恐怖、不安、など



基本的な色だけでも与える印象は様々です。

色に迷ったとき、基本的な意味や目的を改めて考え直してみることで、ベストな色にたどりつけるかも知れませんね。

Googleの検索トップページがリニューアルしていました。


気づいた方いるのかな・・・・


検索の文字が大きくなりました。

微妙なリニューアルですが・・・
一部のユーザーからの意見だそうです。

確かにＷＥＢページにとってユーザビリティはとても大切です。
ちょっと考えさせられるリニューアルでした。

最近リリースされたCMSの中で特に印象的だったのが、デザイナーでも使いこなせるという「bingo!CMS」。

従来のデザイナー向けCMS は、「テンプレートはHTMLにコメントタグを入れるだけなのでDreamweaverでも編集できる」というものが多かったけど、bingo!CMSの場合はCMSのUIを進化させて、Web上の直感的な操作でページの編集が行えるようにした点がユニーク。

お約束どおりPHPとMySQLで動く感じ。

bingo!CMSは基本的には商用なんですが、ユニット数が少ない無償のオープンソース版も配布されているので、サポートは不要、自力で何とか派にはそちらでも。

見た感じ、他のCMSよりも直観的な操作っぽい。

なおかつ、ファイル・ディレクトリ構成がシンプルで丁寧な感じです。

結構ありそうで、なかなか見つからないのが和風デザインに拘ったサイト。

もともとアナログの要素が強い和風デザインなだけに、デジタルでの表現にはかなりの手間と労力がかかるせいもあると思います。

でも、やっているところは気合いを入れてやっていらっしゃるみたいで。

今回見つけたものを少しご紹介します。



・「Jonathan Yuen(2006)」

水墨画風のデザイン。マウスポインタも水墨画風に変わります。
画面遷移も素敵ですが、流れてくるサウンドも絶妙にマッチしています。




・「多田屋」

和風デザインでは結構有名らいいのですが、各ボタンを押したときの画面遷移にやられます。




・「日本の暮らし二十四節気めぐり 言の葉草 | 伊勢志摩の旅 よいとこせ」

「言の葉」と同時に奇麗な写真を楽しめるサイト。エフェクトもかなりかっこ良く大人なサイトです。


ゆっくりと眺めていたいような、どれもFlashならではのサイトですが、焦る気持ちを抑えてこういったサイトを周遊してみるのもたまにはいいかも知れません。

息抜きに、デザインの参考に...してみてはいかがでしょうか。

最近制作で手書き風のフォントを使いたくなったのでいろいろ調べてみました。

フリー、シェア、商用利用不可も含めると様々あるようです。

代表的なものを少しご紹介します。


「ミウラFONT」無償＆有償版あり。


「みんなのうた」商用利用不可。


「あんずもじ」ライセンスについては記述なし。


「みかちゃん」基本的にフリー。


「ふい字」基本的にフリー。


企業サイトなどではあまり使う機会は少ないですが、手書き風フォントを使うとサイトイメージが一気にそれらしく変わります。
女性的なやわらかさを演出したいときや、ナチュラル感を演出いたいときなど、様々なシーンに使えますね。

「ここぞ」というタイミングで使ってみてください。