老眼のユーザビリティ

驚愕ですが、15歳を過ぎると既に「老眼」の症状が進行しているそうです。

私はUI、ユーザビリティに関わっていますが、スマホなど近くが見えない老眼症状を感じる年齢になり、毎朝茶碗に盛られたお米にも焦点が合わず経験と感覚で食事してたりします。

そこはポジティブに受け止めて、自身でもある団塊ジュニア世代(第二次ベビーブーム世代)の大きなターゲットに向けたユーザビリティを考えてみます。


スマートフォンの画面

私の場合、画面との距離は30cm程度で持つとピントがハッキリとします。

一般的に近点距離の年齢別の目安として、
20歳で15cm
30歳で21cm
40歳で33cm
50歳で60cm
60歳で150cm

以上の距離が必要とのデータもありますので安定して進行しているようです。

下記はiPhone6系の画面にそれぞれのサイズの文字を表示させています。
※一部ブラウザの基本仕様により、10pxより小さいサイズはCSSで設定しても10pxで表示されてしまいますので、最小サイズは10pxに設定

⇒スマホでの実サイズ表示はこちら

確認してみると、10pxの文字は自身には可読性が低いと感じられます。

40代から老眼の症状が気になってくるといわれておりますが、
目の負担により、肩こり、頭痛、吐き気の症状があり仕事に支障をきたします。

ですが現実問題として老眼鏡をかけてスマホを見る行動について、外出中は特に難しいと感じています。

スマホの画面表示の場合は、優先度が高い部分での10px、12pxの文字の運用はターゲットにより控えるべきですが、
弊社の「フォントサイズ運用ガイドライン」を確認すると↓

優先度が低い訴求部分で10px、12pxの文字が運用されております。

メインターゲットにもよりますが、年齢に応じたCSSを使い分けるのも大変な手間なので、対象利用者は端末の文字サイズを「設定」から「標準⇒拡大」に変更する勇気ある決断が必要です。


混雑率200%~の車内

フォントサイズを大きくするなど物理的な対応を行い何とか乗り切れたとしても、どうにもならない状況が日々の通勤時に発生します。
「混雑率200%~の車内※」
(※週刊誌程度ならなんとか読める)
です。

主観では満員電車で必要外のスマホ利用は控えるべきと考えますが、
混雑率200%を超えてくると、車内で他の乗客と適切な感覚を確保する事は難しく、
その利用シーンではスマホ画面との距離は20cm程度まで近くなる状況になります。

そのなかで老眼の場合、ピントが合わず30cm以上距離をとる必要が出てきます。

物理的に無理があり他の乗客の迷惑となりますので利用者はスマホの使用を控えましょう。


大画面テレビ

老眼より近視の影響もありますが、
視聴距離が2mを越える4Kや8Kの50インチ越え大画面テレビのきめ細かさを認識をするためには、画面に近づく必要があるため高解像度化の恩恵がありません。

そんな状態で4Kの恩恵を得られるのは視聴距離が40~60cm程度と短いPCの画面など24インチ前後のモニター/ディスプレイです。


サービス側のユーザビリティ配慮

 
たとえば利用者が、書き方がわからない漢字を調べる場合

ブラウザに読みを入力。
・「忖度」…画数が少ないのでや文字が小さくても構成が判断できます。
・「薔薇」…この画数は厳しいです。

状況によって利用者はピンチ操作で画面表示を拡大します。
したがって、サービス側での配慮としては、10pxや12pxの文字サイズの運用を避けつつhtmlのメタ設定では、

<meta name="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no" />

この記述内の
「user-scalable=no」部分を設定さえしなければ、利用者はピンチ操作で任意のページを拡大縮小できるようになります。是非配慮をしてあげてください。


その他の配慮

紙に印刷して展開する細かい数字などの資料ですが、
若い方には読めても、歳を重ねた方には大変な苦痛が起き、目が疲労して頭痛、肩こり、吐き気の症状があらわれます。
是非配慮をしてあげてください。

また、社内の廊下の奥に人がいる場合でも、歳を重ねた相手側にはあなたが誰か認識できていない場合があります。
是非察してあげてください。


まとめ

老眼のユーザビリティ対応

・~10px、12pxの文字使用は避ける
・HTMLメタ内「user-scalable=no」の運用は避けピンチ操作に対応する

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

Featured Video Play Icon

左利きの視点から見たユーザビリティ

こんにちは、ユイPです。毎日暑いですね。平成最後だからって夏頑張りすぎじゃない?

突然ですが、あなたの利き手は右手ですか?左手ですか?おそらくほとんどの方が右手だと思います。
左利きの人口は全世界で約11%だそうです。100人いたら11人。多いか少ないかで言えば少ない方ですよね。
ところがどっこい、私ユイPは左利きです。お箸を持つのも字を書くのも絵を描くのもボールを投げるのも左手。スマホを持つ手は右です。

みなさんも一度はネット上で「左利きは●●が不便~!」みたいな話を見かけたことがあるのではないでしょうか。確かに世の中は右手を使う事を前提に作られているものが多いので正直不便に感じる事も多いです。
でも不便な事ばっかりじゃなくて、利点もあるのでは?そもそも今右利きを前提に作られているものも、少しの工夫で左利きにも優しくなるんじゃないかな?と考え、今回は左利きである私の視点から身の回りに溢れるもののユーザビリティについて書いていきたいと思います。
※決して「左利きってほんと不便なの!配慮してよ!」という愚痴をぶつける記事ではありません。


1.改札

改札でICカードをタッチしたり切符を入れる場所は右側ですよね。右利きの方はおそらくみなさん右手を使う方が多いと思います。私も無意識下では左手でICカードを持ってしまうので手をクロスした状態でピッとやります。もう慣れてしまいましたが…。

もしも改札が、両側どっちにタッチ(切符)してもいいよ!という設計になったら理想的です。

コストや事故など色々考えるとなかなか実現は難しいと思いますが。

2.スープレードル

ユイPが個人的に1番左利きでストレスを感じるのがこれです。ファミレスのスープバーなどでよく見かけるこやつ。
この写真のものは丸いお玉型をしているのでまだそこまで使いにくくないのですが、お店にあるもっと細くて先が尖ったタイプのやつ…(写真が用意出来なかったのでこちらから)使いづらさが最上級です。仕方がないので右でいつも使いますが、注ぎにくいのでこぼしてしまったりする事もあります。

なのでどちら側からでも注げるように、両側に注ぎ口があるレードルがあったりしたらいいなあと思います。

左利き用も売っているので自宅ではそれを使うしかないですね。

3.ハサミ

どうしようもない。
左利きハサミを常備するか、右で扱えるようにするしかない。私もハサミは右で使えます。右利き用でも普通に左手でも切れるやつあるんですが、切れないやつと何が違うんでしょうね?

4.お菓子の切り口

お菓子の切り口って左手で持って、右手で開ける事が想定されているので左側に切り込みが入っているものが多いです。なので左手で開ける場合裏返して開ける事が多いです。開ける事に支障はありませんが、切り口のガイドが見えないので切り方を失敗してしまう事もなくはないです。

両側どちらからも開けられるものだと嬉しいです。

5.電話機

会社でおなじみ!電話機。

左でとって右手でメモなどが出来るよう、左側に受話器がついていますよね。左利きは右でとって左でメモします。私も会社のデスクでは右側に電話を置いていますが、もしこれが位置固定で左側にしか置けなかったら…手がクロスしてメモが取りづらい。
なので受話器は上側にあったりすると平等かもしれません。

昔なつかしのこの形を更に改良していけば使いやすそう。

6.スポーツ

体育のキャッチボールとかだとペアの相手に嫌がられる事もありますが、勝負の世界だとレフティって有利とも言われますよね。これは左利きのメリットだと思います(私はスポーツ苦手なのであまり感じたことないです)。
左利きの人はおそらく利き足も左利きの人が多いですよね。サッカー選手でいうとメッシでしょうか。

7.銀行とか役所にある固定されたペン

(手作り感の強い写真ですみません)
紛失や盗難防止なのでしょうが、右側に固定されている事が多いですよね。この固定している紐やチェーンの長さが短いと書きづらい…。

これはシンプルに真ん中に設置する、そして紐は長めにしておいてほしいです。

8.楽器

私は学生時代左利き用のベースを弾いていました。まず左利き用の楽器を扱っているお店はあまり多くありません。そして左利き用を使っていると「あ、ちょっと貸して~」と友達に借りる事も出来ませんでした。
右も左もわからない初心者なら、一般的な右利き用で始めるのもアリだと思います。かつて私も楽器屋さんのお兄さんにもそう言われました。
(それでも当時の私は好きなアニメの推しキャラクターがレフティのベーシストだったという理由で左利き用を買いました。世界のポール・マッカートニーもレフティ)

9.キーボードとペンタブとマウスと私

これはペンタブで絵を描く方限定の悩みだと思うので、伝わりにくい方には申し訳ありません。

左手でペンを持っているとキーボードのCtrl+Z(を始めとした一般的なショートカットキー)が押しにくい!

カスタマイズ出来るタイプのキーボードやワイヤレスだといいのですが、普通に設置されているものだと右手がつりそうになります。
Photoshopなどはショートカットキーもカスタマイズ出来るのでそういった所で対処していくしかありません…。

ですが、左手でペンタブを使っている時にも利点はあります。
そう、それはマウス。

マウスは右という左利きさん、私もですが身近にも多いです(マウスも左だわ…という方がいたらごめんなさい)。
マウスが右だとペンタブを左手で使いながらマウスも握っていられるんですよね。これはとても利点だと感じています!

10.ノート

横書きのノートは左手の側面が確実に真っ黒になります。

ペンだとにじんでしまったり…これはもうどうしようもないです。にじまないボールペンが好きです。
またリング式のノートやファイルも手にリングが当たって書きづらいので、私はこれは取り外しの出来るルーズリーフを使って対処していました。会社のファイルなども出来る限り取り外しの出来るものだと嬉しいですね。

ただし唯一右利きに勝てる所があります。それは「縦書き」。

身近な所でいうと国語のノートでしょうか。これはものすごく書きやすいです。

11.左利き=天才じゃない?という風潮

世界の名だたる偉人には左利きがとても多いです。レオナルド・ダ・ヴィンチも、ミケランジェロも、ピカソも、アインシュタインも、ニュートンも、エジソンも、ベートーヴェンもみんな左利きです。左利きの人は右脳が発達しているから、何かに長けていることが多い…という説がありますね。
ですが私は左利きでも今のところ何も発明していないので凡人です。
「左利きなんだ!なんかかっこいいね!」と言ってくる方たまにいますが、反応に困る。


というわけで、いくつか紹介をしてみました。いかがでしたでしょうか。
不便な点も多いですが、メリットがあるものもあれば、自分なりに改善できる点、世の中全体で改善して頂けたら使いやすくなりそうなものもありました。

世界の89%は右利きなので、多い方に有利な世界なのは当然だと思います。決して左利きにもっと配慮しろ!なんていうつもりはありません。正直私は日常生活を生きる上で左利きであることにそこまでストレスや不便さを感じていません(ここまでこれだけ色々書いたのに)。

ですが今回の利き手の話に関わらず、多い方だけを優先するのではなく少ない方に対しても少しでも配慮をする事が、デザインや開発をする上で心に留めておくべき大事な事なのではないでしょうか。

とりあえず左利きの人が食事の席で人の左側に座りたがる事を許してください。

さもユイPが人類の左利き代表のように書いてしまいましたが、そんなわけはないのでこういう意見のやつもいるんだなあ~という気持ちで受け止めて頂けたら嬉しいです。
それではまた次回!

右手で書きました。


★ほぼ毎日更新中!
デジマースブログ公式ツイッター

エレベーターの開閉ボタンについて-2-

こんにちは、はらです。
私は前回エレベーターの「開く」「閉じる」ボタンのアイコンは紛らわしいという記事を書きました。

その記事では「なぜ紛らわしいのか?」「こうすると良いのでは?」など、あれこれ語ったにも関わらず、実際に新しいアイコンデザインは考えませんでした。

すると、やはりと言いますか…「あれこれ語ったのなら究極のアイコン作れるよね?」という声が上がりました。(震え声)

という事で今回、私が思う理想の「ひらく」「とじる」ボタンを実際に制作したいと思います。
エレベーターのボタンに関して現在はこうだという定量的な表現ができないので、デザイン上必要な条件を満たしていくという方法で最良の答えをみつけていきます。
この記事を書き終える頃にはきっと、とてもわかりやすい「ひらく」「とじる」ボタンが完成しているはずです!(震え声)

制作する上で注意した点

前回の記事を参考にしながら、制作する上で注意するポイントをまとめました。

1.ひらくボタンが優先されているか?

「ひらく」ボタンはドア挟み防止という安全上の理由から「とじる」ボタンより優先度を高く設定する必要があります。今回は色やアイコンの形状により優先順位を明確にします。
(開きたいと思った時に「とじる」ボタンに目線を向けてしまうとそれだけで時間を無駄にしてしまうので優先順位を明確にする事は大切ですね!)

2.色使いは適切か?

エレベーターの「あける」ボタンに色が付いている場合は緑色が使われています。
目立つので赤では?と思った方もいらっしゃるかもしれませんが、赤色は機械に使用すると非常用ボタンや緊急連絡ボタンなど「緊急」を連想させてしまうため、ボタンに利用すると押す際にためらいが生じます。また、焦りも増徴させてしまいます。黄色も同じように使い方次第で警告や注意喚起を連想させるため普段使いのボタンに使用すべきではありません。
緑は安心感、落ち着き、緊張の緩和などをのイメージに繋がります。機械に使用すると、進む、平常運行、作業完了、準備完了、充電完了、といったような安全なイメージ繋がります。以上の事からボタンを目立たせるという目的に使用する色は「緑」が良いといえます。

3.一目見ただけでアイコンの意味が理解できるか?

エレベーターのアイコンが抱えている問題はコレですよね…。一目見ただけでアイコンの意味が理解できるかという問題。ボタンが「ひらく」か「とじる」かを判断する時間は4秒前後のため当然アイコンは一目見ただけで判断できるようになっている必要があります。アイコンに対し過剰な装飾を加えたり、余計な立体感を加えると情報量が多く人によって処理に時間がかかってしまったり、解釈に違いが出てしまいます。いかにシンプルにするのかが重要です。今回は一つの記号に対し2つ以上の情報を与えないよう意識して制作を行います。

4.文字の表現は適切か?

年齢や国籍の事を考えるならば文字表記なしで伝わるのが理想ですが、前回の記事で文字に関しても触れたため今回は文字による補足も加えます。その文字表記に関して漢字は絶対にオススメしません。いわずもがなですが、「開」「閉」はとても紛らわしいです。焦っていない状況でも間違えます。文字を載せる場合はひらがなで、「ひらく」「とじる」がもっとも間違えにくいです。「左右」もそうですね「ひだり」「みぎ」と書いたほうが間違いを減らす事ができます。

この4項目を満たすと、わかりやすいアイコンになります。
それでは早速、上記のチェック項目を基に制作して行きたいと思います。

実際に考えてみた

良いと思えたもの

いろいろ迷いましたが完成!

もうすでにありそうですね…分かりやすくするために必要な4項目を全て満たしているので、押し間違いの発生率を下げることができる…はず…です。


「ひらく」ボタンのサイズを大きくしなかった理由

利用シーンあるいはユーザーの属性によって、どちらのボタンを重要と捉えているのかが変化するため、今回の記事ではボタンサイズを統しました。

介護施設や病院など判断や動作に時間が必要な方の利用が多いと考えられる場合は「ひらく」のボタンサイズを大きくするべきだと考えております。

「ひらく」を大きくする事は、目立たせる手段として大変効果的なため、サイズ感に関しては大変迷いましたが、今回は「ひらく」を目立たせるのではなくどちらが「ひらく」か判断を早めるという考えのもと制作を行ったため、サイズを統一いたしました。

また、「ひらく」を大きくする事によって、階数ボタンとの優先順位が変化し、階数ボタンよりも先に「ひらく」ボタンに目線が向かう可能性があると考えたためサイズを統一いたしました。

最後に…。

いかがでしたか?結局ありそうな形に収まりましたね…。
ひらくボタンは安全上必要な場合がありますが、とじるボタンは最悪無くても問題ありません。ですので閉じるボタンを削ってしまうのも手かと思います。とじるボタンが無ければ、ひらくボタン一択になり、迷う要素はありません。海外ではとじるボタンは無い事が多いそうです。
ただ、日本のUIは丁寧&補足詰め込みが大好きなので、削ったところで「このエレベーターには閉じるボタンがありません」なんていうシールが張られてしまいそうですね!
手でとめるというのも究極ですよね!何も迷いません。物理的にとめて開く…究極に直感的です。ただ、挟まると言う危険と恐怖がありますので良くはないですけど…。
このボタンの問題、完全な解決難しいと思いました。人が人である限り…。

ちなみに…アップル銀座のエレベーターには操作ボタンが全くありません。

それではまた。

(はら)

ハンバーガーメニューについて考えてみる

今回はハンバーガーメニューについて考えてみたいと思います。
なんて美味しそうな内容なんでしょう!お腹がすいてきました!
…と言いたいところではございますがジャンクフードのではございません笑

WEBサイト、アプリを使用していればほとんどの方が三本線のこのマーク「≡」を見たことがあるのではないでしょうか。
今回はスマホを使用している際の「≡」について考えていきたいと思います。

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

最初に

ハンバーガーメニュー又はハンバーガ―アイコン(以下ここではハンバーガーメニュー)とは主に複数のメニュー等を表示させる目的でスマートフォンのアプリなどで広く使用されています。
横線三本が並んだ記号「≡」がハンバーガ―っぽく見えることからそう呼ばれているようですが、日本ではあまりなじみがないかもしれません。
私なんかもメニューアイコン等と呼んでしまいます。

特徴としてはWEBサイト、アプリの上部の左右どちらかに存在することがほとんどです。
WEBサイト、アプリによっては以下のように表現するところもあり、必ずこれではないといけないというわけではなさそうです。


ハンバーガーメニュー

知っていれば、慣れてしまえば「≡」マークがハンバーガーメニューというメニューアイコンであると理解し自然に使用することが出来ます。
ハンバーガーメニューに馴染みのないユーザー、はたまたスマートフォンに慣れていないユーザー等にとっては大きなはじめの一歩となってしまいそうです。

たまたま押して「これはメニューが入っているのか」と気づくことはあるかもしれませんが、思っている以上にハードルは高く感じてしまいます。
ですがそんな中、今現在ではハンバーガーメニューの認知も上がっているのは確か。様々なところで見かけたりしますよね。
もし見たことがない、どれかわからない場合はキャリアのTOPを見て頂くと上部の方にあるかと思います。

↓一度は目を通している可能性が高いところですね

メリット、デメリット

ユーザー目線、デザイナー目線で見たときのメリット、デメリットを少し考えてみました。

《 ユ ー ザ ー 目 線 》

メリット

・どのWEBサイトやアプリでも表現方法はほぼ似通っているので、一度覚えてしまえばどこでも感覚的に使用することが出来る。
・上部に常設されていることや、上部を引き出すと出てくる事が多いため必要時に瞬時に使用しやすい。

デメリット

・初見だとメニューアイコンと認識するのに時間がかかる。
・ハンバーガーメニューの中身によっては余計に迷子になる可能性がある。
・開いてみるまで(タップ)中身が分からない。

《 デ ザ イ ナ ー 目 線 》

メリット

・ハンバーガーメニューを取り入れることで、小さなスマートフォン
の画面領域からUIデザイン領域を多く確保することが出来る。
・コンテンツ内容が多い際に使用するととても便利。

例えば一例ですが…

デメリット

・ハンバーガーメニューに頼りすぎてしまうことがある。
→目で見える部分のUIデザイン面を重視しすぎて、ハンバーガーメニューの中にたくさんのコンテンツを入れてしまい、結局はハンバーガーメニューの中でコンテンツを探させてしまう。
・使い方によっては味気ない中身のないデザインに陥ることも…

サイトを運営する側はサイトの傾向をしっかり把握したうえでハンバーガーメニューを使用することがユーザーを困惑させない一歩であると思います。

買い物が出来るサイトであれば、「カート」はほぼ必須といえます。
もしもハンバーガーメニューの中に入っていたら、仮にほとんどの人が気づくと考えたとしても、わざわざメニューを開くのは面倒くさいと感じさせてしまう可能性があります。
この場合、サイトの傾向である買い物をスムーズにしてもらうためにTOPにわかりやすく表示されていた方がユーザーには親切です。

「ログイン」「ログアウト」をさせるサイトでは基本的にはTOPに置かれるものが多く見受けられますが、SNSなどで常にログイン状態のままにしておくことが多いものは「ログアウト」がハンバーガーメニューの中に入っていることもあります。

最近の傾向では

ハンバーガーメニューを三本線で表さないところも多くみられます。
縦型の三点リーダーや二本線のもの、またメニューをタップした際にナビゲーションの意味合いとしてメニューマークが×マークに変化するもの等々、動くものも増えています。

AndroidとIOSで各々の傾向があると思いますが、WEBのシステム領域などで扱われるハンバーガーメニューで主に三本線以外のものがみられる印象があります。

またハンバーガーメニューなど、日に日にユーザーの感覚的な扱いに任せてしまっている点が垣間見えるため、いかに自然に扱ってもらえるかUI面での見せ方が今以上に大事になってくるのではないでしょうか。
便利なのに、扱えなければもったいないですからね。

まとめ8
  • 「≡」はハンバーガーメニューという
    (アイコンなどとも呼ばれたりします)

  • ハンバーガーメニューのほどんどはWEBサイトやアプリの上部に置かれる

  • 初見さんには分かりづらい表現である

  • タップするまで中身は分からない

  • 一度理解すれば感覚的に使用できる

  • ハンバーガーメニューに頼りすぎるデザインだと、ハンバーガーメニュー内でコンテンツを探す手間が出てくる
    (迷子になることも)

  • ハンバーガーメニューをうまく使うことで、UIデザイン領域を多く確保出来るため、見せ方の幅が広がる

  • サイトの傾向を把握したうえでの使用が望ましい

最後に

このハンバーガーメニュー。賛否両論が挙げられているのをよく見かけます。使いづらい、時代遅れ、便利等々…
自己見解ですが使い方によっては様まだまだ多くの可能性を秘めていると考えています。
便利なハンバーガーメニューですがサイトのUIとの匙加減が大事ですね。

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

お掃除ロボットは何故カワイイの?【UXで考えてみる】

こんにちは!
今回のテーマは「お掃除ロボットは何故カワイイの?【UXで考えてみる】」です。

働くロボットや愛玩ロボットなど、私たちの何気ない生活の中にロボットが溶け込み初めていますよね。
有名所だとルンバやAIBO、Pepper君でしょうか。持っていないこそすれ、名前だけは聞いたことがあると言う人がほとんどかと思います。

そんなロボットたちに、みなさんは“カワイイ”と感じた事はありますか?
私はあります。世の中にはロボットをカワイイと感じ、親しみを覚えたり愛着を持つ人間がいます。
人間や生き物でもないただの機械を、なぜカワイイと感じてしまうのか。
今回は「お掃除ロボット」に焦点を当て、UXデザインの観点から考えてみたいと思います。


お掃除ロボットと利用シーン

お掃除ロボットは、いつどこで誰が何の為に利用するのでしょうか。少し整理してみます。


1.いつ?

仕事に行っている間や寝ている間、別の家事をしている間など。人間が別の事をしている時に掃除しておいてもらう事がほとんどかと思います。

2.どこで?

家庭のリビングや廊下など共用スペースで利用される事が多いかと思います。
一般家庭だけでなく会社で利用している場合もありますね。弊社にも休憩時に使うスタッフルームにお掃除ロボットが常駐しています。

3.誰が?

対象ユーザーは忙しい共働き夫婦や一人暮らしの男性、掃除が困難な老人など、老若男女様々です。

4.何の為に?

利用する目的は「人間の代わりに掃除して欲しい」です。そのままですね。
少し言い方を変えると、掃除はロボットにまかせて、空いた時間を別の事に活かしたいと言う目的もあるかと思います。


利用シーンをざっくり書いてみましたが、これだけだとロボットをカワイイと感じる要素はないかと思います。
ですが、これをUXに置き換えてみると少し変わって来ます。


ロボットとUXのハニカム構造

お掃除ロボットをUXの観点から見ると、非常に優秀だと言えるかと思います。

UXとは、楽しさや心地よさなどのユーザー体験の事です。
UXには下記のようなハニカム構造があります。

お掃除ロボットはこのハニカム構造の多くを満たしています。

特に注目したいのが「Useful (役に立つ)」と「Desirable(好ましい)」です。ここに、お掃除ロボットを“カワイイ”と思わせる要素が含まれていると私は考えます。

「Useful (役に立つ)」は、人間の代わりに掃除をしてくれる所です。
「Desirable(好ましい)」は、上記に加え、少し不器用な面がある所です。


不器用で健気なUX

お掃除ロボットの不器用な面とは、ロボットだけで隅々まで掃除する事が出来ない所です。
床のゴミを吸い取るロボットは、構造上の問題でコーナーや狭い場所の掃除が苦手です。ちょっとした障害物や段差があると掃除する事が出来ません。
また、掃除の時間も人間以上に掛かります。長い時には1時間以上掛けて掃除する場合もあります。
一見マイナスな事ばかり書いてしまいましたが、ここにロボットの“カワイイ”のポイントがあります。
人間だったらさっさとこうするなと思う反面、健気さも感じるからです。

お掃除ロボットはプログラムやAIによって、行動、学習、計算のサイクルを繰り返して掃除を行います。
部屋全体を最適なルートで綺麗に掃除する為であり、非常に合理的ですが、それ故に融通が利きません。
言い方を変えると「不器用だけど頑張り屋」です。
段差や障害物の前ではぶつかったり小刻みに動いて状況を判断、方向転換してルートを考えます。地道な作業を繰り返しながら、部屋を何往復もしながら掃除してくれます。
そのため人間が掃除機を掛けるより時間が掛かりますが、結果として人間の目的である「綺麗な居住空間(継続的)」と「掃除に掛けるはずだった時間」を提供してくれます。

人間とはまったく異なる小さな無機物が、彼らなりに考え、指示された目的を達成しようとする姿はとても健気で、人に「好ましい」と言う感情を起こさせます。
ロボットの構造上やむを得ない不器用さの中で、人間の欲求を満たしてくれる「好ましさ」が人に“カワイイ”と感じさせるのではないでしょうか。


おわりに

いかがでしたでしょうか?
お掃除ロボットに焦点を絞り、UXデザインの観点から何故カワイイと言う感情を起こさせるのか考えてみました。
その結果、「Useful (役に立つ)」「Desirable(好ましい)」の部分が影響している事がわかりました。
お掃除ロボットに焦点を絞って書いてはいますが、他の家庭向けロボットにも共通して言える事ではないかと思います。
ロボットがより人間に近い動きや見た目になると、便利だと感じこそすれ、カワイイとは思わないかもしれませんね。

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

タブとセグメンテッドコントロールの違いとユーザビリティー

モバイルwebページは画面が小さいため、フィーチャーフォン時代からUI部品の「タブ」を使い、ページ内の一部に部分的な表示切替を行い多くの情報を載せてきました。

今回は、そんな「タブ」と、機能の近い「セグメンテッドコントロール(Segmented Control)」の違いを紹介し、
後半にはタブ表現のバリエーションとユーザビリティーにふれ、最後にコピペして使えるソースを紹介します。


タブとは

ページ内の一部を部分的な表示切替を行うことで、優先度の低い情報も限られたスペースで表示できる便利な機能です。

ポイントとして

  • タブの数は3~4つ程度 ※各項目名の文字数の関係で。
  • デフォルトは一番左側がアクティブ状態にする
  • 優先度の高い項目を一番左に配置 ※閉じられたタブ(特に右端)は開かれることが少ない
  • 扱う情報をカテゴリ/ジャンルで切り替える(コンテンツ向き)
  • タブ毎の情報が重複しない

以上の注意が必要です。
置かれる情報は「題名」の子要素(並列なもの)を表示切替することが望ましいです。

例.



セグメンテッドコントロール
(Segmented Control)とは

iOSでは標準的なUIコンポーネントです。

「タブ」に似ていますが、テーマ全体に対してセグメントを分けて表示する機能です。

ポイントとして、

  • 項目数は3~4つ程度が望ましい ※2つだけの場合はどちらがアクティブかわかりづらい
  • デフォルトはタブと同じく一番左側がアクティブ状態にする
  • 一つのデータをセグメントにより分けて表示(情報/データ 向き)
  • 各セグメント間の情報は分け方により重複する

以上の注意が必要です。

置かれる情報は「主情報」の内容をセグメントにより表示切替することが望ましいです。

例.



タブとセグメンテッドコントロールそれぞれついて説明しましたが、
ポイントを踏まえて適切に使い分けていきましょう。


バリエーションの紹介

最後にタブのバリエーションを紹介します。

見比べると分かりますが、UI部品のデザインによって利用者はそれが「タブ」なのか「セグメンテッドコントロール」なのか、その他似た表現の「グローバルメニュー」なのか判断が難しいため、
デザインについてはユーザビリティーを考慮する必要があります。

「流行表現」にはそういった問題が付いてくるため、
見慣れた「定番表現」の方が利用者にとっては瞬間的にわかりやすいのではないでしょうか。

参考程度に定番表現タブのソースを掲載します。

定番タブのソースコード
(動かせます↓)

<div id="tabcontrol"><a class ="tab1"  href="#tabpage1" >HTML</a><a class ="tab1"  href="#tabpage2" >CSS</a><a class ="tab1"  href="#tabpage3" >JavaScript</a></div>

<div id="tabbody">
	<div id="tabpage1">タブ1内容</div>
	<div id="tabpage2">タブ2内容タブ2内容</div>
	<div id="tabpage3">タブ3内容タブ3内容タブ3内容</div>
	</div>	

@charset "utf-8";
/* CSS Document */

body {
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"MS Pゴシック",sans-serif;
}

	/* ▼タブ(カスタマイズ中) */

#tabcontrol {
	width: 100%;
	height: auto;
	border: 0.0px solid #FF0004;
	margin: 0px 0% 0% 0%;/* インラインブロック化 */
	border-width: 0px 0px 0px 0px;    /* 下以外の枠線を引く */
	position: relative;               /* JavaScriptでz-indexを調整するために必要 */
	overflow: hidden;
}

a.tab1 {
	width: 31.3%;
	border-top:solid 2px #656766;
	border-bottom:solid 1px #656766;
	border-left:solid 2px #656766;
	border-right:solid 2px #656766;
	font-size: 15px; font-size: 1.5rem;
	text-align:center;
	text-decoration: none ;/*リンク文字の下線を取る*/
	margin: 0% 0% 0% 0.8%;
	padding: 7px 0  7px 0;           /* 内側の余白 */
	border-radius: 0.75em 0.75em 0 0; /* 枠線の左上角と右上角だけを丸く */

	float: left
}

div.tabcontrol_btn1_a_tag_on {
	color: #656766;
	text-decoration: none ;/*リンク文字の下線を取る*/
	
	width: 31.3%;
	border-top:solid 2px #656766;
	border-bottom:solid 2px #ffffff;
	border-left:solid 2px #656766;
	border-right:solid 2px #656766;
	text-align:center;
	margin: 0% 0% 0% 0.8%;
	padding: 1.75% 0  1.75% 0%;            /* 内側の余白 */
	border-radius: 0.75em 0.75em 0 0; /* 枠線の左上角と右上角だけを丸く */
	background-color:#ffffff;
	float: left
}

div.tabcontrol_btn1_a_tag_off {
	color: #ffffff;
	text-decoration: none ;/*リンク文字の下線を取る*/
	
	width: 31.3%;
	border: solid #656766;
	border-width: 2px 2px 1px 2px;    /* 下以外の枠線を引く */
	text-align:center;
	margin: 0% 0.75% 0% 0.75%;
	padding: 1.75% 0  1.75% 0%;            /* 内側の余白 */
	border-radius: 0.75em 0.75em 0 0; /* 枠線の左上角と右上角だけを丸く */
	background-color:#656766;
	float: left
}

/* ▼タブの中身(カスタマイズ中)  */

#tabbody div{
	width: auto;
	border-top:solid 2px #656766;
	border-bottom:solid 2px #656766;
	border-left:solid 0px #656766;
	border-right:solid 0px #656766;
	margin: -2px auto 5% auto;
	padding: 3.75% 1% 3.75% 1%;            /* 内側の余白量 */
	background-color: #FFFFFF; /* 背景色 */

}

#tabbody1 div{
	width: auto;
	border-top:solid 2px #656766;
	border-bottom:solid 2px #656766;
	border-left:solid 0px #656766;
	border-right:solid 0px #656766;
	margin: -2px auto 5% auto;
	padding: 3.75% 1% 3.75% 1%;            /* 内側の余白量 */
	background-color: #FFFFFF; /* 背景色 */

}

#tabbody2 div{
	width: auto;
	border-top:solid 2px #656766;
	border-bottom:solid 2px #656766;
	border-left:solid 0px #656766;
	border-right:solid 0px #656766;
	margin: -2px auto 5% auto;
	padding: 3.75% 1% 3.75% 1%;            /* 内側の余白量 */
	background-color: #FFFFFF; /* 背景色 */

}

#tabbody3 div{
	width: auto;
	border-top:solid 2px #656766;
	border-bottom:solid 2px #656766;
	border-left:solid 0px #656766;
	border-right:solid 0px #656766;
	margin: -2px auto 5% auto;
	padding: 3.75% 1% 3.75% 1%;            /* 内側の余白量 */
	background-color: #FFFFFF; /* 背景色 */

}

/* ▼タブの配色 */
#tabcontrol a:nth-child(1), { color: #ffffdd; }/* 1つ目のタブとその中身用の配色 */
#tabcontrol a:nth-child(2), { color: #ddffdd; }/* 2つ目のタブとその中身用の配色 */
#tabcontrol a:nth-child(3), { color: #ddddff; }/* 3つ目のタブとその中身用の配色 */

function aa() {
// ---------------------------
// ▼A:対象要素を得る
// ---------------------------
var tabs = document.getElementById('tabcontrol').getElementsByTagName('a');
var pages = document.getElementById('tabbody').getElementsByTagName('div');
	
// ---------------------------
// ▼B:タブの切り替え処理
// ---------------------------
function changeTab() {
   // ▼B-1. href属性値から対象のid名を抜き出す
   var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length);

   // ▼B-2. 指定のタブページだけを表示する
	for(var i=0; i<pages.length; i++) {
		if( pages[i].id != targetid ) {
			pages[i].style.display = "none";
		}
		else {
			pages[i].style.display = "block";
		}
	}

   // ▼B-3. クリックされたタブを前面に表示する
	for(var i=0; i<tabs.length; i++) {
		tabs[i].setAttribute('style','color:#ffffff;border-bottom:solid 2px #656766;background-color:#656766;');
	}
	this.setAttribute('style','color:#656766;border-bottom:solid 2px #ffffff;background-color:#ffffff;');

   // ▼B-4. ページ遷移しないようにfalseを返す
	return false;
}

// ---------------------------
// ▼C:すべてのタブに対して、クリック時にchangeTab関数が実行されるよう指定する
// ---------------------------
	for(var i=0; i<tabs.length; i++) {
		tabs[i].onclick = changeTab;
	}

// ---------------------------
// ▼D:最初は先頭のタブを選択しておく
// ---------------------------
	tabs[0].onclick();
}

※JavaScript等、こちらのページ記事を参考にしてカスタマイズしてみました。
「ページ移動せずに内容を変更するタブ機能の作り方」

ご意見あればお願いします。

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

UI/UXについて考える【女性向け恋愛シミュレーションゲーム編】

こんにちは!ユイPです。もうすぐ梅雨ですね。
私は傘を持ち歩くのを忘れがちで、夕方から雨予報なのに傘を持ってない…なんて事がたまにあります。
そんな時いつも、(ここで私に「この傘よかったら使ってください」なんて言ってくれる素敵な男性が現れないかな~)という妄想をします。
しかし現実にそんな恋愛ゲームのイベントみたいな事起こるはずもなく…大抵小走りで帰るので家に着く頃にはびしょ濡れです。

前振りが長くなってしまいましたが、これも伏線…今回のテーマは、
UI/UXについて考える【女性向け恋愛シミュレーションゲーム編】です。
恋愛シミュレーションゲーム(以下・乙女ゲーム)のUIにどんなものがあるのか、それぞれどんな役割をしていてどんな体験を得られるのか…分析してみたいと思います!
ちなみに冒頭の妄想からわかる通り、ユイPは普段から乙女ゲームをそこそこに嗜んでいます。


♥今回は”家庭用ゲーム機用のゲームのUI”として考えていきます。
♥”ゲームのプレイ画面”とそこに関わる機能のUIに触れていきます。
♥ゲームの形式はノベル形式のもので考えています。


基本のプレイ画面

まず、乙女ゲームの基本的なプレイ画面を確認してみましょう。

いや本当にこういうイベント現実に起きないんですか?
私の記憶と経験と乙女ゲームのサイトを巡って導き出した最適な解がこちらです。もちろんゲームによって差異はあります。
これを基本として、それぞれのパーツが何の役割を果たしているか書きだしてみます。

①人物名
台詞を話している人物の名前が表示される。主人公が喋っている時は主人公名が表示される。
②メッセージウィンドウ
台詞が表示される。台詞の表示速度は基本的に変更可能。ユーザーの好みで変える事が出来る。
ゲームによってはここの不透明度を調整出来るものもある。キャラクターを透かすか文字の読みやすさを優先するかはお好みで。
③台詞送りマーク
台詞が全文表示されると表示される。「台詞を次に送れるよ」という合図。
チカチカするアニメーションがついている事が多い。
④自動台詞送りマーク
台詞が自動送り(操作しなくても勝手に進んでいくモード)になっている時だけ表示される。自動に設定していない場合は出てこない。
画面右上に表示が出るゲームが多かった。ただ右上に日付など他の要素が表示されているゲームの場合、テキストウィンドウの横など別の場所に表示されることも。

ゲームをプレイしている際、常に画面上に表示されている最低限のパーツはこの4つが多いです。
ゲームによっては日付だったり、主人公の顔も表示されていたりするものもあります。世界観にあわせてゲームによって色々変わってきますが、あくまで「男性キャラクター」がメインなのでそれを邪魔するほど目立つ要素は配置されていないように思います。

また、これらのパーツはボタン1つで簡単に表示/非表示が出来るようになっています。(後ほど詳しく説明)

プレイ中に呼び出せる機能

常に表示されているパーツ以外にも、ゲームをプレイする際に必要な機能は他にもありますよね。セーブやロード、設定などです。

これらのメニューや機能は普段は画面上に表示されていない事が多く、それぞれ対応したボタンを押す事で呼び出す事が出来ます。
(※「MENU」が常に表示されていたり、各機能がメッセージウィンドウの下に表示されている場合などもあり)

乙女ゲームでプレイ中に呼び出す事の出来る機能は、

①「セーブ/ロード」
その名の通りセーブやロード。タイトル画面に戻るのも大体ここから。
②「クイックセーブ/クイックロード」
ボタン1つ(もしくは2つ)でセーブやロードが出来る。
③「オートON/OFF」
上記でも説明した台詞の自動再生のON/OFFが切り替えられる。
④「スキップ」
既読の部分をスキップする事が出来る。速度は自由に変えられる。
周回する事が多い乙女ゲームにおいて大事な機能。もちろん未読でもスキップは出来る。
⑤「履歴(バックログ)」
これまでの台詞の履歴を見る事が出来る。ボイス再生が出来るものが多い。
⑥「メッセージウィンドウなどの表示/非表示」
一瞬で画面上のキャラクター以外のパーツの表示/非表示が切り替えられる。
キャラクターの絵の隠れていた部分や、スチルと呼ばれる1枚絵をじっくり見るための機能です。
⑦「キャラクター/ステータス」
キャラクターのプロフィールや好感度、イベントの発生条件などを見る事が出来る。
⑧「用語解説」
ゲーム中に通常した用語の解説。難しい世界観や特殊な設定のあるゲームには必須。
⑨「タイトルに戻る」
タイトル画面に戻ることが出来ます。
⑩「オプション(設定)」
台詞の速度やキャラクターボイスの音量調整など、ゲームの各種設定が出来る。

…など、このような機能が多いです。

これがどのように各種ボタンと連動しているかというと、
例えばとあるゲームでの、ボタンと機能の関係はこのようになっていました。
※S社の某携帯ゲーム機です。

「クイックセーブ」や「履歴」「スキップ」「表示/非表示」といった即時に行いたいものはボタン1つで出来るようになっていました。
このゲーム以外にも基本ワンタッチで行いたい操作はボタン1つで呼び出せるものがほとんどでした。ストレスフリー。
セーブやロード、キャラクターのページなど画面自体が切り替わるものはメニューを呼び出して開くようになっています。

選択肢や好感度などのUI

ノベル形式なので読み進めていく事がメインですが、「ゲーム」ですのでただただイケメンとのストーリーを読んでいくだけでは話は何も発展していきません。
途中で「選択肢」というものが登場します。この選択によってルート分岐というものが行われ、ハッピーエンドかノーマルエンドかバッドエンドか…つまりは結末がわかれていきます。

選択肢は乙女ゲームにおいて運命を左右するものといっても過言ではありません。なので、どの選択肢を今自分が選択しようとしているか、見てわかりやすいように工夫されている事が多いです。(色が違う、カーソルが表示される…など)
ちなみにこの画像の選択肢の場合、真ん中の選択肢が大正解です。1番上は普通、1番下は論外ですね。

そして正解(1番好感度があがるもの)を選んだ場合、その証拠としてエフェクトが出る事が多いです。

正解が可視化される事で「よかった~合ってた~!」という安心を得る事が出来ますね。逆に出なかったり、好感度が下がるエフェクトが出ると焦ります。切羽詰っているとクイックロードで選択肢のちょっと前に戻ったりします。シビアな世界なので。
また、正解がわかる事によって「このキャラはこういう返しをされるのが好きなんだな?」と、なんとなく性格が読めてくるのでその後の選択肢も選びやすくなります。

その他、気になったゲームの工夫

これは私が今までプレイした中でユーザーに配慮されているな…と思った要素の一つなのですが、
とあるゲームで「主人公(つまりプレイヤー)」の顔の描写をON/OFFに出来るという機能がありました。
恋愛シミュレーションゲームにおいて、主人公を自分と重ねて実際に自分がキャラクターと恋愛している気分になるか、はたまた第三者の視点で主人公とキャラクターの恋愛模様を楽しむかプレイスタイルは人それぞれです。でも前者だった場合、あまりにも主人公の個性が前面に出ているとちょっと没入出来ないよ…って人がいるかもしれません。
そこで「イベントCG(1枚絵で表示されるイラストのこと)」で表示される主人公の表情をOFFにする事が出来る!という機能のついているゲームがあり、没入系プレイヤーへの配慮がされていて手が込んでいるなあと思いました。だって表情ありとなしの2パターン用意されているわけですからね…。
イベントCGの顔は消せなくとも、メッセージウィンドウ横に表示される主人公の顔をOFFに出来るゲームも多いですね。

まとめ UIが生み出す世界観

ノベル形式のゲームでは、メッセージウィンドウなどの要素はゲームをプレイしている間、常に目に入ってくるものになります。
メインはキャラクターや背景などのグラフィックかもしれませんが、UIもゲームの世界観の一部を表現しているといっても過言ではありません。私はどんなにキャラクターや背景の絵が綺麗でも、それをとりまくUIに手が込んでいなかったらなんだかテンション下がってしまいます…。
例えば幕末が舞台で新撰組隊士と戦争の中恋愛していくシリアスなお話なのに、UIがピンクでキラキラしたメタリック!だとおかしいですよね。和風のお話ならUIも和風なテクスチャを使用したり、使うフォントもゴシック体よりは明朝体とかだと世界観を壊さずにゲームをプレイする上でしっくりきます。
もちろんこれは恋愛シミュレーションゲームに限った話ではなくどんなゲームのUIにも言える事ですが、常に視界に入ってくるノベル形式の恋愛ゲームでは特に大事と言えるのではないでしょうか。

乙女ゲームがUIによってどんな世界観を生み出されているか、どれほど手が込んでいるのか、気になった方は是非乙女ゲームブランドさんのサイトを見てみてください。


以上、UI/UXについて考える【女性向け恋愛シミュレーションゲーム編】ユイPがお送りいたしました。
この記事で例にあげたゲームが何かわかった貴方はユイPのお仲間です♥

★ユイPおすすめ乙女ゲームをツイートするかも?
デジマースブログ公式Twitter

エレベーターの開閉ボタンについて

身の回りのUI第2弾です。

エレベーターの「開ける・閉める」ボタンが間違えやすいという話を昔からよく聞きますよね?未だにこの話を聞くということは、車のワイパーが未だに昔と変わらず棒が左右に動き水をよけている事と同じで、もはや解決策がないのかもしれません…

ということで、今回はエレベーターの開閉ボタンが間違えやすい理由についてあれやこれやと考えていきたいと思います。

※本文中に出てくる「かご」とはエレベーターの人が乗る箱状の部分の事です。


では、突然ですが問題です。
どちらがエレベーターの「あける」ボタンでしょうか?

左ですね。

簡単に答えることができたはずです。

「あれ?いつもは迷うけど、今回は迷わなかったな」と思った方もいらっしゃるのではないでしょうか?

迷わなかった理由は“状況が違う”からです。

エレベーターで「開ける/閉める」の二択を迫られるときは「慌てて人が駆け込んできた」「早く閉めたい」など慌てている状態が多いですが、今回は違いますよね?自宅やオフィスで、ゆっくりしながら落ち着いて答えましたよね?(多分ですが…)

人は焦るとパフォーマンスが低下し、ミスを起こします。焦るという状況が発生しやすい環境も改善する必要があるため、開閉ボタンの問題をアイコンのデザインだけで解決するのは難しいかもしれません。ですが今回はアイコンのデザインでミスを軽減しようという考えのもと話を進めます。

なぜ間違うのかを考える

1.ひらくボタンを押すまでの手順の問題

ドアが閉じるまでは4秒前後です。その4秒前後で「ひらくボタン」を見つけて押す必要があります。ドアが閉まりかけの時に人が乗ろうとしてきた場合は4秒も確保できません。
このことから分かるように、アイコンデザインの良し悪し以前に押すまでの時間が短いという問題があります。
エレベーターのボタンは、どちらが「開く」か「閉じるか」に迷うよりも先に“探す”という行為を先に行う必要があります。ですので、開閉ボタンのデザインは「限られた時間でいかに早く見つける事ができるか」が重要になってきます。

※ちなみに…車椅子用ボタンを押すと閉まる時間が10秒ほどになります。また、エレベーター内のミラーは、車椅子の方がバックで降りるために設置されています。(かごの中で回転するのは難しいためです)

2.アイコンのデザインの問題

エレベーターの開閉アイコンは同じようなデザインのものが多いのですが、規格により統一されているわけではないので、アイコンを記憶しても意味はありません。統一してくれればいいんですけどね…。
開閉ボタンのアイコンは、迷わず行動に移せるほど分かりやすく、誰が見ても同じ意味を想像できる形が理想的です。そこを踏まえた上で現在頻繁に見かけるアイコンについて考えると、完全なものではないように思えますのでその理由について説明いたします。

頻繁に見かけるアイコンのデザインがわかりにくい理由

こちらのアイコンはよく見かけますが、パッと見た時に、どちらなのだろうかと迷い、結局補足の文字に頼ることが多いので、なぜ間違えやすいのかについて考えてみたいと思います。

1.ひらいている様子が伝わりにくい
「ひらく」も「とじる」も中心に矢印が寄せてあり、どちらも閉じていると言われれば閉じているように見えます。

2.ドアなのかが分からない
矢印のみだと、何がどのように動くのかが分かりにくいです。シンプルですがパッと見た時の情報が少ないです。

3.三角形だと矢印として伝わりにくい
人によっては矢印という意味よりも先に三角形ととらえる可能性があります。情報量を減らすという意味では成功していますが、「矢印」「三角」のどちらにも見えるとういあいまいな状態は、ナビゲーション目的のデザインにおいては避けるべきです。

以上のことからアイコンは「“何がどう動くのか”あいまいな表現を避けてハッキリと伝える」ことが重要となることが分かりました。


今回はボタンの開閉が間違えやすい理由についてあれやこれやと考察してみましたが、「限られた時間でいかに早く見つける事ができるか」「“何がどう動くのか”あいまいな表現を避けてハッキリと伝える」ことが重要なのではということが見えてきました。
ほとんどのエレベーターのボタンは「左がひらくボタン」です。また、色が付いているならば「色がついているほうがひらく」です。もちろん全てのエレベーターにあてはまるわけでは無いのですが、ほとんどがこのようになっています。
このような情報をユーザーが予め持っていればいいのですが、当然そうはいきません。そもそもUIデザインではユーザーの知識や経験を頼りに設計することはあってはならないことです。ユーザーは何も知らないし、間違うことを前提に設計する事が基本です。
少し話がそれましたが、今後もエレベーターのボタンに関して気になることがあれば記事にしたいと思います。
それではまた次回

(はら)

簡単!Premiere Proの使い方【テロップ編】

こんにちは!
今回のテーマは「簡単!Premiere Proの使い方【テロップ編】」です。
Premiere Proでテロップを作る方法をご紹介したいと思います。

こちらのネコの動画にテロップを入れてみたいと思います。

Premiere Proの立ち上げ方や、素材の読み込み方について知りたいと言う方は、簡単!Premiere Proの使い方【立ち上げと読み込み編】もご覧ください!
Premiere Proの立ち上げ方と素材の読み込み方、基礎的な名称の説明をしています。


使用するソフト

■Premiere Pro(プレミアプロ)
※バージョンは「CC 2018」を使用しています。


テロップの開始位置を決める

まず初めにテロップの開始位置を決めます。
開始位置を決めるには、「タイムラインパネル」の「時間インジゲーター」を左右に動かしてください。
「時間インジゲーター」と「プログラムモニター」は連動していますので、プログラムモニターで映像を確認しながら任意のタイミングに調整します。

もっと細かく調整したい時は、タイムラインパネルかプログラムモニターを選択した状態で、キーボードの矢印キーの左右で時間インジゲーターを動かします。
または、プログラムモニターの戻るボタンか進むボタンでも大丈夫です。
こうすることでコンマ単位の繊細な調整をすることが出来ます。

ここで1つ注意なのが、この段階でコンマ単位の調整に時間を掛けすぎない事です。
ガチガチに決めても、後々、実際にテキストを入れたりエフェクトを掛けた時に調整したくなるからです。
まずはザックリ位置を決めるまでに留めて、後で細かい調整をする気持ちで進めましょう。

参考までに、私がよくやる流れを書いてみます。
①テロップを入れたい大まかな位置の辺りまで時間インジゲーターを動かす。
②プログラムモニターの再生ボタンを押して動画を再生。テロップを入れたいタイミングで停止する。
※この工程はなくても良いのですが、動画の動きやテンポを確認しながらテロップの位置を決めたい時にやりやすいのでオススメです。
③タイムラインパネルかプログラムモニターを選択した状態で、キーボードの矢印キーの左右で時間インジゲーターを調整する。


テキストを入力する

次にテキストを入力します。
「ファイル」→「新規」→「レガシータイトル」を選択すると、下の図のような「新規タイトルウィンドウ」が表示されます。

設定したい項目があれば変更し、特に指定がなければそのままOKを押して下さい。

タイムベースについては、動画の設定に合わせておけば大丈夫です。
今回で言うと、ネコの動画が「59.94fps」の設定になっていたので図のような数値になっています。
ちなみに、「名前」の項目は設定した物がプロジェクトパネルに反映されます。後々編集できますのでこのまま進めてしまっても大丈夫です。

新規タイトルウィンドウのOKを押すと、画面は下の図のようになっているかと思います。

プロジェクトパネルにタイトル01が追加されていますね。
更に、プログラムモニターの表示が少し変わりました。これは「タイトルパネル」が表示された状態です。タイトルパネルではテキストの入力や編集が出来ます。
上部のパネルを切り替える事でデフォルトのパネルとタイトルパネルを切り替える事が出来ます。
また、時間インジゲーターを触ってもデフォルトのパネルに切り替わります。

次に、「レガシータイトルツール」で「横書き文字ツール」などを選択します。
横書き文字ツールを選択した状態でプログラムモニターをクリックすると、テキストが入力できるようになります。
テキストの位置は、「レガシータイトルツール」の「選択ツール」で好きな所へ移動させることが出来ます。

ここまで出来たら、プロジェクトパネルに作成したタイトル01のクリップをタイムラインパネルにドラッグします。
この時、時間インジゲーターにクリップの左端がピッタリくっつくようにします。
こうする事で、1番初めに決めたテロップの開始位置からテキストが表示されるようになります。

テロップが表示されている時間は、タイムラインパネルのタイトル01のクリップの端を左右に伸縮させることで調整する事が出来ます。

余談ですが、私の場合、タイムラインパネルにクリップを入れた段階で一度レンダリングして保存します。
学生の頃、映像の授業の教授に「レンダリングだけは小まめに掛けて保存しておくように。これだけ出来れば何も怖くない。レンダリングレンダリング…」と言われました。
この言葉が頭に焼き付いているので、レンダリングバーが赤くなろうものなら即刻レンダリングして保存します。
レンダリングをする意味としては、ザックリ言うと処理が重くならないようにする為です。
レンダリングしていないデータが多いと、Premiere Proの処理速度が落ち、場合によっては固まって強制終了…なんて事もあります。
保存を小まめにしていなかった場合、何時間もかけて編集したデータが飛びます。想像しただけで心臓がキュッとなりますね。
心配な方は小まめにレンダリングと保存をして下さい。

また、小まめにレンダリングするメリットとして、レンダリング時間があります。
情報量が少なければ数秒で済む場合もありますし、多ければ数時間を要する場合もあります。
小まめにやるか、後でまとめてやるか、そもそもやらないか、作業スタイルに合わせて試してみて下さい。


フォントを編集する

テロップのフォントを変えたり、スタイルを付けたりすることが出来ます。
プログラムモニターの上部には、フォントやサイズ、カーニングなど基本的な設定をする項目があります。

「レガシータイトルプロパティ」では、カラーを変えたり影を付けたり、より細かい編集作業が出来ます。
また、「レガシータイトルスタイル」では、登録されたスタイルを選ぶことが出来ます。デフォルトで登録されているスタイルもあれば、自分で作ったスタイルを保存して使う事も可能です。

「レガシータイトルスタイル」でスタイルを選んだ後、「レガシータイトルプロパティ」で微調整する事も出来ますので、イメージに合うフォントを作ってみて下さい。


エフェクトを付ける

テキストにエフェクトを付けます。
「エフェクトパネル」に様々なエフェクトがありますが、今回は「ビデオトラジション」の「ディゾルブ」を使います。
ビデオトラジションのディゾルブを、タイムラインパネルのタイトル01のクリップの両端にドラッグします。
こうする事で、フェードイン、フェードアウトの効果を付けることが出来ます。

エフェクトはいらないな、と言う場合は「Back Spaceキー」や「Deleteキー」で消せます。

また、クリップに付けたエフェクトを左右に伸縮させることで、エフェクトの表示時間を調整する事も出来ます。
伸ばすとゆっくりエフェクトの効果が表れ、縮めると早く表示されます。

今回はディゾルブを使いましたが、他にもエフェクトは沢山あります。
また、エフェクトの種類にもよりますが、テキストだけでなく、動画などクリップであれば何にでも付けることも可能です。
色々付けたり消したりしてみると楽しいので、ぜひお試しください。

ここまで来たら動画の編集作業は完了です!

あとは書き出して終わりです。
「ファイル」の「書き出し」から「メディア」を選択してください。
「書き出し設定」が表示されます。設定の変更は画面右側で出来ますが、特に指定がなければデフォルトのままで大丈夫です。
「書き出し」ボタンを押すと書き出されます。
動画の長さによって書き出し時間も数秒~数時間と変わってきますので、気長に待ちましょう。

書き出せたらテロップの作成は完了です!おつかれさまでした!


おわりに

いかがでしたでしょうか?
最後となりましたが、今回作った動画はこんな感じになっています。


※この動画はブログ掲載用に設定を調整しています。

動画を作るのは難しいイメージがあるかもしれませんが、作り始めてみると色々手を加えたくなって楽しいものです。
テロップも作ってみると意外と簡単ですので、ぜひ試してみて下さい!

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

簡単!ラフと回転ツールでほぼ完成!《輪切りの野菜・果物の作り方》

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

早速ではございますが、イラストレーター(以下:イラレ)で簡単に作れる輪切り野菜と果物の作り方を紹介したいと思います。
ラインナップとしましては『レンコンニンジンキウイ』となっております!

1.レンコン
2.ニンジン
3.キウイ

輪切りのレンコン

—————————————————————–
★作成環境:IllustratorCC2018
★動作確認:Windows10
※所要時間:下記内容で10~15分ほど(初心者)
—————————————————————–
※説明がしやすいようにある程度のサイズを決めております。

【1】
①幅400px 高さ400pxの円を用意。
[淵:c4c1ab/塗:e2e1d3]

【2】
①[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

②オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【3】
オブジェクトの真ん中に[30px×30pxの円]を配置します。
同時に[70px×120pxの楕円]も上部に配置します。
どちらも[淵:c4c1ab/塗:c4c1ab]

【4】
①楕円を選択しツールの[回転ツール]を選択します。
②画像の真ん中に回転ツールの回転軸が出てきます。
③真ん中の小さな円の中をクリックし回転軸を移動させます。

④回転軸の場所を決めたら、Altを押しながら、回転軸をクリックします。編集画面が出てきます。
⑤角度、プレビューにチェックを入れたのちOKは押さず、コピーをクリックして画面を閉じます。
⑥画面をとじたら、自動的に1つ画像が増えますので、残りのオブジェクト4つを[Ctrl+D(4回)]で増やします。

【5】
①コピーした楕円6個選択しツールの[回転ツール]を選択し
[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

②オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【最後】少々調整を行ってレンコンの輪切りの完成です!

輪切りのニンジン

—————————————————————–
★作成環境:IllustratorCC2018
★動作確認:Windows10
※所要時間:下記内容で10~15分ほど(初心者)
—————————————————————–
※説明がしやすいようにある程度のサイズを決めております。

【1】
幅400px 高さ400pxの円を用意。
[淵:e25b00/塗:ff8b00]

【2】
①[幅350px 高さ350px]の円を内側中央に配置。
②[淵:なし/塗:ff9f19]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【3】
①[幅190px 高さ190px]の円を内側中央に配置。
②[淵:なし/塗:ffb839]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【4】
①[幅156px 高さ156px]の円を内側中央に配置。
②[淵:なし/塗:ff8b00]

【5】
①[幅3px 高さ60px]の楕円を上部に配置。
②[淵:なし/塗:ff8b00]

【6】
①楕円を選択しツールの[回転ツール]を選択します。
②画像の真ん中に回転ツールの回転軸が出てきます。
③円の中心をクリックし回転軸を移動させます。

④回転軸の場所を決めたら、Altを押しながら、回転軸をクリックします。編集画面が出てきます。
⑤角度、プレビューにチェックを入れたのちOKは押さず、コピーをクリックして画面を閉じます。
⑥画面をとじたら、自動的に1つ画像が増えますので、残りのオブジェクト2つを[Ctrl+D(2回)]で増やします。

【最後】ニンジンの輪切りの完成です!

輪切りのキウイ

—————————————————————–
★作成環境:IllustratorCC2018
★動作確認:Windows10
※所要時間:下記内容で10~15分ほど(初心者)
—————————————————————–
※説明がしやすいようにある程度のサイズを決めております。

【1】
①幅400px 高さ400pxの円を用意。
[淵:826f30/塗:9ac44b]

【2】
①[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

②オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【3】
①[幅300px 高さ300px]の円を内側中央に配置。
②[淵:なし/塗:aad156]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【4】
①[幅120px 高さ120px]の円を内側中央に配置。
②[淵:c1d643/塗:ddd69f]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【5】
①[幅10px 高さ66px淵:なし/塗:8faf2e]と
[幅6px 高さ12px 淵:なし/塗:414240]の楕円を作成し
以下のように組み合わせグループ化(Ctrl+G)します。

【6】グループ化したら中央の円にかかるよう上部に配置します。
①楕円を選択しツールの[回転ツール]を選択します。
②画像の真ん中に回転ツールの回転軸が出てきます。
③円の中心をクリックし回転軸を移動させます。

④回転軸の場所を決めたら、Altを押しながら、回転軸をクリックします。編集画面が出てきます。
⑤角度、プレビューにチェックを入れたのちOKは押さず、コピーをクリックして画面を閉じます。
⑥画面をとじたら、自動的に1つ画像が増えますので、残りのオブジェクト34つを[Ctrl+D(34回)]で増やします。

【最後】キウイの輪切りの完成です!


最後に

以上輪切りの果物・野菜の作成の仕方をご紹介させていただきました。
ラフツールも回転ツールも慣れてしまえばとても簡単です。
ここでは説明がしやすいように数値を決めておりましたが、作成したい大きさによって効果の加減などが変わってきますので、いろいろ試してみて下さいね!

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