デザインと錯視

Pocket

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

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


フィック錯視

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

正解は

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

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

エビングハウス錯視

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

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

デルブーフ錯視

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

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


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

Pocket

カルーセルとユーザビリティー

Pocket


カルーセルとは?

カルーセル[carousel](バナー/パネル/スライド)とは、
複数画像を左右にスライドさせることで表示させる展開(回転)構造を持ったWebコンポーネントです。


スマートフォンが登場した黎明期から、
カルーセルはナレッジと予見が必要な敷居の高い機能であった為、PC/スマフォでの使用には賛否がありました。
特に最終スライドまでの認知は、構造上少なくなっていく傾向は止むを得ません。

実装は「jQuery」で、Webデザイナーでも簡単に組み込めることから広く利用されておりますが、
理想のカルーセルソースに出会えず、適切に運用されていない状況もあるのではないでしょうか。

今回はそんなカルーセルバナーを有効活用するためのポイントを紹介致します。


使いやすさのポイント

単純に単体静止バナーとして素通りされてしまうのが一番の問題なので、気付きのアピールが必要です。

1. ちょい見せ

「単体バナー」ではなく「複数バナー」であることを認識させる表現にする。

2. 手動+時間での切り替え

停止したままではなく、一定時間経過で自動的に動かすことで複数枚を認識させる

3. 全体数の表示

全スライド数を認識させる

4. ポジション

現在のスライドの表示順番を認識させる

5. ループ

最終スライドから先頭へ戻る(ループする)ことを視覚的に伝え、最初のスライドに手早く戻れることを認識させる。

以上に上げたポイントが一つでも十分でない場合、格納されたスライドの全てを認識させるのは難しくなります。


カルーセルの動きをプロトタイピング

「jQuery」などオープンソースから理想の表現が出来ているカルーセルが見つかれば話は終わってしまいますが、探すにも時間がかかるのではないでしょうか。

それでは、カルーセルの内容や動きが確認できるプロトタイピングして具現化してみます。

デザインも出来て、JavaScriptが出来るWebデザイナーなら問題ないのですが、壁がとても高いと思われます。
そんなプログラムに精通していないデザイナーでも作れるツールが、過去の記事紹介している「Adobe Animate CC」です。

グラフィックUIの操作で作れるためデザイナーに相性が良く、
ある程度のJavaScript命令文を項目を選択するだけで記述出来、厳密に構文を覚える必要がありません。
「再生」「停止」「任意のポイントに戻る」「条件分岐」「繰り返し」
以上を組み合わせるだけでも、
プログラマーやプロジェクトメンバーに動きを確認してもらえるプロトタイプを作ることが出来ます。


早速作る

まずは基本的なレイアウトに「ちょい見せ」搭載したプロトタイプです。
クリックでしか動作が出来ておりませんが、回転してグルグルと回るカルーセル本来の動きが確認できるのではないでしょうか。


プロトタイプならではのバリエーション

追加で2種類のデザイン案も作ってみました。

動きの想像が出来、ついつい回してしまいたくなる表現なら有効です。


最後に

いかがでしたでしょうか。
オペレーションソフトやブラウザ速度の向上した現在では、多くの表現がWeb上で可能となっております。
Webデザイナーに求められるスキルも必然と増え、インタラクティブな動的コンテンツが求められてきていると感じています。

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


/////////// 関連記事はこちら↓ //////////

『リフレッシュレート』とUX

プロトタイピングに挑戦する

プロトタイピングの活用

Pocket

シネマグラフ

Pocket

シネマグラフってご存知ですか?
映画の何かかなと思ってしまうかもしれないのですが、映画の業績表などではないのです。
私も何かわからなかったため、ちょっと調べてみました!!
何らかの形でデザインにも活かせそうなことがありましたので(私の主観ですが)紹介させて頂きます。

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

▼シネマグラフとは??

そもそもシネマグラフとは、映画の業績表などではなかったら何のなのか?
一言でいうと「一部のみを動かしてループさせた画像」です。

―――はぁ…い、一部ですか?

―――調べてみたらそうでした。

下のようなアニメーションGIFの様に万遍なく動くTHEアニメーションではないのです。


▼実際に見てみましょう


永遠にあふれることのない紅茶


水だけが出続ける


水の勢いで溜まった水だけが動く
説明用に作成を致しましたため、かなり手軽な生活感有るものばかりですがおゆるしをば。

シネマグラフは特に多くを語ることが無いくらい分かりやすいものだと思います。

一部のみ繰り返しの動きがついていると何だかとても不思議な世界です。
つい、ぼーっと見てしまいますね。
作成上の関係で生活感ある水系のものになりますが、逆に言うと誰でも簡単にシネマグラフが作れるという事ですね!
編集も思っている以上にサクッとできます。
(申し訳ございませんが、作成方法は割愛させて頂きます。)
また、多くのものが動く所や、動物など様々なもので作成するともっと臨場感あふれる不思議な光景が作れるかもしれませんね。

EX)
・後ろにある影だけが動き続ける
・人で賑わう縁日の頭上で花火だけが繰り返し動く
・夏の草木が静止する中、風鈴だけが繰り返し動く
・交差点で信号だけが動き人は静止
・ワンちゃんの尻尾のみが動き続ける
・溶けずに燃え続ける蝋燭
・ひたすら瞬きだけを繰り返す人
・人間の持ち物だけが動く

ちょっと考えるだけでもたくさん出てきます。

▼使いどころ

個人で楽しむため、人に作ったものをSNSで見てもらいたい等といった所や、はたまた企業のブランド訴求の延長線として、使うことも効果的です。

全体が動いていないことにより動く箇所にピンポイントで目が行きやすくなる構造になるため「特に見せたい」箇所などの訴求が強くできますね。

例えば、“新しいハンドバッグ”をHP上で訴求したい場合以下のような訴求も考えられます。

※写真動画のシネマグラフが用意できないためイラストで表現させて頂いております。

ハンドバッグだけが繰り返し動く。
一見とてもシンプルな構造ですが、ハンドバッグだけが動いていると、自然と目がそちらに向かいますよね。
見てくれる人の目線を自然な形で商品へ誘導することでストレスなく新商品の訴求が出来ているのではないでしょうか?
場面や動かす一部の大きさによって、様々な表現が期待出来そうです。

▼最後に

いかがでしたでしょうか?
見ているだけで不思議な感覚になりますよね~!
一見静止画かと思いますが一部だけ不可思議に動いていたら、ついつい人は見てしまいます。
何かしらの惹き画像にもなりますので効果的に使えたら良いですよね。
もしもこれを機に気になった方は是非シネマグラフを検索してみて下さい。

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

Pocket

『リフレッシュレート』とUX

Pocket

私たちが普段眺めているスマホやタブレットの画面ですが、
実は、操作してない時でも頻繁に画面を書き換えています。

画面を書き換え(⇒リフレッシュ)しているということは、
常に貴重なバッテリーを消費しているので、その部分だけ聞くとエコではありません。

スマホなど、使用開始から2年目に近くなると著しくバッテリーの劣化を感じますが、
出先での充電も面倒ではあるので、
可能であれば何とか温存して一日持たせたいところです。

そんなネガティブな話題から入りましたが、
リフレッシュレートの機能の恩恵は大きく、私たちの使用感/満足度など、
UXに大きく影響を与えます。

今回は機械的な話に寄りますが、
この(単位時間で画面をリフレッシュする⇒)「リフレッシュレート」の話をUXと絡めて考えてみます。


■リフレッシュレートとは?

一般的な説明として、リフレッシュレートとは、
1秒間にスマフォやテレビなどの画面を何回書き換え更新するか、の理解で良いと思います。
機器の仕様書には、

60Hz(ヘルツ)だの120Hzや最近ですと240Hzなんて数字も確認できます。

つまりはスマホの画面が一秒間に60回だったり120回だったり240回、
最新状態に書き換えしてる端末がそれぞれあるということです。
忙しくエネルギー使いまくってそうですね。

では日本でも売れているiPhoneやiPad Proの仕様についてみてみます。


■iPhoneやiPad Proのリフレッシュレートは?

・iPhone   60Hz
・iPad Pro  60Hz(可変リフレッシュレート)

でした。 ※2017/6/6時点発売済みの端末

ロック画面の静止画状態でも、1秒間に60回も書き換えているなんて、環境に申し訳ないですね…。
バッテリー消費もしているので使用者のメリットもありません。
これは良くない体験の様です。

でも…『iPad Pro』の仕様をよく見てください。
”可変リフレッシュレート” となってます。

『iPad Pro』の可変リフレッシュレートですが、
実は利用者が操作していない状況を判断して、
リフレッシュレートを低く[30Hz(30回書き換え)などに] 変更させているんです!
画面を操作していないときはエコモードになるなんて、
見えないところでもユーザーに恩恵を与えているんですね。
バッテリー持ちを良くするための機能だと思いますが、
双方にメリットがあり、
これは良い体験なのではないでしょうか。


■新型iPad Proの仕様

2017年6月6日、Appleは、
同社の開発者カンファレンス「WWDC17」の基調講演で、
「iPad Pro」シリーズの刷新を発表をしました。

・iPad Pro  120Hz [可変リフレッシュレート(48Hz/24Hzなど)]

こちらの製品の仕様では、
リフレッシュレートが大きく向上して120Hzに変更されました。
目的としては、「Apple Pencil」の体験向上が上げられ、
レスポンスが快適になるとのことです。

仕様上だけでもペン先への描画追従性が倍に上がるので、
”書き味”に大きな変化が現れることでしょう。

またリフレッシュレートの向上は、
画面スクロール時にも影響が出ると判断でき、
ヌルヌルとしたスクロールになることで、文字の視認性が良くなるのではないでしょうか。

大きな使用体験の変化は新たな需要を生みます。

「読む/見る」といったニーズでは行き渡った感があったタブレット端末ですが、
「描く/伝える」といった新たな体験と価値を提供するツールとして、
新しい市場を開拓するのではないでしょうか。

■今後のリフレッシュレートの向上について

モバイルツールとして120Hzのリフレッシュレートを実装してきましたが、
コンシューマ向け「据置型モニター」での市場では、
240Hzの領域まで量産技術が進んでいます。
さらに、
人間の目で判断できる限界(140~200Hzという説)もあり、
240Hzあれば十分なのですが、
ホールド型液晶画面は仕様上残像の問題が出るので、
その点をカバーする目的で、
高速にリフレッシュする480Hzまで行きつく必要があるのではないでしょうか。
表示応答性に優れた「有機ELディスプレイ」との組み合わせも考えると未知の領域ですが、
スマホでヌルヌルとスクロールしながら文字を速読する、
そんな体験が出来る時代までもう少しです。

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

////////// 関連記事はこちら↓ //////////

プロトタイピングに挑戦する

プロトタイピングの活用


[必然的な利用シーン]環境/需要との接触


UX(ユーザー・エクスペリエンス)を解釈する


サービスVSユーザー!UIリテラシー格差


あぁ…Flashツールに望みはあるか?


8bitに学ぶUIデザイン


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

Pocket

今さら聞けない? 有機ELや4KやHDRって何?

Pocket

スマホや電化製品のスペックを見ると、色々な情報や規格がありますが、内容がわからないものもありますよね。
今回はUI/UXの話ではなく、方向性を変えて最近良く目にする用語について触れていきます。


4Kって?

まずは最近良く目にする用語、
「4K」
からはいります。

「4K」はテレビなどの画面解像度3840×2160のことですが、
現在の家庭用テレビやスマートフォンで代表的な解像度はフルHDの2Kとなります。

2Kはスマホでも使われてる規格で、
2K = 2000の略形(1920x1080 →1920が約2000なので)。

Kはキロ(1000)。

2000なので2Kになります。

まとめると、

2K = 2000の略形 = 1920x1080(1920が約2000なので)
4K = 4000の略形 = 3840x2160(3840が約4000なので)
8K = 8000の略形 = 7680x4320(7680が約8000なので)

です。

…8Kまで紹介してしまいました。

【予備情報】
4K/8K放送については放送フォーマット化が進んでおり、
2018年に放送開始目標となってます。

ちなみに現在「iPhone7Plus」の解像度は
フルHD(2K)の1920x1080ですが、
こちらは5.5インチのディスプレイですので、
いわゆる画素密度のppi(pixel per inch)については401ppiとなります。

人間の目で識別できる、解像度は一般的に350ppi程度と言われてますので(数字が多いほど細かい)、
5インチ前後のスマートフォンについては今以上の解像度(4Kや8K)は必要ないですが、
iPadなどのタブレットについてはまだ現状264ppiですので、
高解像度化の需要はありそうですね。

4Kについてはいかがでしたでしょうか。

続いては「有機EL」について紹介します。

有機ELとは?

「有機EL」については10数年まえから携帯電話にも使用されており、
最近のスマートフォンやApple Watchなどの小型パネルはサムスン社製が使用されています。
現在広く使われている「液晶」とは違うディスプレイ規格の一つです。

2017年は日本での家庭用の大型有機ELテレビ元年となり、
大型パネルはLG社製をつかって、3月から各社がついに本格的な製品化を開始します。
(60万円~90万のようです…マニア向けです;)
※注意)現在の4K発売/予定されている製品では別途チューナーやアンテナが必要とのこと;(もう少し待ちましょう)

液晶との違いについては、

・液晶ディスプレイよりも高コントラスト

・液晶→バックライトで背面から照らすので、黒がグレーっぽくなってしまう
 有機EL→画素が自発光するのでバックライトいらず→美しい真の黒の再現

・画素の輝度変化が瞬時に可能なため動画に強く残像感が少ない。
  ※テレビ放送のテロップがスクロールする場合、動画性能が低い液晶テレビですと動画残像により文字がボケてしまって読みにくいアレです。

有機ELは特性上、動きが早い映像についても、
シャープな輪郭を維持しやすいので、特にスポーツ中継やゲームに適しています。

ここから少し寄り道します。

人間の動画識別能力の仕組み

私たちの目はどのように連続する映像と映像を見ているのでしょうか。

私たちが見ている風景などの世界は、
自身の脳が都合よく補正した映像のようです。
アナタと私で見えてるものに差異がある可能性があるなんて怖いですね…。

動きのある映像はどう作り出しているかというと、
静止画と、ほんの少し時間の経過した静止画をパラパラ漫画のように、
情報として脳内に取り込んでいるので、
本来はチラチラ途切れた繋がりに欠けた動画のような映像になるはずなのです。

しかし!
厄介なのか救いなのか、
静止映像は脳内に、光の情報として取り入れられる際、
その光の強さに応じて、なんと「残像効果」が起こるそうです。

経験あると思いますが、
蛍光灯の光を直接見た時、太陽を直接みてしまったとき、強烈な映像を見てしまったとき、
あの目蓋(まぶた)に焼き付くヤツが過度の残像効果の現象です。

私たちの脳は、
静止画と静止画の間に「残像効果による中間映像フレーム」が自動生成されているので、
うまいこと繋ぎ合わされ、動きのある映像を滑らかに感じることが出来ているのです。

そう考えると、
残像効果がなくなったら毎日の生活がストレスですね…考えたくもない。

話を戻して有機ELの話

有機ELは、液晶テレビと同じで今後驚くスピードで製品の改善が進んでいく見込みです。
現在の課題はディスプレイの寿命の短さなどが話題に上がりますが、
2~4年サイクルで買い替えが発生するスマートフォンでは大きな問題にならないでしょう。
Appleも時期iPhoneの商品ラインナップに組み込んでいく話も出ております。

鮮やかな発色と引き締まった黒。

搭載が待ち遠しいです。

最後に”HDR”の話

「HDR(high dynamic range )」も最近TVやゲーム機、映像ソフトで話題沸騰なので、
耳にする機会が多いのではないでしょうか。

写真をやる方は”写真のHDR機能”の認識の方が強いと思われますが、
あちらは言わゆる画像補正で、
夕焼けや夜景など、「白とび」「黒つぶれ」になりがちな「絵」に補正をかけて、被写体全体が均等に映るようにする技術ですが、映像のHDRは違います。

映像のHDRは、表現の段階を、現在の映像規格よりも拡大して、
より繊細にした新しい映像規格となります。

地味ですがワクワクしませんか?…しないですか;

暗い映像でも、暗いなりに多くの情報が確認でき、
光度/輝度を高く設定できる製品が出てくれば、
白とびがなく、
眩しい程の明部とコントラスト高い暗部が表現できるようです。

しかしながら、現実の家庭向け製品では、
眩しいと感じるだけの明るさを画面から放つには、
それ相応の電力の消費が必要となるので、
蛍光灯並みの明るさは難しいところがありますが、
よりきめ細かい表現力に可能になることに違いありませんね。

次回は、UI/UXとサービス設計の妄想に戻りたいと思います。
以上、デジマースのネモトでした。

Pocket