抽象のメリットと必然性

Pocket

モバイル向け画像を製作する作業は、
画面解像度の低い携帯電話向けに作っていた時代から、高解像度のスマートフォン向けにシフトしており、非常に多くの情報を扱う必要があります。

240pixel → 320pixel → 640pixel → フルHD/2K → 4K

結果、
レイアウトや素材を製作する場合の情報選択肢/余地が増え、判断に時間がかかり、細部まで作りこみが出来てしまう為、終わりが見えなくなる作業を生む可能性が高まり、
また、高まった表現力は「具体性」「趣向」の判断を生む状況にも及んできております。

…今回はそんな予期せぬセグメントを避ける表現情報量との適切な向き合い方を考えてみました。


制約の中での可能性

日本人は制約を受けた状況下での、アイデアと効率化を得意としているといわれています。
理由として、限られた島国国土の中で生活をしてきた影響もあるのでしょうか。

1980、90年代の量産性に長けたアニメフォーマットの確率や、家庭用ゲーム機ハードとソフト面での成功、
そして、携帯電話とハード/ソフトの開発においても世界の指標たる結果を残してきた状況は、
いずれも、「黎明期から成長期へ向かう中でのテクノロジーが後追いする制限下」であったといえます。

しかし、
逆の視点から見てみると、
日本人は可能性溢れる選択肢状況下では目的を見失い、
多彩な表現力の状況下でも方向性を見失いがちな思考を持っているとも考えられます。

話を「表現」「UI」に絞ってみると、
日本人は、シンプルで捉えやすいUIに長けている可能性が考えられるのではないでしょうか(強引ですが)。


シンプルで捉えやすい表現とは?

わかりやすさの条件は「単純構造」で「敷居が低い」でしょうか。

グラフィックデザインでは標識やマークなど「アイコン化」されたものがその代表ですが、
そのわかりやすさを追求して結果が、私たちが良く見るシンプルなデザインになっています。

いずれのマークも初見の記憶がないくらい一般的に生活に浸透しており、
作りこんだ表現にする必要がないことを理解いただけるのではないでしょうか。


セグメントしない表現とは?

人を選ばない(セグメントしない)表現とは、狭義ではなく広義で抽象的であることです。
作りこみ、具体的にすることが目的である以外はシンプルな表現で進めることのメリットが多いのではないでしょうか。
例えば、

・運用性/更新性の向上
・容量削減
・表示速度改善

でしょうか。

ピンク色の画像は描き込みが多く具体的で、見る人にカテゴリ(犬/車)を越えて詳細(犬種/車種)まで想像させています。


まとめ

情報設計に「更新」は付き物です。
運用パフォーマンスを考えた場合、
グラフィックデザインはトータルコストを抑えられる素材を選ぶ必然があり、
アーティスティックなグラフィックであれば、
芸術品として「想い」を込める必要があります。

限界の作りこみが価値に大きな影響を与えるコンテンツはありますので、
都度案件の「目的と訴求対象」を意識して、
適切な情報設計を運用してみるメリットは十分あるのではないでしょうか。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

Pocket

UIと配色

Pocket


配色とは、2色以上の色を組み合わせ、配置および構成をする事です。
UIデザインでは、どのような配色を行うのかによって、使用感やユーザーに与える印象が大きく変化します。といってもUIデザインに限りませんが…。
色の扱い方はとても奥が深く、国や地域によって色に対するイメージは変わります。また、組み合わせ方は数え切れないため一言で配色について語りきる事はできません。一言でなくとも語りきれないと思います。
今回はよりカテゴリを絞り、色は色でもUIデザインにおける色(配色)のポイントについていくつかご紹介致します。


70% 25% 5%の配色

UIに使用する色数の目安は3色です。3色以上にする事が間違いと言うわけではありませんが、色数を増やしすぎると、どこを強調しているのか、どこに触れる事ができるのかなどが伝わりにくくなり、情報が整理されていないような見づらいUIになってしまいます。
しかし、色数を押さえたからといって適切に配色ができているわけではありません、使用する量も重要になります。UIにおいて実際に3色をどのようにして選び、使用するのかということは「70・25・5の法則」を意識すると選びやすくなります。70・25・5の配色はベースカラー70%、メインカラー25%、アクセントカラー5%にする配色法です。ちなみにこの「70・25・5」の考え方はwebデザインでは基本とされている配色方法です。

70% ベースカラー:ベースカラーは主に背景に使用される色であり、一番使用される色となります。多くのアプリケーション・WEBでは白が使用されています。
基本的には原色などの彩度の高い色は使用しません。使用すると文字が読みにくくなってしまう事があるためです。そのためベースカラーは控えめな色にする事が望ましいです。料理で言うところのお皿です。ピンク色のお皿に料理が盛られて出てきたら、落ち着いて食べる事ができないですよね…!?

25% メインカラー:メインカラーはサービスのイメージや方向性に沿った色を使用します。使用するのは25%で70%のベースカラーほどではありませんが、ここで使用する色によってユーザーの第一印象が変化します。一般的にはサービスのイメージカラーや、コーポレートカラーが使用されています。

5% アクセント(サブ)カラー:ボタンや通知・警告などユーザーに特別な何かがあると感じさせるために使用します。また、メリハリを出し全体を引き締める効果もあります。メインカラーと補色の関係にある色と組み合わせるとアクセントとしての役割を高めることができます。
アプリケーションの配色を検討していると、3色ではまとめ切れない箇所が出ててくると思います。その場合は3色以上になりますがアクセントカラーを追加してみてください。アクセントカラーは機能として追加されているのであれば、増えても問題ありません。ただ、アクセントカラーを使用しすぎてしまうと、アクセントとしての効果が薄れるばかりか、安っぽい質の悪いUIに見えてしまいますので使用する量に気を付けてください。

※)補色
色相環と呼ばれる色の順番と関係を円にしたものにおいて、正反対に位置する色の組み合わせ。

文字に「黒」は使わない!?

皆さんがWEBサイトで「黒」だと思っている文字の色は、見た目は黒でも実際には「グレー」が使用されている可能性があります。

●吾輩は猫である  ●吾輩は猫である

左の文字はディスプレイ上で最大の黒(#000000)です。そして右はグレー(#323232)です。
どちらも比較して出さなければ「黒」と認識するはずです。では、どちらも「黒」として扱う場合どちらの黒をオススメするのか…。それは右の黒(グレー)です。
その理由はディスプレイ上で再現される最大の黒(#000000)はとても強いからです。
ベースカラーが白の場合に文字を黒(#000000)にするとコントラストが高い状態となります。そのため他の要素よりも主張が強くなり、文字を読む際の疲れの原因の一つになってしまいます。また、文字の主張が強いためレイアウトの優先順位に影響を与える可能性があります。以上の事から黒ではなくグレーの使用をオススメします。
ですが黒(#000000)を使用することは間違いではありません。レイアウトの表現上必要になることもあります。ただ、使用する際にはグレーにする事も検討してみてください、少し黒を押さえるだけでも印象は変わります。


配色によってサービスのイメージは大きく変わります。目的に合った色を選別し、適切な配分で使用する事が大切です。
配色にはこうした方が良いという基本は存在しますが、絶対にこうしなければいけないというものではありません。絶対にこうだと言う正解もありません。しかし、基本から外れると扱うことは難しく、それ相応の経験と技術が必要になります。
 

Pocket

デザインでグループを作ろう!

Pocket

こんにちは!今回のテーマは「デザインでグループを作ろう!」です。
デザインでグループを作るとは何か、どのような時に使うのかお話していきたいと思います。


デザインでグループを作る

デザインでグループを作るとは、「情報をグループ化すること」です。
関連する情報は近くに、関連しない情報は離すなどして、項目や特定の意味ごとにグループを作ります。
こうすることで視覚的に見やすく、わかりやすくすることが出来ます。


なぜグループを作るの?

何故グループを作る必要があるのかと言うと、見た目にわかりやすくなるのは勿論のこと、要素が持つ意味を直感的にわかりやすくなるからです。
こうすることで、ユーザーにとってストレスのないデザインにすることが出来ます。

まず、下の図を見てみて下さい。乱雑に配置された情報を、共通する項目ごとに整理してグループを作りました。

「“りんご”と言う単語を探して」と言われた時に、探しやすいのは右側のグループ化された方かと思います。
「“果物”のカテゴリがあるから“りんご”はきっとそこにあるだろう」と想像し、順序立てて探すことが出来るので、ストレスなく見つけることが出来ます。

グループ化されていないと、気付きのキッカケがない上に目線も定まらず、わかりづらくストレスに繋がってしまいます。


更にもう1つ図を見てみて下さい。

バラバラに並んでいる情報を、共通の項目でグループに分け、規則的に並べ替えました。
グループ化されていない状態だとなんの意味も感じられなかったかと思います。ですが、グループ化することで「赤と黄色と青のグラデーションになっているんだ」と一目でわかったかと思います。

このようにグループ化することで、言葉がなくても視覚的に、要素の持つ意味や関連性を伝えることが出来ます。


グループ化の方法

代表的なグループ化の方法3つを使い、下にある、要素がぐちゃぐちゃで見づらい図を整えていきたいと思います。

1.近くに配置してグループを作る

要素と要素の近さでグループかそうでないかを表します。最も簡単でポピュラーな方法です。
グループ化したい物は近くに配置して、そうでない物は十分なホワイトスペースを確保してあげましょう。

2.見出しを付けてグループを作る

テキスト要素でよく使うグループの作り方です。
見出しとなるテキストのサイズを大きくすることで、メリハリを付けて文章を読みやすくします。
また、タイトルの優先度を上げることで視線を誘導することも出来ます。

3.色を付けてグループを作る

タイトルやカテゴリ名など、近接していなくても同じ意味を持つものに色を付けます。
同じ意味を持つ要素に統一した色を付けることで、「この色は○○を表しているんだ」と自然とユーザーに覚えてもらうことが出来ます。

完成!

これで完成です!
最初の無秩序な配置と比べると、格段に分かりやすくなったのではないでしょうか!


おわりに

いかがでしたでしょうか?
グループを作ること事体はそんなに難しくないと感じてもらえたのではないでしょうか。

グループを作る為には、まず作り手側が要素の意味を理解しなければなりません。
要素や関係性を理解して配置することで、ユーザーにとってわかりやすいデザインを作ることが出来ます。

「デザインを考えてみたけど、どうしたらもっとわかりやすくなるかな…」と悩んでしまった時は、ぜひ思い出してみて下さい!

それではまた!デジマースのコンでした。

Pocket

画像配置について考えてみる

Pocket

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼画像配置の考え方①

ユーザーがストレスなくサイト回遊をするうえで意外と忘れられがちなのが画像の配置の仕方です。

突然ですが、下記サイトAとBどちらが見やすいですか?
A・Bは同内容のサイトとします。


ヘッダーからフッターまでゆっくりサイトA、Bを見ていったときに違和感を感じることがほとんどなく見やすい方と思うのはAと答える方が多いのではないのでしょうか。

それではなぜAなのでしょうか。
AもBもコンテンツの内容は同じです。
しかし、よくよく見てみると画像の配置の仕方が異なるのが見て分かるかと思います。
配置によって違和感を感じてしまっているのでしょうか?
考えていきたいと思います。

▼画像配置の考え方②

今回はより違和感を感じるであろう部分よりピックアップをしていきます。

★前提★
このサイトはよく見ると左右にある程度の余白をとっている。

またこの部分の画像の見せ方として、サイト全体の余白に合わせAのように余白を整えることが改善への近道ですが優先度によっては画面いっぱいに画像を表示する事で他の部分との差別化を図ることも可能です。
現在ではそのどっちつかずの状態が違和感を与える原因になっています。

▼ ▼ ▼

これら部分の横幅のずれは、作成している画像であれば画像のサイズがそもそも異なってしまっている。
またはCSSだけでのHTML構成、画像配置のCSSが崩れてしまっていることが大いに考えられます。
小さな差ですが、揃っている方がコンテンツ内の統一感を感じられ見ていて気持ちの良いものです。

▼ ▼ ▼

一言で言いますと面積率の高い物から配置するイメージです。
そうすると自然と訴求内容が大きなものから並びますよね。

▼最後に

サイトの提供内容がユーザーにとって「本当に唯一無二である」または「細かいことは気にしないユーザー」であれば多少、画像の配置に違和感があっても気にならないかもしれません。
ですが、全部のサイトがそうとは限りませんし取り除ける違和感であれば取り除いておいた方がユーザーにも運営者側にもメリットは有るでしょう。
1つでも違和感に感じる所を見つけてしまうとどうしてもその印象は残ってしまい、ずっと改善されなければ「まだ改善されていない」と負の要因になってしまう可能性も考えられます。
画像の配置について少しでも気にかけてあげると、ユーザーのサイト巡回はよりスムーズになるかもしれません。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。
またお会いしましょう!

Pocket

速度制限でもストレスのないWEBページ

Pocket

現在主流の4G通信回線の実行速度は、
15Mbps(15,000kbps)程度といわれています(規格上は150Mbps~225Mbps)。
※「bps」=バイト・パー・セカンド/1秒間に受け取れるデータ量

そんな中、利用者は、契約ギガバイト数を超過すると厳しい速度制限を受けることになりますが、その「128kbps制限」を体験している利用者は65%程度いる様ですので見過ごせません。
※『スマートフォンに関する意識調査』NTTコミュニケーションズ調べ

今回はそんな方のなかでもデータ容量の追加購入せずに月末を乗り切る利用者を考慮して、
「128kbps制限でもストレスの少ないWebページ」
を考えてみました。


回線速度の変遷リスト

まずは、通信の歴史、
固定電話回線と携帯電話回線の変遷をリストにしました↓


<固定電話回線>

電話回線(アナログ回線)1990年代  ※銅線
28.8kbps

ISDN回線(デジタル回線)      ※銅線
64kbps/128kbps(2チャンネル時)

ADSL回線              ※銅線
512kbps/47Mbps

光回線               ※光ファイバーケーブル
100Mbps前後


<携帯電話回線>

3G回線
2Mbps程度(実行速度)(規格上数Mbps/14Mbps)

4G回線
15Mbps(15,000kbps)程度(実行速度)(規格上150Mbpsや225Mbps)
速度制限を超えると通信速度が最大128kbpsに制限

※記載の速度実数値は参考程度となりますのでご了承ください。


上のリストは1990年代から「通信」を経験してきた年代には懐かしく、若年層には見慣れない項目が多いと思われますが、
制限状態にある「128kbps」という通信スピードがいかに遅い回線状態だったか理解いただけるのではないでしょうか。


128kbpsでできること

それでは速度制限を逆手にとって、
制限中もストレスなくサービスを利用出来ないかと考え、
分析を進めてみます。

まずは過去のFP時代のページ総容量レギュレーションを確認してみると…

・1ページあたりの容量は100kバイト以内(※概ねの指標)

とありますので

128kbps制限下でも、容量数字上は2秒もあれば表示されます。

FP(フィーチャーフォン)向け程度のページ情報を表示する分には十分なスピードです。


文字中心のページ製作へ

テキストは1文字につき、

・半角英文は、1バイト
・全角が必要な日本語は、2バイト(アジア地域などは「2バイト圏」と呼ばれます)

容量を使います。

単純計算すると、
128kバイトであれば、タグやスタイル、JavaScriptを含めて、
128,000文字の文章が書けます。
ブログ記事は2,000文字(4kバイト)程度が多いので、テキスト本文だけで考えると十分足りる計算です。
今回、
1秒程の読み込みを目指すのであれば、
タグや画像に、残りの124kバイト使用できます。
読み中心の静的ページであれば十分なのではないでしょうか。

さっそくサンプルページ作りを始めます。


読み物中心のページを作る

画像を載せる場合は容量制限を設定し、
大きすぎず適切な減色による容量削減が必要です。

ポイントとしてこちらでしょうか。
・グラデーションは使わない
・PNG8形式(インデックスカラー)で保存
・CSSスプライトで画像を1ファイル化(アクション発生件数を減らす)

今回、この記事ページ自体をサンプルとして扱い、使用画像含め128kバイト以内で作りました。
本文テキスト部分の文字数は2,000文字程度です。

ページ内容のみの容量は25kバイト程度ですので、
通常の電波状況ではストレスなく表示が出来ると思われます。


最後に

動画や画像中心のリッチなコンテンツページは、128kバイト以内では作れませんが、
制限下でも情報を問題なく表示できるページ作成は可能です。

ここまで詰め切る需要も少ないと思われますが。
FPのころの通信インフラにやさしいエコなサービス作りに挑戦するのも新鮮ではないでしょうか。
是非お試しください。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

Pocket

デザインと錯視

Pocket

ロゴやフォント、イラストなどの大きさ・長さ・色・角度は、特定の条件が重なると、想定していた見え方と実際の見え方とで異なった見え方をする事があります。これを「錯視」と呼びます。いわゆる“目の錯覚”です。

デザインを行う前にはある程度錯視を理解しておく必要があります、なぜなら数値上は同じ位置・同じ間隔で揃えていても、実際に目で見て確認すると、錯視により同じ間隔ではないように見えてしまったり、ある要素だけが小さく見えてしまうという事が起きるからです。“なぜこの見え方になるのか”を知っておく事で錯視が起きた場合の修正をスムーズに行うことができます。今回はそんな錯視についてご紹介いたします。


フィック錯視

突然ですが問題です。①~③の図形のうち「A」「B」の長辺が同じ長さの図形はどれでしょうか?

正解は

「③」です。同じ長さに見えましたか?
フィック錯視とは同じ長さの図形でも、水平にされた図形よりも、垂直にした図形の方が長く見えるという錯視です。(なぜこのような見え方をするのか詳しいメカニズムは解明されていないそうです)ロゴデザインやイラスト製作などで、このような組み合わせが発生する場合は、数値に囚われず、自分の目で見て調整を行う必要があります。(下図参照)

また、同じ幅の図形でも、垂直にされたものよりも水平にされた図形の方が太く見えるため、ロゴやフォント制作の際は、縦線を太めに製作し錯視を調整する事があります。太さの変化は顕著に現れるわけではないので、調整は微調整程度に行われます。そのため普段目にするロゴやフォントでは、このような調整が行われていることに気づく人はいません。

エビングハウス錯視

同じ大きさの図形でも、周りに大きい物を置いた場合と、小さい物を置いた場合とでは大きさが異なって見える錯視です。

図のような配置をした場合、自分の想定よりも中心の図形のサイズ感が変わってしまうため、中心の図形のサイズを目で見て調整する必要があります。

デルブーフ錯視

同じ大きさの図形の周りに描く円のサイズによって、囲われた図形のサイズが異なって見える錯視です。

上記の錯視とは若干条件が異なりますが、同じ大きさのドット柄でも、枠(イラスト)のサイズの関係で左のドット柄よりも右のドット柄の方が大きく見えます。(Tシャツの柄という先入観もあるためより大きく見えるのかもしれません)


ロゴやフォントを制作した時やレイアウトを行った際に大きさ・長さ・色・角度などに違和感が出るようならば、何かしらの錯視が起きている可能性があります。数値的にサイズや位置が整えられていたとしても、最終的には目で見て確認を行うことをおすすめします。
このほかにも錯視は沢山あります、また、今回ご紹介した大きさにまつわるものだけではなく、色や角度に関する錯視も存在します。こちらはまた別の機会にご紹介したいと思います。
 
 

Pocket

ホワイトスペース【余白は怖くない!】

Pocket

こんにちは!
今回のテーマは「ホワイトスペース【余白は怖くない!】」です。
ホワイトスペースとは何なのか、どのような時に使うのかなど、アプリ開発の観点から説明していきたいと思います。

ディレクターや企画職などノンデザイナーの方、これからデザインを勉強する方向けの内容になっています。


ホワイトスペースとは

ホワイトスペースとは、簡単に言うと「余白」です。
アプリで言うと、画面の両端や上下に設けられている空間、要素と要素の間など、何もない空間を指します。

画像と画像の間だけでなく、字間と行間などの余白もホワイトスペースとなります。

“ホワイト”スペースと言っていますが、白い余白だけに限定されている訳ではありません。無彩色・有彩色・柄・写真でも、「余白」があればそこはホワイトスペースとなります。


なぜホワイトスペースが必要なのか

ホワイトスペースは視覚的な表現をする上で必ず必要な物です。
なぜ必要なのかと言うと、ホワイトスペースがあることで「見やすく」「わかりやすく」「使いやすく」なるからです。

1番大事なことは、ホワイトスペースを“余った場所”ではなく、重要なレイアウトの一部として捉えることです。

余白があると柄や要素を入れて隙間を埋めたくなったり、余白がありすぎると手抜きに見えるのでは…と不安に思う余白恐怖症の人もいるかもしれません。
ですが、余白がないと視認性が悪くなったり、そのページに設定した意味が薄れてしまったり、目的を果たせなくなってしまうなどデメリットが出てきてしまいます。


見やすさ

デザイン制作はもちろん、パワポでの資料作成やテキストだけの表現でも、ホワイトスペースのレイアウトは大切です。
ギチギチに画像や文字が詰まっているより、見やすく読みやすくなりますよね。みなさんも日常、自然と行っているのではないでしょうか。

アプリ画面で言うと、読んだり押したりする要素がある画面の両端には、必ずホワイトスペースを設けましょう。
5%ほどホワイトスペースがあれば十分視認性と押しやすさが保てます。
上下のホワイトスペースについては状況にもよる為一概に言えませんが、「目立たせたいものは多めにホワイトスペースを設ける」「優先度や項目ごとにホワイトスペースのルールを統一する」ことに注意するだけで見やすさが変わってくるかと思います。


わかりやすさ

十分なホワイトペースを設けることで、その中にある要素が強調され、ユーザーが目的を達成しやすくなります。
注目して欲しい要素や、優先度の高い要素を強調したい時に効果的です。


使いやすさ

ユーザーにとって使いやすいサイトにする為に、ホワイトスペースは必須です。
例えば押せる要素があったとして、それが複数並んでいた場合、ホワイトスペースを設けることで押しやすくなります。

また、ユーザーが何か探し物をしていた時に見つけやすくなります。


おわりに

いかがでしたでしょうか?
ホワイトスペースはただの余白ではなく、立派なレイアウトの1つです。
今までは何気なくテキストを改行していた、画像を配置していた、という方は、ぜひこれを期にホワイトスペースを意識してみて下さい。
今まで以上に良いデザイン、資料作成が出来るかと思います!

それではまた!デジマースのコンでした。

Pocket

サイト内で迷子にさせないために

Pocket

サイトに遊びに行ったときに迷子になったことはありませんか?
迷子になってしまうとユーザー本人もせっかく訪問したのに目的が達成し辛くなり、しまいにはサイトを離れてしまいます。
提供側もせっかく訪問してくれたユーザーを離脱させてしまう事はとても勿体ないことです。
では、どういった状況でそのような事が生まれてしまうのでしょうか、改めて考えていきたいと思います。

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼訴求元と訴求先の差異

サイトにアクセスしてきたのは良いが訴求元の内容が訴求サイトのどこを探しても見つからない。


ようやく見つけたと思ったら、とても分かり辛い所にありました。

訴求元(例えば広告など)から訪問しているということは、この例の場合「壁紙が1枚もらえる」と言うインセンティブに惹かれてる可能性が高いです。
そのため、希望のものが見つからなければすぐに離脱に繋がってしまい、サイト内の回遊も全く望めなくなってしまいます。

例えばもし出先で場所が分からない、大きな駅構内でなかなか目的地にたどり着かない等の迷子の様な状態のとき、人は知らずのストレスをため込んでいます。
それではどうすればいいのでしょうか?サイト側とユーザー側を考慮しつつ考えてみたいと思います。


訴求元の内容を訴求先で認識しやすく、また整合性をしっかり取ることがユーザーを迷子にさせないことへ繋がっていきます。
結果的に離脱率の減少にもつながるかもしれません。

ただし、サイトによっては掲載する内容の順序や見せ方などをUIデザインを考える際に、訴求元の設置場所を決めていたり、優先度が例えば低く設定されている等、サイト運営側の意図がありますので、上記の例が一概にこうであるとは言えない場合もございます。

▼必要箇所の戻るボタン

サイト回遊中に戻るためのボタンが必要箇所に置かれておらず、TOPや、コンテンツTOPなど等に戻れなくなった事はありませんか?
人によっては端末の矢印を使用する方もいるとは思いますが、上手く挙動しない場合もあるかもしれませんので、サイト内の戻るボタンは用意されている必要はあるでしょう。

サイトによっては、戻るボタンをページ下部に置かず上部のヘッダー、下部のフッターに常駐させていたり、長いページの場合は上部へ戻るボタンが設置されていたりと様々です。
ユーザーがサイトを快適に使える様、サイト内をしっかり行き来できる環境をUIデザインを考える際に並行して考える必要がありますね。

▼現在地の明記

入力フォームやコンテンツの深層まで潜っていると自分がどこにいるのか認識し辛い場合がありますよね。
自分がどこにいるのかわからないとき知らずのうちにストレスがたまってしまうものです。

ユーザーに何か行動を起こさせる際は、予め何を行う必要があるのかしっかりと明記しておくことでユーザーの混乱も防ぐことができます。

▼最後に

サイトの提供内容が優良であってもユーザーは1度でも迷子になると「このサイトは分かり辛い」と印象を覚えてしまうかもしれません。
サイト内のコンテンツ毎の見せ方、内容によってはメリハリをつけるなど、ユーザーが迷わない環境が求められます。
せっかく訪問してくれたユーザー、せっかく作ったサイト、互いに良い方向に向かえる様、UIデザインを含め細かな部分まで目を配る必要がありますね。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。
またお会いしましょう!

Pocket

インセンティブ付き動画広告『ADBRO PRIZE』を提供開始

Pocket

こんにちは,デジマースのネモトです。
今回は、弊社が提供開始したインセンティブ付き動画広告
『ADBRO PRIZE』を紹介致します。

「ADBRO PRIZE」とは?

インセンティブ付き動画広告で、「からあげ」や「コーヒー」「人気スイーツ」などのリアルな賞品をインセンティブとしてユーザーへ贈ることができる動画広告です。

キャンペーンページに訪れたユーザーは、商品・サービスの動画広告を視聴完了後に商品・サービスのサイトへページ移動します。
その後ユーザーは成果地点(会員登録、資料請求など)に到達した際にインセンティブを獲得します。
ユーザーはデジタルコードとしてインセンティブを受け取り、コンビニエンスストアなどの店頭で賞品と交換することができます。

動画広告は情報量の多さや表現の幅が広いことでブランドリフトを生み出すことができる効果的な広告として利用されていますが、ADBRO PRIZEではインセンティブをユーザーに贈ることで確実にコンバージョンに結びつけることが可能です。
「ブランドリフト」と「コンバージョン」を同時に実現することができる、これまでにない新しい動画広告です。


特徴まとめ

(1)ユーザーにリアルなインセンティブを贈ることが可能な動画広告。

(2)成果地点は自由に設定可能。広告主様の幅広いニーズに対応できます。

(3)インセンティブは成果が発生した際にオンデマンドでデジタルコードとして発行するため、在庫を持つ必要がございません。

(4)インセンティブをデジタルコードとしてオンラインでユーザーへ付与することで、個人情報の取得が必要なく、発送対応の手間と送料が掛かりません。

(5)インセンティブの種類はコンビニ商品やギフトコードなど63商品をラインナップ。今後も追加予定です。


それでは、
お気軽にお問い合わせください!

詳細はこちらとなります。
http://adbro.jp/lp/prize.html

Pocket

スマホ画面サイズユーザビリティ

Pocket

今回はモバイル端末を中心に、「画面サイズ/画素密度と目の距離に関係するユーザビリティと満足度」を考えてみます。

画面サイズと画素密度の相対関係を考えると非常に奥が深く楽しそうなので、まずは個人的に思い入れがある端末でスペック表を作ってみました↓


主要画面表示機器スペック表

スマホ 画面サイズ / ppi リスト

iPhone 3G
3.5 インチ 320× 480  HVGA 163ppi

iPhone 3GS
3.5 インチ 320× 480  HVGA 163ppi

iPhone 4
3.5 インチ 640× 960  Retina 326ppi

SO-01B
4.0 インチ 480× 854  FWVGA 254ppi

IS03
3.5 インチ 640× 960  WVGA 330ppi

iPhone 4S
3.5 インチ 640× 960  Retina  326ppi

iPhone 5
4.0 インチ 640×1136 Retina  326ppi

iPhone 5S
4.0 インチ 640×1136 Retina  326ppi

iPhone 6
4.7インチ  750×1334 RetinaHD 326ppi

iPhone 6plus
5.5 インチ 1080×1920  FHD 401ppi

iPhone 7
4.7インチ  750×1334 RetinaHD 326ppi

iPhone 7plus
5.5 インチ 1080×1920  FHD 401ppi

iPhone 8
4.7インチ  750×1334 RetinaHD 326ppi

iPhone 8plus
5.5 インチ 1080×1920  FHD 401ppi

iPhone X
5.8インチ 1125×2436 SuperRetinaHD 458ppi


ガラケー 画面サイズ / ppi リスト

W11H
2.2 インチ 240× 320  QVGA 182ppi

W52SA
2.8 インチ 240× 400 WQVGA 167ppi

W54SA
3.0 インチ 480× 800 WVGA 311ppi

MARVERA KYY08
3.2 インチ 480× 854 FWVGA 306ppi


ガラホ 画面サイズ / ppi リスト

MARVERA KYF35
3.4 インチ 480× 854 FWVGA 288ppi


携帯ゲーム機 画面サイズ / ppi リスト

Nintendo DSi LL (上画面)
4.20インチ 256× 192      76ppi

Nintendo 3DS (上画面)
3.53インチ 400× 240 WQVGA 132ppi

Nintendo 3DS LL (上画面)
4.88インチ 400× 240 WQVGA 96ppi

Nintendo Swich(携帯モード)
6.20インチ 1280× 720  HD 237ppi


モニター 画面サイズ / ppi リスト

モニター/デスクトップ
24.0 インチ 1920×1080 FHD  92ppi

MacBook Pro
15.4 インチ 2880×1800 Retina 221ppi


TV画面 サイズ / ppi リスト

ブラウン管TV
29.0 インチ  640× 480  SD  28ppi

ハイビジョンブラウン管TV
32.0 インチ 1280 × 720  HD  46ppi

フルHDTV
50.0 インチ 1920×1080 FHD/2K 44ppi

4K TV
60.0 インチ 3840×2160  4K  73ppi

8K TV
60.0 インチ 7680×4320  8K  147ppi


大きさと密度の移り変わり

2001年から3G携帯電話(フィーチャーフォン)がサービス開始されましたが、その当時の画面サイズは下記でした。

--------QVGA端末--------
・240×320 pixel (QVGA解像度)
・2.2インチ
・画像密度は182ppi
---------------------
※ppi (pixels per inch)
1インチ当たりの画素数
数値が大きいほど高精細


現在の端末と比較すると、
四角い大きな画素(ドット)がハッキリと認識できるもので、
いわゆる「8ビット的」な画質制約の中でサービスやその広告バナーを作っていました。

WEBページの容量制限(Web1ページ100KBまで等)もあり、質素倹約の時代だったのです。

その後は画面の高精細化と大型化が進み、「VGA解像度の端末」(QVGAの倍の解像度もつ端末)が登場することで、フィーチャーフォンは成熟期を向かえます。

-------- VGA端末 --------
・480×800 pixel (WVGA解像度)
・3.0インチ
・画像密度は311ppi
---------------------

そして、新しい市場/エクスペリエンスに向けて登場したのがスマートフォンです。

日本ではiPhoneやAndroid端末を発売開始した2010年あたりからスマートフォンの普及が始まりましたが、
大型化した画面と高細化した解像度を十分に処理できるスピードとOSの環境が整うまで時間がかかり、
特にAndroid初期端末の「モッサリ感」は苦い記憶として残っている方も多いのではないでしょうか。

-------- iPhone 6 --------
・750×1334 pixel (Retina HD)
・4.7インチ
・画像密度は326ppi
---------------------


最適視聴距離による体験

それでは本題である「画面サイズ/画素密度と目の距離に関係するユーザビリティと満足度」について「ブラウン管式の家庭用TV」の時代まで戻ってから考えてみます。

過去のブラウン管TVの場合、画面の高さの「5~7倍」離れて視聴する状態が「最適視聴距離」とされてきました。
「最適視聴距離」とは「1ドットを構成するRGB画素」が距離をとることで程よくぼやけ、溶け込み、画面全体が「綺麗な一枚絵」として視聴できる距離とされています。


液晶TV/ハイビジョンTVの場合は(共にフルHDレベルの条件)、ブラウン管(SD)と比較して高精細になった為、画面の高さの「3~4倍」の離れた距離で十分な絵が視聴出来るようになりました。


----最適視聴距離の基準設定要素----
・16:9のアスペクト比
・視野角33度
・視力1.0での走査線識別が出来ない距離
※ハイビジョンTV走査線数(1125本)
---------------------

過去のTVと比較して、液晶TVの画素密度(ppi)は「4K化」「8K化」など高精細化が進んでおります。
家庭環境において意識して見入る映画や鑑賞コンテンツについては、
視野角を踏まえたうえで今後も視聴距離が近くなっていく可能性があります。

それでは、そのTVよりも高精細な画素密度を持つスマートフォンの「最適視聴距離」はどうでしょうか。


スマホの最適視聴距離?

まず、スマートフォンについては「最適視聴距離」の概念は適切ではないと考えます。

理由として、手に持って使用するスマートフォンはTVなどの機器とは利用環境がそもそも異なり、目と端末の距離は常に意識せず一定に保たれています。
距離の違いは身体特徴のほか、近視、遠視、老眼など視力の個人差により出てきます。

目に負担の少ない利用距離の確認方法としては、今回詳しく紹介は行いませんが「ハーモン距離」と言われる距離測定の考え方もあります。

「画面の大きさ」「画素密度」の違いはユーザビリティと体験に大きな影響を与えます。
年齢によってはスマートフォンを使うこと自体が負担となり使いにくい場合もありますので、
自身の環境に適した使いやすい機器を選んでいくことが大切です。


年齢による距離の違い

下の表を見る限り、
「20歳」と「30歳」「45歳」の裸眼状態では文字を読める最適な距離がまず違うことが確認できます。


注目する部分は、「20歳」と「45歳」では距離の開きが3倍近い点です。
既に「45歳」の裸眼状態では、ピントが合わず「近く」が見えにくい為、
腕を伸ばし頭を引くといった、若年利用者とは異なる厳しい使用環境が待ち受けています。

素直に老眼鏡を受け入れる割合も少ないことから、
サービス設計する側は、利用者の大半をも占める興味深いこのターゲット層も踏まえてガイドラインを策定して、適切なサービス設計を行なうと良いのではないでしょうか。


最後に

モバイル端末の普及により目の疲労に拍車をかけているこの現代だからこそ、普段のデスクワークで使用するPCモニターの適切な配置が必要です。
幅広い利用者に向けてユーザビリティを考えていくのであれば、なお大切な心掛けなのではないでしょうか。

それでは次回も、サービスUX設計に関係した話題をします。
以上、デザインに関わっているデジマースのネモトでした。

Pocket