簡単アニメーション | 回転とループ

こんにちは!今回のテーマは「簡単アニメーション | 回転とループ」です。
Adobe Animateで簡単に作れる「回転」と「ループ」のアニメーションについて解説します。

モーショントゥイーンの機能を使えば、メインタイムラインのレイヤーを1つに抑え、再生時間の変更にも柔軟に対応できるループアニメーションが作れます。

今回は基礎的な表現として、回転し続ける歯車を作ってみたいと思います。


使用するソフト

■Adobe Animate(アドビアニメイト)
※バージョンは「CC 2020」を使用しています。


シンボル化する

素材をシンボル化して、モチーフに動きを付けるための環境を整えます。

まず「レイヤー」に分かりやすいように名前を付けます。今回は歯車と言う名前にしました。
レイヤーが出来たら、「ライブラリ」に回転させたい素材を入れます。

「ライブラリ」に入れた素材を「ステージ」にドラッグ&ドロップします。こうすることで最初に作った歯車レイヤーのキーフレームに素材が挿入されます。

次にショートカットキーのF8で「シンボルに変換」を行います。シンボルに変換する際の「種類」は「グラフィック」で設定します。

名前はレイヤー名と統一したかったので歯車にしました。ここは状況に合わせて自由に設定しても大丈夫です。

ステージの見た目に変化はありませんが、「ライブラリ」にグラフィックシンボルが自動で追加されます。
特殊な形のアイコンがついているので、他の画像素材と見分ける時はアイコンをチェックしてください。

シンボル化はこれで完了です!

モーショントゥイーンを作成

モーショントゥイーンを作成するために、シンボル用のタイムラインを表示します。
「ライブラリ」のグラフィックシンボルのアイコン部分をダブルクリックするとシンボル用のタイムラインが表示されます。

見た目の変化が分かりづらいですが、ダブルクリックした後「タイムライン」の左上にグラフィックシンボル名が出て入れば大丈夫です。

「レイヤー」のキーフレーム上で右クリックをして「モーショントゥイーンを作成」を選択します。

「ライブラリ」にムービークリップシンボルが自動で追加されます。ムービークリップシンボル用の特殊なアイコンが付いています。
名前がデフォルトのシンボルになっているので、画像名と統一した名前を付けると分かりやすいです。

そうすると、1秒分の黄色いフレームが「タイムライン」に表示されます。
1秒だと短いので、フレームを2秒まで伸ばします。

「タイムラインの最終フレーム」に青いバーが掛かった状態で、「ステージの画像」を自由変形ツールで90°回転させます。

再生時間を調整してループさせる

シンボル個別のタイムラインからメインタイムラインに戻り、再生時間を調整します。
好きな時間に「フレーム」を伸ばすことで、自動で歯車の回転をループさせることが出来ます。

先ほど2秒で1/4回転するモーショントゥイーンを設定したので、8秒まで伸ばせば1回転分、16秒まで伸ばせば2回転分となります。
これだけで簡単に歯車を回転させることが出来ました。

また、メインタイムライン上のレイヤーも1つなのでスッキリ見やすくなっています。
今は他のレイヤーが無いので大丈夫ですが、今後レイヤーが増えた時に編集作業がしやすくなります。


おわりに

いかがでしたでしょうか?
同じ動作をループさせたい時は、Animateの機能であるモーショントゥイーンを使うと便利です。
1往復分のアニメーションを作っておけば、再生時間を自由に変えられる他、メインタイムラインのレイヤー数を最小限に抑えられるからです。

ループするアニメーションが必要な時は、ぜひ活用してみてください!

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

第4回 販促 EXPO【春】出展のお知らせ(dgiftSNS、デジタルギフトキャンペーン)

この度、2021年1月27日(水)〜29日(金)に幕張メッセにて開催される「第4回 販促 EXPO【春】」に出展いたします。

今回は、デジタルギフトを活用したSNSインスタントウィンキャンペーンを簡単に実施することができる「dgiftSNS」を中心にご紹介させていただきます。

ブースでは、デモ動画の無料配布やその場で参加できるプレゼントキャンペーンを開催いたします。感染拡大防止策を徹底して出展いたしますので、ぜひこの機会に弊社ブースまでご来場ください。

また、ご来場が難しい方はオンラインでもご参加いただけます。
オンラインにて最新資料のダウンロードやビデオ通話、チャットでの質問・商談が可能となっておりますので是非ご参加くださいませ。


出展概要

■ 名称:第4回 販促 EXPO【春】
■ 主催:リード エグジビション ジャパン株式会社

■ 会期:2021年1月27日(水)〜29日(金)
    10:00~18:00(最終日のみ17:00)
■ 会場:幕張メッセ4~6ホール
■ 小間番号:11-41 ※4ホール出入口から奥にあります。

■ 入場:全来場者登録入場制 
    事前登録者、招待券持参による当日登録者:入場無料
    当日登録:入場料5,000円/人

    招待券をお持ちでない方はお送りいたします。
    こちらからお問い合わせください。

    https://www.dgift.jp/contact

    展示会の詳細はこちら
    https://www.sp-world-spring.jp/ja-jp/about/wspsp.html

はじめてのオンラインイベント|メリットとデメリット

こんにちは!今回のテーマは「はじめてのオンラインイベント|メリットとデメリット」です。
オンラインイベントの種類は、企業が行う真面目なWebセミナーから友人との気軽なオンライン飲み会まで様々です。それぞれの運用方法の違いやメリット・デメリットについてユーザビリティの観点でまとめました。

コロナ禍によりオンラインで行うイベントが急速に普及しました。
動画配信と言う形は同じでも、イベントごとに細かい仕様に違いがあり、実際に参加してみると思った以上に色々なやり方があるんだと驚きました。
今回の記事では、そんなオンラインイベントの仕様の基礎+ワンポイントについてもまとめてみました。


オンラインイベントとは

オンラインイベントと一口に言っても様々な種類がありますよね。Webセミナー、ウェビナー、オンラインセミナー、オンラインライブ、Web会議、Web面接など。
身内に限定して私的に行うのがオンライン飲み会に当たります。

このように言い方は沢山ありますが内容はどれもほぼ同じで、インターネット上で動画を配信したり、それによってコミュニケーションを取ることを指します。
特にコミュニケーションを取るオンラインイベントの場合、企業によっては様々な機能を用意して参加者が有意義な時間を過ごせるよう工夫されています。


オンラインイベントの特徴

まずはオンラインイベントの基礎的な特徴についてお話ししたいと思います。
特徴は大きく分けて3つあり、「集客の拡大」「コスト削減」「リード(見込み顧客)の獲得」です。

集客の拡大

インターネット環境さえ揃っていれば、エリアに縛られず誰でも参加する事が出来ます。
特定の会場に行かなければならないオフラインイベントだと他県や遠方に住んでいる人が参加し辛いデメリットがありましたが、その問題を払拭することができます。

また、会場のキャパシティに縛られることもないためより多くの人に参加してもらうことが出来ます。
アーティストのライブで言えば、これまでは会場の広さの都合で人数を制限したりチケットの抽選をしなければいけませんでしたがその必要がなくなります。
ファンクラブ会員だけでなく、参加したい人全員がライブを視聴することも可能になりました。

コスト削減

リアルイベントを行う時に必要な会場費・交通費が必要ないので大幅なコスト削減になります。
また、会場の設備や印刷物、常駐するスタッフの金銭と時間のコストも削減出来ます。

ネットワーク環境とPCとカメラとマイクの4つが揃っていれば十分です。
もっと設備を絞ろうと思えば、ネット環境とスマホさえあればオンラインイベントの開催・参加が可能です。

リード(見込み顧客)の獲得

興味関心度の高い、目的意識の高い人たちの間で配信・視聴が出来るため、リード(見込み顧客)が獲得しやすい点が上げられます。
あらかじめ興味を持って参加してもらえる他、参加のしやすさから幅広いエリアの多くの人々に知ってもらうことが出来ます。
敷居の低さで言えば、リアルイベント以上に顧客獲得のチャンスが生まれます。


配信方法の種類

オンラインイベントの配信方法は2つあり、「ライブ配信」と「オンデマンド配信」です。

ライブ配信

ライブ配信とは、開催中のイベントをリアルタイムで配信する方法です。
メリットは、映像やチャット・アンケート機能を使ってコミュニケーションを取ることが出来る点です。視聴者の反応や疑問点をリアルタイムで確認しながら進行できます。

デメリットは、参加者それぞれの通信環境による影響が大きい点です。
参加者が電波の悪い場所でライブ配信を見ようとすると、映像が途切れたりまったく映らなくなることもあります。
主催者側で改善できる部分ではないため、解決策としては、通信環境に関する事前の注意喚起を行い参加者に最低限の通信環境を整えてもらうことが大切です。

ライブ配信に適したイベント
  • 説明会
  • 研修
  • セミナー
  • ライブコンサート
  • オンデマンド配信

    オンデマンド配信とは、事前に動画をサーバにアップロードしておき、視聴者の任意のタイミングで見られるようにする方法です。
    メリットは、繰り返し配信・視聴することが出来ることです。
    研修などで同じ講義を繰り返す場合、一度撮影してしまえば繰り返し使えるため人件費や時間の節約になります。また、配信後にもう一度見たいと思った時にすぐ復習することが出来ます。

    デメリットは一方通行になりやすい部分があることです。
    長々と一方的に喋る動画にならないように内容を簡潔にまとめたり、編集で動画を分かりやすくまとめておく必要があります。

    オンデマンド配信に適したイベント
  • 研修
  • セミナー
  • 講義

  • オンラインイベントのワンポイント

    オンラインイベントで実際に使用されているワンポイント機能を、ライブ配信とオンデマンド配信に分けて紹介したいと思います。
    極端なことを言ってしまうと無くても良いのですが、あるとよりUXが充実する機能となっています。

    ライブ配信

    ■チャット

    オンラインイベントのチャット機能

    参加者がリアルタイムに疑問や感想を伝えることが出来るので、臨場感や参加してる感が生まれます。
    その場で臨機応変な対応が出来るので、疑問に答えたりプラスアルファなお話しをすることが可能です。
    また、顔を出さずに気軽にコメントを打ち込めるので、より活発なコミュニケーションが期待できます。

    ■アンケート

    オンラインイベントのアンケート機能

    アンケートや質問をしたい時にラジオボタンなどの選択肢を出すことで、参加者から回答を得ることが出来ます。
    主催者側の一方通行になりがちな場面でも、双方向からアクションが起こせるので、リアルな体験と情報が得られます。

    ■アクション・アバター

    オンラインイベントのアクション・アバター機能

    コンサートなどエンターテインメント性の強いイベントの場合は、アクションやアバター機能があるとUXが高まります。
    〇〇を応援したい、一緒に会場を盛り上げたい、一体感を感じたい、と言う参加者の気持ちを補うことが出来ます。
    参加者の感情を表すアクション機能や、アバターをオンラインの会場に配置出来るようにすることで、リアルイベントに勝るとも劣らない体験が得られます。

    特殊なアクションやアバターのカスタマイズ要素が課金要素にすることで、収益化も計れます。

    オンデマンド配信

    ■ポータルサイト(見返す時の導線)

    視聴者が後々動画を見返す際の導線をしっかり確保する必要があります。
    ポータルサイトを用意したり、YouTubeにアカウントを作っておくケースもあります。
    また、URLをメールで送ったりサイトのブックマークを推奨するなど、主催者側から連絡しておいても良いです。

    ■タイムスケジュール

    事前に用意している動画とは言え、タイムスケジュールを組んで順次公開する、と言う方法もあります。
    配信する動画数が多い場合のみ有効な方法ですが、参加者が自分で視聴したい動画を選ぶことが出来るので、イベント性が高まります。
    大型イベントの場合、タイムスケジュールを組むことで視聴者が分散するので、アクセスが集中してサーバーが混雑する事態を防ぐことも出来ます。


    おわりに

    いかがでしたでしょうか?
    オンラインイベントはメリットも多く感じる反面、やっぱり対面で話したい、もっとこうだったらな…と感じる部分もあります。

    特にライブ配信型のオンラインイベントは、コミュニケーションの取り方などこれからも大きく進化していくと思います。
    今から沢山のオンラインイベントに参加して進化の過程を見ていくのも面白いのではないでしょうか!

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

    初心者向け文字とデザイン|比率違いのバナーの作り方

    こんにちは!
    今回のテーマは「初心者向け文字とデザイン|比率違いのバナーの作り方」です。
    文字デザインの中でも、同じデザインで比率違いのバナーを作る時に使える文字組みのコツについてまとめてみました。

    Web向けのバナーや広告を作る際、複数の比率のバナーが必要になることが多いです。
    バナーの形は、横長、縦長、正方形、細い、小さい、など。また、スマホ向けかパソコン向けか用途によって様々です。

    何も考えずに文字を組んでしまうと、サイズによっては読みづらくて何が伝えたいのかよく分からないバナーになってしまいます。
    また、比率が大きく変わった時にデザインを調整するのが大変になることも…。

    複数サイズのバナーが必要な時に役立つ、簡単に比率違いのバナーを作るコツを書いていきたいと思います!


    訴求する文章と規定を確認

    まず始めに複数の比率のバナーを作る時は、訴求したいキャッチコピーなどの文章と、必要サイズとその規定(有れば)をしっかり確認してください。
    何故なら、バナーのサイズによっては入れたい文章が全て入りきらない…と言う事象が発生してしまうからです。
    特に広告の場合、1200×628と320×50など大きくサイズが違うバナーが必要になることもあります。サイズが大きい方のバナーには入る文章でも、小さい方だとどうしても全て入れるのが難しくなってしまいます。

    これをまず確認しないと、1200×628のバナーデザインをガチガチに作ってから320×50を作ろうとした時、視認性を確保しつつ文字を入れることが出来ない…となってデザインのやり直しが発生してしまうことも。

    対処方としては2つあります。
    ①どのサイズのバナーでも統一して入れられる文章を用意する。
    ②大きいサイズ用の文章と、小さいサイズ用に簡略化した文章の2種類を用意する。

    ただ、広告を作る場合は基本的に①の方法が無難です。
    ABテストなど広告効果の分析がしたい時に不適切だったり、広告規定で文字の面積が厳密に決められている場合があり、そもそも長い文章が入れられないことも多いからです。

    ②の方法で進めたい時は、簡略化前の訴求内容と乖離しすぎないように注意が必要です。

    バナーが広告なのかそうでないのか、必要なサイズはどれなのかを確認してから状況に合わせて調整してみてください。

    次の項目からは例として、②のケースを想定して文字組みをしてみます。


    優先順位を決める

    バナーに入れる要素の優先順位を決めます。バナーを作る上でとても大切なポイントです。
    なぜ優先順位を決めるかと言うと、優先度に合わせて表現に強弱を付けることで分かりやすいバナーを作ることが出来るからです。

    バナーに必要な要素をザックリ整理すると、テキストと画像の2種類です。
    中でもテキストは情報量が多くなりがちで、ゴチャつきやすい部分でもあります。

    テキストの一例としては「50%OFF SALE」「初月無料」などメリットを訴求する文言の他、キャンペーン概要や企業情報、細かい注釈などを入れることが多いです。
    CTAのために「今すぐチェック」などのクリックを誘導する表現を使う場合もあります。
    沢山の情報をそのまま配置しただけだと内容が頭に入りづらく、メリットをちゃんと認識してもらえない可能性が高くなってしまいます。

    スマホでWebページを見ている時に上の図のようなバナーが不意に出てきて、読むぞ!と思うでしょうか?
    このままだと、あまり読む気は起きないと思います…。
    クリックしてもらえないどころか最悪の場合、認識すらされずにスクロールされてお終いです。

    そうならないために、ユーザーにとってのメリットや伝えたい訴求ポイントなど、1番見て欲しい部分の優先度を最も高く設定します。
    あとは条件や必要事項など、全ての要素に順位を付けてください。

    ちなみに、この順位はあくまで優先度の順番であって並び順ではないことを頭の片隅に置いておいてください。
    テキストの並び順は、文章として違和感がないように後ほど調整します。


    文字の大きさに強弱を付ける

    優先順位ごとに文字のサイズや太さを変えます。
    優先度の1番高い文字は、他の文字サイズと最も差を付けて大きく目立つようにしてください。1〜2px単位の細かい調整はせず、誰が見ても明らかに大きさが違うと分かるサイズが良いです。
    優先度が2番目に高い文字も1番目と差を付けつつ、その他の文字より明らかに大きくなるようにしてください。

    ただ、全ての文字に大きな差異を付ける必要はないです。
    優先度1、2までは前述の通りですが、それ以下の文字は読みやすさに合わせて調整します。
    日付や注釈など、優先度が1番低くなりやすい事務的な要素は、視認性に気をつけつつかなり小さくしてしまっても大丈夫です。
    Webで見やすいフォントサイズの最小値は20pxくらいなので、そこから小さくなり過ぎないサイズを設定すると良いです。

    調整を行ったのが下記の画像ですが、いかがでしょうか?
    文字の大きさに強弱を付けただけでも読みやすさが違ってきたかと思います。

    フォントサイズを記載していますが、調整しているうちに変化していく要素なのでサイズ感の参考程度に見てください。


    表現と配置の調整

    次に、装飾などを付けて表現に強弱を付けます。
    装飾といっても華美である必要はなく、丸や四角などの単純な図形でも十分です。

    装飾を付けると同時に、配置も調整を行ってください。
    文章として違和感なく読める状態に整えるのが目的です。並び順を変える他、横や斜めにずらしても良いです。
    文字の多さや単調さを軽減させるイメージで調整してみてください。


    最終調整

    最後の調整として、より読みやすいように色やエフェクトなどの細かい部分を整えていきます。

    これで1つ目のバナーは完成しました!
    最初のバナーよりメリットが分かりやすくなり、ユーザーの目に留まるようなバナーになったのではないでしょうか?


    アートボードを複製して別サイズのバナーを作る

    1つ目のバナーが出来たら、アートボードを複製して別サイズのバナーを作ってください。
    新規で作ると作業効率が良くないので、可能であればアートボードをパーツごと複製すると作りやすいです。

    アートボードのサイズを調整したら、それに合わせて文字や装飾のサイズと配置も変えていきます。

    この工程のポイントは、1つ目のバナーを作った時に決めた「優先順位が1番高い文字は1番目立つようにする」などの優先順位のルールを守ることです。
    比率が近ければ問題ないと思いますが、比率が大きく違うバナーを調整する時に崩れやすいポイントでもあります。

    また、テキストを省略する時のポイントですが、文章の簡略化、バナーへの記載が義務付けられていない要素の削除が適切かと思います。


    おわりに

    いかがでしたでしょうか?
    バナーを作る時に大きなポイントになるのが文字組みです。
    比率が複数必要になった時のことを想定して作っているのとそうでないのとでは、後々のデザインのしやすさやが変わってきます。
    バナーを作る際はぜひ試してみてください!

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

    ボタンの作り方と並べ方/viewport設定について

    2019-2020
    サービスサイトによっては、スマートフォン画面の中で複数の小さいボタンが密集するページレイアウトが必要です。

    今回はそういったサイト状況下でのボタンの並べ方を、スマートフォンのviewport設定と画面仕様の説明を含めて紹介します。


    目次


    重要な横画面の解像度

    横にボタンがいくつ並べられるかについては、端末の横画面解像度とppi(画素密度)が影響します。

    iPhone4/SE系など、横画面解像度640px幅の端末のviewport設定幅は320px/326ppiですが、
    普及端末は、iPhone6/SE(2020)系の横画面解像度750px幅の端末のviewport設定幅は375px/326ppiです。

    最新のエントリーモデル端末のiPhone11でも、横画面解像度828px幅/326ppiですので、横解像度は大きな違いはありません。


    viewport設定について

    『viewport』とは、スマートフォン端末ディスプレイの「物理的解像度表示」ではなく、調整可能な「仮想サイズ表示」にする設定です。

    スマートフォンの端末はPCなどの画面サイズが大きい端末とは違い小さいため、『viewport』の記述をHTMLのmetaタグ内に設定することで、文字がスマートフォンでも読みやすい表示に設定できます。

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


    ※iPhone4以降は高解像度「Retinaディスプレイ」になったため、viewportの横幅ピクセルは端末ディスプレイ解像度の半分に設定されています

    また、画面表示の横幅を端末横幅(100%)に合わせる設定も出来ます。

    それにより、テキストや画像を横スクロールせずともテキスト改行や画像縮小表示をし、上下スクロールの簡単操作だけでページを確認できるモバイルデバイスに最適化した視認性を再現できます。


    ボタンは横に5つまで並べる

    「押しやすいボタン」の最小サイズについてはAppleのUIガイドラインでは、(viewport設定で)44x44(px)と設定しており、実サイズでは約7mm × 7mm です。
    実解像度では88x88(px)となります。

    88px(44px)であれば、横750px(375px)の場合は7個ほどボタンを横に並べることができますが、その場合は文字の書かれないアイコンだけのボタンに限られます。

    実際にはボタンに4文字程度の文字/ラベルが書かれることになるため、5個程度が横に並べられる限界数になります。


    5つのボタンが並ぶコンポーネント

    それでは5つのボタンとそれに近いUIコンポーネント例を紹介します。

    『ページ内リンク(アンカータグ)』


    ページの長さがある構成の場合はページ内リンクボタンを設置。

    『タブ』


    カテゴリの違う要素を限られたスペースで出しわける場合に設置し、最も左側は一番優先度が高い項目を置きます。

    『セグメンテッドコントロール』


    一つの関連性あるデータの集団を各セグメントで切り出して表示させる場合に有効。
    「ランキング」「ユーザーデータ」「地域」など。


    さいごに

    基礎的なボタン設置について紹介しました。

    カテゴリ/利用シーンの競合しないタブレットの登場、そして折り畳みスマートホンが登場しておりますが、スマートフォンの登場から現在まで、基本的に画面の大きさには大きな変化はありません。

    利用者のアクションは「ボタン」からはじまりますので、適切な設置をしていきましょう。

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

    ソーシャルディスタンスの保ち方|ユーザビリティ

    こんにちは!
    今回のテーマは「ソーシャルディスタンスの保ち方|ユーザビリティ」です。
    より良いソーシャルディスタンスの保ち方について、ユーザビリティの観点から考えてみました。

    コロナ禍により生活の中に様々な工夫が必要になりました。中でも特に目に入るのが「ソーシャルディスタンス」です。
    お店に行くとレジ前の道に線が引かれ、線に合わせて前後の人と距離を保つのが当たり前になっていますよね。
    お店の入り口やトイレの床など、待機列が形成される場所に線が引いてあることが多いです。
    他にも様々な方法でソーシャルディスタンスが保たれています。

    安全に配慮した対策ですが、これは利用者の裁量やモラルに依存する面も大きく、ただ線が1本書いてあれば万事OKということにはなりません。
    例えば線の内側か外側か、はたまた中心に立つかで人それぞれの判断が異なり、結局適切な距離が保てていない場面もあります。

    そうならないように、適切にソーシャルディスタンスを保つためにはどのような方法があるのかまとめてみました。


    ソーシャルディスタンスとは

    直訳すると社会的距離という意味です。コロナの流行に合わせて耳にする機会が増えました。
    人が密集するとコロナの感染リスクが高まるため、人との距離をできるだけ2m(最低1m)空ける目的があります。

    ソーシャルディスタンスを保つための対策として、「1〜2m間隔で床に線が書いてある」「座席の一部を使用不可にして間隔を空ける」などが一般的です。
    どれも有効な手段ですが、利用者の裁量やモラルによっては適切に運用されないというデメリットもあります。

    デメリットを解消するためには、「ここに立てばいいんだな」「間を空けてここに座ればいいのね」と、誰が見ても何をすれば良いか分かる必要があります。
    当たり前のことではありますが、線を引いただけなど最低限の対策だと十分でない場合があります。利用者それぞれの考え方や状況が異なるためです。

    次の項目で、これを解消するための方法を考えていきたいと思います。


    適切にソーシャルディスタンスを保つ方法

    立つ位置の間隔を空けたい場合

    今の問題点としては、実際にどこに立つかは利用者の判断に寄ってしまっているところです。
    これを解決するためには立つ位置をより明確にして、誰でも決められた位置に必ず立てるようにする必要があります。

    ◼️立つ位置を明確にする

    線だけでなく、足跡などの印を付けて立つ位置を明確にします。
    一番シンプルで分かりやすいかと思います。

    枠で囲う

    枠で囲うことで1人分のスペースを明確にします。
    2、3人のグループが待機列を作ることが想定される場合にも適切です。
    また、スペースが狭い場合は枠の中に「×」を描き、立ってはいけないスペースを伝えるのも分かりやすくなります。

    座席の間隔を空けたい場合

    現状よく見るのが、「間隔を空けてください」などと書かれた紙がテーブルや椅子に置いてあるケースです。
    隣席や目の前の席にその紙を置くことで、ソーシャルディスタンスを保つ目的があります。ですが、グループで着席する場合に紙を退かして座ってしまう人も時々見かけます。
    それを防ぐためには、より動かしづらくより座りづらい対策をする必要があります。

    退かしづらい物を椅子に置いておく

    大きめの人形など容易には退かしづらい物を置いておきます。
    抱っこしたり別の場所に置くには大きくて邪魔なサイズ感が良いです。
    海外のレストランのマネキンや、日本のカフェのぬいぐるみなどを見たことがある人も多いかと思います。

    テーブルに物を置いておく

    レストランなどの場合、テーブルに物を置いておくのも効果的です。
    レストランで提供されているメニューの食品サンプルを置いておくと、宣伝効果もあります。

    カウンターや長テーブルなど不特定多数が密になりやすいテーブルの場合は、観葉植物や置物でも対策できるかと思います。

    +α

    改善の余地があるかもしれませんが、実際に取り組まれていて良いなと思ったものもご紹介します。

    間隔を空けて地面に絵を描く


    某駅の喫煙所で取り組まれている試みですが、地面の一部に青空や植物の絵を描くことで、人が絵を避けて立つと自然とソーシャルディスタンスが保てるという物です。
    無骨な線で区切るのではなく、ホッとする絵で人間の良心を思い出させるような表現が素敵だと思いました。
    ですが、ナチュラル過ぎるせいか絵を特に意識せず踏んで立ってしまう人もおり…

    発想は素敵なのですが、区切り線ぽくないばかりにソーシャルディスタンスを連想しづらい難点もあり、改善が必要だと思いました。
    いっそ本物の植物の鉢を置いておくのも良いかもしれません。


    おわりに

    いかがでしたでしょうか?
    個々の意識に左右されてしまう面もありますが、少し手間を掛けるだけでより効果的にソーシャルディスタンスを保つことができます。
    新型コロナウイルスによる影響が一日でも早く収まるよう、引き続き注意して行きればと思います。

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

    通知のユーザビリティ

    こんにちは!
    今回のテーマは「通知のユーザビリティ」です。
    アプリの通知機能について、より良いユーザビリティとはどんな物か考え直してみました。

    皆さんはアプリの通知機能を使っていますか?
    アプリによっては設定していたり、全てOFFにしていたりと人それぞれかと思います。

    とても便利な一方で、ストレスになってしまうことも多い機能です。
    特にスマホに慣れていない人にとっては「いらない通知がたくさん来て鬱陶しいな…」とデメリットの部分を大きく感じてしまうこともあります。

    そうならないように、ユーザーにとって本当に使いやすい通知とはどのようなものかまとめてみました。


    通知とは

    通知とは、アプリ内部のお知らせをアプリを開かずとも自動的に教えてくれる機能です。プッシュ通知と呼ばれることもあります。
    メールやSNS、ユーティリティアプリやゲームなどで活用されることが多いです。

    通知の種類は4つあります。ロック画面に表示される物、通知センターに表示される物、バナー、バッジです。

    通知が設定されるタイミングですが、iOSアプリの場合は、始めてアプリをダウンロードして開いた時に「通知の設定をしますか?」と尋ねられることが多いと思います。そこで許可すると設定されます。
    Androidアプリの場合はデフォルトで通知が許可されているため、アプリをダウンロードして起動、または初期設定をすると通知が届くようになります。

    また、各端末の設定アプリからも設定することが出来ます。
    通知のON・OFFの設定から、全ての種類の通知が届くようにするのか、バッジだけ表示するようにするのかなど細かい設定が出来ます。


    通知のメリットとデメリット

    簡単に通知のメリットとデメリットをまとめてみました。

    【メリット】

    ■新しい情報をすぐに知ることが出来る。
    ■わざわざアプリを起動する必要がなくなる。
    ■通知が複数ある場合、ロック画面や通知センターでまとめて確認することが出来る。

    【デメリット】

    ■通知が多いと、数、音、通知を消す処理などにストレスを感じる。
    ■通知内容がユーザーにとって不要な情報であったり、本当に必要な情報が埋もれてしまうことがある。
    ■データ容量や充電を消耗してしまう。


    通知の問題点と解決方法

    通知の問題点として、デメリットの「通知の数」が大きいと考えられます。
    誰かと連絡を取り合っていたり、オンラインゲームをしていたり、スマホで何かに集中している時に通知がたくさん来るとストレスを感じますよね。
    しかもその通知内容が自分にとって何のメリットもなければ尚更です。

    また、手当たり次第に通知を許可してしまっている場合、重要な通知が不要な通知に埋もれて見落とす危険とストレスが増加します。

    この問題を解決できるユーザビリティとはどのようなものか考えてみました。

    事前に通知内容の説明をする

    どのような内容の通知が来るのか、ユーザーにとって必要な情報なのか判断出来るように事前に丁寧に説明します。
    ユーザーにしっかり納得して通知の設定をしてもらうことで、通知の数が不必要に増えないようにします。

    まずは下の画像を見てください。初めてアプリをダウンロードして開くとよく見かける説明文です。

    事務的で簡潔な内容ですが、これだけだと説明が十分とは言えませんよね…
    どんな内容で、どの位の重要度の通知が来るのか分からず、ユーザーはネガティブな印象を持ってしまいます。
    通知が鬱陶しい物と言う先入観が先行してしまえばすぐに「許可しない」を押してしまうでしょうし、慣れていないユーザーは警戒したり、訳も変わらず許可したものの興味のないPRが沢山来て辟易…となってしまいます。

    こうならないように、まずはどのような通知が来るのか具体的に説明してあげると良いです。
    先行で新着情報が届く、期間限定のお得なクーポン情報、ポイントの有効期限が迫っていると言うお知らせなど。
    ユーザーにとって有益な情報が届きますよと伝えてあげると、通知の設定が必要か否かの判断がしやすくユーザビリティが改善します。

    事前にメリットをイメージしやすくする

    通知が来るメリットをイメージしやすいように事前に訴求します。
    アプリの機能やユーザーの状況によって優先度は異なります。通知が来ることのメリットが大きい物もあれば低い物も…。
    例えば仕事で使うチャットアプリの通知と、天気予報が更新されたことを知らせる通知の優先度は違いますよね。
    スマホを使い慣れていない人だと、そもそも通知のメリット自体を想像し辛いこともあります。

    具体的にどのようなシーンで通知が役立つのか説明することで、どんな人でもメリットを理解出来るようにします。
    こうすることで設定の有無を判断出来るようになり、ユーザビリティの改善に繋がります。

    通知の設定に関するヘルプを設置する

    サービス内のヘルプなどに、設定アプリで通知のON・OFFが出来ることを書いておきます。
    通知のON・OFF設定は基本的にスマホにデフォルトで入っている設定アプリからでないと出来ません。それを知らずに個別のアプリから設定しようとして「出来ない…」と困ってしまうユーザーもいるため、ヘルプなどの分かりやすいところで設定方法を説明してあげると良いです。

    アプリ内で通知の細かい設定が出来るようにする

    通知設定をONにしてもらえた場合ではありますが、アプリ内で細かい通知設定が出来るとより使いやすくなります。
    1つのアプリから届く通知と言っても、内容は様々かと思います。新着通知やお気に入り登録された通知、メンテ情報などアプリからの事務的な通知など。
    ユーザーが知りたい情報だけ選択できるとよりユーザビリティが改善します。


    おわりに

    いかがでしたでしょうか?
    疎まれてしまうこともある通知機能ですが、適切な設定が出来ればとても便利で役立つ機能です。

    気を付けないと売り手本位になってしまうことの多い機能です。
    今回はユーザーに注意を促したりメリットを知ってもらう形でユーザビリティの改善を試みてみましたが、そもそもサービス提供側が通知内容を吟味して改善していけるように、私も気をつけて取り組んで行きたいと思いました。

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

    ディザリング画像処理(ディザ処理)とは【GIFとPNGの容量を軽くする書き出し方】

    ディザリング画像処理(ディザ処理)を中心に、各画像形式と絡めて解説します。

    Jpeg画像の容量を小さくするには?

    jpegの容量を小さくするには「Adobe CC」を契約している場合は『Photoshop』で「Web用に保存」を使い60~80%の品質が無難です。

    アップデートが停止している『Adobe Fireworks』はPNG8形式とGIFの減色に強いツールですが、Jpegの場合は『Photoshop』での「Web用に保存」の方が軽くなる場合が多いです。

    『Photoshop』でJpegを書き出す場合は、
    スマートフォン向け写真画質の画像(w750p× x 程度)であれば100~200k以内に収めますが、さらに最適化をするのであればPNG8の「ディザ処理あり」の画像と比較して綺麗と思える方を運用に使います。

    人物風景写真の場合はJpegが好ましいですが、60%以下に品質を下げて圧縮していくと「ブロックノイズ」が顕著に目立ってきて使用に耐えられない画像になります。

    【png gif JPEGの違い】について一言でいうと、

    • 最大256色しか使えないPNG8とGIFでは、PNG8の方が容量が軽くなる
    • PNG24、PNG32の形式では256色以上を使えるが、容量が桁違いで大きくなる ※ブロックノイズが無くJpegよりも綺麗
    • PNGとGIFは再保存や圧縮を繰り返しても画像が劣化しないがJPEGは劣化していく
    • 過去の携帯電話端末ではGIFは使えたがPNGが使えない機種が大半であった ※docomo/auはpngが使えない機種が存在したSoftBankは両方使える

    それでは、
    実際に画像を使用した際、WEBページを表示するまで「8秒以上」待たされた時代がありました。

    書き込み速度(ライト)、読み込み速度(リード)、が機器/回線ともに高速になった今では、WEBページ画像の重さを気に掛ける習慣が減っておりましたが、今回の世界的規模のコロナ被害により、同時刻に部屋でネットを利用する人々が増え、稀にページの表示に時間がかかる状況があります。

    「いつ発生するかわからない緊急時」においても、広く公平に、WEBを問題なく閲覧できる環境を構築するために必要な「ネット回線にやさしい」軽量化/最適化された画像の作り方をアーカイブとして残します。


    目次


    画像容量の傾向

    GIF/PNG8のインデックスカラー画像データは、原則ピクセル(ドット)配置が複雑化した分、データ容量は増えます。


    よって、可能な限りベタな1色アニメ塗りを意識すれば、まず容量は軽くなります。


    模様の違いによる画像容量比較

    それでは様々な画像配置で比較してみましょう。


    注意が必要なのは、一見、容量が同じになりそうな「縦じま」「横じま」の違いだけでも容量が変わるデータ構造です。

    詳しく説明するとバイナリデータやパレット構造などのプログラム的な話になるので割愛します。


    ちなみにこの赤青のタイル模様の画像は縮小してドットバイドットで表示されると赤色と青色が混ざり紫色に見えます。

    それであれば、最初から紫色1色で表示したほうが画像容量は軽くなるのですが、昭和な時代のコンピュータでは、白黒、光の三原色、色の三原色である、
    「青」「赤」「マゼンタ」「緑」「シアン」「イエロー」「白」の7色に無色の「黒」を加えた8色表示しかできない制限ある製品があり、疑似的に7色以外を再現する「タイルペイント」技法に需要がありました。


    使用色数を減らす

    使用する色が1色増えるだけで容量が増えます。

    GIF/PNG8の形式で書き出されると、インデックスカラー(パレットカラー)は全256色で構成されていますので、そこから64色→32色→16色、と大まかに色数を減らしていき、
    元画像の再現度が7~8割ぐらい留めている段階で止めます。

    その段階から微調整の仕上げにはいり、1色ずつ徐々に色を減らして最終調整をします。

    うまくディザ処理をすれば「半分の色数」で、「容量も4割」ほど減らせます。


    ディザ(ディザリング)処理をしない

    ディザ処理(ディザリング)はこれまでの説明のように、異なる2色を隣り合わせに並べることで足りない色を疑似的に再現する効果ですが、
    タイル模様にドットが配置されることから「タイルペイント」とも呼ばれます。

    この処理をすることで、仕様上の色数以上の表現ができます。

    しかし、写真や段階のあるグラデーションを使っている画像の容量削減に有効ですが、ペタッとしたアニメ調の平らな表現には向きませんので使い分ける必要があります。


    ※厳密には、平たんな部分の無い写真画質の画像はJPEG形式が容量削減に適しています。


    画像再現→色数を増やす?ディザ処理をする?

    色数を減らすか、多少容量が増えてもディザ処理で元画像の再現度を保つかを判断します。

    目安は、仕様設計で定めた画像容量の上限です。
    色を増減させながらディザ処理具合も都度確認して、
    目安の画像容量を超えないギリギリまで画像再現度を調整し書き出します。

    書き出した画像はそのものに見えるかどうか、第三者に確認してもらいましょう。

    問題なければ、仕様に沿った最適化された画像の出来上がりです!


    リクエストを減らす→CSSスプライトで一枚画像にする

    WEBページを表示する際に読み込み速度に影響を与えるのがWebサーバーへの「リクエスト」回数です。

    このHTTPリクエスト回数を如何に減らすかが、WEB設計をする上で重要であり、またやりがいある作業です。

    GIF画像を1枚読み込むと  1リクエスト。
    GIF画像を10枚読み込むと 10リクエスト。

    原則、リクエスト数が増えた分だけ処理が増え読み込み時間(待ち時間)が増えます。

    現代のネット回線は太く、一度の読み込みで受け取れる情報量が増えておりますので、

    1KBの画像でも、
    100KBの画像でも、
    読み込む速さに違いはありません。注)回線状況に影響を受ける

    ページ読み込み時間に影響するのは「×リクエスト数」です。

    100KBの画像を1枚読み込むより、
    1KBの画像を100枚読み込む方が、総容量は同じなのに時間がかかる訳です。

    前置きが長くなりましたが、
    そこで有効なのが「CSSスプライト」の処理です。※「CSSスプライト」使用方法の説明は割愛します

    100枚画像がどうしても必要な仕様であれば、その100枚を一枚の画像にまとめて張り付けてしまうやり方です。

    1リクエストで済み、おおげさに言えば100分の1、時間を短縮できます。

    WEBページで使用する場合はスタイルシートでx軸y軸の始点座標を指定することにより、マスク処理のように、画像のなかの見せたい「一部分」だけを都度表示させて運用します。


    さいごに

    なんでも可能な贅沢な環境よりも、制約ある作業に「やりがい」と「達成感」を感じるのも不思議なものです。

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

    リモートワークを快適に過ごすために

    こんにちは!
    今回のテーマは「リモートワークを快適に過ごすために」です。

    新型コロナウイルスの影響で、弊社では一時的にリモートワークを行っています。
    テレワーク、在宅勤務などとも言われています。

    弊社初めての試み&私自身も初めての経験であるリモートワーク、実際に働いてみて3週間ほど経ちました。
    自宅で仕事をするメリットはたくさんありますが、ストレスを感じる場面もいくつかありました。
    そんな時、こうするとより集中して快適に仕事に取り組めたなと感じたポイントをまとめてみました。


    ストレスのポイントと解消方法

    作業環境が整っていないと辛い

    そもそも自宅に仕事で使えるPCやインターネット環境がない、長時間の利用に適した机や椅子がない、となると辛いです。
    環境を1から整える場合、吟味しているとお金と時間が掛かってしまいます。

    弊社の場合、自宅に適切な作業環境がないと言う社員に対してはPCやスマホ、wi-fiルーターの貸し出しで対応しています。

    自宅の環境で「やりづらいな…」と思った物に関しては、個人の予算内で解決するのであれば、自分に合った物を買った方が生産性が上がって良いと感じました。

    例えば、テンキーの有無や押しやすい高さのキーボード、ノートパソコンのみの作業で画面が小さいと思えばモニターなど。
    腰を痛めないように、オフィスチェアや座椅子など座る環境は整えた方が良いかもしれません。

    仕事に個人の出費か…と気になる方もいるかもしれませんが、仕事だけでなくプライベートも快適になり両方の投資になるので私は良いと思いました。

    私の主観にはなりますが、このくらいあれば自宅でのデザイン制作は不自由しないかなと言うPCの作業環境を記載してみます。
    個人の好みもあるかと思いますので、参考までに見てみて下さい。

    【作業環境】
    PC:iMac(21.5inch, Mid 2011)
    OS:macOS Catalina

    ■モニターサイズ:20inch〜30inchくらい
    PC上で何か作るのならモニターはほどよく大きい方がやりやすいです。
    画面が小さいと拡大縮小やスクロールが頻発しますし、作った物の表示範囲が狭いと非常に見辛いです。
    細かいことではありますが、長時間作業していると塵積もでどんどん効率が悪くなってしまいます。

    ノートPCだと11〜15inchくらいが多いかと思いますので、デザインをするならモニターを買った方が作業しやすいかもしれません。

    大きすぎるのも見づらいので、20inch〜30inchくらいのモニターがあると良いと思います。
    私は自宅で21.5inchのiMacを使用していますが、特に困ることはないです。
    現状の不満を強いて言えば、動画制作など作業によっては時々、27inchあっても良いな…と思うことがあるくらいです。

    ■ディスプレイ数:2個〜
    出来ればデュアルディスプレイにした方が作業効率は良いです。
    制作をしていると、Adobeソフトやメールソフト、ブラウザ、資料などを何度も切り替えながら見る場面が多いと思います。
    いちいち切り替えていると見辛く、見辛いが故に確認が重複したりして時間が掛かります。

    そうならないように、メインは完全に制作作業に当て、サブで足りない部分を補ったり制作作業以外のこと(メールやチャットの確認、検索や資料の表示など)をする、と役割を分けると使いやすいです。

    PC用のディスプレイでなくとも、iPadやタブレットなどでもある程度代用できます。
    私はiMacとiPad Pro(12.9inch 第3世代)を使い、iPadでメールや資料を確認しながら在宅勤務をしています。

    ■メモリ:最低8GB、出来れば16GB
    Adobeソフトを使用する場合の最低推奨値は8GBですので、PhotoshopやIllustratorをメインに使うのであればそれで大丈夫です。
    ですが、Premia Proなど動画ソフトを使用したい場合は16GB必要です。
    最新のCCのバージョンですと、メモリに16GBないと動画ソフトを使うことが出来ません。
    ※古いバージョンならダウンロード出来ますが、恐らく今後更新されることはありません…

    ■+α
    会社はWindowsだけど自宅にあるのはmac…同じソフトウェアなのにショートカットや機能などの差異があってやりづらい…と思う方も多いと思います。
    そのような場合は、macのアプリケーション内にあるBootCampアシスタントを使用すると便利です。
    macにWindowsがダウンロードできるアプリで、ダウンロードしてしまえばショートカットなども会社のWindowsと統一して使用することが出来ます。
    Windows自体は購入する必要がありますが、Windows10のライセンス認証期間を利用するなどまずは試してみてから考えるのも良いかもしれません。
    2,000円ほどでWindows用キーボードも買えますので、これらの環境を整えてしまえば会社環境と齟齬が少なく出来ます。

    仕事とプライベートの境界がなくなる

    会社で仕事をしていれば始業や終業時間、昼食の時間がハッキリ決まっています。
    なので、昼食の時間と退勤後は基本的に仕事はしませんし、意識しなくても気持ちの切り替えは自然と出来ます。

    ですが自宅だと、時間も気持ちも全て自己管理になり、個々の性格やモラルに依存します。
    気持ちの切り替えが出来ず、個人的にお昼休憩や終業連絡後にも仕事を続けてしまう事が多かったです。
    (会社からは終業後に仕事をしないようにちゃんと言って頂いています…!)

    実質的には勤務時間が増えてしまうことにストレスを感じると言う意見もあり、気持ちの切り替え方を工夫する必要があると感じました。

    こう言う時は時計をすぐ目に入る位置に置いておくのが良いと思いました。
    出来ればスマホではなく、時刻がハッキリわかる置時計の方が良いかもしれません。

    室内の換気をする

    窓もドアも閉めきって仕事をしていると部屋の空気が淀み、新鮮な酸素が足りなくなって集中力が低下してしまいます。

    最近は暖かく天気の良い日も多いので、定期的に窓を開けてみてください。
    私は雨の日以外は基本的に窓を開け、日が落ちたり寒くなってきたら閉めるように気をつけていました。

    日光に当たる・体を動かす

    基本的に今は自宅に籠もりきりになっている方が多いと思います。
    1週間一切外出しなかった…と言う時もありましたが、かなりストレスが溜まり、精神的にも仕事の効率的にもよくなかったです。

    仕事のある平日でも、5分10分でも良いので日光に当たるようにしてみて下さい。
    体を動かすと言ってもランニングのようなガッツリしたものではなく、ちょっとしたストレッチや軽い散歩だけでも気分が変わってくると思います。

    朝仕事が始まる前に洗濯物を外に干したり、お昼休憩の時間を利用して15分ほど犬の散歩に行ったりしましたが、気分がスッキリしてより仕事に集中することが出来ました。

    水分補給をする

    意外と忘れがちなのが水分補給です。
    会社で仕事をしていた時は出社時にコンビニやカフェで飲み物を買ったり、ウォーターサーバーの水を小まめに飲んだり出来ていました。

    自宅だと飲み物に対する気付きが少なく、ちゃんと「水分を取ろう」と意識しないと朝から晩までほとんど水分を取らずに過ごしてしまうことがありました。
    そのせいで、ふと気づいた時には頭がクラクラしてしまっていた日も…

    夏場ではない室内でも脱水症状を起こしてしまうので、手元にコップや水筒で飲み物を準備して時々飲むことを意識する必要があります。


    より良いリモートワークのために

    より良いリモートワークを行うためには、コミュニケーションが大切です。
    当たり前のことではありますが、チャットなどのテキストを主体としてコミュニケーションを取る場合、対面で話す時より一層注意が必要です。

    相手の様子が全く見えないため、ネガティブな気持ちでいるのか、ポジティブな気持ちでいるのか、どんな感情でこのテキストを打ったのかと疑心暗鬼になることもあります。
    反応がないと、自分が言ったことを相手が理解しているのか、そもそもちゃんと読んで対応出来ているのかと心配になります。

    ちょっとしたすれ違いでストレスが増えることも考えられるため、対面時以上に丁寧で細やかなコミュニケーションが必要かと思います。


    おわりに

    今はリモートワークのおかげでコロナの感染リスクも大きく下がっているため、安心して仕事に取り組むことが出来ています。
    通勤のストレスもなくメリットも多いように思いますが、自宅で仕事をするストレスもあります。

    良い面も悪い面も沢山あるリモートワークですが、会社だけでなく個人が工夫してそれぞれ環境を整える必要があると思いました。
    新型コロナの流行が落ち着けば弊社のリモートワークは終わりますが、仕事に対する意識を見直す事が出来た他、ツールへの知識が深まりとても勉強になっています。

    皆さんも新型コロナや体調不良に気をつけてお過ごしください。
    それではまた!デジマースのコンでした。

    ユーザビリティ|セルフ式ガソリンスタンドの使い方

    こんにちは!
    今回のテーマは「ユーザビリティ|セルフ式ガソリンスタンドの使い方」です。
    セルフ式ガソリンスタンドの使い方を確認しつつ、初心者でも迷わないユーザビリティについて考えてみました。

    みなさんは初めてセルフ式ガソリンスタンドを利用した時、1人でスムーズに使うことが出来ましたか?
    私は出来ませんでした…。初めての時は1人で給油するのが怖かったので、母に付き添ってもらい逐一操作の説明と介護を受けると言うイージーモードでプレイしてしまいました。

    セルフ式は慣れれば問題ないのですが、初見の人にとっては少し分かりづらいユーザビリティになっていると感じます。
    初回利用時は家族や友人に教えてもらった、あるいはガソリンスタンドの従業員の方に教えてもらったと言う方も多いのではないでしょうか。

    そんなセルフ式ガソリンスタンドを、誰に聞かなくても迷わず使えるようにするにはどうしたら良いか考えていきたいと思います。


    目次

    01.セルフ式ガソリンスタンドとは
    02.セルフ式ガソリンスタンドのユーザビリティ【現状】
    03.良いユーザビリティとは
    04.セルフ式ガソリンスタンドのユーザビリティ【問題点と改善案】
    05.おわりに


    セルフ式ガソリンスタンドとは


    ユーザビリティを考える前に、簡単にガソリンスタンドについて整理したいと思います。

    ガソリンスタンドには大きく分けて2つのサービス形態があります。
    フルサービス式とセルフ式です。

    フルサービス式とは、ガソリンスタンドの従業員の方が給油作業を行う昔からお馴染みの形態です。
    給油中に窓を拭いてくれたり、喫煙者の乗る車の場合は灰皿を交換してくれるなどのサービスもあります。
    従業員の方が案内から給油まで全てやってくれるので、のんびり車内で待っていられるメリットがあります。

    一方セルフ式とは、顧客が自分で給油作業を行う方式です。
    消防法が改正された1998年に登場し、毎年ガソリンスタンド全体の総数が減少する中でセルフ式だけは数を増やし続けています。
    令和元年9月末の段階でセルフ化率は33%程で、町のガソリンスタンドの3件に1件はセルフ式ガソリンスタンドです。
    (参照:石油情報センター)

    セルフ式の1番のメリットは値段の安さです。
    顧客自ら給油を行うことで、ガソリンスタンド側は人件費を抑えられるためフルサービス式よりガソリン代が安くなります。

    また、車検や不要不急のメンテナンスの営業をされることもないので、給油だけが目的の人にとってはストレスフリーとなります。
    他にも、フルサービス式より営業時間が長い場所も多く、早朝や深夜に急にガソリンを入れたくなった時に助かります。

    デメリットは、どんなに過酷な天候でも外に出て自ら作業を行う必要があることと、一切点検をしてもらえないことです。
    点検をしてもらえないと、ランプ系が切れているなどの運転手からは見えづらい危険な部分に気が付くのが遅くなってしまうこともあります。

    そして、最大のデメリットと言っても過言ではないのが初見時の使い方の分からなさです。
    使い方が分からないからセルフ式には行かないと言う方も少なくないのではないでしょうか。

    素晴らしいメリットが沢山あるセルフ式ですが、使い方と言う最初のハードルが少し高く感じてしまうのはもったいないです。
    次の項目からはいよいよ、セルフ式のユーザビリティに触れていきます。


    セルフ式ガソリンスタンドのユーザビリティ【現状】


    まずはセルフ式で給油を行う際の導線が現状どのようなユーザビリティになっているか整理してみます。

    ユーザビリティのポイントとしては、「支払方法の選択」「油種の選択」「給油方法の選択」「給油」の4つが挙げられます。
    企業によって細かい違いはありますが、概ねこのような流れになっているのが一般的です。


    良いユーザビリティとは


    ここで一旦、そもそも良いユーザビリティとはどのようなものなのか思い出してみます。
    簡単に言ってしまうと、「分かりやすい」「簡単」「ストレスがない」と言った条件が満たされていると良いユーザビリティと言えます。

    セルフ式ガソリンスタンドの良いユーザビリティとは、「初心者でも迷わず、安心して使えること」だと思います。

    このような良いユーザビリティの観点を元に、4つのポイントそれぞれの問題点を洗い出し改善案を考えていきたいと思います。


    セルフ式ガソリンスタンドのユーザビリティ【問題点と改善案】


    ※前提として、「セルフ式ガソリンスタンドに初めて来た人」を想定してユーザビリティを考察しています。

    支払方法の選択の問題点

    ■そもそもどこで支払えば良いのか、どこを操作するのか分からない時がある。
    支払いやパネルを操作する機械と給油機が2つに分かれている場合があります。
    心理的にまず給油機に向かってしまうことが多く、そうすると操作パネルがないため「はて?」となります。
    給油機はカラフルなのに操作パネルの機械は白などの目立たない色になっていることも多く、優先度に差があることで認識しづらくなっている面もあります。
     
    この問題の別パターンとして、レシートとおつりが出てくる機械が別々な上におつりが出てくる機械だけ離れた場所にある、などもあります。

    支払方法の選択の改善案

    ■全て1つの機械に集約する。
    機械が1つだけなら迷いようがありませんよね。支払いもパネル操作も給油機能も1つの機械に集めてしまいましょう。
    調べたところ実運用されている機械がすでにあるようなので、全国のセルフ式がこうなってくれると嬉しいです。

    また、支払方法が多様化している昨今、ガソリンスタンドの機械にも様々な機能が付いています。
    現金やクレジットカード払いだけでなく、アプリのQRコード決済や各種ポイントカードや割引カードに対応した機能など。
    1つの機械に全ての機能を盛り込むのは大変かもしれませんが、セルフ式でも誰もが使いやすいユーザビリティにしていくのが今後の課題かと思います。

    油種の選択の問題点

    ■自分の車にどの油種を入れたら良いか分からない。
    たまに聞くのが「軽自動車に軽油を入れてしまった」「ハイオク車なのに値段が安いレギュラーを入れてしまった」などの失敗談です。
    油種を間違えると車へダメージが掛かる上に、修理代でお財布へのダメージも…

    油種の選択の改善案

    ■選択画面に検索窓やQ&Aを設置。自分の乗っている車がどの油種を入れたら良いか調べられるようにする。
    「軽自動車ならレギュラー」「車種を入力して検索すると選択すべき油種を提示してくれる」などが出来るようにします。

    給油方法の選択の問題点

    ■どれを選択したら良いか分からない。また、ガソリンが溢れるのではないかと不安を感じる。
    慣れない内は車のガソリンの減り具合や容量を把握できていないので、金額や定量を指定したくてもどれを選択したら良いか分からない方も多いと思います。
    また、2000円分入れる金額指定をしたいけど、上限金額に達する前に満タンになるとガソリンが溢れてしまうのでは…?などと不安を感じる場合もあるのではないでしょうか。

    給油方法の選択の改善案

    ■選択画面に大まかなオススメや補足を書いておく。
    自分の車のガソリン容量が把握できていない人に対しては「満タン」をオススメしたり、ガソリンメーターの例を出して「メーターが半分を切っていれば、満タンか1000円分給油がオススメ」など状況から判断できる選択肢を表示します。

    また補足として、「ガソリンは満タンになると自動で給油が止まり、お釣りが出ます」と表示すると利用者の不安は軽減されます。
    ただその場合、状況や機械によっては満タンになっても止まらず溢れる危険があるため、「よそ見厳禁」などの注意も書く必要があります。

    給油の問題点

    ■給油ノズルの扱い方が分からない。
    いざ給油しようとした時、給油ノズルの使い方が分かりません。
    レバーを引けばガソリンが出るのは分かるけれど、どのくらい給油口に差し込めば良いのか、ノズルを入れると給油口の中身がまったく見えないけどちゃんと止まるのか?など色々考えてしまいますよね。

    給油の改善案

    ■操作パネルで説明の図や動画を流す。
    操作パネルと給油機が一体となっていること前提ではありますが、給油のフェーズに入ると、手順がハッキリ分かるような図や動画が操作パネルで流れるようにします。
    「ノズルは奥までしっかり差し込んでください。差し込みが緩いとセンサーが反応せずガソリンが溢れる場合があります。」などの説明があると、事前に気を付けることが出来るので安心できるかと思います。


    おわりに


    いかがでしたでしょうか?
    ユーザビリティを少し変えるだけでも、セルフ式ガソリンスタンドに対する苦手意識が軽減するのではないでしょうか。

    ぜひこれからも、注意を怠らずに安心安全で楽しい運転ライフをお過ごしください!
    それではまた!デジマースのコンでした。