Adobe XDの使い方。プロトタイピングが簡単にできる!

こんにちは!藻です。
今回のテーマは 「Adobe XDの使い方。プロトタイピングが簡単にできる!」です。

アプリなどのWebデザインや動作確認をさくっとしてしまいたい…そんな風に思ったことはございませんか?
そんな願いを叶えてくれるツール、adobe XDのご紹介と簡単な使い方を説明する記事となります!


使用するソフト

■Adobe XD
※スタータープランはadobe XD公式ページより無料でDLすることができます!まずは試してみるのも◎


目次


XDでできること

まずはどんなツールなのか3つのポイントをご紹介します。XDはとにかく「感覚」で触れるツールです。デザインにとどまらない多機能にもかかわらず、コーディングといった難しい設定や機能は一切ありません!デザイン制作をぐっと高速化してくれます。
なんといってもスマートフォンでもPCでも、どんなデバイスにも対応しているところも魅力です。

1.UI/UXデザイン

ワイヤーフレームの作成はもちろん、IllustratorやPhotoshopを開かずとも簡単なアイコンなどはXD上で作成可能です。色のバランスを見たり、図形を並べたり。デザインに必要とされる機能は一通り兼ね備えており、ラフを描くように画面のスケッチができあがります。一度作ったパーツはコンポーネントとして登録することができ、再利用もすぐにできます。スタンプを押すようにボタンなどのパーツ追加ができます。

2.プロトタイプ作成

感覚的にアニメーションや遷移などを組み込めます。リアルタイムで反映してくれるプレビューを見ながら細かな調整が可能で、実際のHPやアプリでの動作を確認できちゃいます。デバイスを用意すればテストもらくらくです。デザインと一緒にできてしまうのがXDのすごいところ。
プロトタイプってそもそもなんだ…?やり方は…?の方はこちらの記事を参考にしてみてくださいね!
・プロトタイプがあると良い理由→プロトタイプ/プロトタイピングの活用
・プロトタイプのやり方→簡単!ペーパープロトタイピング

3.リアルタイムでの共同編集・共有

簡単に言えば、同時に複数人が同じフォルダを開いて作業が可能です。また作業だけではなく、リンクを共有すれば、デザイナーの使用した書式やサイズ、カラーまで確認が簡単に共有されるためエンジニアにも非常に伝わりやすくなります。ページごとに書き込みもリアルタイムで行えるため、フィードバックの回収もスピーディです。


実際にアプリのモデルデザインを作ってみる


1.サイズを設定する

XDを起動するとまずこのような画面が表示されます。任意のサイズを選択しましょう!
今回はアプリをサンプルとして作成するため、iPhoneのテンプレートを選択しました。

2.ワークスペースについて

サイズを設定するとキャンバスが作成されます。簡単に今回使う基本項目はこんな感じです。

3.デザインをしよう

さて、ではアプリ起動画面をさくっと作っていきます。
下地は色付きの四角を作っておいています。ここで別にロゴなどを用意していればドラッグ&ドロップでそのまま入れることもできますよ。
今回はサンプルなのでフォントを入れていきます。

文字だけではさみしいので図形ツールを使って装飾をします。ここでは線をフォントの上下に。
また、プレビューを利用すれば原寸での画面も確認できます。リアルタイムで反映してくれる優れもの。

次は遷移先のページを作っていきます。アートボードツールでキャンバスを増やしました。
TOPのカラーをテーマカラーとして使っていきたいのでアセットに登録しました。これでアセットを開けばいつでもこの色を呼び出せます。
ボタンやヘッダーも作成して使いまわしたい場合、コンポーネントに追加で呼び出せるようになります。効率化!

先ほどと同じ要領で進めていきます。アセットで色を登録してあるためサクサク。

ここで「フッターに等間隔でアイコン並べたりしたいな…」と思うはずです。それもリピートグリッドを使えば一気にできます。

webページやアプリデザインではこういった繰り返しが多いため、リピートグリッドを活用していくことがおすすめです。
さて、リピートグリッドでアイコンも並べたらあとは詰めです。画面を作ってしまいましょう。
先ほどと同様に図形に写真を当てはめていき、文字などを入れました。
アプリでは頻出の、長い画面のスクロールの動作もツールを使えば作成できます。

微調整すればこの画面も完成です。プレビューツールで見るときちんとスクロールできるようになっています!ほかのページも作成しようと思えばいくらでもできますが、今回はここまでの紹介といたします。Illustratorを開かずともここまでデザインできるとスムーズですよね。

4.プロトタイピングをしよう

デザインが完成したらプロトタイプに切り替えましょう。ざっくりとしたワークスペースはこんな感じです。さっそく操作していきます。


このように視覚的にも紐づけされたことがわかりやすい作りとなっています!
今回は「起動したら自動的にホームのページに飛ぶ」といったよくあるアクションをプロトタイプで作成します。右側のバーの設定をいじっていきましょう。
設定はこのようにいたしました!プレビューで確認しながら選ぶのがおすすめです。私もどんなアニメーションかとりあえず試していくやり方をしています笑

プレビューで確認するとこんな感じの動きになります。

5.共有をしよう

それでは一番スタンダードな、作成したプロトタイプのプレビュー・動作チェックを共有したい際の共有方法を紹介します。まずは共有画面に切り替えます。

続けて右のツールバーより設定をし、さっそくリンクを作成しましょう!

あとはリンクを共有したい人へメールなりで送るだけです。URLを実機で確認することもできます。
これで簡単な一連の流れは終了しました。


最後に

いかがでしたでしょうか?それぞれの機能をひとまず紹介する形となりましたが、少しでも使ってみるきっかけになりましたら幸いです^^
現代ではWebページやアプリケーションといったものが広告やサービスでは欠かせないものとなっております。
デザイナーもそうでない方も、XDを活用することでグループでも効率よくスピーディに業務の進行や発案ができるようになること間違いなしです。
触るだけでも楽しいツールなので是非試してみてくださいね。

以上、実は入社して初めて記事を書いた新人デザイナーの藻でした。

アルコール除菌の設置誘導と使用 | ユーザビリティ

今では当たり前のようにハンドジェル、ハンドスプレー(※以下、アルコールハンド除菌に呼び名を統一します)を見かけますね。
使用する人も回数も圧倒的に増えている今、この機会にちょっとデザイン的なUI目線からアルコールハンド除菌のユーザビリティを考えてみたいと思います。
※あくまでも個人的な視点になりますので、ご了承下さい。

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

アルコールハンド除菌の使用シーン6

パッとあげられる、よく見る使用シーン6パターンを簡単なユーザビリティの改善案(実現性の高いもの)を含めながら紹介していきたいと思います。

※基本的にハンドジェルは建物やエリアの入口内、入口外にあるものと前提としております。

1.人の出入りが多く見込まれる場所

例えば駅ビルや大型スーパーなどは出入口を多くの人がひっきりなしに行きかいますので、アルコールハンド除菌の使用される回数も多くなることから容量の多いスプレータイプや精製水やエタノールを使って大容量に手作りされたスプレータイプのものが置かれていることが多いなという印象を受けます。
また、人が多いと混んでしまう場合もありスルーしてしまう人いないとは言い切れませんね。こういう場所ではスピーディにアルコールハンド除菌を使用できる環境が必要と考えます。

それでは一度に使用できる人数を増やしてあげると利便性がよくなるのではと考えます。非常に単純明快ではありますが、複数置いてあるのは意外と少ない印象を受けます。また、2つ並んでいることはあっても3つ並んでいるのは稀な気がします。コスト面も、もちろん考えなければなりませんが一定期間だけでも増量できればユーザビリティ的にも良いかもしれません。
また、多くの人が通る場所であれば、一定の時間でさっと使用できる自動噴射式を取り入れてみるのも良いかもしれません。
もしかしたら普段意識的に使用しない人も、好奇心で使用してくれる可能性もあるかもしれません。

2.少々分かり辛い場所にある

今ではどこにでも置いてあるという認識も高くなり、アルコールハンド除菌をどこにあるのかと探したことはありませんか?
だいたいは入ってすぐ目につく場所に置いてあることが多いですが、通行を考えた上か、端っこにちょんと置いてあったり、柱や扉の位置で気づきにくかったりと、「わざわざ行かないと使用できない場所(ある程度の許容範囲は除く)」にあるのを見かけたことがあります。例えばあまり意識をしない人であればそのままスルーなんてことも考えられますので、基本的にはだれでもすぐに使えるようにする必要があると思います。

手っ取り早く分かりやすいのは意識的に目につく場所に移動させることですが、どうしても置く場所がない場合は、ただアルコールハンド除菌を置くだけでなく認識してもらえるように「ハンドジェルはこちら」「ご自由にお使いください」など、少しでも目に入りやすい環境を用意してあげることが望ましいと考えます。

3.まわりに物がある場所

アルコールハンド除菌の設置場所というものは限られてきてしまうので、どうしてもすぐ横に物(商品など)が置かれていることがあります。
そのため、アルコールハンド除菌を使用した際に液が飛んでしまうこともしばしば考えられます。人によっては商品を気にしてくれる人や、または全く目もくれない方と様々いると思います。
(よくよく見ると床が濡れていることも…)
こちらが意識的に注意することも可能ですがお店側でも気にかけてくれると安心して使用できる環境へ繋がるのではないでしょうか。

一番は置き場をしっかり考えることなのですが、難しい場合は周囲に液が飛んでしまう可能性のあるスプレータイプではなく、ジェル状のものを設置することが望ましいと考えます。ジェル状であれば液を周辺に飛ばすことなく、安心して適量を使用することができるのではと考えました。
また、簡単な防壁を置いてあげるのも1つの手かもしれません。
余談ですが、電化製品が周りにあるデスクまわりで個人的に使用する際はジェル状のものがオススメです。

4.中身が空で使えない

単純に中身が空になってしまっていたら意味がないですよね。
1日に多くの人が使用することが想定されるため致し方ないことなのではありますが、予防をしっかりおこなうためにできる限りこのような場面は無い方が互いに嬉しいものです。

すぐできる対応策として、中身が見えるタイプのものを使用して気づきのポイントを作ることを提案してみます。
また、自動で噴射されるタイプのものに使用回数がカウントされる機能なんかがあれば、連動して管理する側に連絡がいく仕組みがあればとても便利そうです。(開発が必要になってしまいますが……)
流行り風邪がある時は時間を決めて減りを確認するなど、徹底した管理が大事と考えます。中身がすぐなくならない様、1プッシュ(大体は1プッシュで適量だそうです)を提示したり、大容量のものを設置したりと、簡単な工夫で解消するかもしれません。
中身が空っぽだったとき、地味にショックを受けますから。

5.触らなくても良い

家外に置いてあるアルコールハンド除菌は、不特定多数の方が扱うものですので、物理的に誰かが触ったものを使用することになります。
もちろんその後すぐに、アルコールを手に付けるので問題ないとは思いますが、気にしてしまう人は少なくないようです。
それでは、どうすればよいでしょうか。

「1.人の出入りが多く見込まれる場所」の方でも、自動噴射式を紹介しておりますが、こちらは手をかざせば触れることなくアルコールハンド除菌を手につけることができますね。もちろん自動なので、通常よりはコスト面を考えねばなりません。
そんな中、画期的な装置に出会いました。単純な作りですが、足でペダルを踏むことでボトルのポンプ部分をプッシュしてくれるので触れる必要がありません。個人的に見かける場所としてスーパーが多いので食料品を手に取る場所と考えた場合、とてもユーザビリティにとんでいると思います。

6.しっかり確認

私事で体験していることでもありますが、飲食店に入店後、手指を除菌したことをしっかり確認したうえで案内されたことや、飲食店ではなくとも店外で、スタッフの方に手のひらにアルコールハンド除菌を適量貰ってから入店することもありました。

人の動きを把握できる規模であれば、確実性を求めてお店側が確認をしてくれるのはとてもありがたいことだと考えます。
特にコンビニやスーパーのように頻繁に行くことのない、イベント(可能なもの)や入店者が限られるお店(予約制など)では継続もしやすいと思いますので、多くの場所で実現してもらえると幸いですよね。
もちろんアルコールハンド除菌をすればすべて問題ないとは言い切れませんが、少しでも安心できる環境を整えるのは大事なことです。

7.設置の高さ

アルコールハンド除菌が置かれている高さに着目してみました。
一般的には、さほど気にならず使用できる高さではありますが小さな子の視点で考えてみると少々扱い辛いユーザビリティとなっておりました。

本当は大人用と子供用に分けて設置できたらユーザビリティにも良いと思いますが、使用する頻度として子供の方が少なくコストも二倍になってしまうので、現実的に考えて大人と子供の両者が共通して使用できるユーザビリティを提案してみました。
すべての店舗では難しくとも、ファミリー向けや子供がターゲットのお店では、子供に視点を置いて考えるのはそう難しくはないと思います。ご年配の方にも同様の対応ができるとなお良いですね。

最後に

アルコールハンド除菌は使用しすぎると肌荒れの原因にもなってしまうので、必要な範囲で適度に使っていきたいですね。
お出かけの際には、念のため自分の荷物に持ち運び用のアルコールハンド除菌を忍ばせておくのもグーです。

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

Photoshopで自動処理をする~アクションとバッチ処理を使う~

さっそくですが、Photoshopで同じ作業をたんたんと繰り返したことはありませんか?
今回はPhotoshopでの作業を効率化できる、アクションとバッチ処理について紹介していきたいと思います。

※あくまでも個人的な主観で書いております。
※動作確認/環境:Windows10

 
必要なところだけ読みたい方はこちらから↓

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

▼どんな作業に向いている?

一言で言ってしまえば同じことを繰り返す作業になります。
例えば…

・複数のデータに一定の文言や画像を配置
・リサイズ
・背景の白抜き、追加
・リネーム
・編集したデータの書き出し
・データの規格の変更(JPEG→PNG)

などなど。作業自体はカンタンだけれど、大量のものや、個数は少ないが1つ1つの作業が大変なもの等…あげれば沢山出てきます。
「この作業をカットできればラクになるのに」と思ったら検討してみるのもありかと思います。

▼アクションとバッチ処理とは?

■アクション…(今回の場合では)Photoshopでの自動化させたい内容を記憶させ必要な時に、すぐに使用できるもの
・バッチ処理を行う際に必要です。
・アクションパネルからでも選択した1つのファイルごとに自動処理が可能です。

■バッチ処理…アクションで登録している内容の範囲に対して繰り返し行う処理
・100枚のGIFファイルをPNGの規格に変更する必要があった場合、バッチ処理で自動的に作業させると効率的です。
・ファイルまとめての自動処理が可能です。

▼実践:画像をリサイズ

■上書き保存、別フォルダーに保存共通内容
(1)準備

最初にバッチ処理をおこなうためにアクションを作成します。
まずはアクションのセットを用意してしまいましょう。

(2)アクションの作成

・実際に扱うデータを1枚複製して、名前はサンプルとしてください。(ミスする可能性も念のため考えてサンプルを使用します)
・そのデータをPhotoshopで開きます。
・開いたら以下↓

(3)自動化する内容を記録

録画が開始しているので、自動処理化したい手順を実際に作業してください。
手順が完了したら、保存せずアクションパネルの停止ボタンを押します。

《!》途中間違えたり、迷って様々な箇所を触ってしまったりすると、それも反映されてしまうので一旦停止して最初からやり直すことを個人的にはおすすめします

■リサイズした画像を上書き保存する場合

ファイル→自動処理→バッチからバッチ処理のパネルを開きます。


アクションを実装するフォルダーと実装後のフォルダーを同じものを設定することで上書きをします。
確認し問題なければ《④OK》を選択してバッチ処理開始です。
ローカルの指定したフォルダーを開くとアクションが実装されていると思います。

■リサイズした画像を別フォルダーに保存する場合

上記バッチ処理後に上書きせず、参照したファイルは残しつつ別フォルダーを指定して保存することも可能です。
あらかじめ、リサイズ済(名前はなんでもOK)のものを入れる新規フォルダーを用意します。
②までは上書きをおこなう際のものと同様の設定になります。
③より新しく設定していきます。

▼実践:ファイル名のリネームパターン3

バッチ処理ではファイルのリネームもカンタンにできてしまいます。
リネームの設定自体は基本的に変わりませんが、今回は3パターンのシーン別に紹介していきます。

準備

今回はリサイズなどの処理はなしで、“ファイルのリネーム”のみを行いたいので、空(から)アクションを作成します。
というのは、バッチ処理のパネルで何かしらアクションの選択をしなければならないからです。

■①ファイル名の後に連番をつける



1.種類項目は「なし」
2.追加したい「_」を記載
3.種類項目は「3桁のシリアル番号」
4.自動記載されます
5.拡張子を選択(必須項目)
6.自動記載されます

設定を進めていくと、現在の設定状況も変化していきます。(黄色枠)
問題ない様でしたらOKを押してバッチ処理を開始します。
該当フォルダーを見て頂くと、リネームされていることが確認できます。番号で整理したい際にとても便利です。

■②ファイル名の前に日付を追加する



1.種類項目は「yyddmm」(その日の日付が入ります)
※日付を任意で指定したい場合は「なし」で入力してください
2.追加したい「_」を記載
3.種類項目は「なし」
4.追加したい「_」を記載
5.種類項目は「ドキュメントの名前」(今のファイル名)
6.自動記載されます
7.拡張子を選択(必須項目)
8.自動記載されます

設定を進めていくと、現在の設定状況も変化していきます。(黄色枠)
問題ない様でしたらOKを押してバッチ処理を開始します。
該当フォルダーを見て頂くと、リネームされていることが確認できます。作成した日をまとめて記載したい際に便利ですね。

■③ファイル名を完全にリネームする



1.種類項目は「なし」
2.追加したい「サンプル」を記載
3.種類項目は「なし」
4.追加したい「_」を記載
5.種類項目は「なし」
6.追加したい「風景」を記載
7.種類項目は「なし」
8.追加したい「_」を記載
9.種類項目は「2桁のシリアル番号」
10.自動記載されます
11.拡張子を選択(必須項目)
12.自動記載されます

設定を進めていくと、現在の設定状況も変化していきます。(黄色枠)
問題ない様でしたらOKを押してバッチ処理を開始します。
該当フォルダーを見て頂くと、リネームされていることが確認できます。
今回リネームできる項目をMAXに使ってみました。必須項目の拡張子を除くと5項目自由に設定ができますね。

▼最後に

アクションやバッチ処理に慣れてくると、複雑な内容にも自動処理を考えられるようになってきます。
リネームなども様々なシーンで使用できると思いますので、効率よく活用していきたいですね。
まずは基本的なところから使用して、自分なりの効率化を図っていければ幸いです。
次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

CSSで遅れて表示(遅延表示)『animation:delay』 効かない場合とアニメーションの作り方

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

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

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

スタイルシート(CSS)だけで実装できる、オブジェクト表示を遅らせる(表示遅延)『animation:delay』を使ったアニメーションの作り方と、効かない場合の間違いポイントを紹介します。

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

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


目次


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

ブラウザで表示させる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入力フォームのデザインサンプル_の作り方と設置で気を付けること

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


目次


フォームのサンプル

▶サンプル確認はこちら


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:スガ