スマホのボタン最小サイズと作り方【複数並べる場合】2019-2020

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つのアプリから届く通知と言っても、内容は様々かと思います。新着通知やお気に入り登録された通知、メンテ情報などアプリからの事務的な通知など。
ユーザーが知りたい情報だけ選択できるとよりユーザビリティが改善します。


おわりに

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

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

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

【 JPEGの容量を小さく / PNG GIF JPGの違い / ディザリング処理とは? 】PNG GIF画像をディザリングで極限まで軽くする方法

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円分給油がオススメ」など状況から判断できる選択肢を表示します。

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

給油の問題点

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

給油の改善案

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


おわりに


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

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

簡単!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フィルターには他にも「トーンカーブ」や「プリセット」など様々な編集機能があります。
興味がある方はぜひそちらも試してみてください!

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