【CSS アニメーション】@keyframesとanimationでアニメGIFより軽いガラポン抽選画面の作り方

スマートフォン向けのブラウザに「リッチなアニメGIF」を掲載する場合、20枚程度のパラパラアニメでつくっても数百KBの容量になってしまい、多くの利用者に見えない負担をさせています。

今回はそういったアニメーションの画像を載せる場合でも

  • 『キレイで』
  • 『なめらかな』
  • 『追加プラグインがいらない』
  • 『容量が軽い』
  • 『消費電力の少ない』

スタイルシート(CSS)だけで実装できるアニメーションの作り方を紹介します。

アニメーションのサンプル

とりあえずサンプルの『カラポン抽選』を回してみましょう→こちら


目次


ブラウザでアニメーションは品質が良い

ブラウザで表示させるWebページのアニメーションは、アニメGIF画像と比較して色数の制約も少なく、部品単位で画像を組み込む場合は、アニメGIFファイルとは違い、ファイル全体の色数制限(256色以内)もないため高品質です。

また三角形や星型、四角形などシンプルな図形であれば、わざわざ部品画像を組み込む必要もなくスタイルで描画したベクトル図形が使用できます。

ベクトル図形については座標データと色番号/グラデーションの設定がスタイルで設定できるので、容量も少なくデバイス解像度にも最適化されて出力された高品質な表示が可能となります。


高フレームレートが可能

アニメーションフレームを増やしていくとヌルヌルとした滑らかな表現に近づいていきますが、アニメGIF画像でその状態を再現すると数百KBの容量が必要になります。

CSSによるアニメーションでは静止画状態の一枚画像部品やベクトル画像を用意すれば、フレーム数による容量の肥大化もなく(50~100KB程度)スクリプトで動きが付けられます。


追加プラグインがいらない

動きの制御についてはJavaScriptは長けておりますが、CSSでもブラウザでの実装対応が進み遜色ない表現が出来るようになってきました。

なにより、JavaScriptは利用者がブラウザでの使用を「オフ」にできるため、ページ表示が機能しない状況が発生します。

CSSはHTMLと同じく標準実装されており、ブラウザ依存の差異はまだまだありますが、機能がオフなる状況はなく問題なく使用できます。


【ソース】HTML

今回のHTMLのマークアップについては、ヘッダーとフッターをテンプレートに含めています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link rel="stylesheet" href="style.css">
  <title>リッチアニメーション_HTML</title>
</head>
<body>

<div class="wrapper">

<header class="test_header">
	<img class="pic_test_header" src="img/pic_test_header.png">
</header>

<h1 class="top_h1_txt">当たるキャンペーン!</h1>

<h2 class="top_h2_txt">『赤玉』が出たらアタリ!</h2>


<div class="garapon">

<p class="center4">
	<img class="pic_atari_bg" src="img/atari_bg.png"></img>
</p>

<p class="center3">
	<img class="pic_tama_02" src="img/tama_02.png"></img>
</p>

<p class="center2">
	<img class="pic_test02" src="img/gara_02.png"></img>
</p>

<p class="center1">
	<img class="pic_test01" src="img/gara_01.png"></img>
</p>

<a href="css_anime_test.html" class="btn_01" ontouchstart="">賞品を受けとる</a>

</div>

<div class="footer_space"></div>
<footer class="test_footer">
	<img class="pic_test_footer" src="img/pic_test_footer.png">
</footer>

</div>

</body>
</html>


【ソース】CSS

CSSについて、今回のサンプルはスマートフォン向けにつくっています。

※PCでの表示はスマートフォン風になります

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

html {
	font-size:62.5%;/*10pt基準*/
	}

body {
	margin: 0px;/*ページ全体周りの余白がなくなる*/
	font-family: 'Meiryo',"ヒラギノ角ゴ Pro W3","MS Pゴシック","Osaka", sans-serif;
	font-size: 15px; font-size: 1.5rem;
	color:#666666;
	-webkit-tap-highlight-color: rgba(0,0,0,0);/*フォーカスを消す*/
	background: #ffffff;
	/*line-height: 1.2;/*文字行間設定*/
	height: 100%;
	-webkit-touch-callout:none; // リンク長押しのポップアップを無効化
	-webkit-user-select:none; // テキスト長押しの選択ボックスを無効化
	}

.clear { clear:both; }/*レイアウト崩れを防ぐために適切にクリアーしておく。「both」は左右両側の回り込み(float : left ; float : right ;)を解除する*/

.wrapper{
	width: 100%;
	min-height: 100vh;
	margin: 0 auto;
	}

.garapon{
	position: relative;
	width: 375px;
	height: 375px;
	margin: 0 auto 0 auto;
	}

.test_header { /*固定ヘッダー*/
	width: 100%;
	border-bottom: 0.0px solid #efefef;
	position: -webkit-sticky; /* safari対応 */
	position: sticky; top: 0px; /* 上端から0pxのところで固定 */
	overflow: hidden; /*子ボックスを親ボックスに内包。hidden:範囲外は隠す*/
	background: linear-gradient(to top, rgba(255,255,255,1),  #fff 100%);
	margin: 0 auto 0  0;
	filter:alpha(opacity=100);
	filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05));
	-moz-opacity: 1;
	opacity: 1;
	}

.pic_test_header {
	width: 100%;
	}

.pic_test_footer {
	width: 100%;
	}

.test_footer { /*固定フッター*/
	width: 100%;
	border-bottom: 0.0px solid #efefef;
	position: -webkit-sticky; /* safari対応 */
	position: sticky; top: 100vh;
	overflow: hidden; /*子ボックスを親ボックスに内包。hidden:範囲外は隠す*/
	background: linear-gradient(to top, rgba(255,255,255,1),  #fff 100%);
	margin: 0 auto 0  0;
	filter:alpha(opacity=100);
	filter: drop-shadow(0px -5px 5px rgba(0,0,0,0.05));
	-moz-opacity: 1;
	opacity: 1;
	}

.footer_space { /*フッター空間*/
	width:100%;
	position: sticky; top: 100vh;
	height:30.17px;
	}

.top_h1_txt{
	padding: 2.2rem 0 0 0;
	text-align:center;
	width: 90%;
	margin: 0 auto;
	}

.top_h2_txt{
	padding: 0.5rem 0 0.0rem 0;
	text-align:center;
	width: 90%;
	margin: 0 auto;
	}

.center1{
	position: absolute;
	width: 375px;
	height: 375px;
	margin: 0 auto 0 auto;
	}

.center2{
	position: absolute;
	width: 375px;
	height: 375px;
	margin: 0 auto 0 auto;
	}

.center3{
	position: absolute;
	width: 375px;
	height: 375px;
	margin: 0 auto 0 auto;
	}

.center4{
	position: absolute;
	overflow: hidden;
	width: 375px;
	height: 375px;
	margin: 0 auto 0 auto;
	}


.pic_tama_02 {
	position: relative;
	z-index: -19;
	top:162px;
	left:245px;
	width: 24px;
	height: auto;
	opacity: 0;
	animation: translate 1.5s ;
	animation-delay: 1.8s;
	animation-fill-mode: forwards;
	}

@keyframes translate {

	0% {
	opacity: 1;
	transform: translateX(0px) translateY(0px);
	animation-timing-function: ease-out;
	}

	3% {
	opacity: 1;
	transform: translateX(13px) translateY(12px);
	animation-timing-function: ease-in;
	}

	17% {
	opacity: 1;
	transform: translateX(40px) translateY(90px);
	animation-timing-function: ease-out;
	}

	27% {
	opacity: 1;
	transform: translateX(42px) translateY(65px);
	animation-timing-function: ease-in;
	}

	47% {
	opacity: 1;
	transform: translateX(44px) translateY(90px);
	animation-timing-function: ease-out;
	}

	57% {
	opacity: 1;
	transform: translateX(42px) translateY(80px);
	animation-timing-function: ease-in;
	}

	65% {
	opacity: 1;
	transform: translateX(44px) translateY(90px);
	animation-timing-function: ease-out;
	}

	74% {
	opacity: 1;
	transform: translateX(39px) translateY(90px);

	}

	83% {
	opacity: 1;
	transform: translateX(42px) translateY(90px);
	animation-timing-function: ease-out;
	}

	99.9%,to {
	opacity: 1;
	transform: translateX(39px) translateY(90px);
	}


	}

.pic_atari_bg {
	width:200%;
	position: absolute;
	z-index: -21;
	top:-50%;
	left:-50%;
	opacity: 0;
	animation: rotation_bg 20s linear ;
	animation-delay: 0s;
	animation-fill-mode: forwards;
	/*animation-iteration-count: infinite;*/
	}

@keyframes rotation_bg {
	0% {
	opacity: 0;
	transform: scale(1) rotate(0deg);
	}

	15% {
	opacity: 0;
	transform: scale(1) rotate(0deg);
	}

	16% {
	opacity: 1;
	transform: scale(1) rotate(0deg);
	}


	99.9%,to {
	opacity: 1;
	transform: scale(1) rotate(2160deg);
	}

	}

.pic_test01 {
	position: relative;
	z-index: -10;
	left:41.5px;
	width: 252px;
	height: auto;
	animation-delay: 0s;
	animation: rotation 2s ease 0s 1 alternate none running;
	animation-fill-mode: forwards;
	}

@keyframes rotation {
	0% {
	transform: scale(1) rotate(0deg);
	}

	99.9%,to {
	transform: scale(1) rotate(1080deg);
	}

	}

.pic_test02 {
	position: relative;
	z-index: -11;
	left:17.5px;
	width: 300px;
	margin: 0 0 0 24px;
	height: auto;
	}

.btn_01{
	visibility:hidden;
	opacity: 0;
	text-decoration: none;
	position: absolute;
	z-index: 5;
	width: 50%;
	top: 314px;
	left: 25%;
	font-size: 20px; font-size: 2.0rem;
	color: #fff;
	text-align:center;
	padding: 12px 0 0px 0;
	height: 44px;
	border-radius: 4px;
	margin: 0 auto;
	background: #ff9900;
	animation: delay 3.5s;
	animation-delay: 3.5s;
	animation-fill-mode: forwards;
	}

@keyframes delay {

	0% {
	visibility:hidden;
	opacity: 0;
	}

	99.9%,to {
	visibility:visible;
	opacity: 1;
	}

	}

.btn_01:hover{
	background: #ffcc00;
	}

@media screen and (min-width:800px){/*PC用レスポンシブ設定*/

.wrapper{
	width: 375px;
	margin: 0px auto 0px auto;
	border-radius: 0px;
	border:solid 2px #666666; 
	}


実装につかった主なスタイル

▼position: relative;/absolute;▼

	position: relative;

	position: absolute;

『兄弟要素』を、『親要素』を基準に重ねていくために必須です。
「relative」(相対)「absolute」(絶対)座標の活用と、
「relative」(親)「absolute」(子)の設定としても利用できます。

▼z-index▼

	z-index: 数値;

「position:」と併用して使うことで要素の重ね合わせを調整できます。

「-数値」でより奥に。

「数値」でより手前に。

注意点として、同じ親子関係上の要素でしか適応できません。

▼overflow: hidden;▼

	overflow: hidden;

親要素に設定することで、子要素の”はみ出した”画像などの部分を非表示に出来ます。

今回のサンプルでは、最背面で回転する集中線画像のトリミング表示に使用してます。

▼visibility:hidden;/visible;▼

	visibility:visible;

要素を 表示/非表示 出来ます。

「display:none;」も要素を非表示に出来ますが、
こちらは要素自体が「無いモノ」として扱われるためレイアウトが上に詰まります。
対して
「visibility:hidden;」の場合は、見えなくなるだけで設置した空間は維持するのでレイアウトが変わりません。

▼animation:▼

.●●●{
	animation: delay 3.5s;/*設定秒数遅れて表示*/
	animation-delay: 3.5s;/*設定秒数遅れて表示*/
	animation: rotation 2s ease;/*要素の回転時間*/
	animation-fill-mode: forwards;/*最終フレームのコマで停止*/
	}

@keyframes delay {

	0% {
	opacity: 0;/*透明0*/
	}

	99.9%,to {
	opacity: 1;/*透明100*/
	}

	}

</form>

今回のサンプルでメインとなるアニメーション設定をおこなうスタイルです。

「@keyframes」以下で0~100%(※ブラウザ依存回避目的で99.9%に設定してます)の間を自由にフレームを増やすことが出来ます。

100%が全体量です。

似た機能として「transition」がありますが、こちらはブラウザ依存によりアニメーションが自動開始できない為、今回の使用していません。

擬似クラス「:hover」による「カーソルON」状態をトリガーに、アニメーションをスタートさせることは出来ます。

要素の回転は複数手段があります。

transform: rotate(360deg);


※「deg」は角度

animation: rotation 2s;


※「●s」は秒数(小数点設定可能)


【間違えポイント】スタイルが効かない組み合わせ

便利なCSSは、Web検索するだけでも組み込みたい機能のスタイルが見つけられ、都度調べるだけで実装できますが、なかなか問題なく組み込める状況も多くありません。

主にHTMLタグ要素の理解不足(インライン/ブロック等)と、タグの入れ子状態の認識不足からくるマークアップ構造の適切化が影響します。

自身が作業進める場合は、狙った効果がでていないときはマークアップ構造を図で書き出し、親子兄弟構造(position: absolute;/relative;)と並べて問題点を見つけています。

そういったルールを理解していくには、コーディングを数こなしていくことで備わりますが、さすがに全てのスクリプトを覚えていられないので、いつでも引き出せる『コンポーネント別CSSの事例集』をためていくことが有効です。


今回のサンプルについて

今回の「ガラポン抽選アニメ」に使用した画像は「部品単位」であるため、フォルダ内の画像を差し替えることで、ビジュアルを簡単に変更できます。

そういった点からも、アニメGIF画像での運用よりもCSSアニメーションの方がカスタマイズ性に優れております。

カスタマイズしたサンプル

画像を差し替えたカスタマイズサンプルの確認→こちら


さいごに

iOSでは動作が違ったりブラウザ側のバグも存在しており、まだまだWebデザイナー泣かせではありますが、CSSによるWebアニメーションについてはブラウザスピードもあがりデザイナーにとっては表現力が広がり挑戦し甲斐があるのではないでしょうか。

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

お会計まわりの接触対策について。ユーザビリティ目線で考えてみた

ウイルス感染症が流行ると、うつらないようにできる限り気をつけますが、知らずのうちに飛沫や接触によってうつってしまうことがあります。
飛沫はマスクである程度防げても触れるものに関しては少し難しいところがあります。

今回は私たちに身近なスーパーやコンビニなどのお会計まわりについてデザイン的なUI目線から、考えてみたいと思います。
※あくまでも個人的な主観で書いております。

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

お会計のときの接触率を減らすには?

お会計をおこなう際に、あげられる行動を取り上げつつ簡単な注意と実際に実現ができるのではと考えられる改善案(エラー解決までは至っておりません)を含めながら紹介していきたいと思います。

1.現金
■お釣りの受け取り
※お金を渡すシーンも同様なので割愛しています

急いでいたりすると尚更、早く取ろうとして接触してしまう可能性が上がってしまいます。
すぐにできる対策として、トレイにお金を置いてからお客さんにトレイを差し出してあげることを徹底することはいかがでしょうか。
一見当たり前と声が聞こえてきそうですが、このような小さなところを注意することで対策の効率性も上がりますし、目の前にトレイがなければ急いでお金を受け取ろうとすることは物理的にできません。

2.クレジットカード支払い

今ではクレジットカードでの支払いでは少額の場合、サインや暗証番号を必要としないお店もありますが、基本的にはサインと暗証番号を入力するタイプが主流となっているそうですね。
その場合、定員さんから渡される端末に番号を打ち込んだり、書き物を渡され用紙またはタブレット端末にサインすることが必須となります。そうなると不特定多数の方が扱ったものを使用することになるので少し不安になりますよね…
さて、その不安をぬぐうにはどうすればいいでしょうか。

■暗証番号を打つ

↑についてコメントする

スマホの電卓などで打って表示させた文字をピッとセンサーにあてると認識してくれるものを提案してみます。そうすれば、自分のスマホの操作だけで済むので接触の可能性はグッと低くなるのではないでしょうか。ただし手元にスマホがない、充電がない場合、電卓の数字盤の認識のしやすさなど考える点はありますが実現しやすく、ユーザーに受け入れてもらいやすい事柄と考えます。

※レジ周りの環境などのセキュリティの配慮は十分に検証する必要はあります

■クレジット(ポイント)カードを渡す

処理のためにカードを店員さんに渡すことが多いですよね。
カード式のポイントカードにも同じことが言えますが、直接のやり取りが発生しているため、この部分をカットできればよりよくなるのではないでしょうか。

※紙製のポイントカードを除く

本来であれば、店員さん側でカードのスキャンを致しますが、それをお客さん側で自らおこなってもらうことで防げるのではと考えました。
カードのスキャナーをスマホの決済のようにお客さん側に用意できればよいのでコストも大きくはないと思います。

※一部の店舗によっては実現、運用されているところもあります

3.電子決済(スマホ、交通カードで払う)

多くの人が使用しているスマホの電子決済、ポイントの連携や還元など、利便性も高く使用する人も増えてますね。
現金を扱わないため、不特定多数の人が触れているお金を触る必要もなくこの時点で接触対策の1つとして十分に効果があると考えます。ですが今回はその先の扱い方部分に注目していきたいと思います。
お金を触らなくても、知らずのうちに不特定多数の人が触れたところをべったり触れてしまっている可能性もあるかもしれないのです。

■スマホ・交通系カード決済

お店を見ているとわりとスマホが置けてしまう形態の端末が多く見受けられます。置けてしまうということはそれだけ置いた場所に触れてしまう可能性が上がってしまうので、そうさせないようにセンサーの形状を変えてみたらいかがでしょうか。

物理的にスマホを持っていないといけない状態にしてみました。
同時に、センサー部分からある程度離して使用してほしい旨をあらかじめ提示してあげれば、センサー部分に触れるような使用の仕方をする人も減少するかと思います。
(また、センサー部分が小さければ万が一、スマホを直接ぶつけてきたとしても手の触れる範囲はほぼないと思います。)

最後に

会計時にレシートをもらう際、店員さんによってはレシートの有無を聞いてくる人もいますが、もし必要ないのであれば貰わず、できる限り接触をしないようにするのも1つの手かなと思います。

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

スマホ 入力フォーム デザイン HTMLの作り方 サンプル(form/input..etc)設置で気を付けること

スマートフォン向けのWEBページをデザイン/コーディングするうえで、今回は『スマホ 入力フォーム(form/input等)』についてのデザインサンプル説明と、やってしまいがちな間違いなどをまとめました。


目次


フォームのサンプル

▶サンプル確認はこちら


formタグの記述(HTML)

フォーム自体のソースは下記となり、シンプルな項目を複数並べて使われることが多いです。

※今回は「input」タグを中心に使った紹介をしてます

<form action="#" method="post">
	<p>文言<br>
	<input type="text" name="フォームの名前"></p>
	<p>文言<br>
	<input type="text" name="フォームの名前"></p>
	<input type="submit" value="送信する" >
</form>

【formタグ内に設置する部品】

▼「テキスト入力」スペース▼

名前:

<p>名前:<input type="text" name="NAME"></p>

▼「セレクトボックス」スペース▼

<p>商品名<br>
<select name="item">
<option value="n01">1個</option>
<option value="n02">2個</option>
<option value="n03">3個</option>
</select></p>

▼「複数行入力」スペース▼


<textarea name="yobo" rows="4" cols="40">ご意見を記入ください</textarea>

▼「ラジオボタン」▼

男性 女性

<input type="radio" name="gender" value="male">男性
<input type="radio" name="gender" value="female">女性

▼「チェックボタン」▼

Webページ SNS TVCM 雑誌

<input type="checkbox" name="course" value="webpage">Webページ
<input type="checkbox" name="course" value="sns">SNS
<input type="checkbox" name="course" value="TVCM">TVCM
<input type="checkbox" name="course" value="BOOK">雑誌

▼「送信する」ボタン▼

<input type="submit" value="送信する">

▼「取り消しする」ボタン▼

<input type="reset" value="取消する">

これらのパーツを目的応じて使い分けることで、利用者は様々な「入力」が出来ます。


入力ページの記述(HTML)

OS付属のテキストエディター(『メモ帳』)等でファイルを開きページの記述をしていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link rel="stylesheet" href="css/style.css">
  <title>情報入力ページ_HTML</title>
</head>
<body>

<div class="wrapper">

<h1 class="top_h1_txt">マイページ編集</h1>

<h2 class="top_h2_txt" style="text-align:center;">利用者情報入力</h2>

<p class="center"><img class="pic_test" src="img/pic_test_01.png"></img></p>

<form  class="center" action="form_test.php" method="post">
	<p>姓<br>
	<input class="input_form" type="text" name="middle_name"></p>
	<p>名<br>
	<input class="input_form" type="text" name="first_name"></p>	
	<input class="input_form" type="submit" value="送信する" >
</form>

</div>

</body>
</html>


入力確認ページの記述(PHP)

PHP拡張子のファイルですが、PHP命令文は一部のみで基本構成はHTMLです。

「.php」拡張子にすることで、PHP命令文が含まれるHTMLファイルであることを宣言しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="css/style.css">
<title>情報入力ページ_PHP</title>
</head>
<body>

<table  class="center" border="1">
<tr>
<td>姓</td>
<td><?php echo htmlspecialchars($_POST["middle_name"], ENT_QUOTES) ?></td>
</tr>
<tr>
<td>名</td>
<td><?php echo htmlspecialchars($_POST["first_name"], ENT_QUOTES) ?></td>
</tr>
</table>

</body>
</html>

「HTMLエンティティ化」することでセキュリティーを強くすることが出来ます。

?php echo htmlspecialchars


記述をしないとセキュリティーに問題がある記述を入力された場合にURLが有効となってしまい危険ですので、施しておきましょう。


スタイルシートの記述(CSS)

スタイルシートにはスマホ表示向けに最適化させたベース設定をしてます。
ブラウザの『デフォルトCSS』をリセットしている記述もありますが、ファーストビュー内の表示を厳密に弄らない場合は必要ありません。

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

html {
	font-size:62.5%;/*10pt基準*/
	}

body {
	margin: 0px;/*ページ全体周りの余白がなくなる*/
	font-family: 'Meiryo',"ヒラギノ角ゴ Pro W3","MS Pゴシック","Osaka", sans-serif;
	font-size: 15px; font-size: 1.5rem;
	color:#666666;
	-webkit-tap-highlight-color: rgba(0,0,0,0);/*フォーカスを消す*/
	background: #ffffff;
	/*line-height: 1.2;/*文字行間設定*/
	height: 100%;
	}

.clear { clear:both; }/*レイアウト崩れを防ぐために適切にクリアーしておく。「both」は左右両側の回り込み(float : left ; float : right ;)を解除する*/

.wrapper{
    min-height: 100vh;
    position: relative;
}

.top_h1_txt{
	padding: 2.2rem 0 0 0;
	text-align:center;
	width: 90%;
	margin: 0 auto;
	}

.top_h2_txt{
	padding: 0.5rem 0 0.0rem 0;
	text-align:center;
	width: 90%;
	margin: 0 auto;
	}

.center{
	text-align:center;
	width: 90%;
	margin: 0 auto;
	}

.input_form{
	font-size: 20px; font-size: 2.0rem;
	}


.pic_test{
	width: 100%;
	margin: 0 auto;
	}


【間違えポイント】
『submit』送信ボタンのタグ設置場所

情報入力後に押す『送信ボタン』のタグの記述もうっかりポイントです。

<input type="submit" value="送信する" >


formタグの中に入れてあげないと動作せず情報を送れません。

<form action="test.php" method="post">
	<p>姓<br>
	<input type="text" name="middle_name"></p>
	<p>名<br>
	<input type="text" name="first_name"></p>
	<input type="submit" value="送信する" >
</form>


【間違えポイント】
『日本語の文字化け』について

保存する際は必ず文字コードを『UTF-8』で保存をしないとブラウザ表示時に文字化けします

理解していてもソースのファイルを「新規」に作成するタイミングで「文字コードの設定」を忘れてしまい、表示検証時に文字化けに遭遇します。

適切なテキストエディターを使用して作業すれば防げますが、ついついOS標準の『メモ帳』など使用してしまう方はこの点にご注意ください。


【間違えポイント】
何故か効かないスタイルがある場合

記述や指定に間違いがないはずなのにスタイルが効かない場合は、記述したソースに不備があります。

まず疑うのは
「/*」などコメントアウトが適切につかわれてなく重要なソースまでコメントアウトされている
または、
「全角スペース」が入ってしまっている
状況があります。

テキストエディタには全角スペースを表示機能もあるものがありますので(『サクラエディタ』など)、上手に使ってチェックしていきましょう。


さいごに

今回紹介したフォームページ自体は静的ページですが、実際の運用に使われる場合は『静的な情報』と『動的な要素』を組み込み構築後表示されたページになります。

引き続きそういったデザイナーに求められる「組み込み」の記事を書いてみます。

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

【①6/19②6/25】大好評 デジタルギフトソリューション『dgift(ディーギフト)』WEBセミナー開催

お申込はこちら→https://www.dgift.jp/short_urls/Ue

このたび、前回大好評だった「デジタルギフトを活用した効果的なプロモーション方法について」の無料オンラインセミナーの追加開催が決定いたしました!

昨今の状況により、
「オンライン集客にデジタルギフトを使えないか」
「プレゼントキャンペーン方法を探している」など
オンラインでの集客・販促方法に関するご相談を多くいただいております。

自社やクライアント様のキャンペーンを企画される際に、不安や課題をもたれている方も多いと思います。

そこで、急増するご相談にお応えし、実績を紹介しながら、デジタルギフトを活用したキャンペーン方法をお教えいたします!

【セミナー概要】

開催日時
 ①2020年6月19日 14:00~15:00配信
 ②2020年6月25日 14:00~15:00配信

参加方法
 お申込みフォームよりご連絡ください。
 完了後に専用のURLをお送りいたします。

お申込み受付期間
 ①2020年6月12日11時~2020年6月19日
 11時まで
 ②2020年6月12日11時~2020年6月25日
 11時まで

参加費用
 無料

定員
 ①②共に30名まで

主催
 株式会社デジマース

詳細
 WEBキャンペーンの実績をもとに、効果的な手法、新たな手法をご紹介いたします。

※競合他社様であると判断した場合、ご参加をお断りさせていただいております。
 その際には、こちらからメールにてご連絡いたします。あらかじめご了承ください。
※新型コロナウィルスの感染拡大に伴いまして、当社ではリモートワークを実施しております。
 そのため、一時的にお電話でのお問い合わせを受け付けておりません。

お申込はこちら→https://www.dgift.jp/short_urls/Ue

【6/10】大好評 デジタルギフトソリューション『dgiftSNS(ディーギフトエスエヌエス)』WEBセミナー開催

お申込はこちら→https://www.dgift.jp/short_urls/TR

昨今の状況により、SNS運用を本格的に始めた企業様も多いのではないでしょうか。

「SNSを活用してユーザーとの接点を増やしたい」「フォロワー数を増やしたい」など、弊社へのSNSに関するお問合せも急増しております。

そこで、SNS上の集客課題を解決できる、SNSキャンペーンツールの『dgiftSNS』をご紹介いたします。

『dgiftSNS』はTwitterのフォロー&リツイートキャンペーンやLINEの友だち登録キャンペーンが1つのURLから簡単に行えるツールです。

今回は、SNSキャンペーンの実績やおすすめの活用方法を中心にご紹介させていただきますので、キャンペーン企画やSNSプロモーションをご担当されている方必見の内容です!

【セミナー概要】

開催日時
 2020年6月10日 14:00~15:00配信

参加方法
 お申込みフォームよりご連絡ください。
 完了後に専用のURLをお送りいたします。

お申込み受付期間
 2020年6月4日11時 ~ 2020年6月10日
 11時まで

参加費用
 無料

定員
 30名

主催
 株式会社デジマース

詳細
 WEBキャンペーンの実績をもとに、効果的な手法、新たな手法をご紹介いたします。

※競合他社様であると判断した場合、ご参加をお断りさせていただいております。
 その際には、こちらからメールにてご連絡いたします。あらかじめご了承ください。
※新型コロナウィルスの感染拡大に伴いまして、当社ではリモートワークを実施しております。
 そのため、一時的にお電話でのお問い合わせを受け付けておりません。

お申込はこちら→https://www.dgift.jp/short_urls/TR

【5/22】大好評 デジタルギフトソリューション『dgift(ディーギフト)』WEBセミナー開催

お申込はこちら→https://www.dgift.jp/seminar/20200522

昨今の状況により、急増するご相談にお応えし、キャンペーンを成功に導く『デジタルギフト』の活用方法をご紹介いたします。

自社やクライアント様のキャンペーンを企画される際に、

「他社との差別化を図ることができないか?」

「過去のキャンペーンより手間を削減することはできないか?」

「新たな層を獲得するために何をすればよいのか?」

といった不安や課題をもたれている方も多いと思います。

そこで、キャンペーン企画やプロモーションをご担当されている方向けに、実績を基にキャンペーン方法をご紹介いたします。

今回は、『おうち時間』により注目を集めているSNSWEBメディアなどでの実績を中心にご紹介させていただきますので、ぜひこの機にご視聴ください。

【セミナー概要】

開催日時

 2020/05/22 13:30~配信

参加方法

 お申込みフォームよりご連絡ください。

 完了後に専用のURLをお送りいたします。

お申込み受付期間

 2020年5月19日14:00 ~ 2020年5月22日
 11:00まで

参加費用

 無料

定員

 30名

主催

 株式会社デジマース

詳細

WEBキャンペーンの実績をもとに、効果的な手法、新たな手法をご紹介いたします。

※競合他社様であると判断した場合、ご参加をお断りさせていただいております。
 その際には、こちらからメールにてご連絡いたします。あらかじめご了承ください。
※新型コロナウィルスの感染拡大に伴いまして、当社ではリモートワークを実施しております。
 そのため、一時的にお電話でのお問い合わせを受け付けておりません。

お申込はこちら→https://www.dgift.jp/seminar/20200522

電車のかけこみ乗車を減らすには?ユーザビリティ目線で考えてみた

電車に乗っているときや待っているときに、かけこみ乗車をする人を見かけたことはありませんか?
電車の遅れに繋がる原因の1つとしてもあげられる「かけこみ乗車」ですが、見ていてヒヤヒヤしますしとても危ないですよね。万が一ケガをしてしまったら大変です。
今回は「電車」に視点を絞ってかけこみ乗車をさせないようにするにはどうしたら良いかデザイン的なUI目線から、考えてみたいと思います。
※あくまでも個人的な主観で書いております。

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

最初に

かけこみ乗車をしてしまうことで起こる迷惑な事柄ですが例えば以下のことがあげられます。

・電車が遅れる(遅延の発生)
・走っているときに人とぶつかる可能性がある
・荷物づまり
・乗車中の人にぶつかる
・通路の逆走(上り下りの階段、進行方向)

などなど

何よりも、かけこみ乗車をしなくても良いように余裕をもって行動できれば解決する話ではありますが、頭では気をつけようと思っても中々難しいものです。

かけこみ乗車を減らす案6

パッとあげられる6個を簡単な注意と実際に実現ができるのではと考えられる改善案(エラー解決までは至っておりません)を含めながら紹介していきたいと思います。

1.気づきのポイントを増やす

駅構内のポスターを見ると、かけこみ乗車の危険性を表すものが貼ってあったり、電車の扉にも注意喚起のシールが貼ってあったりなどします。これらをもっと目につくようにするだけでも、かけこみ乗車が危ないということに対して意識しやすい環境になるのではないでしょうか。

2.ホームドアのタイミング

ホームに設置されているホームドア(電車が来たら開閉する可動式のドア)は割とどこでも見かけるようになりました。
調べてみると1日に10万人以上が利用する駅にホームドアを設置する~という話があるようですね。このホームドアも様々な形や動きがありますね。それではこのホームドアのタイミングを変えてみてはいかがでしょうか。

電車の扉がこれから閉まり発車をお知らせするベルが鳴った時点でホームドアの方を先に閉めてしまうことを考えてみました。
先に閉まってしまったホームドアをわざわざ飛び越えようとする人は危険ですし、ほぼいないと考えます。ホームドアの高さがある程度あると効果がありそうですね。実際にホームドアが設置されているところではタイミングの調整で実装できるかもしれませんし、馴染みも多いので受け入れやすいかもしれません。

※ホームドアの閉まるタイミングによっては予期せぬ大事故も起こり得るため十分な検証が必要

3.ボーナスポイントがもらえる!

だめなものと分かってはいても、車が来なければ赤信号で渡ってしまう「このくらい大丈夫だよね」という心理と同じくらい危なく、やってしまうのが何度も書いております、かけこみ乗車です。
それでは、誰でもかけこみ乗車をしたくなくなる環境を予め提示していたらいかがでしょうか。

良し悪しのユーザビリティをより簡潔に考えてみました。
かけこみ乗車をしないことは普通に考えれば当たり前のことですが、その当たり前をより行動にうつしてもらえるように、かけこみ乗車をしない人にボーナスポイントをプレゼントする仕組みです。持っている電子定期や、電子カードなどに紐づくことで判別できればと考えました。

もらったポイントは電子マネーとして使用できます。一度にもらえるポイントは例えば少しずつであっても、毎日普通に乗車するだけでポイントがもらえるのはちょっとしたボーナスのような感覚です!
もしもかけこんでしまったら、たまったポイントがある場合のみ全体からマイナス3%されるくらいはあってもいいかもしれませんね。
満員電車時に次々無理やり乗車しようとする場面を通勤通学ラッシュ時に見かけますがそれらの緩和にもつながるのでないでしょうか。

4.速度センサー

ホームは走らないように言われていますが、あくまでも危ないから注意してくださいと私たちの意識や行動にゆだねられている部分があります。例えば走りながら人にぶつかってしまったり、鞄で体当たりをしてしまったり、両者が走っていたら思わぬケガに繋がってしまうかもしれません。毎回走っている人を見つけて注意できる環境があるかと言われれば利用者も多いので大変です。
それならば、車道のように速度を制限してみてはいかがでしょうか?

ある一定以上の速さで通ると、シンプルに注意されます。
たいていの人は人前で注意されると、あまり気分のいいものではないですよね。ですが自分の行動に気付ける良い機会です。
気づきのユーザビリティとしてこのようなものがあってもよいなと考えます。

5.アトラクションのようなゲート

遊園地などの行楽施設でアトラクションに乗車する際、当たり前ですが案内された通りに乗車し、定員以上の人数を乗せたり、かけこんで乗車している人はいませんよね。
それはみんながしてはならないこと、つまり危険であることを意識しているからではないでしょうか。例えば4人乗り観覧車のゴンドラに8人乗っていたら恐ろしいですものね。
このようにアトラクションのような環境を作ってあげてはいかがでしょう。

車両に乗っている人数や降りる人を瞬時に計測して、ゲートが案内をしてくれつつ乗車人数がいっぱいになったら通れなくなる仕組みです。集団乗車などの複数人で乗る際は乗車方法を考える必要がありますが、整列乗車もうながせますし、安全に乗り降りできるという面ではとても効果的ではないかと思います。
また、国外からの観光客など、鉄道ルールが異なる場合でも安心して乗降者できるのではないでしょうか。駅や地域によって特有の柄が描かれたりとエンターテインメント性も兼ねていたら待っている間も楽しいかもしれませんね。
ただし、利用者数の多い駅では、時間が掛かることも予想されるため違うバージョンも考えてみました。

とても単純ですが整列を必須に、順番を抜かせない透明な仕切りで区切られた整列スペースを作ってみました。仕切りの高さも現在あるホームドアの2倍くらいを想定しています。もし、駆け込もうとしてもすでに前の人がいたら物理的にできませんし、少しの道のりですが整列スペースを歩き進まねば乗車できないので、かけこみ乗車が間に合わなく、駆け込み率も減少しやすくなるのでは?と考えました。

6.改札を通れなくする

改札を通ってしまえば電車の近くまで行けることを私たちは知っているので発車ベルが鳴っても走れば「まだ間に合う」と希望を抱いて急いでしまうのではないでしょうか。
それでは、物理的に近づけなければいかがでしょうか。

電車がきている間は「改札が通れなくなる」を考えてみました。
改札の段階で人の流れを止めてしまえば、物理的にホームを駆け抜けてかけこむのはできないですよね。
ただし、改札が電車から遠い位置にある場合や電車の本数が多く様々な路線が通り、人が何十万と行き交う都会では改札が通れなくなるスパンも短いためストレスに繋がり、現実的ではないかもしれません。
また、駅構内に店舗があると店舗を見てからホームに向かうことも考えられますので、改札を通ったら電車のホームにたどり着く規模の駅に向いていると思います。

最後に

今回は電車に視点を絞って書いていきましたが、例えばバスやエレベーターなどでもかけこむ姿を見かけたりします。
乗り込んだ本人は間に合っているので嬉しいかもしれないですが、周りの人は驚き以外の何ものでもありません。
ユーザビリティの改善ももちろん効果はありますが、個人も注意していければより良いですね。

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

歩行者の信号無視を減らすには?ユーザビリティ目線で考えてみた

突然ですが、赤なのに横断歩道を当たり前のように渡る人を見かけませんか?万が一ケガをしてしまったら、大変なことになってしまいます。
今回は「歩行者」に視点を絞って信号無視をさせないようにするにはどうしたら良いかデザイン的なUI目線から、考えてみたいと思います。
※あくまでも個人的な主観で書いております。

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

最初に

歩行者が信号無視をしてしまう主な要因として、例えば以下のことがあげられます。

・凄く急いでいる
・車が来ていないから
・横断歩道の距離が短い
・ながら歩きで気づかない
・皆もわたっているから

などなど。

個人がしっかり信号を守ることで解決する話ではありますが、「車が来ていない=大丈夫」と認識してしまうその思考を変えるのは中々難しいものです。今回は危険なシーンとその改善案を提案してみる形で書いていきたいと思います。

信号無視に繋がるシーン5

パッとあげられる5個を簡単な注意と実際に実現ができるのではと考えられる改善案(エラー解決までは至っておりません)を含めながら紹介していきたいと思います。

※信号機が実際に設置されているところを前提にしています

1.音

「音」が流れる横断歩道を渡ったことはありませんか?メロディーであったり、単調な音であったりなど、場所によってはそのような音の流れる信号機があります。(検索するとある程度の場所を知れます)これらは大きな通りや人通りの多いとされる場所にある印象で、メリットとしては渡る時に音が流れることで、青信号のある程度の時間であったり、目の不自由な方も音で判断出来たりなどが考えられます。住宅街にはほぼ見当たらないので信号機が煩くて困るという話も聞かないです。

信号無視をさせない視点からすると、一部だけではなく全体的に青信号の時に何かしらの音を流すことを提案したいと思います。
信号機に音がついていることで気づきのポイントにもなりますし、このような信号機を無音の信号機のある所へ拡張していければと考えます。できれば車の通りが多い所や、保育園や幼稚園などの小さな子が頻繁に通るであろう場所にまずは欲しい所です。

一方、下の図のような交差点では青信号の音が縦横の横断歩道どちらのものか、わかりづらくなる懸念もあるため混乱を招かないように考える必要がありますね。

また、同じ交差点でもスクランブル交差点のように同じタイミングで変わる信号は問題ない認識です。

2.赤か青か

横断歩道を渡る時、信号の赤と青のどちらが点灯されているかで当たり前のことですが、判断をしていますよね。もしかしたら気候や人工の明かり(ネオンなど)で見え辛いと感じることも稀にあるかもしれません。そこでこの部分のユーザビリティをより簡潔にしてみたらどうなるか考えてみました。


両方の表示を用意するのではなく、現状の状態のみを表示することを提案してみます。1つしか表示されないことで「今はこれである」と認識や判断がしやすくなるのではと考えました。縦二段組の信号機を見慣れている私たちにとって違和感を感じるかもしれませんが、こういうのもありかもしれません。

3.センサー

誰か一人でも「いいよね」と赤信号で渡ってしまうと、「あの人も渡っているし」と次々と便乗して渡ってしまう光景を目にします。時に赤で渡っていった人以外、しっかり待っている場合もありますが、その逆のパターンの場合も少なくありません。
集団心理が働いてしまうと危機管理能力の低下と共に責任感も欠如してしまうため注意したいところです。これらをふまえ1人1人が危ないことを察知しやすいユーザビリティとは何か考えてみました。

信号の赤、青を広範囲で認識できたらと考えてみました。足元の色も同時に変わり、赤で渡ろうとするとセンサーが働いて注意されます。そのため信号無視をした場合、とても目立ってしまう仕組みです。気にしない人は気にしないかもしれませんが、ほとんどの人は「自分はああなりたくないから」と、踏みとどまるのではないでしょうか。

4.安全バー

信号が点滅してから駆け抜けていく人や、信号が赤に変わってしまってから駆け抜けていく人をよく見かけます。車が待っているのに危ない、と思うこともしばしばあります。赤、青で止まる、進むはルールで決まっていても動くのは最終的に個人の判断になりますから物理的に渡れない環境を作ってあげてはいかがでしょう。


人は目の前に何かがくると、一瞬意識はそちらに向きますよね。
気づきのポイントの1つとして、信号が赤になると安全バーが降りてくる仕組みを考えてみました。電車の踏切なんかがイメージに近いです。1本の仕切りですが、わざわざそれをくぐりぬけようとする人はほぼいないと考えます。目に見える形で禁止事項であることを示してあげることで効果が見られるのではないかと思います。また、現実的にも取り入れやすい事柄かと思いますので、大通りにまずは欲しくなりますね。ながら歩き対策にも向いているかもしれません。

5.車と人の鉢合わせ

人しか通ることのできないところに信号機は見かけないですよね。さらに車との接触事故も起こり得ません。車と車、車と人が交差するところ、つまりは車が通る場所に信号機はあります。(ないところもありますが)人も車も少しでも油断をすると事故へ繋がってしまいます。それならば、いっそのこと人と車を鉢合わせないようにしてみてはいかがでしょうか?


歩道橋の数を増やしてみるのはいかがでしょうか。
最近ではバリアフリーに特化したものもありますし、場合によっては信号を待つより早く行動できるかもしれません。階段がやや大変に感じることもありますが、信号関係なく横断できますので車と鉢合わせることはないですね。

6.待ち時間の長い信号機

場所によって長い時間待つ信号機も見受けられます。
少しばかり長いだけで、ただ待てばいいだけのことですが、それでも車が通らなければ渡ってしまったりする光景は目にします。主に大通りに多い気がするので一歩間違えると危険ですね。現代ではスマホのちょっとした読み込み時間を待つのもストレスとされるわけですから…。短いようで長い待ち時間が苦にならないユーザビリティを考えてみたいと思います。


待ち時間にちょこっと楽しめるシリーズを考えてみました。
信号機の近くに「1分以内で楽しめる」プリントツールを設置してみてはいかがでしょうか。ボタンを押すとランダムで何かしら1分以内で楽しめる内容がレシートのように出てきます。(無料)
プリントされるネタは一般募集すればいつも新鮮な内容を楽しむことが出来ますし、観光地などではその土地ならではの内容でも面白いかもしれません。維持費などを考慮すると、観光地の人が多いところに絞ってみると効果的かもしれませんね。
プリントツールが使用できるのはあくまでも赤信号の時の待ち時間のみのお楽しみ。ただし気軽に楽しめる分道端にポイっとされないようにしなければならないところは考えねばなりませんね。

最後に

考えれば色々出てきますが、見ている人は見ているので一番は自分の意思を強く持って行動することですね。

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

【UX】スマホ×ゲーム機×PC『クロスプラットフォーム(マルチプラットフォーム)』が生み出すユーザー体験


目次


クロスプラットフォームとは

「クロスプラットフォーム(マルチプラットフォーム)」とは、OSやデバイスの違いなどの「壁」を越えた、データの受け渡しが出来る「統一仕様」で設計されたアプリケーションと説明すればわかりやすいでしょうか。
※同一アプリケーションを相互通信なく複数デバイスで製品展開する意味での「マルチプラットフォーム展開」とは異なります

身近なゲームカテゴリでは、商品コンセプトと利用シーンが違う「スマホ」「タブレット」「ゲーム機」「PC」それぞれのユーザーが、同一アプリケーションをそれぞれ所持して一堂に会する「ゲームソフト」でのマルチプレイを実現するものもあり、デバイスに限定しない強い戦略思想を感じます。
※入力デバイスの差異等により、スマートフォンデバイス以外のゲーム専用機間でのクロスプラットフォームが一般的
クロスプラットフォーム

この戦略により多種多様で複雑分散したターゲット層に対して「クロスプラットフォーム」は強いアプローチができました。


クロスプラットフォームに必要な条件

プラットホームを限定せず、デバイスを利用シーンに合わせて変更する場合は連携アカウントが必要になります。

また、
オンラインマルチプレイにはサブスクリプション契約による「サーバー」の仕組みを導入しているアプリケーションもあり、複数利用者が好きな時間に接続することが可能になることで利便性を高めることが可能となっています。


クロスプラットフォームのメリット

「サンドボックス型ゲーム」マルチプレイの例では「連携アカウント」により、

  • スマホ
  • 携帯型兼据え置きゲーム機
  • 据え置き型ゲーム機A
  • 据え置き型ゲーム機B
  • PC

それぞれのアプリケーションを連携させることができるため、どのデバイスでも利用シーンにあわせて続きをプレイする事ができ、またそれぞれのプラットフォームのユーザーと一緒に遊ぶことが出来ます。
※オンラインマルチプレイには別途サブスクリプション契約によるサーバー契約が一つ必要※参加する招待ユーザーは無料(※2020.3.23現在)

つまりは、
個人で遊ぶ場合は、部屋では画面の大きいゲーム機で遊び、外出時はスマートフォン

複数人と遊ぶ場合は本人は部屋のゲーム機で遊び、外出先のメンバーはスマホで遊ぶ

以上のプレイスタイルが選べるのがクロスプラットフォームのメリットです。


多様化した利用シーンとユーザー体験

多様化した現在では、

「PCを持たない」
「テレビがない」
「ゲーム機がない」
「スマートフォンだけ所持」

などの利用シーンが増え、その中でも驚異的な所持率のスマートフォンを念頭に戦略を考える必要があります。

ゲーム機専用ソフトのプロモーション目的でスマホ版の「簡易版」を展開する企業もあれば、
スマートフォンアプリでブランド認知を進めた後、ゲーム専用機で「eスポーツ」に参画する企業も出てきました。

所持率の高いスマートフォンですが、その利用シーンも多種多様になり、市場にマルチ展開することで同一IPへの接触頻度が高められ得られる相乗効果も過去のマルチメディア展開の比ではありません。

デバイスの連携によって得られるユーザー体験は、古くからゲームに触れてきた方にはとても不思議なものです。


さいごに

リスクを背負うハード開発から手を引く企業が増え、目まぐるしいハードウエアの競争が落ち着き、裾を広げるクロスプラットフォームが必然かはわかりませんが、多様化を認める世の中においてはとても便利なアプローチではないでしょうか。

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

風邪がうつらないようにするにはどうすれば?ユーザビリティ目線で考えてみた

年間を通して一般的な風邪や流行り風邪(インフルエンザ等)が絶えませんよね。
こればかりは個人が気をつけるしかありません。マスクやアルコール除菌が有効なのは承知の上、それでいてもそこをすり抜けて風邪はやってきます。
今回はちょっとデザイン的なUI目線から、自分たちができる範囲での注意や見直しを兼ねて考えていきたいと思います。

※特に風邪が流行った時に注意できたら…という感覚でお読みいただけると幸いです。

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

最初に

風邪がうつる主な3つの要因として、例えば以下のことがあげられます。

・咳などの飛沫
・菌が付着しているところを触った手で口元などを触る
・空気感染

今回はこの中でも、環境や自分の意志、行動で注意のしやすい「触れる」部分に特化したいと思います。

不特定多数が触れる場所8

パッとあげられる8個を簡単な注意と実際に実現ができるのではと考えられる改善案(エラー解決までは至っておりません)を含めながら紹介していきたいと思います。

※すべてアルコール除菌を設置すれば…という考えも出てくると思いますが表題通りあくまでユーザビリティ目線で考えております。

1.つり革

つり革は特に朝の通勤、通学ラッシュ時には休みなく使われますね。
一見綺麗に見えるつり革ですが、人がずっとつかんでいるものですから手垢などがついてしまうのは仕方のないことです。
そこで、少しでも綺麗な状態で使う方法はないか少し視点を変えて考えてみたいと思います。


1つのつり革の使用回数を減らす方向性で考えてみました。
配置した時の幅の取り方など考えなければならないことはありますが、こうすれば基本的には綺麗な状態のつり革を都度都度、使うことができるようになるのではないでしょうか。
また、マイ箸ならぬマイつり革なんてあっても面白いかもしれません。好きな柄やサイズが選べたりしたら実際使うのも楽しくなりそうです。

2.ドア

ドアを開けるときに実はガッツリとドアノブを触っていることを意識したことはありませんか?重いドアになればなおさらです。
沢山の人がドアを開閉するということはそれだけそのドアノブを使っているわけなので、特に風邪が流行っているときなんかはどうしても気になってしまいますよね。ドアノブに触れなくてもドアとして機能するものといえばアレですね!

自動ドアです。ドアノブが無いのでドア自体に触ることもなく(一部ボタン式ドアを除く)沢山の人が通ってもドアに手垢がつくことは、ほとんどないと思います。手がふさがっている時も快適に使えて、とても便利ですね。コンビニ、スーパーなど様々な人が行き交うところで設置されれば良さそうです。
デパートなどでは自動ドアと自分で開ける式のドアが並列していることもあるので意識的に自動ドアを使用するなどするのもありかと思います。
ただし、会社などの私有スペース周りに自動ドアを実装する際はセキュリティーの対策をしっかり考える必要がありそうです。

3.お金

お金は回りに回っており、かなりの不特定多数の方が触っています。
他のどんなものよりも色んな人の垢がついている代物です。
お仕事で扱うことを除けば一般的には商品を購入するときにお金に触れる機会がほとんどです。それもほぼ毎日といっても過言ではございません。ここで、お金に触れる機会を減らしてみてはいかがでしょう。


こんな時こそ電子マネーなどを使用してみてはいかがでしょう。
これならすぐに誰でも簡単にできますね。クレジットカード、スマホの支払いアプリ、交通機関のカードなどなど実際に現金を触らなくても支払えるものを使用することで、物理的にお金に触れる機会が減るのではと考えました。あわよくば還元も受けることが出来るので、そのような環境が整っている人はできる限り使用するようにすると良いかもしれません。

4.エレベーター

エレベーターは乗ったら自然と行先ボタンや開閉ボタンなど触りますよね。会社のビルならまだしも、大きなデパートなどになればなおさらエレベーターのボタンは不特定多数の人が使用することになります。それではいっそのことボタンに触れなくても良いエレベーターがあったらいかがでしょうか。

エレベーターのボタンを触らずとも一定秒数、手を使近づけるだけでセンサーが働いてボタンがおせたら便利と考えます。満員時の誤認識なども考えられるのでエラーの解決ができれば実現性はあるかもしれません。ちなみに、自動販売機などにも同様な機能があれば便利そうです。

5.エスカレーター

エスカレーターの手すりは常にグルグルと循環しています。
利用者は基本的には手すりにつかまるのが原則ですので、こちらも不特定多数の方が多く使用されますね。(割とガッツリ触る人も多い印象を受けます)お掃除の方が定期的に拭いてくれてるのをたまに見かけますが、長い間拭き続けるのは難しいのでどうしても、循環した手すりを使う時間が長くなってしまいます。


除菌ができるものを取り付けて、常に除菌がされている環境を作ることができたら良いなと考えました。常に動いているエスカレーターはコストも掛かるでしょうが、スーパーなどで見かけることの多い「近づくと反応して可動する」形であれば実現可能かもしれません。

6.スタンプ

駅をはじめ多くの場所で設置されているスタンプ。スタンプラリーであったり、名所の記念スタンプなど全国各地にありますよね。
そして、さほど雑な扱いをしない限りボロボロにもならず、汚れたとしてもちょっとインクが付くぐらいのことが多いと思いますので新品に取り換えられることはあまりないのかなと考えます。
そんな中、不特定多数の方が楽しまれるスタンプの持ち手。
風邪が流行っているときは少し触れるのを避けられればと思い、触れないでスタンプがおせるUIを考えてみました。

これならば触れることなく押印できますね!
しかしながらスタンプラリーはスタンプを自分で押すのが醍醐味なのでもう少し考える必要がありそうです…

7.飲食店のお箸とか

お店によって常にお箸などを自分で持っていくパターンがありますよね。主にバイキング形式や大きなフードコートなどなど。
必要なものを必要な分だけ持っていけるのはとてもユーザビリティとして良いですが使用しないものにも、実は触れてしまっているのです。
普段全く気になるところではないと思いますが、何よりも口に含むものですから、注意することにこしたことはございません。

必要なものを必要な分だけ持っていけるのはとてもユーザビリティとして良いので残す方向性で考えてみました。
単純に口に含む部分が外部に触れなければ良いので、ひと手間加えて紙ペーパーで包むのはいかがでしょうか。
一番いいのはお店側が必要数渡してくれることが手っ取り早いのですが、すべてがそうとはいきませんよね。上記のようなものであればすぐに取り組むのも可能そうです。

8.買い物かご

買い物にかかせない買い物かご、このかごも順繰り循環しています。
抗菌の素材で作られているのがほとんどですが、食品の購入をメインに常日頃使用されるもののため、風邪が流行っているときはちょっと気になるかもしれません。手袋などをして意識的に対策も可能ですがお店側でも気にかけてくれると安心感と信頼へも繋がるのではないでしょうか。

使い終わったかごは店頭に戻される前に大型店舗であれば、かごを入れるだけで除菌できる装置、小さいお店であったら手動でも構いませんのでかごを清潔にする機関を設けられたらと考えます。
除菌後はそれが分かる旨を表記してあげたらお客さんも安心して買い物ができる環境が整うのではないでしょうか。

考えれば考えるほど、身近なもので改善できるものや意識することで対処できるものがたくさんあります。
またよくやりがちな床(地べた)に荷物を置かないことも家に見えない汚れを持って帰らない1つの手段だと思います。

最後に

少しでも気づきのポイントとして皆様の記憶に残れば幸いです。
あまり潔癖になりすぎるのもストレスのもとになってしまいますので、風邪が流行っているときに特に注意するなど、自分ができる範囲で心掛けるのが良いですね。

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