サブスクリプション/ダウンロードと利用シーン

パッケージ版ソフトウエア(物理メディア)の所有にメリットはもちろんありますが、
昨今の単体製品としてのソフトウエアはダウンロード型にシフトしてきました。

サブスクリプション/ダウンロードの利用シーンを比較したので参考にどうぞ。


サブスクリプションとダウンロード

「サブスクリプション販売」型は一定期間の利用権を買うダウンロード版ソフトウエアです。※ソフトウエアの場合
「ダウンロード販売」型は「売り切り」でデジタルデータを買うダウンロード版ソフトウエアです。

比較事例は下記となります。(2018.02.19時点)

幅広い製品がデジタル化していることがわかりますが、
ポイントはサービスの利用形態です。

例えばデザイナーの多くが使用する「Adobe CC」については自宅と仕事場にインストールして使うことが出来、
仕事場での作業の続きを自宅で…、といった利用シーンが1つのライセンス購入で可能です。(2018.02.19時点)


ダウンロード版のメリット

それでは具体的にダウンロード版のメリットをあげていきます。
大きくはこの3つでしょうか。

・メディアの差し替えが必要ない(意図せずメディアが飛び出して後悔する状況がない)

・デジタルなので場所を取らない(所有製品のプライバシーが守れる)

・使用場所/機器を限定しない ※本体と利用権の紐づけを行うハード機器もあり

この3つのメリットは直接利用者の利便性を上げ、このような利用シーンが考えられます。

・子供の物理メディアへの不適切な接触による損壊を防げる

・物理メディアのセッティングの必要ないため、利便性が良くすぐに楽しめる

・複数の機器にインストール出来るので出先でも再生環境とアカウントを設定すればどんな状況でも使用できる


サブスクリプション版のメリット

続いてサブスクリプション版のメリットを上げていきます。
大きくはこの3つです。

・アップデートが適用でき、最新バージョンがいつでも使用できる

・製品ダウンロード版より安い導入コストで、一ヵ月/1年など使用期間の選択が出来る

・複数台の同時利用契約も可能

そして3つのメリットの利便性/利用シーンはこちらです。

・最新の機能、最新のセキュア

・一次的に短期間だけ本来の製品利用価格よりも安く使用可能

・複数の機器にインストール出来る ※製品による

以上のような利用シーンを持つ方に有効です。


それぞれのデメリット

どちらにも言えることですが、

・製品提供期間が終了した場合、再ダウンロードが出来なくなったり使用できなくなる可能性がある。
  ※特にネット認証が必要なサブスクリプション版
  ※ソフトウエア内に一定期間内の使用許諾コンテンツ(版権モノ等)が含まれる場合

・ネット環境が必須

以上のようなデメリットももちろんあり、契約規約を認識する必要があります。


最後に

「権利」と「利用期間」をそれぞれ購入するダウンロード版とサブスクリプションの仕組みは、
常時ネット接続環境下という条件付きではありますが、
様々な利便性ある利用シーンを私たちに提供できる可能性を持っています。

アカウントやパスワードの紛失時など利用者側のリスクを伴いますが、
一度体験した利便性は中々忘れがたいものではないでしょうか。

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

今さら聞けない? 有機ELや4KやHDRとは?/2018

スマホや電化製品のスペックを見ると、色々な情報や規格があります。


4Kって?

「4K」はテレビなどの画面解像度3840×2160のことですが、
従来の家庭用テレビやスマートフォンで代表的な解像度はフルHDの2Kでした。
売り場に足を運ぶと4K製品がメインで展示されてきていますね。

まず、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なので)

です。

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

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

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

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

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

有機ELとは?

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

2017年は日本での家庭用の大型有機ELテレビ元年となり、
大型パネルはLG社製をつかって、各社がついに本格的な製品販売を開始しました。
(だいたい40万円~となり一括購入が難しい価格帯です;)
※注意)現在の4K発売/予定されている製品では別途チューナーやアンテナが必要とのこと;(もう少し待ちましょう)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

話を戻して有機ELの話

有機ELは、液晶テレビと同じで今後驚くスピードで製品の改善が進んでいく見込みです。
現在の課題はディスプレイの寿命の短さなどが話題に上がりますが、
2~4年サイクルで買い替えが発生するスマートフォンでは大きな問題にならないでしょう。
家庭用ゲームの用途での使用の場合については注意が必要で、
過去のブラウン管やプラズマディスプレイと同様に「画面の焼付き」問題が課題となります。
iPhoneXでは静止画状態の長時間利用も想定してシステム調整されている話題も出ておりますが、
家庭用TVについても焼き付き軽減の技術がこれから開発されていきます。

当面は映画など常に動きがあるコンテンツの視聴で、
十分すぎる没入感には浸れるのではないでしょうか。

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

普及が待ち遠しいです。

最後に”HDR”の話

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

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

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

2017年12月11日 VESAがHDRのPC向け標準規格
VESA High-Performance Monitor and Display Compliance Test Specification「DisplayHDR」
を策定し、
HDRの度合いについての表示規格が出来ました。

現在PC向けのモニターでは250cd~350cd(カンデラ)の輝度を表す製品が発売されておりますが、
「DisplayHDR 1.0」では、「HDR10」をサポートする方式で以下の表示カテゴリが設定されました。

・DisplayHDR 400
・DisplayHDR 600
・DisplayHDR 1000

「DisplayHDR 1000」の眩しさの引き換えになる電気代が気になりますが、
消費者側の製品判断とメーカー側の品質管理の面でもメリットが感じられます。

今まで黒一色に潰れていた暗部の映像再現でも、暗いなりに多くの情報が確認でき、
光度/輝度を高く設定できる製品では、
白とびがなく眩しい程の明部とコントラスト高い暗部が表現できるようになりますので、
よりきめ細かい表現力を楽しめるのではないでしょうか。

次回も情報設計の話題をしたいと思います。
以上、デジマースのネモトでした。

デザインと錯視

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

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


フィック錯視

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

正解は

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

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

エビングハウス錯視

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

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

デルブーフ錯視

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

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


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

注意が必要なカルーセルパネルとユーザビリティーのポイント

カルーセルパネルとは?

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


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

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

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


使いやすさのポイント

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

1. ちょい見せ

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

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

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

3. 全体数の表示

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

4. ポジション

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

5. ループ

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

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


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

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

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

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

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


早速作る

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


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

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

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


最後に

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

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

シネマグラフ

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

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

▼シネマグラフとは??

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

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

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

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


▼実際に見てみましょう


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


水だけが出続ける


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

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

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

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

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

▼使いどころ

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

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

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

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

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

▼最後に

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

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

Apple Pencilに欠かせない120Hzの画面リフレッシュレートとUX

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

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

スマホなど、使用開始から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設計に関係した話題をしたいと思います。
以上、デザインに関わっているデジマースのネモトでした。