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

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

みなさんは初めてセルフ式ガソリンスタンドを利用した時、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円分給油がオススメ」など状況から判断できる選択肢を表示します。

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

給油の問題点

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

給油の改善案

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


おわりに


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

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

簡単!Premiere Proの使い方【BGM・効果音編】

こんにちは!
今回のテーマは「簡単!Premiere Proの使い方【BGM・効果音編】」です。
Premiere Proで効果音やBGMを編集する方法や、動画に音を当てる際のちょっとしたポイントをご紹介したいと思います。

テロップの作り方について知りたいと言う方は、簡単!Premiere Proの使い方【テロップ編】もご覧ください!


使用するソフト

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


BGMを入れる

こちらのネコの動画にBGMを当てていきたいと思います。

まずは音源をPremiere Proに入れます。

プロジェクトパネルに使いたい音源をドラッグ&ドロップします。
「BGM.mp3」と言うクリップが出来たら、今度はそれをタイムラインパネルにドラッグします。

これでもう動画に音を当てることが出来ました。とても簡単ですね。
音源を入れること自体は簡単ですが、最も重要なのはこれから行う音の調整作業です。
動画の尺と効果音・BGMのタイミングを合わせたり、音の始まりと終わりにフェード処理などを掛ける作業です。

まずは動画と音源の尺を合わせます。
BGMが動画より少し長いため余分な部分を切り取ります。

音源の前後を切りたい時はタイムラインの「BGM.mp3」クリップの端にカーソルを合わせてください。
カーソルの表示が下記の図のようになりますので、それをドラッグしながら左右に伸縮させることで調整する事が出来ます。
動画の動きと音のタイミングを見ながらBGMの長さを調整します。

長さを揃えたら、次にBGMの始まりと終わりにフェードインとフェードアウトを掛けます。
「エフェクト」→「オーディオトラジション」→「クロスフェード」→「指数フェード」を選択します。
音源の前後に指数フェードをドラッグするとオーディオエフェクトが掛けられます。
オーディオエフェクト部分にカーソルを合わせると、尺を調整した時のように表示が変わるので、同じ要領で左右に伸縮させて調整を行ってください。

フェードイン・フェードアウトは必須事項ではありませんが、エフェクトを掛けることでより自然な流れで音を聞くことが出来ます。
音源の状態にもよりますが、エフェクトを掛けていないと音がブツッと途切れて聞こえ違和感を感じてしまうこともあるため、それを滑らかに調整してあげる役割があります。

これで動画にBGMを入れることが出来ました。
完成版はこちらです。


※再生ボタンを押すと音が出ますのでご注意ください。
※この動画はブログ掲載用に設定を調整しています。


効果音を入れる

こちらのカウントダウンの動画に効果音を当てていきたいと思います。

カウントダウンの数字が出現するタイミングに合わせて効果音を当てていきます。
まずは時間インジゲーターやプログラムパネルで数字が出現するタイミングを確認します。
今回は暗転から数字が表れるポイントが「5」の時は0:26秒、「4」の時は1:26秒、「3」の時は2:26秒部分だったので、そこから効果音が始まる、もしくは重なるように効果音クリップの位置を調整します。

音を合わせるポイントですが、このように動画でアクションが起きるタイミングと音が出るタイミングを合わせると噛み合う場合が多いです。
例えば暗転から映像が動き出すタイミング、あるいは映像内で何かがアクションを起こした瞬間など。
これらのタイミングで効果音を流したり、BGMの盛り上がるパートを合わせると良いです。

ただ、すべての状況でこれが当てはまる訳ではなく、動画によってはもっと柔軟に映像と音を合わせた方が良い場合もあります。
自分が作りたいものに合わせてタイミングを調整してみてください。

これで動画に効果音を入れることが出来ました。
完成版はこちらです。


※再生ボタンを押すと音が出ますのでご注意ください。
※この動画はブログ掲載用に設定を調整しています。


おわりに

いかがでしたでしょうか?

動画に音を合わせる時、なんとなく適当に付けるだけではもったいないです。
1秒ずらすだけで印象が変わることもあるので、ぜひタイミングをばっちり合わせてみて下さい!

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

ターゲットとサイトデザイン | UI/UXデザイン

こんにちは!
今回のテーマは「ターゲットとサイトデザイン | UI/UXデザイン」です。

ターゲットに向けてデザインするとはどういうことなのか、考え方のポイントをまとめてみました。

また、参考になるサイトとして、それらのポイントをしっかり押さえたデザインを展開する“歯医者さん”のサイトデザインをいくつかご紹介したいと思います。


なぜターゲットを決めるのか

WEBサイトをデザインするために大切なのは、まずはターゲットを決めることです。

そもそも、なぜターゲットを決める必要があるのでしょうか?
簡単にいうと、ターゲット(ユーザー)のニーズに合わせたUI/UX設計やプロモーションなどがしやすくなるからです。

ターゲットとは「この商品を買ってもらう人」を意味します。
企業によっては「このサービスを使ってもらう人」「このアンケートに答えてもらう人」などがターゲットとなります。

どのような人に買ってもらいたいのか、どのように使ってもらいたいのかを明確にすることで、デザインやプロモーションを行う際の優先度の決めや取捨選択をすることが出来ます。
製作段階で何か問題にぶつかった時も、利用者のニーズを指針に解決策を考えることが出来ます。


もし、ターゲットを決めなかった場合はどうなるでしょう?
ターゲットを決めて選択肢を絞るより、全ての人のニーズに答えた方が良いのでは?と思う方もいるかもしれません。

しかしそうすると、「ありきたりで特徴のないサイト」や「何がしたいのか、何が出来るのか分かりづらいサイト」となり、最終的にユーザーに使ってもらえないサイトになってしまいます。

全ての人のニーズに答えられれば良いのですが、様々な価値観を持った人たち全員に好まれる状態を作るのは難しい課題です。
何とか誰にでも受け入れてもらえるようにと思うと、とにかく無難、あるいはニーズの数だけ機能や要素を増やしていくことになります。

無難とは、ネガティブな言い方をすると特徴がないということです。
そうすると、類似サイトや溢れる情報の中で容易に埋もれてしまい、そもそも気づいてもらえない状況が発生しやすくなります。
また、機能は多ければ良いという訳でもありません。
機能が多すぎると、ユーザーにとって本当に必要な機能まで埋もれてしまい、見つけ辛い、操作し辛いなどのデメリットが出てきてしまいます。

このようなデメリットを解消するためにも、ターゲットを決めることはとても大切です。

こんな目的を持った人(ターゲット)に使ってもらいたい。では、この人に使ってもらうためにどのようなデザインにするべきか、を考えることがポイントです。


ターゲットと歯医者さんのホームページ

参考になるサイトデザインの例として、歯医者さんのホームページを挙げてみます。
こちらは前述のターゲットとサイトデザインのポイントをしっかりと分かりやすく対策しています。

歯医者さんのターゲットとはどのような人でしょうか?
歯科治療を受けたい人、だと当たり前すぎてものすごく多くの人が当てはまってしまいます。
もう少し絞って考えてみると、歯は痛いけど治療も痛いんだろうな…、何回か通わないといけないのかな…と、「少し不安な気持ちを抱いているターゲット」が挙げられます。

歯医者さんに行く際、このようなことを考える方も少なくないのではないでしょうか。

このようなターゲットに対して、必要最低限の内容で訴求してもなかなか来院してくれないのではないかと思います。

歯医者さんのサイトデザインで多く共通しているのが、そういった不安な気持ちを抱いているターゲットのために、サイトデザインで出来ることはどんなことなのか追及している点です。

具体的にどのような物なのか、とても勉強になるいくつか実例を紹介させて頂きながらお話したいと思います。


参考になるサイト:歯医者さんのホームページ

基本ターゲット:治療の痛みや治療期間などに対し、少し不安な気持ちを抱いている人


あいはら歯科医院:https://aihara-dental.jp/

こちらはビジュアル要素、特にファーストビューを効果的に使用したサイトデザインをおこなっています。

サイトに飛んでまず目に入ってくるのがメインビジュアルです。明るく清潔感のある院内や治療の様子がすぐに分かるようになっています。
大きく表示された「Be a smile」と言うキャッチコピーが印象的で、歯の治療を直接伝えるのではなく「笑顔をつくるお手伝い」という言葉に置き換えることで、患者ファーストな治療方針を端的に表しています。

ファーストビューで院内の雰囲気や治療方針がイメージ出来るため、患者に寄り添った治療をしてくれるかも?と不安を軽減させるデザインとなっているかと思います。

また、明度の高いビジュアルと簡潔な説明文の組み合わせでまとまっている他、じわりと浮かび上がるアニメーションが要所に使われているので、統一感と清涼感のあるデザインになっています。
PC版の場合、スクロールするとヘッダーメニューが付いてくる仕様もユーザーにとって利用しやすいポイントになっています。


星の歯科:https://hosino-dc.com/

こちらはターゲットをさらにセグメントし、子供やその家族のためのデザインをおこなっています。

全体のデザインとしては絵本のようなイラストとタッチ、アニメーションがとても可愛く印象的で、病院的なイメージをかなり減らしています。
歯医者さんに行くのを不安がる子供の気持ちに配慮し、出来るだけ怖がらせないように、楽しくなるようなデザインが施されています。

こんなに可愛いサイトを見たら、歯医者さんに苦手意識のある子でもむしろちょっと行きたくなるのではないでしょうか。

また、こちらの歯医者さんで治療を受ける際のメリットを7つのポイントとして分かりやすくまとめています。
営業時間やキッズスペースの有無、土足OKなど細やかな情報が載っている点がお子様連れの大人でも安心して利用することができます。

ファーストビューにカテゴリメニューや予約への遷移が揃っているため、情報の多さから分かりづらくなる懸念がある点も払拭しています。


きふね歯科:http://kifune-d.com/

こちらは院長先生が2人いると言うメリットをサイトデザインに反映しています。

サイトに飛んでまず目に入ってくるメインビジュアルには、院長先生2人が治療を行っている姿が表示されています。
ビジュアルやテキストから多角的な視野で治療をおこなっていることが分かるため、セカンドオピニオンなどの不安があるターゲットにも安心して利用してもらえるような工夫がされています。

治療方針や診察内容もTOPページに明示されているため、インフォームドコンセントに重きを置くユーザーにとっても信頼感のあるデザインになっています。


新田歯科:http://2tta.com/

こちらはTOPページからスクロールを排除したサイトデザインをおこなっています。

TOPページはスクロールが一切なく、必要な基本情報が簡潔にまとめてあるため、どこに何があるのかとユーザーが迷う心配がなくなっています。
第二階層からはスクロールが発生しますが、ページ内リンクを使用するなど遷移を最低限に抑える工夫がされています。

WEB予約が一般的になってきた歯医者さんに対し、WEBに不慣れな患者さんが出来るだけ迷わず、億劫にならずに利用できるようなデザインになっています。

またシンプルでWEBサイトとしては一見単調になりそうなところ、バックグラウンド全体をアニメーションをさせることによって動きのあるデザインになっています。


おわりに

いかがでしたでしょうか?
各サイト、ターゲットに対して様々な工夫を凝らしたデザインになっていたかと思います。

ターゲットを定めてサイトデザインをおこなうことで、歯医者さんは世の中に沢山ある競合他社の中から選んでもらうことが出来ます。
患者さんも、自分の状況に合った歯医者さんを見つけ選択することが出来ます。

サイトデザインを行う際は、こんな目的を持った人(ターゲット)に使ってもらいたい、この人に使ってもらうためにどのようなデザインにするべきか、を考えて進めてみてください!

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

【Webマーケティング】ランディングページとは

こんにちは!
今回のテーマは「【Webマーケティング】ランディングページとは」です。
ランディングページ(LP)の意味や作る時のポイントについて、Webマーケティングとデザインの観点からわかりやすく簡単にお話したいと思います。


ランディングページとは

ランディングページとは、簡単に言うと「ネット広告をクリックして遷移したページ」のことです。
ランディングページには2つの意味(※1)がありますが、Webマーケティングで一般的に使われているのは上記の意味です。

普通のWebページと何が違うの?と疑問に思った方もいるかもしれません。
こちらも簡単に言うと、「コンバージョンさせる事により特化したページ」になります。

コンバージョン(CV)とは「Webサイト上での最終的な成果」のことです。
具体的な成果ですが、これは会社によって変わってきます。
ECサイトであれば商品の購入、SNSなどコミュニティ系のサイトであれば会員登録、アンケートサイトであればアンケートへの回答、などなど。このような成果(ユーザのアクション)がコンバージョンになります。

次の項目では、ランディングページとコンバージョンの関係についてもう少し詳しくお話したいと思います。

※1:別の意味として「検索結果や広告など、リンクをクリックして最初にアクセスしたページ全般」を指すこともあります。こちらはより広義な意味を含んでいます。


ランディングページとコンバージョンの関係

サイトを運営しているからには是非コンバージョンして貰いたい訳ですが、ホイホイと簡単にして貰えるものでもありません。
特に決済や個人情報を入力しなければいけないサイトだと、ユーザーはコンバージョンに慎重になります。

そんな時、ユーザーにわかりやすく安心してコンバージョンしてもらう為にランディングページが必要になります。
もう少し企業側の目線で言えば、訴求力のあるページで離脱を少なくするために必要になります。

広告から来たユーザーは「この商品が欲しい」「この情報が知りたい」など、「何か1つの決まった目的」がある場合がほとんどです。
そんなユーザーに合わせ、必要な情報やメリットを分かりやすく伝えられるのがランディングページのメリットです。

例えば下記のような場合を見てください。

あるECサイトのキャンペーンで、ちょっと良いなと興味をそそられる物があったとします。
バナー広告をクリックした先のページが、ランディングページかTOPページだった場合、どちらの方がよりコンバージョンしたくなるでしょうか?

ちなみに、ここではコンバージョン=商品の購入とします。

このような場合、ランディングページの方が購入ボタンを押す人が多いと思います。
理由は、ランディングページの方が導線とユーザーメリットが単純明快だからです。

ランディングページはざっくり分けて3つの要素で構成されています。キャンペーン内容、コンバージョンボタン、商品詳細です。
また、余計なリンクがなく1ページで完結しています。
これはユーザーの知りたい情報やメリットを分かりやすくし、余計なリンクからの離脱を防ぐ効果があります。

一方TOPページは、バナー広告で訴求していた内容以外の要素が多く、知りたい情報がどこにあるのか分かりづらくなってしまっています。
また、商品を見つけてもすぐに購入が出来ない導線になっています。商品詳細ページへ行き、カートに入れて、購入ボタンを押す…など、コンバージョンに至るまでに何回も遷移が必要になります。
こういうページですと、回遊はされても最終的にコンバージョンに至らず離脱されてしまう可能性が高くなります。
サイトの顔であるTOPページとしては商品の豊富さが伝わって良いのですが、広告から来た「何か1つの決まった目的があって利用するユーザー」にとっては情報が多すぎて使いづらいことも…

補足として、TOPページがランディングページとして設定されている場合もあります。
最適化されていれば良いのですが、コンバージョンに直接関係しないリンクや情報が多いとその分離脱率も上がってしまいます。
ユーザーが離脱する要素を減らしたい!と言う場合は、ランディングページとして専用のページを作る方が良いと思います。


ランディングページを作る時のポイント

ランディングページを作る時のポイントを、ランディングページの3つの要素に分けてお話ししたいと思います。

ランディングページはざっくり分けて3つの要素で構成されています。キャンペーン内容、コンバージョンボタン、商品詳細です。

キャンペーン内容

キャッチコピー、メインビジュアル、メリット(簡潔に)など。
ユーザーの目的に合った、ユーザーが求めている情報を分かりやすく簡潔な文字とビジュアルで配置するとても大事な部分です。

キャンペーン内容と後述のコンバージョンボタンはファーストビューに全体が収まるようデザインして下さい。

何故かと言うと、ユーザーはファーストビューの内容でそのページを詳しく見るか見ないか決めるからです。
ファーストビューにユーザーが欲しかった情報が載っていないと、「なんだかちょっと違うな」「面倒くさいな」とすぐ離脱してしまいます。

また、ユーザーは基本的に流し読みします。
メリットなど重要なことがページの中間に書いてあっても、認識してくれない可能性が高いです。
下記はLPのヒートマップ事例です。

コンバージョンに繋がるような重要な情報は、ファーストビューにしっかり収めるのが適切です。

コンバージョンボタン

「購入する」「会員登録する」「申し込む」など、コンバージョンに直結するボタンです。
他の情報に埋もれないよう、色や形などボタンと一目で分かるようなデザインにします。

位置は基本的にファーストビューに収まるよう設置するのが望ましいです。
広告からモチベーションを高く持って来ているユーザーに出来るだけスムーズにコンバージョンしてもらえるようにするためです。
また、スクロールする手間を省くために、商品詳細で1項目終わった後やページの最下部など要所要所に設置するのも有効です。

商品詳細

言葉通りですが、商品の詳細を書きます。
1から10まで商品の詳細を書くのではなく、「この商品はユーザーにとってこんなにメリットがある!」と言うベネフィットが伝わるように書きます。
例えば「登録なしで使えます」「ダウンロードで通信料が掛からない」など、ユーザーにとってメリットに直結する情報や機能を簡潔に書くと良いです。
文章で長くなってしまう場合も2、3行に収まるように書くのが読みやすく適切です。


おわりに

いかがでしたでしょうか?
ランディングページを作りたいけどどういった物かわからなかった…と言う方は、ポイントを意識して作ってみてください!

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

【Photoshop】簡単!曇り空を青空にする方法

こんにちは!
今回のテーマは「【Photoshop】簡単!曇り空を青空にする方法」です。
Photoshopの編集・合成テクニックを使い、簡単且つ自然に写真の曇り空を綺麗な青空に変える方法をお話ししたいと思います。


構図は良いのに空の色が…

出先で撮った思い出の写真や、制作で使う為にネットで探した写真素材、構図は良いのに空が曇っていてイマイチ…と感じた事がある方も多いのではないでしょうか。

ありのままの写真の良さと言うのもありますが、仕事の制作物の場合、案件のコンセプト上どうしても青空が必要な時があります。
例えば「空と自然の写真を使って夏らしい広告を作って」と言われた時、使用する素材は曇ったような白っぽい空より青い空に白い雲の方が適切ですよね。

写真を自分で撮ったり、ネットの無料素材を探す場合、構図も色合いもイメージにピッタリ合う物を探すのは時間が掛かり大変です。

そんな時はPhotoshopを使って簡単に編集することが出来ます。


作業環境

今回使用した作業環境は下記の通りです。

■Photoshop CC 2019

※この記事ではPhotoshop CC 2019のプラグイン機能「Camera Rawフィルター」を使用しています。


Photoshopで曇り空を青空にする方法

曇り空を青空にする方法はいくつかありますが、今回お話しするのは下記の2種類です。

①Camera Rawフィルターで調整する。
②別の空の写真と合成する。

まず1つ目の「Camera Rawフィルター」についてですが、これは写真の明るさや色味を調整出来る機能です。
曇り空を青空にしたい時だけでなく、写真の細かい色味を変えたい時も簡単に編集する事が出来るのでとても便利です。

ただ、雲が分厚く空を覆っている写真など、場合によってはCamera Rawフィルターで調整しても不自然になってしまう時があります。
そんな時は2つ目の方法を試してみてください。

2つ目の「別の空の写真と合成」についてですが、そのままの意味です。写真の空の部分を、別の空と合成して差し替えてしまいます。
空の青さや雲のバランスなど好きな空が選べるので、より理想的な写真にする事が出来ます。


Camera Rawフィルターで調整する

Camera Rawフィルターを使って空の色を調整したいと思います。

まずはコチラの写真を見てみてください。

空全体に薄く雲が広がっていて、霞がかったようにモヤっとしていますね。
本当は青と白のコントラストがキレイな風景なんだろうなと言う事が分かるだけにとても勿体ないです。

写真をPhotoshopで開いたら、レイヤーを選択した状態で「フィルター」→「Camera Raw フィルター(Shift+Ctrl+A)」を開きます。
そうすると下記のような画面が出てきたかと思います。

デフォルトで「基本補正」のタブが開くので、こちらの機能を使って写真を調整します。

「基本補正」では色味や明るさなど様々な調整が出来ますが、特に便利なのが「かすみの除去」です。 
「かすみの除去」とは、その名の通り写真の中の霞や靄を減らしたり増やしたりする機能です。
霞に限らず、白くモヤっとした部分全体を補正してくれるので、色味を簡単に鮮やかに調整することが出来ます。

先ほどの写真を「かすみの除去」で調整するとこのようになりました。調整スライダーの値は+50です。

たったこれだけでかなり良い青空になったのではないでしょうか。
全体を覆っていた白いモヤがなくなり空の青さと白い雲の境界がハッキリしました。
他にも海の青さや緑の植物も色がくっきり見えるようになり、色鮮やかな写真になりましたね。

これで終わらせるのも良いかもしれませんが、影の濃さなどが気になるのでもう少し調整を行います。

基本補正の「ハイライト」や「シャドウ」で全体がもう少し明るくなるように調整し、「テクスチャ」と「彩度」でハッキリと鮮やかに見えるように調整しました。

これで完成です。
曇り空を青空に変える事が出来ました。

「基本補正」の各設定ですが、調整の加減は+50~-50の範囲が適切かと思います。
それ以上に数値を大きくすると、粒子感や白飛びなどが強く出てしまい却って不自然になってしまう事も多いです。
ただ「ハイライト」や「シャドウ」などその限りではない事もありますので、写真の状態に合わせて設定してみてください。


Camera Rawフィルターで調整する+α

空だけを調整したい、と言う場合は「選択範囲」を使ってみてください。

今からのこちらの写真の空の部分だけを調整したいと思います。

まずは空とそれ以外の部分(ビルや木)を分ける必要があります。
「選択範囲」→「色域指定」を開きます。

「選択:指定色域」で空の部分をスポイトすると、ざっくり選択することが出来ます。
「許容量」は100~200ほどの間で様子を見ながら設定し、だいたい空の部分が白、それ以外の部分が黒に分かれていれば「OK」を押してください。

ここまでの段階で、Photoshopの画面はこのようになっているかと思います。

雲が選択範囲外になっていたりビルの輪郭がザックリしているので、選択範囲の調整をします。
「選択範囲」→「選択とマスク」を開きます。「クイック選択ツール」で選択範囲の過不足分を調整します。
調整出来たら属性パネルの「出力先」を「新規レイヤー」に設定して「OK」を押します。

これでレイヤーパネルには、写真の元データと空だけのレイヤーが出来たかと思います。

後は空だけのレイヤーを選択し、Camera Rawフィルターで調整してみてください。
こうして出来た物が下の画像です。

青空が際立った事で、より爽やかで好印象な写真になったのではないでしょうか。


別の空の写真と合成する

次は、別の空の写真と合成して空の色を調整したいと思います。
Camera Rawフィルターの調整ではキレイな青空に出来なかった時や、雲のバランスに理想の形があった場合はこちらの方が簡単です。

例えばこちらの写真ですが、Camera Rawフィルターを使うとこのような感じになります。
雲が分厚く上手く調整が出来った為、違和感のある空になってしまいました…

工程としては、途中までは「Camera Rawフィルターで調整する+α」と同じです。
「選択範囲」を使って空とそれ以外の部分を分けます。

1つだけ違うのが、「選択とマスク」パネルで空を選択出来たら、属性パネルの「反転」を押して選択範囲を逆転させます。
こうすることで今度は空以外を選択した状態になりますので、「出力先」を「新規レイヤー」に設定して「OK」を押します。

これでレイヤーパネルには、写真の元データと空以外の画像レイヤーが出来たかと思います。

後は空以外の画像レイヤーの下に新規レイヤーを作り、そこに理想の空の画像を置いてください。

ただ置いただけだと明るさや彩度の違いから違和感を感じてしまう事もあるので、Camera Rawフィルターなどでトーンを合わせる調整を行ってください。
こうして出来た物が下の画像です。

夏らしい青い空と青い海の明るい写真になったのではないでしょうか。


おわりに

いかがでしたでしょうか?
今回お話しした2つの方法を使えば、自然に空の色を変えることが出来ます。
どちらの方法が正解と言うのはないので、自分の編集しやすい方法で試してみてください。

また、今回は使いませんでしたが、Camera Rawフィルターには他にも「トーンカーブ」や「プリセット」など様々な編集機能があります。
興味がある方はぜひそちらも試してみてください!

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

【レスポンシブ ハンバーガーメニュー コピペ CSS】ドロワーメニュー 2019 サンプル 作り方

【2019年版】
スマホ ハンバーガーメニュー CSSソースをコピペして使えます!スマホとPCのレイアウトをCSSで切り替えるレスポンシブと、モバイルファースト(スマホファースト)で必要不可欠なドロワーメニュー レスポンシブ/ハンバーガーメニュー CSSについて、JavaScriptやjQueryを使わずCSSだけでハンバーガーメニュー CSS(ドロワーメニュー CSS)を書いてます。


モバイルファーストは利用者UCD/UXを考慮した現代的な設計概念の意味を持ちます

ドロワーメニュー/ハンバーガーメニューとは?

スマートフォンの画面では、PCでは表示できる大項目のグローバルメニューがサイズの問題でそのまま表示できないため、ハンバーガーメニューアイコンを押すことで展開させるUIが必要となっています。

展開されるメニュー画面は、メイン画面外の「引き出し(ドロワー)」に格納されて隠されているためドロワーメニューと呼ばれています。

今回はテンプレート使用を想定したシンプルなサンプルページを作成してます。HTMLとCSSのソースも展開してますので参考になれば幸いです。
※ お見苦しい箇所が多々ありますのでご了承ください


サンプルページ

▶サンプルページはこちら

「HTMLソース」「CSSソース」


HTML要素の文書構造化はやるべき!

レイアウト崩れの問題に直面したとき、文書構造をビジュアルで確認することで解決できました。また第三者が作業を引き継ぐ状況においても有効と思われます。


初心者故に?詰まるポイント

基本部分の理解が足りていないためミスに時間をとられました。備忘録として今回の作業のポイントを残してますので
気になる部分があれば確認ください。


  1. ブラウザに既に定義されているデフォルトスタイルシートを確認
  2. 「物理プロパティ」と「倫理プロパティ」の違い
  3. HTML5タグの引き出し不足
  4. 参考(コピペ)にしたCSSの理解不足
  5. CSS「疑似要素」をつかう目的
  6. 「inline-block」使用による予期せぬ隙間対応
  7. 特定ブラウザ固有バグの存在による使えない表現
  8. 「inputタグ」の機能を利用してレイアウトを切り換える
  9. Firefoxで「max width」が効かない事象


▶ブラウザに既に定義されているデフォルトスタイルシートを確認

各ブラウザにはあらかじめuser agent stylesheetというデフォルトスタイルシート(デフォルトCSS)が読み込まれています。

それらはレイアウトを細かく弄りたい状況で邪魔になるときがあるので、代表的なCSSリセットで効果を消したり、独自のCSSリセットをつくる人もいます。
今回はレイアウトする上で影響があるuser agent stylesheetを、把握する意味も兼ねて都度消しています。

さらに「全称セレクタ」などCSS効果反映の優先度もあり注意したいところですが、設定しているのに効かないスタイルがある場合は、
htmlが見難くなるので推奨しませんが、その対象タグに近い場所に直接「インラインスタイル」で記述すれば適応優先度が上がります。

また「物理プロパティ」で値を記述しているのに表示が効かない場合は「倫理プロパティ」により別角度で設定がされている状況が考えられますので十分確認します。
※編集の手間を少なくする目的で、適切なセレクタをつかう

検証画面はブラウザ上で右クリックするなどして「検証」を選べば確認できます↓

リストに戻る↑


▶「物理プロパティ」と「倫理プロパティ」の違い

下記CSSソースのはulとh1にタグに対してデフォルトのスタイルをリセットするスタイルです。

「margin-top: 0px;」が、見慣れた「物理プロパティ」での記述
「margin-block-start: 0px;」が、「倫理プロパティ」での記述です。

ul,h1 {/*レイアウト崩れを防ぐためにデフォルトスタイルシートをクリアー_物理プロパティと倫理プロパティ記述*/
	margin-block-start: 0px;
	margin-top: 0px;/*EDGE対応*/
	margin-block-end: 0px;
	margin-bottom: 0px;/*EDGE対応*/
	margin-inline-start: 0px;
	margin-left: 0px;/*EDGE対応*/
	margin-inline-end: 0px;
	margin-right: 0px;/*EDGE対応*/
	padding-inline-start: 0px;
	padding-left: 0px;/*EDGE対応*/
}


表示結果はどちらも同じですが概念が違っています↓

今回、作業を進めていく中、デフォルトスタイルシートに特定ブラウザで効果がでる倫理プロパティの設定が存在し、リセット対応しました。

リストに戻る↑


▶HTML5タグの引き出し不足

文言を訴求するだけの特集ページを作る機会が多く(極端な場合全てが画像でも問題ない)、「inputタグ」「formタグ」などユーザーアクションが必要なページを作成する機会がありませんでした。

inputタグは本来はラジオボタンやチェックボックス機能として入力部分に使用するタグですが、今回のドロワーメニューの出し入れの「判別」に使用する知識がありませんでした。

リストに戻る↑


▶参考(コピペ)にしたCSSの理解不足

今回参考にさせていた「ドロワーメニューのソース」をコピペしただけでは、カスタマイズして組み込む段階で詰まりました。

ソースと向き合って「動き」と「意味」を理解してはじめて最適化させることができたので、レイアウトデザインをおこなう状況では機能理解は必要でした。

リストに戻る↑


▶CSS「疑似要素」をつかう目的

HTMLソースは可能な限り見やすく編集しやすく、かつSEOのために可能な限りシンプルにしますが、そこで必要になるのがHTMLの記述に関与しないスタイルシート上だけに存在する「疑似要素」です。

「レイアウト」と「機能の組み込み」の為に重宝するようです。

クラスセレクタ等の後ろに「:before」「:after」をつけることで、「意味を持たない、HTMLに記述する必要がない疑似的なタグ要素」を追加できます。※CSS2を考慮した場合は「:before」(コロン1つ)。完全にCSS3向けで記述する場合は「::before」(コロン2つ)

「レイアウトの装飾」に使う場合は、ボタンの「押せる感」「遷移する感」を後押しする「矢印マーク」などの装飾部品を「画像」ではなく「システムで表示」が出来ます。

HTMLのソースに影響がないので検索エンジンの巡回ロボットに無駄に寄り道させる必要させることがなく、ソースが複雑化してページ評価も下げる心配もありません。

つまりはデザイナーがUX向上のためにページビジュアルに組み込める付加価値になります!

今回の用途ではキービジュアルに画面スクロール時の動きのインパクトを与える「固定表示」にする際、一部のブラウザで固定されない事象(ブラウザ依存)が発生したので、その不具合対応に使っています。
※SafariのiOS発生する、「background-attachment:fixed」が効かない不具合(画像固定が効かない)

※バナー画像については、そもそも一枚画像で全て作ってしまうことも可能ですが、画像更新の手間とSEOを考慮する必要はあります。
さらに、動きをつけたり動的要素の組み込みの制限や、表示する端末によって解像度不足や読み込み時間増など品質の影響を受けるデメリットが考えられますので、可能な限りCSSでの作成を進めています。

リストに戻る↑


▶「inline-block」使用による予期せぬ隙間対応

「h1」のタイトルスペースと「#nav-open」の隙間がどうしても空いてしまう事象への対応

CSS
#nav-open
内の

display: inline-block;


が影響しておりました。

inline-blockである必要性がなかったので

display: block;


に変更して対応しました。

#nav-open {
	display: block;
	height:0px;
	}


inline-blockに設定されていたことで予期せぬ空白が出来ておりました。

inline-blockの特性を理解して適切に使う必要があります。

リストに戻る↑


▶特定ブラウザ固有バグの存在による使えない表現

nav id="nav-drawer"


にドロップシャドウをCSSで設定すると、
heightが100%で表示されているはずのドロワーメニューの表示に不具合が出てheightが小さくなってしまいました。

こちらも特定ブラウザに発生する不具合の可能性があるようなので、
ドロップシャドウをかける対象を変更するなど代替要素を追加して、今後対応進めていきます。

リストに戻る↑


▶「inputタグ」の機能を利用してレイアウトを切り換える

<input id="nav-input" type="checkbox" class="nav-unshown">


inputタグのtypeをチェックボックスにすることで、
特定要素へのアクションにより表示を切り替えることができます。

#nav-input:checked ~ #nav-close {


チェックが入った状態でスタイルを切り換えることで、
ドロワーメニューの開閉を再現しているそうです。

CSSはいろいろ出来ますね。


html

<nav id="nav-drawer">
	<input id="nav-input" type="checkbox" class="nav-unshown">
	<label id="nav-open" for="nav-input"><span></span></label>
	<label class="nav-unshown" id="nav-close" for="nav-input"></label>
	<div id="nav-content">
		<ul class ="nav_box">
			<li class ="nav_text"><a href="リンク先のURL">TOP</a></li>
			<li class ="nav_text"><a href="リンク先のURL">Contents01</a></li>
			<li class ="nav_text"><a href="リンク先のURL">Contents02</a></li>
			<li class ="nav_text"><a href="リンク先のURL">Contents03</a></li>
			<li class ="nav_text"><a href="リンク先のURL">other</a></li>
		</ul>
	</div>
</nav>


CSS

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;/*透過具合*/
	}

#nav-input:checked ~ #nav-content {
	left: 0;
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}

リストに戻る↑


▶Firefoxで「max width」が効かない事象

参照したドロワーメニュー/ハンバーガーメニューのソースコードに、SP表示時、ドロワーメニューの開き具合を端末幅で最適化する目的で「max width」が組み込んであったのですが、
Firefox で特定条件でmax widthの設定が効かないため、色々回避策あるなかで対応するのではなく、今回は単純に「width」設定に戻しました。

レイアウト具合にこだわりがある場合は対応策を設定する必要があります。

参照元⇒「Firefox で max-width が効かないときの解決法 – SeijiNIshiwakiの日記」

リストに戻る↑


さいごに

PCを触らない人が増えているなか、それでも一定需要と確かな利用シーンがありますので、
今後もSP⇒PCそしてタブレットも含めたレスポンシブの最適化を進めていきます。

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

2019/2/12~15 PIショー出展のお知らせ(dgift)

開催期間中は、dgiftの魅力を体験していただくためのキャンペーンを実施いたしました。 この度は弊社ブースへお立ち寄りいただき誠にありがとうございました。

2019年2月12日(火)~15日(金)、デジマースが運営しているデジタルギフトサービス「dgift」は「第59回プレミアム・インセンティブショー春 2019」に出展します。

開催期間中は「dgift」の魅力を体験していただくためのキャンペーンの実施を予定しています。是非この機会にお立ち寄りください。

会期:2019年2月12日(火)~15日(金)

時間:2月12~14日 10:00~18:00 15日 10:00~16:00

会場:東京ビッグサイト 西3・4ホール

小間番号:西4-T15-03

<dgift(ディーギフト)とは>

全国のコンビニエンスストア商品や高級食材・家電などのプレゼントを、web上で即時付与(即時抽選)できるデジタルギフトサービスです。スマホアプリのインストールの特典や携帯ショップ・家電量販店での来店特典、資料請求のお礼、資料請求などの幅広い用途で利用いただけます。

今回ブースにお越しいただいた際には「販促・集客・マーケティング」という観点から、今話題のデジタルギフトとそれを活用した集客支援ツールをご案内させていただきます。

dgiftのサービス紹介はこちら
https://www.dgift.jp/

タイトルロゴ風 文字デザインをしてみよう vol.2

こんにちは!ユイPです。
今年は年女なので昨年以上に猪突猛進で突っ走っていきたいと思います。よろしくお願いします!

さて、今回のテーマは「文字デザインをしてみよう」です。Vol.2と書いてあるように第二弾です。
前回は白黒文字オンリーで文字作りの基本を紹介しましたが、今回は色をつけて「この2つが出来ればロゴっぽくなる」という効果を紹介していきます。


★使用ソフト:Adobe Illustrator CC 2019


Illustratorでの詳しい基本の文字の作り方はタイトルロゴ風 文字デザインをしてみようの記事で詳しく説明しているのでここでは簡潔に文字のみで説明します。
★更に文字の基礎編⇒文字デザインをしてみよう Vol.0 文字組みの基礎

「テキストツールで文字を打つ」→「選択してアウトラインを作成」→「グループ解除」を行って文字を一文字ずつ動かせる状態にしていればオッケーです。


その① グラデーションをかける

グラデーションはロゴのテッパンですね。ちょっとかけるだけでそれっぽくなると思います。

①まず上の通りにベースとなる文字を準備します。ベースの色は基本的になんでも大丈夫です。

オブジェクト選択ツールで文字を選択→文字の塗りを○のついている部分を押してグラデーションにします。

グラデーションの調整はこのグラデーションパネルで行います。パネルの説明はざっくりですがこんな感じです。

③文字の塗り部分をグラデーションにし、パネルで色などの設定を行ったら、○のついているグラデーションツールでグラデーションを調整していきます。オブジェクトを選択してグラデーションをかけたい方向にマウスをドラッグしていきます。パネルから角度指定でも出来ますが、ドラッグの方がさくっと出来る気がします。そこはお好みで。

文字全体に一気に下方向からグラデーションをかけてみました。こんな感じになります。いちごチョコレートって感じの色合いになりましたね~。

全体に一気にかけるだけでなく、一文字ずつかけるとまた雰囲気が変わってきます。グラデーションツールでグラデーションをかけたい文字を選択すると黄色の○のようにバーが出てくるのでここで色の幅や向きを調整してみてください。

これだと一文字ずつチョコがかかっているみたいになって可愛いですね~。

方向を変えたり色を増やす事でグラデーションの幅は広がってくるので色々と試してみてください!


縁・影をつける

文字に縁、影をつけていきます。単体で使う事もありますが、今回は両方盛りで私がよく使う効果を例に紹介します。

①通常通り文字を用意します。漢字で書くといかついけど平仮名にするとなんかかわいい。
今回は文字を変形および解体した後は、もう一度オブジェクトをグループ化してください。

レイヤーをもう一つ作成して、1のレイヤーの下に引きます。そうしたら文字をコピーして、下のレイヤーに「同じ位置にペースト」します。
上のレイヤーは動かないようにロックをかけておきます。

③アピアランスパネルを開き、右下の「新規線を追加」で線を追加します。これで文字に肌色っぽい縁がつきました。太さや線の形状(線パネルで調整出来ます)はお好みで!

②、③を同じ手順で繰り返して更に太めの枠をつけます。白枠の予定ですが見えやすいようにとりあえず赤にしておきます。

⑤オブジェクトを選択して「効果」>「スタイライズ」>「ドロップシャドウ」を選択します。プレビューを見ながら好きなように影をつけてみてください。

太枠を白に戻して、完成です!

ドロップシャドウを使わなくても、縁を重ねるだけで色んな表現が出来ますね。「スタイライズ」には他にも役立つ効果が色々あるので試してみてください。


「グラデーション」「縁・影」の簡単なやり方2つを紹介しました。
という事で、サンプルとしていくつかロゴを作ってみました。前回の記事で作った際に気に入っていたロゴにも色をつけてみました~。

使っている効果はグラデーション、縁、ドロップシャドウ、光彩、ワープ(アーチ)のみです。
簡単な表現だけでも結構ちゃんとロゴっぽくなっているんじゃないかな?と思います。

こんな感じでお手軽ロゴ、是非作ってみてくださいね!


「文字デザインをしてみよう vol.2」ユイPがお送りいたしました。ずっとやりたかった!ようやく書く事が出来ました~。
Vol.1のタイトルロゴ風 文字デザインをしてみよう、Vol.0の文字デザインをしてみよう Vol.0 文字組みの基礎の記事と合わせてよろしくお願いします!

それでは、みなさまよいバレンタインを!また次回!


<使用させて頂いたフリーフォント>
「チェックポイント★リベンジ」
よく飛ばない鳥 / マルセ / http://marusexijaxs.web.fc2.com/
「マキナス Scrap 5」
もじワク研究 / https://moji-waku.com/index.html

<それ以外のフォント>
モリサワフォント


★ゆるーくつぶやいています デジマースブログ公式Twitter

簡単!なめらかなアニメGIFの作り方

こんにちは!
今回のテーマは「なめらかなアニメGIFの作り方」です。

アニメーションGIF(以下、アニメ GIF)のメリットとして、WEBサイトのUXを高める事はもちろん、クライアントへのプレゼンテーションや、エンジニアへ動的なイメージを伝える時に便利な事が挙げられます。

そんなアニメ GIFを、Photoshopで簡単になめらかに作る方法についてまとめました。

作るのが難しそう、Adobe Animateなど専門のソフトが必要なのでは?と思う方もいるかもしれませんが、Photoshopでも簡単に作る事が出来ます!


なめらかなアニメGIFとは

アニメ GIFをざっくり2つに分けると、「カクカクタイプ」と「なめらかタイプ」があります。
2つの違いを簡単に言うと「フレーム(コマ)数が違う」です。

フレーム(コマ)数とは、動画やアニメ GIF内で表示される静止画の数です。
アニメGIF とは、静止画(GIF形式)を連続して表示させることでアニメーションに見せています。

カクカクタイプは、シンプルで単純な動きの物です。
最低でも画像を2枚用意すれば作れてしまいます。画像を交互に連続して表示させれば動かすことが出来ます。

なめらかタイプは、フレーム数が多くなればなる程なめらかに動きます。
1秒間に24~30フレームあればなめらかに動いて見えますが、容量を抑えたい場合は15フレーム程にする事もあります。


PhotoshopでアニメGIFを作る

Photoshopでアニメ GIFを作る方法は2種類あります。
「フレームアニメ―ション」と「ビデオタイムライン」です。
フレームアニメ―ションは、シンプルで単純な動きのカクカクタイプのアニメGIFを作るのに適しています。
ビデオタイムラインは、なめらかな動きや複雑な動きのアニメGIFを作るのに適しています。今回はこちらの作り方をご紹介したいと思います。

ちなみに、フレームアニメ―ションでもなめらかなアニメGIFを作る事は出来ます。
ですが、ビデオタイムラインに比べると手間が掛かったり、思った通りのなめらかさにならない場合があります。
そのため今回は、より簡単なビデオタイムラインを使用して作りたいと思います。


作業環境は下記の通りです。

———————

■ Photoshop CC 2019

———————

それでは早速作ってみましょう!


タイムラインパネルを準備する

Photoshopを開いたら、>ウィンドウ>タイムライン でタイムラインパネルを開きます。
もしくは、 ウィンドウ>ワークスペース>モーション でも開くことが出来ます。

タイムラインパネルを開いた直後はデフォルトで「フレームアニメ―ションを作成」する設定になっていますので、「ビデオタイムラインを作成」を選択してください。


ワークスペース

ワークスペースはこのようになっています。

■アートボード
通常のPhotoshopと同じです。画像が表示される画面であり、移動や加工などの編集、アニメーションを再生して動きの確認も出来ます。

■レイヤー(タイムラインパネル)
レイヤーパネルと連動したオブジェクトが表示されます。ここで「変形」や「不透明度」などのキーフレームの操作が出来ます。

■時間の設定
時間インジゲーターの操作やキーフレームの設定、時間の長さを変更出来ます。

■その他の編集パネル
アニメーションの再生やオブジェクトの分割、フェードエフェクトなどを付ける事が出来ます。


オブジェクトを配置

レイヤーにオブジェクトを配置します。今回は例として図形ツールで描いた円を配置しました。

1点注意ですが、図などは基本的にスマートオブジェクトに変換して編集してください。スマートオブジェクトに変換しないと「変形」などの編集が出来ない為です。


キーフレームの設定

ここで言うキーフレームとは、アートボードで行った編集やレイヤーパネルで付けたエフェクトを、動画の特定の位置に記録させる物です。

タイムラインパネルのレイヤーを開くと、「変形」「不透明度」「スタイル」の項目が出てきます。
各項目の役割は下記の通りです。

■変形
オブジェクトの形や向き、位置を設定する。

■不透明度
オブジェクトの透明度を設定する。

■スタイル
レイヤースタイルを設定する。

「変形」を使ってオブジェクトを左右に動かしてみたいと思います。
まずは時間インジゲーターを操作して、キーフレームを打つ位置を決めます。

時間インジゲーターで位置を取りながら、順繰りにアートボードでオブジェクトを移動させます。

これをGIF形式で書き出せばなめらかなアニメGIFの完成です!


GIFアニのパターン

キーフレームを設定する事で、下記のような表現をすることも出来ます。
一例として参考にしてみて下さい!

■変形

■不透明度

■スタイル


応用編

ここまでの作り方を組み合わせる事で、下の図のようなちょっと複雑なアニメGIFも作る事が出来ます。

このアニメGIFをWEBサイトのアクセントとして組み込んでも良いですし、UXの提案やコーディングの確認がしたい時のコミュニケーションツールとして使う事も出来ます。


おわりに

いかがでしたでしょうか?
1つ1つの動作を付けるのは、思ったより簡単だったのではないでしょうか?

ちなみに、GIF アニメとはアニメーション GIF(またはGIF アニメーション)の略です。
GIFの読み方ですが、「じふ」と読む人と「ぎふ」と読む人がいますが、正式には「じふ」です。

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

傘はどうして持ち主の手から離れてしまうのか

ふと気が付いたら、傘が無い!なんてことを経験したことがある人は意外といるのではないでしょうか。
置きっぱなし、取り間違え等様々なシーンが考えられます。

早速ではありますが、
「傘はどうして持ち主の手から離れてしまうの?」
「本人が無くしたからでしょう!」

と声が聞こえてきそうですが、今回はユーザビリティ目線で個人的な解釈ではございますが考えてみたいと思います。

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

無くなる時どんな時?

どういった場面で傘は手元からなくなりやすいのか少しばかり調べてみました。

・取り間違い
・破損
・紛失
・置き忘れ
・どれだか分からなくなった
・雨が止んだら傘の存在を忘れていた
・置き忘れたけど取りに行くのが面倒くさい
・落とした

などでした。大体予想通りです。
さらに言うと、電車内や公共の場での傘立てで、傘とサヨナラしてしまうケースが多いような気がします。

それならいっそのこと傘を離さず置かず持っていれば?手に括り付けてしまえばいいのでは?……うーん。そうしてしまえば無くなりはしませんがとても現実的ではございません。
無くさない様に気を付ける!……ことが出来れば苦労はしません。
では一体どうしたら良いのでしょうか。

利用シーン3パターン

どんな場所、どんな時に無くなってしまうのか、よくある利用シーンごとに改善、対処法をユーザビリティの目線で考えてみました。

1.電車内に置き忘れてしまう<長い傘編>

電車内の椅子の端っこに座っている人、または立っている人に多く見られることがあるのではないでしょうか。
気づけば傘だけがポツンと手すりにかけられているのを何度目撃したことか…。その場で気づいてあげれば、渡してあげることもできますが、なかなか難しいものです。

電車内では常に傘を手に持っていることを心掛けることができれば忘れない方法として手っ取り早いですが、人間なかなか意識を変えるのは難しいですよね。

……それでは傘の手元(持ち手のこと)に注目してみてください。
よくあるJ字になっている手元、改め曲がり手元、実はこれが電車内に傘を置き忘れてしまう原因の1つではないかと考えます。

この持ち手とても便利ですよね、持ち運ぶときに腕にスッとかけられ、傘を干すときにもひっかけられたり何かと便利です。
とにかく持たなくてもひっかけて使用することが出来るので、電車内で特に濡れた傘なんかを持っていたら、掛けられそうなところがあれば掛けて、少しでも手持ちを減らし優雅な電車移動を望むのではないでしょうか。

それでは、そのまま寝てしまったら、スマホなどに夢中になってしまったら、既に雨が止んだ後であれば等、傘の存在が薄くなってしまいますよね。そのまま降車時にさようならということになり兼ねません。

「じゃあどうすればよいの?
傘に鈴をつけて気づきポイントを作ればいいの?」

確かに無しではないですが原始的な方法でなく、傘の手元のユーザビリティを違う目線から考えてみましょう。持ち手がひっかけられる形をしているのであれば、そうさせなければいいことです。

寸動手元、折り畳み傘なんかでは見かける方も多いのではないでしょうか。この手元であればひっかけることはできませんよね。そのため必然的に手で持っていなければならないスタイルが確立されます。
こうすれば仮に手から落ちても気づきやすく、置き忘れの心配が改善されるかもしれません。

2.電車内に置き忘れてしまう<置き傘編>

置き傘も曲がり手元のものであれば、長い傘同様にひっかけられるので同様のことが起こり得る可能性がありますよね。
それなら、こちらも曲がり手元でないものにすれば良いのではと考えますが…

…が、置き傘は小さくコンパクトなため、長い傘と違って手元に関係なく、電車内の物置棚や椅子に置けてしまう場合があります。

これでは置き忘れてしまう可能性は重々にあります。それではどうすべきか。

「すぐにでも鞄に入れたくなるようにする!」

鞄に入れたくなるということは鞄に入れても特に気にならない、邪魔にならない状態が望ましくなります。
それでは仮に折りたたんだ後がもっと細ければいかがでしょうか。もし……キュウリくらいの細さに収まれば、鞄の中でもかさばることも少ないですし隙間に入りやすくなるのではと考えます。

細ければ上記の図のような、電車内の荷台に乗せることは傘自体が細くなることで隙間から落ちてしまう可能性があるので物理的にも難しくなります。また、置き傘が細くなることで全体サイズも小さくなり、椅子にポイッと置く行動も少なくなるのでは?と思います。

補足ですが、強度などの問題を考え調べてみたところ細い置き傘は実際にあるようですね!約3.5センチほどで強度も申し分ないようです。

3.取り間違い

公共の場の傘立てで、取り間違いによる紛失を経験された方は知らないだけで結構いるのかもしれません。
この場所に置いたと認識していても、類似する傘が周辺にあれば意図しなくても間違って持ってってしまい、後に気づくもどうすることもできない……など、個人が気を付けていても防ぎようがない部分もあります。美術館などのカギがついてる傘立てであれば万事解決ですがなかなかそうはいきませんよね。

「ではどうすれば、取り間違いに巻き込まれないのか。」

いっそのこと傘立てを使わない。ユーザビリティを提案します。


室内をぬらさず、荷物の1つとして持ち込めればおおよそ問題はないと考えます。それでは長い傘にも置き傘のようなカバーをあらかじめ付けた状態のものを用意する(販売する)といかがでしょうか。


傘ケースを傘に取り付けられるようにすれば無くし辛くなりますし、さほど邪魔にはならないのではないでしょうか。

ユーザビリティの観点から見ても傘ケースがあれば、余ほどのことが無い限り傘立てに入れる必要がなくなりますし、常に傍らに置いておくことが出来るのではと考えました。

これらはあくまでも私的な考えですが、こうであれば使いやすいなと考えるのはとても楽しいですね。
傘を忘れやすい人は色味の目立つものやあえて高いものを使用して意識を高めるのも効果の1つだと思います。

最後に

意識しなくてもこんな傘だったらたら、無くしにくいのにな……と考えるといろいろな案が出てきます。個人が気を付ければ一番早いですが、人間難しいものです;
実際、傘が手元から離れてしまうことを100%なくすことはできませんが色んな考えによって、減少させることはできるかもしれませんね。また、ユーザビリティをいつもとは違った目線で考えてみると傘だけに留まらず、意外な突破口があったりするかもしれません。
次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ