今日はWebサイトやiPhone向けアプリのデザインについて書きたいと思います。
●安全領域とは何か？
Webサイトの画面デザインを行うとき、「安全領域」という考え方を考慮してデザインを行う場合があるそうです。
安全領域とは以下に書いたような、Webサイトの左上の領域です。
この部分は、ブラウザのウインドウが小さくされた場合でも表示されています。
また、WebサイトはPC、スマートフォンなどの様々な大きさのディスプレイで表示されることになりますが、安全領域は小さめのディスプレイでも表示されます。
そこで、この安全領域にロゴやナビゲーションと言った重要な要素を配置するのが良いとされています。
Google Labsに面白いサービスがありました。
このサービスを使うと、ブラウザのウィンドウサイズの分布を可視化してくれます。
この例では、99%のユーザーは最低でも紫の範囲が見えており、90%のユーザーには最低でも水色の範囲が見えていることがわかります。
左上の領域ほどたくさんの人に見れることが一目瞭然ですね。
「安全領域」という考え方は、Webサイトを「画面単体」でデザインするのでは無く、「ウィンドウの大きさ」や、「どんなデバイスで見られれるのか」と言った事に、幅広く気を配った考え方だと思います。
●ホットゾーンとは何か？
Webサイトの「安全領域」と似た考え方に「ホットゾーン」という考え方もあります。
これは、iPhone向けアプリの画面をデザインするときに使われる考え方です。
iPhoneは指で操作するデバイスです。
ですから、右手の親指が自然に届く範囲である、ホットゾーンに重要な要素を配置する事が望ましいとされます。これがホットゾーンの考え方です。(※1)
この「ホットゾーン」という考え方は、デバイスと言う枠を超えて、ユーザーの手にまで気を配った、更に進んだ考え方だと思います。
Appleが配布しているiPhoneアプリのデザインガイドラインには、「（iPhoneは）外出中、気が散るような状況で使われる」点に気をつけてデザインせよ。と、言った内容が書いてあるなど、ユーザーが置かれた状況に気を配ってデザインを行うべきである事が強調されています。
●まとめ
「画面だけをデザイン」するのでは無く、製品が使われる状況や、使う人の状況に気を配った「枠を超えるデザイン」を行う事が、UXの向上のために重要では無いかと思います。
●注釈
*1:さらに興味深いのが、指が届きにくい右上や右下の領域です。ここには編集（削除）などのボタンが配置され、何かの拍子にボタンに指が触れてしまい誤操作をしてしまわないようになっています。（推測）。ユーザーに簡単に押して欲しくないボタンを"コールドゾーン"に配置し、あえて押しにくくしているのです。
●参考書籍
iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン
すべての人に知っておいてほしい WEBデザインの基本原則
0 件のコメント:
コメントを投稿