ゴミの分別について~ユーザビリティを考えてみる~

ゴミの分別がされていないゴミ箱を見かけたことがある方は多いのではないでしょうか。缶を捨てるゴミ箱にビニール袋が突っ込まれていたり等々…。ちゃんとゴミ箱のルールを守っている方たちからしたら個人の力ではどうすることもできないもどかしい問題のように感じられます。

さっそく、
「結局は本人が気を付けて捨てるしかないのでは?」
「そうなのだけれど…それが出来たら困らないのです!」

と聞こえてきそうですが、今回はそんなゴミの分別について個人的な解釈ではございますが考えていきたいと思います。

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

▼どんな時に分別されにくいの?

どういった場面でゴミが分別されにくいのかピックアップしてみました。

・とにかく今すぐ捨てたい
・該当するゴミ箱が周囲になかった
・ゴミ箱がいっぱいでとりあえず隣に捨てた
・既にほかのものが入っているとき(みんなもやってるなら)
・面倒くさい
・だれも見てない捨ててしまえ
・ゴミ自体がどのカテゴリのものか判別できなかった
・間違って捨ててしまったがゴミ箱に手を入れたくない

etc

例えば先ほどまでキレイだった、ティッシュやお菓子の入っていた包み紙等、用が無くなれば一瞬でゴミと化してしまいます。そうすると「いつまでも持っていたくない、汚い、邪魔」などの気持ちが出てきますよね。そんな時、近くに捨てる場所があればよいのですが。
「持ち帰って捨てる、捨てられるところがあるまで持っている」ことが出来れば言うことなしですが、人間皆全てに求めるにはなかなか難しい内容です。そうでない場合、分別関係なしに捨ててしまえと思いやすくなってしまうのではないでしょうか。今回は触れませんが、面倒くさいという気持ちが強くなればポイ捨てにも繋がる可能性もあります。
これらを一言で言うとゴミ捨てに対する意識が低いのではないかと考えます。

▼改善案パターン2

本来であれば、個人個人が気を付けてゴミを捨てればいいだけの話ですが、なかなか難しいのが現状です。
いくら大きな文字で表示したり「ゴミは分別しないとダメ!」と大きな声を上げても最終的にはその人本人の精神論になってしまいます。
であれば、ゴミ箱側が捨てる人に対して分別するように誘導出来たらいかがでしょう。よくあるゴミ捨てシーンごとに改善、対処法をユーザビリティ目線で考えてみました。

1.空き缶・ペットボトル

自販機の横にあることが多い、空き缶とペットボトルのゴミ箱。
最近では空き缶やペットボトル以外のものが捨てられない様に、昔よりもゴミ捨ての入り口を対応する物しか通らないサイズに工夫されていますよね。
ですが、これらを無視してビニール袋が突っ込まれていたり、ストロー付のプラカップが捨てられていたりするのを見かけることはありませんか?

「どうにか防ぐ方法はないの?例えば監視カメラを設置するとか」
「全てのゴミ箱と考えた時、効率的ではないですね。管理者も必要になるわけですから」
「うーん…」

それでは、何を捨てたかしっかりと見えるようにするのはいかがでしょうか。
シンプルな方法ですがゴミ箱の中身を見えるよう完全スケルトン形式にすることで捨てる人、捨てない人もさりげなく自然とゴミ箱の中身に意識が向けられるのではと考えます。その状態でペットボトルだらけの中にお菓子のゴミを捨てようとする人はそうそういないのではないでしょうか。
文字だけで大きく指示するよりも実際にこういうものだよ、と視覚的に見える形で指示してあげた方がユーザーにも伝わりやすくなります。分かりやすくてユーザビリティとしても良いと思います。
また、ゴミの種類は限られているため(ペットボトル、空き缶など)見た目の汚さはさほど感じられず、通り道にあっても気にならないですね。

2.よくあるゴミ箱

下記のようなゴミ箱を見たことある人は多いんじゃないでしょうか。

※図表として簡略化しています。


燃えるゴミと燃えないゴミとその他カテゴリの組み合わせで設置されることが多く、駅などの公の場でよく見かけますね。
これらはフタが無いことが多く、捨てる側としてはいちいちフタを開ける必要がないため、手も汚れずユーザビリティとして良い印象を受けます。
その反面、ゴミを捨てるときに中をチラリと見るとわりと分別関係なく捨てられているなと思うことも無きにしも非ずです。

あくまでも個人的な主観ですが、
・ゴミ箱が同じ形でかわり映えしない
・淡々としたカテゴリ表示
・目線に近い捨て口よりもカテゴリ表示が下にある為、視線が捨て口の方へ先にいく(捨て口の方が優先度が高い)
・実は捨て易すぎるオープンな捨て口

なども原因の1つと考えることができるような気がします。
それでは早速ですが、これらを踏まえて少しでも分別を意識させられる様なものを考えてみたいと思います。


こんな感じになりました。形を変えなくても部分部分にメリハリをもたせることでぱっと見た時に分かりやすくなりました。

【1】カテゴリ表示を目線の近くにも
カテゴリ表示が側面にあるので近づけば近づくほど見辛くなってしまいます。単純に捨て口より先に目線がいくよう優先度を上げてあげれば意識しやすくなるのではと考えました。
各々のプレートの形は+αで視覚的補助の意味も含めて異なるものにしています。
【2】捨て口の形
まず、燃えるゴミ&燃えないゴミと缶・ペットボトルの差別化をはっきりさせました。缶、ペットボトルの方はゴミの種類が限られているのでそれらに特化した形にすることで視覚的にもわかりやすく。
燃えるゴミ&燃えないゴミの捨て口は【1】にある様にカテゴリ表示が目立つように少し優先度を抑えました。
【3】側面の視認性
側面真ん中にあったカテゴリ表示を視界に入りやすいよう上に移動。
その際に背面カラーと文字カラーを入れ替えて差別化を強く。

▼さらに飛躍してみた

上記では現実的に可能な目線で考えてきましたが、もしもこんなことが出来たら画期的、近い未来こうなるとより便利というものも含めていくつか提案してみたいと思います。

1.インセンティブが貰える

ゴミの分別は当たり前といっても過言ではないので、夢のまた夢の類な案になりますが、ちゃんと分別をして捨てると物々交換が出来るゴミ箱。現実問題、分別出来ない人は思いの外いると思われるので効果がとても気になるところ…。
メリットとして、何かしら特典が貰えると嬉しいですよね、そこを利用しテキトウに捨てることを防ぐことが出来るのでは?
デメリットとして、特典欲しさに無駄にゴミを捨てる人が増えるの可能性もあるので、粗大ごみやファストフードなどのセルフで片付ける飲食店に向いているのではと考えます。

※物々交換の内容(量、頻度、制限)については考え兼ねています。ご了承ください。

2.置くだけでOK!
※エラーの解決は考え兼ねています。ご了承ください。

置くだけで判定してくれるシステムはどうでしょうか。ゴミ置き台に判定システムがあるので、こちらが考えなくても自動的に分別してくれます。(素材の判定ができると良さそう)


▼さいごに

考えれば色んなことが出来そうですが、ゴミ箱は母数が非常に多いので全部を全部改善するのには時間が掛かりそうです。
実は難しそうで個人個人、意識することが分別への近道だったりするのかもしれません。

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

【HTML5タグの使い方】正しいHTMLタグのマークアップとは?デフォルトCSSを活かす書き方

WEBページをイメージしたレイアウトにするためには、閲覧ブラウザに組み込まれている邪魔なデフォルトスタイルシート(デフォルトCSS)をリセットすることになります(リセットCSS)。

この本末転倒な無駄(誤った?)な作業はなんでしょうか。
デフォルトCSSも良かれで組み込まれているものです。

間違ったタグ選び/HTMLマークアップ、間違ったHTMLの書き方では丁寧に用意されたデフォルトCSSが活かせません。
今回はデフォルトCSSが適切にあたるように誤りのないHTML5タグの使い方、正しいタグ選びと書き方(正しいHTMLマークアップ)に挑戦してみます。


そもそも正しいHTML5マークアップとは?

WEBページに文言を表示させるだけならテキストエディタで文字を打ち、ファイルの拡張子を「html」に書き換えれば良いです。

ページ閲覧者は適切なタグで文字が表示されているか知る由もありません。
そして、「章」「節」「段落」「画像」「キャプション」「注釈/細目」などが適切なタグでマークアップされていなければ、見出しを大きく表示したり、詳細説明文を小さくするスタイル調整の作業が都度発生します。

正しい記述(マークアップ)がされているとブラウザのデフォルトスタイルが自動であたり、スタイルシートを用意しなくても、見出しはHタグのそれぞれによって章節項と大中小項目別に表示され、注意書きはキャプションにより小さく表示されます。

また、こちらの恩恵のほうが大きいですが、記述が適切であれば検索結果へ正しく情報が反映され、利用者の検索ワードに対して適切なページが表示されることになりページビュー(PV)が増えます。


タグの用途

例えばある読み物の構成する場合、印刷物では下記のような文章体になり、WEBページでそれを再現する場合は適応したタグに当てはめる(マークアップ)ことになりますが、その判断には個人差が生じる問題があります。

WEBページと印刷物

注意として、全てがこのようになるわけではなく、構成を考えた方の意思によって別のタグ構成も考えられます。

重要なのは、章立てて考えた構成がブラウザや検索プログラムに伝えられなければデフォルトCSSは適切にあたらず、結果読みにくい表示が成されたページを調整するCSS作業が増えてしまうことなのです。


デフォルトCSSの効果と限界

それでは下記の原稿の文章をHTMLファイルに組み込んでいきます。

■ページタイトル
190924記事内_デフォルトCSSサンプル01

■本文
PCでも!スマホでも!記事数豊富なデザインブログ!
DIGIMERCE BLOG
DTPからモバイルWEBデザインまで!!幅広いデザイン情報をGET

DIGIMERCE BLOGとは?
多彩なカテゴリの100以上の記事から必要な情報を取得でき、サンプル画像やソース情報も紹介
しています。

【掲載カテゴリ例】

WEBデザイン
CSSレスポンシブの説明やCanvasタグを使った動きのある広告制作、デザイナー向けCSSレイア
ウトを紹介

UI/UX
タブとセグメンテッドコントロールの違いやボタンユーザビリティーと配色の関係を説明

サイズ/仕様
スマホ向け画像を製作する上で必須な端末ディスプレイ解像度など仕様に関する情報を詳しく
細部まで掲載

★画像の図1

※その他情報設計に関係した記事を幅広く網羅していますので欲しい情報がみつかります

こんな方におすすめ!
・Webページの設計を進めているが何から始めたらよいかわからない
・スマホ用画像を作りたいが主要端末の画面サイズを知りたい
・マスコットキャラクターってどうやって作ればいいが調べたい

「section」タグ(章/節等の区切り)のマークアップ

最初に、章立てした構成ごとに分けてまとめる「section」タグの設定します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name=”robots” content=”noindex”>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title>190924記事内_デフォルトCSSサンプル01</title>
</head>
<body>
<section>
PCでも!スマホでも!記事数豊富なデザインブログ!
DIGIMERCE BLOG
DTPからモバイルWEBデザインまで!!幅広いデザイン情報をGET
</section>
<hr>
<section>
DIGIMERCE BLOGとは?
多彩なカテゴリの100以上の記事から必要な情報を取得でき、サンプル画像やソース情報も紹介しています。
【掲載カテゴリ例】
WEBデザイン
CSSレスポンシブの説明やCanvasタグを使った動きのある広告制作、デザイナー向けCSSレイアウトを紹介
UI/UX
タブとセグメンテッドコントロールの違いやボタンユーザビリティーと配色の関係を説明

サイズ/仕様
スマホ向け画像を製作する上で必須な端末ディスプレイ解像度など仕様に関する情報を詳しく細部まで掲載
<img src="img/190924_web01.png"  alt="図1">
※その他情報設計に関係した記事を幅広く網羅していますので欲しい情報がみつかります
</section>
<section>
こんな方におすすめ!
Webページの設計を進めているが何から始めたらよいかわからない
スマホ用画像を作りたいが主要端末の画面サイズを知りたい
マスコットキャラクターってどうやって作ればいいが調べたい
</section>
</body>
</html>

メインの構成を分けて適切に伝えるため、構成の固まり毎に「section」タグで囲いました。実際の見え方がこちら↓

テキストをhtmlファイルに直書き、sectionタグで章ごとに囲み、imgタグで画像直置きした状態※罫線タグ(hr)を入れてます

文言同士がくっつき読めた状態ではありません。

「section」タグにデフォルトCSSの設定がされていないようですので、タグを入れたことでの見え方の変化はありません。

「p」タグ(段落)タグのマークアップ

次は、
テキストを考えナシに「段落タグ」の「P」タグ付で表示させてみます。

pタグでテキストを囲った状態

…こうなります。

やっと文字が改行、段落付けがされたので読めるようになりましたが、文字が置いてあるだけです。

「h」タグ(見出し)のマークアップ

では、「h」タグで「見出し」付けを定義していきます。

「h」タグを追加定義

…見出しが認識できるようになったので見やすくなりました。

「h」タグは優先度と構成順で「h1」~「h6」まであります。
「h1」は大きい見出しで、数字が大きくなるにつれ文字の大きさは優先度が下がり小さくなります。

「h」タグは、伝えたい重要なワードに適応することで、ユーザーの利便性に大きく影響をあたえますので活用していきましょう。

「dl」「dt」「dd」(説明リスト)/「ul」「li」タグ(箇条書きリスト)のマークアップ

さらに見やすくするため原稿内の「項目の説明部分」と「箇条書き」の部分に適切な、

  • 「dl」「dt」「dd」タグ(説明リスト)
  • 「ul」「li」タグ(箇条書きリスト)

以上を定義していきます。

「dl」「dt」「dd」/「ul」「li」タグを追加定義

全体が適切な見え方に変化しました。

「small」タグ(注釈/細目)のマークアップ

最後に「p」タグの通常段落本文より優先度が下がる「注釈」「細目」に定義するテキスト部分に「small」タグを設定していきます。

「small」タグを追加定義

小さい文字が入ることで、さらに文字サイズのバリエーションが増え、訴求優先度の大中小表現が完成しました。

以上のように、文章を読む目的では適切なタグでマークアップすることによりデフォルトCSSだけで表現出来ました。

正直なところは…飾り気がなく寂しいですが、章立てて構成された見出しと説明の優先度は伝わっているのではないでしょうか。

華やかな構成は付加価値としては必要ですが、文章構成を理解させる場合には重要ではないのかもしれません。


その他の基礎的HTML5構成タグについて

ページで取り扱う内容によっては、文章に関連付けられた図表や、又は独立した欄外構成があり、それに応じたカテゴリを示すタグが存在します。

  • 「header」タグ⇒ ヘッダー部分の要素を括る
  • 「nav」タグ⇒ ナビゲーション
  • 「article」タグ⇒ 内容が単体で完結しているセクション
  • 「footer」タグ⇒ フッター部分の要素を括る

それらのタグをつかい機械に伝え、適切なページ評価と検索表示をしてもらいます。


さいごに

今回、CSSを意識せず正しいHTML5マークアップに挑戦して、基礎のおざなりを痛感しましたが勉強になりました。
タグの最適化を今後も進めていきます。

十分な時間が確保出来ない案件はどうしても発生致します。
可能な限りコーディング時間を減らし、考える時間を増やすためにも、正しいHTMLマークアップを固める行動を意識してみてはいかがでしょうか。

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

電子書籍のススメ【電子書店のUI・UX】

こんにちは、ユイPです。
夏もそろそろ終わりですね。今年は暑くなるのが遅かったので、いわゆる夏!は一瞬だったように思います。

みなさんは、書籍を読む時に「電子書籍」を利用する事はありますか?
有名企業が電子書店を運営していたり、専用の端末を出していたり、近年スマートフォンやタブレットで書籍を読む文化が普及しています。特に「漫画」に関しては電子の売り上げがどんどん伸びているそうです。
「いやいや、好きな本は紙で持っておきたいでしょ!電子はちょっと!」そんな方もいるんじゃないかと思います。私も少し前まではそうでした。ですが最近は「電子書籍ってすごい便利じゃない?」という事に気づいたので、電子書籍で漫画を読む事が増えました。

という事で今回は、電子書籍の便利さ・メリット、併せて電子書店のUIなどについても紹介していけたらと思います。


読みたいと思った時にすぐ読める

「今見たアニメめっちゃよかった!原作漫画なの?すぐ読みたい!」

例えばこんな時。電子書店なら24時間いつでもどこでも、品切れ取り寄せなしで読むことが出来ます。
「気になった時にすぐに手に入る」ってすごく大事で、例えば上記の画像のような状況の場合、手に入るまでに時間がかかるとちょっと熱が冷めてしまったりするんですよね…「昨日の夜はすごい読みたかったけど…やっぱいいかな」ってなったり。
その点電子書籍ならネットさえ繋がってればすぐに手に入るので気になった瞬間、熱が冷めないまま読める!
「紙派」の方も、とりあえず電子で読んでみてめちゃくちゃよかったら紙の本を買ったらいいんじゃないかなと思います。お金はかかりますが…好きな作品は本棚に並べたい気持ちもわかるので、電子をまず取っ掛かりにしたらいいんじゃないかなと思ってます。

どこでも読めて場所を取らない

「電車でも読みたいけど…持ち歩くのは大変」
「もう家に本棚の空きがないよ~」

この悩みも電子書籍ならスマートフォンorタブレット一つで済むので即解決。
でも外で読むと通信料めっちゃかかるんじゃない?と思うかもしれませんが、多くの電子書店ではアプリを利用して読む事が出来るので、事前にwi-fi環境でアプリにDLしておけば通信料も抑えられますね(携帯の空き容量は必要になりますが)。電波のない山奥でも読める。
本棚に空きがない問題も本好きな方なら必ず直面する問題だと思いますが…例え100巻超えの名作でも、電子書籍なら場所を取りません…!

導入話が無料で読める

続き物の漫画など第1話が無料で読めたりタイトルによっては複数話無料で読める場合もあります。
無料の導入話がある作品を読んでいたら、思いがけず名作に出会い続刊も読みたくなって買ってしまったり…。運命の出会いはどこに落ちているかわかりません。
本屋さんで買うとそのような事はないので、お得に購入する事が出来ますね~。本屋さんで買うよりも作品への敷居が低くてお手軽な所も電子書籍の魅力だと思います。

単話配信で早く読める

漫画って、基本1冊に数話分のストーリーが入っていてまとめて1冊のコミックスになっている…そんなイメージですが。
電子書店では「1話ごと」に売っている作品もあります。巻よりも値段も安いです。雑誌で連載している作品の最新話を、コミックスになる前にいち早く読めたりもします。
なんなら最近は紙にならずに電子のみの配信でヒットしている作品もあります。ツイッターなどのSNSでも漫画がバズる事が多いですし、現代の漫画のあり方って多様だな~と思います。

その他のいいところ

・紙の本で絶版になった作品が配信されている
古い作品などが電子でのみ配信されていたりします。懐かしの作品も最新機器でお手軽に読めますね。

・本屋さんで買いにくい作品も、電子なら恥ずかしくない
本屋さんで買うのが恥ずかしい場合は電子書籍がおススメです。
実際電子書店ではそういう作品が紙よりもプッシュされていたりしますね。

だがしかし!デメリットもある

・貸し借り、譲渡が出来ない
「この作品すごいよかった!友達にも読んでほしい!」という時も友達に貸す事が出来ません。
読まなくなったから古本屋に持っていこう~とかも出来ないですね。まあ場所を取る事がないので処分に困る事はありませんが。

・簡単に買えすぎるので買いすぎてしまう
お手軽なのはとてもいい事ですが…ついつい買いすぎて請求額が大変なことになったり…。
読みたいと思った気持ちは大事に、けれども買う時は慎重に。


以上、ユイPによる電子書籍のススメでした。
ご紹介した通り、電子書籍は便利ですが、個人的には紙の本も廃れてほしくはないです!電子に電子のよさがあるように、紙には紙のよさがある。紙をめくる感覚が好きだし、紙の本で持っておきたい作品ってあると思うので。
今後も適材適所で、紙と電子、上手く読み分けていけたらな~と思っています。

ではでは、ユイPでした。

「HAPPY!コミック」など多彩なサービスを展開してます↓
デジマース_コンテンツ

ツイッター↓
ユイP@デジマースブログ

ピクトグラムを作成するときのポイント

1964年の日本でのスポーツ大会をきっかけに広がっていったと言われているピクトグラム。名前を聞きなれない方も多いかもしれませんが実は誰もが必ずと言っても良いほど、日常生活でピクトグラムを目にしているのです!
例えば、緑色に点灯している非常口の逃げようとしている人のイラストが一番分かりやすいと思います。
ピクトグラムを言葉で表すと、イラスト文字という名の記号(以下:イラスト文字)という所でしょうか。

今ではピクトグラムをフリー提供してくれている所もあり、私たちでも気軽に使えるのですが(ありがたいですね!)、「ちょっとイメージと合わない」「○○のピクトグラムが無い」等、こちらの条件と合わない場合も…ないとは言えません。

そういう時はピクトグラムの作成にチャレンジしてみてはいかがでしょう!自分で作成することで、イメージに寄りやすくなったり、愛着も湧くかもしれませんしね。
では、ピクトグラムを自分で作成するときはどうすれば良いのか、私の見解ですが作成するときのポイントを書いていきたいと思います!

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

point1.誰にでもわかる表現

国籍問わず老若男女、年齢関係なしに、ピクトグラムは誰が見ても理解できる表現が求められます。そもそもイラスト文字であるため、自立した指示表示が出来ることが使命とされているといっても過言ではございません。

「じゃあ、どんなものが誰にでもわかるの??」
「そうですね。例えば物であれば、必要性が無い限り最新の表現を省くのも効果的です。新しいものをすべての人が知っているとは限りませし、場合によっては認知率が低い可能性があるかもしれないです。」
「なるほど…」

さっそくですが、下記のピクトグラムをご覧ください。

Aは、家電よりもスマートフォンを使用する時代と考えれば間違ってないと思います。ですが電話のイラスト文字として考えた時に、近しいものにタブレットなどもあるため少々表現に難しさを感じてしまいます。今回、ボタンのないスマートフォンであるのも後押しし、イラストにしたときに分かり辛い印象を覚えてしまいます。

Bは、いまや見る機会は少ないと思われますが、電話と言われたときに頭によぎる人は割といるのではないでしょうか。また、近しい形もないため“この形=電話”と認識しやすいと考えます。また機能が電話しか無いことが後押しし電話という印象が残りやすいのかもしれません。

また、イラスト文字をシルエットにしてみた際に、認識しやすいかどうかも大事なポイントだと考えています!

point2.形状のシンプル化

ピクトグラムが何を指しているかを瞬時に認識しやすいものは?と考えた時、描かれているイラスト文字の情報量が少なくシンプルなものが効果的です。手描き等のイラストとは違い、描きこめば描きこむほど伝わり辛くなる可能性があがってしまいます。

■例:ショッピングビル等に入っているカフェの表示

デパート内には様々なお店が入っており、カフェでは、紅茶もコーヒーもお茶等々も飲めるお店が多く(専門店の場合もありますが)、今回「ショッピングビルに入っているカフェ」という表題もあるため、シンプルに「カップから飲み物が飲める」事を連想させることで十分成り立つと考えます。
Bに対しAは考えさせてしまう要素が入ってしまっております。
イラストに情報量が多いと捉え方に差異ができてしまうこともあったり、たいした時間ではなくても考えさせてしまったりする可能性も無きにしも非ずです。また、遠目で見た時に情報量が多いと、ごちゃごちゃとしやすく場合によっては近くで見ても認識し辛いことも考えられます。

■AとBのピクトグラムをそれぞれ遠目と近くであてこんでみたら…

情報を正確に伝えるために、伝わる最小限の表現に留めつつ、考えさせてしまう部分は削ぎ落して形状がシンプルになる様、心掛けることが大切です。コンセプトによってはピクトグラムにオシャレ、遊び心を入れる場合もありますが、基本的には指示に値するので「伝える」ことに念頭に置いて作成する必要がありますね。

point3.メリハリ

ピクトグラムはイラストの部分と背景(地の色)の部分を明度差のある2色で構成されています。そのためメリハリがつき基本的にはある一定の距離や、瞬時の認識がしやすくなっていると考えられます。

さいごに

ピクトグラムを簡単にまとめると、

・イラスト文字という名の記号
・シンプルかつ明確な形状が求められる
・遠目(常識の範囲)からの視認性が良い
・地の色とイラスト文字部分を明度差のある2色で構成することでメリハリ良く
・瞬時の解読が可能
・言語を超えた伝達方法

場所によってさまざまな表現のイラスト文字がありますが、共通して言えるのはそれがなんであるかしっかりと分かるということです。

簡潔に表現することは簡単に思えて実は難しいところがあります。もしピクトグラムを見かけたらちょっとながめてみてください。伝えるための工夫や最小限の表現が見えてくると思います!

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

伝わりやすい!デザインのポイント

こんにちは!ユイPです。季節はあっという間に夏ですね!
晴天が恋しいので早く梅雨が明けてほしいものです。

今回のテーマはタイトルの通り「伝わりやすい」デザインです。
伝わりやすい、見やすい、わかりやすい。そんなデザインをする時のポイント(フォントの選び方や、色づかい、配置など)をご紹介します。


≪伝わる!文字編≫

フォントは太めのものを使う

これは前に文字についての記事を書いた際にも少し書きましたが、ゴシック等の太いフォントは視認性(目で見たときの確認のしやすさのこと)が高いのでとにかく見やすいです。
見やすさ重視の場合は太くて力強いフォントを使いましょう。

大小の差をつける

一番見せたい文章と、補足的な文章がある場合どちらも似たような大きさだと見せたい部分が真っ先に目に入ってきにくいです。
なのでしっかりと差をつけて、大事な部分を目立つようにします。
この画像の場合「モモ太郎」がメインのタイトルで「~いぬ、サル、キジをお供につれて~」がサブタイトルになるのでタイトルの「モモ太郎」の部分を大きくしました。

≪伝わる!配色編≫

色の明度で差をつける

白と黒のように明るさに大きく差がある色を組み合わせると可読性(読みやすさのこと)が高くなります。
二色で構成する場合、有彩色(赤や青など色味をもった色)に白と黒(無彩色)のどちらかの色を使うと上手くまとまる配色が出来ます。

彩度の高い色を使う

鮮やかな色はとにかく目を引きます。「ビビッドカラー」と呼ばれるような色です。
反対に「パステルカラー」に分類される色は、とても可愛い。けれど目立たせたいデザインの際は不向きかもしれません。
ただしビビッドカラーは考えて配色を行わないと安っぽくなったりとてつもなくダサくなったりします…取扱いにはご注意を。

補色を組み合わせてみる

補色とは、色相環で正反対に位置している色同士の事を差します。
真逆に位置している色なので使う事でインパクトのある色合いにする事が出来ます。例えばクリスマス(赤と緑は補色関係)ただし真逆なので純粋にその2色だけを使うとチカチカして見づらくなってしまう事も…そんな時は、白や黒などの色を間に挟んでみる(縁をつけたり)と見やすくなります。

≪伝わる!レイアウト編≫

視線誘導はZ型もしくはF型の法則

「Zの法則」「Fの法則」というのがあります。人の視線の動きを文字の形で表した法則です。
【Z型】視線は左上から順番に左上→右上→左下→右下とZの形に移動していきます。
主にチラシやポスターなどの媒体ではこの動きになります。
【F型】左上から始まって右上→左下と動き、下に下がってまた左→右と移動していきます。
右下は見られにくいという特徴があります。WEB上ではこの視線の動きになる事が多いと言われています。
媒体によって、この法則を意識しながらどこにどの要素を置くか考えて配置を行いましょう。

一か所だけ位置を変えてみる

一つ目立たせたい要素がある時は、一か所だけ位置を変えてみるのもあり。人間の視線は揃っていないものに目がいきやすいからです。
位置じゃなくて色や大きさを変えてみるのも◎


以上、伝わりやすいデザインをする際のポイントでした。
さらっと覚えておくときっと役に立つはず!

今年の夏は去年ほど暑くないといいですね。ユイPでした。
Have a nice summer!

ツイッター↓
ユイP@デジマースブログ

ファビコンとは?

こんにちは!
今回のテーマは「ファビコンとは?」です。
スマホのファビコンに重点を置きながら、ファビコンを実装するメリットや、作成する時に気を付けたいポイントをお話ししたいと思います。


ファビコンとは

まず、ファビコンの基礎についてお話ししたいと思います。
ファビコンとは、「Favorite icon」を省略した言葉で、「お気に入りのアイコン」と言う意味があります。
PCのブラウザでWebサイトをブックマークした際にブックマークバーに表示される他、アドレスバーやタブにも表示されています。

元々はInternet ExplorerでWebサイトをお気に入り登録する際に使われていた機能でしたが、現在はIEに限らずChromeやFirefoxなど多くのブラウザで実装されています。

スマホのファビコンとは

今回注目したいのが、スマホのファビコンです。
スマホでも、各ブラウザのブックマークページやタブでファビコンが表示されています。

Safariは元々、PC版もスマホ版もタブにファビコンが表示されませんでしたが、2018年9月のiOS12へのアップデートで表示出来るようになりました。※表示設定は任意です。

さらに2019年5月(正式発表)のGoogleアップデートで、検索結果に出てくる各Webサイトにファビコンが表示されるようになりました。

上記のように、この1年ほどの間にスマホのファビコン機能がいくつかアップデートされました。
スマホで閲覧できる情報量の増加に伴い、役立つ情報を素早く判断する為、UIを改善する必要性が出てきたと考えられます。


ファビコンのメリット

まずスマホとPCで共通する、ファビコンの基本的なメリットについてお話したいと思います。
メリットは大きく分けて2つです。
1つ目は「識別しやすくなること」で、ユーザー側のメリットです。
2つ目は「ブランディング」で、こちらはWebサイトを運営する側のメリットです。

ユーザーのメリットである「識別しやすくなること」とは、ファビコンと言うグラフィカルな目印があることで一目でWebサイトを見分けられると言う事です。
人間の脳は、文字だけの情報より、文字と図がセットになった情報の方が識別しやすいです。
ファビコンが表示されていると、ユーザーは複数のタブや沢山のブックマークの中から目当ての情報を素早く選ぶ事が出来ます。

サイト運営側のメリットである「ブランディング」とは、ユーザーにWebサイトを記憶してもらいやすくなると言う事です。
ユーザーのメリットとも密接しており、ファビコンの色や形でWebサイトを識別する事で、ユーザーがブランドを覚えてくれる可能性が高まります。
ユーザーが「前に見たサイト良かったけど、どれだっけ?」となった時、サイトの特徴に合わせたファビコンを設定していれば、思い出すキッカケになってくれます。


次に、スマホのファビコン特有のメリットですが、前述したGoogleの検索結果にファビコンが表示される機能です。

具体的には下記のような変化がありました。
左が過去の検索結果で、右がファビコンが追加され新しくなった検索結果です。

引用:The Keyword | Google [A new look for Google Search]

どのサイトの情報なのか検索した直後に一覧で見られるようになり、とても便利になりました。

便利になった事例としては、オンラインショッピングをする時です。
ブランド名で検索した時、公式のブランドサイトだけでなく、公式のオンラインショップやその他の通販サイト、中古サイトなど沢山情報が出てきます。
文字情報だけが表示されていた以前のバ―ジョンだと、どこのサイトの情報なのか一目で分かり辛い状態でした。

公式のオンラインショップで買いたいのに検索上位にあるブランドのサイトを開いてしまった…と言う経験をよくしていましたが、ファビコンですぐに見分けられるようになったおかげで誤タップがなくなりました。


ファビコンを作る時のポイント

ファビコンを作る時のポイントを簡単にまとめてみました。

1番大切なのは、表示サイズをしっかり意識してファビコンを作成する事です。
ファビコンは実機だと非常に小さく表示されます。その為、色も形もシンプルなデザインにした方が視認性が良く適切です。
複雑なデザインにすると、表示された時に小さく潰れて何がなんだか分からなくなってしまいます。

アプリアイコンのデザインと統一しようかなと考える方も多いと思いますが、ファビコンサイズになった時に視認性に問題が出ないかしっかり確認してください。
場合によってはデザインを簡略化したり調整をした方が良いです。
ファビコンの例としては、サイトカラーやロゴの頭文字、特徴的なモチーフを1つシンボルにするなどしてデザインを行っているWebサイトが多いです。
Yahoo!のファビコンである赤い「Y!」や、Googleのカラフルな「G」と言うと、すぐに想像できる方も多いのではないでしょうか。

また、ファビコンは「.ico」と言うマルチアイコン形式で作ると各ブラウザに最適化した物が出来ます。
マルチアイコンとは、複数サイズのデータを1つにまとめることが出来る物です。

必要なサイズは下記の通りです。

種類 サイズ(px)
Internet Explorer 16 × 16
Chrome、Firefox、Safariなど 32 × 32
Google検索結果 48 × 48 (48の倍数)
Windowsデスクトップ 64 × 64
iOS 180 × 180
Android 256 × 256
WordPress 512 × 512

他の形式としては、png、gif、svg などがあります。
ただ、svgなど形式によってはブラウザで正常に表示出来ない可能性があるので、icoが主流となっています。


おわりに

いかがでしたでしょうか?
普段ブラウザを利用する際、常にファビコンを意識している人は少ないと思います。
何気なく使っていますが、無いと少し不便な機能でもあります。
ファビコンの有無でWebサイトの使い心地が変わりますので、まだファビコンを設定していない、ファビコンを最適化したいと思った方は、ぜひ試してみて下さい!

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

挿絵イラストを作成するときのポイント

資料、チラシ、広告などなど、内容をよりイメージしやすくするために、挿絵イラストを使用することがありますよね。
現在では多くの商用フリーイラストがあり、気兼ねなく誰でも使用することができます。
その一方で、「このイラスト見たことある」「○○の所のだ」「イラストがかぶってしまった」となることも少なくはありません。
特にイラストの種類が豊富であれば尚更多くの人が使用するわけですから、当然仕方のないことです。
ですが、提供してくれている方がいるから使用できていることは忘れてはいけませんね。

そこで、挿絵イラストを自分で作成してみてはいかがでしょう!
自分で作成することで、より内容に適したもの、他との差別化がしやすくなるかもしれません。
では、挿絵イラストを自分で作成するときはどうすれば良いのか、私の見解ですが作成するときのポイントを書いていきたいと思います!

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

point1.万人受け

挿絵イラストの前提として、「文章の補完、内容イメージの促進」があります。つまり見る人に、より理解してもらう為の手段の1つというわけですね。
また、挿絵はこうでなければいけないという様な決まりはありませんので多種多様なものを見かけます。

資料、チラシ、広告などによって挿絵のイメージ(絵のタッチ等)が異なることはもちろん、各々の内容に合ったものを使用する事が望ましいですよね。
その中でも共通して言えることは見る人を選ばない万人受けのものをなるべく使用することです。

※内容等、ターゲット層による場合がございます。

「なぜ、見る人を選ばない万人受けのものが良いの?」
「あくまでも挿絵イラストは“補助的な役割”であることを念頭に」

個人的な制作物であればさほど気にしなくても良いかもしれませんが、多くの人が見る可能性があるのであればそれぞれ思うこと、受ける印象は異なるので見てくれる人、出来る限り全員に伝わる様に最低限の配慮が必要です。

Aの方は大きな特徴もなく「小学生が楽しそうにしている」感を自然と後押ししてくれる印象を受けます。
Bの方は楽しそうにしている感は伝わるものの個性が強く、「小学1年生の遠足」という内容にはあっていない印象を受けますね。

挿絵を見た時に深く考えず、スルー出来るくらいの存在感がちょうど良いのではないでしょうか。

point2.シンプル化

多くの人が受け入れやすいイラストを一言でいうと基本的にシンプルなものと考えています。
シンプルなものは必要最低限の情報で構成されているため、誰がみても分かりやすく理解しやすい傾向があります。

■情報量が多い

それでは情報量が多いイラストはいかがでしょうか。
ほとんどのイラストは描きこめば描きこむほど複雑化していき、情報量が多くなることで個性が強くなっていきます。
(情報量が多くなることが悪いというわけではございません。)
見る人に考えさせる要素は極力抑えた方が、万人に受け入れてもらいやすいのではと考えます。

■目立つ特徴:指さしマークの場合

下記のイラストA、Bを見るとお分かりかと思いますが必要最低限、手と分かる範囲で描かれています。

そんななかBの方を見るとネイルが施されており、描きこみが少ないにもかかわらず、目立つ特徴があるため個性を強くする要因になっています。

一般的な指さしマークを考えた時に、爪にネイルをしているものはあまり想像しませんよね。
もしくは軽く爪が描かれている程度ですね。

※ネイルを扱うところであれば例外ですが…

情報量の多いもの、目立つ特徴を持つものは見る人を選んでしまうことがあるため、描きこみという名の情報量を抑えシンプルに、かつ明快にまとめられるかが重要ではないでしょうか。

また、個性が強くなるにつれてそのイラストに対する好き嫌いなどの感情が出やすくなる傾向があります。

point3.色、模様

特に色や模様(柄)に注力する必要が無い場合は、細かく表現しない方が情報量が少なくなり、見やすくなります。
例えば、白黒で使用されるものであれば、色が必要ない場合もありますし、色や模様よってはイラストがつぶれてしまったりすることも考えられます。

着色の仕方ひとつでイメージが大きく変化するため、あくまでもそれがなんであるかがわかる程度で表現をしてあげることをお勧めします。
特殊な着色の仕方を行うだけで、一見シンプルなイラストも個性を持ち存在感を放ち始めます。
どんな内容、ターゲット、公か私的かを見極めたうえで、適切なものを用意しましょう。

まとめ

■挿絵イラストは“補助的な役割”であることを念頭に
■見る人を選ばない万人受けを心掛ける
■挿絵を見た時に深く考えずスルー出来るくらいの存在感
■イラストの線の情報量は少なく
■色味、模様は必要最低限極力抑える
■白黒の場合はメリハリをつけてイラストを見やすく

自分がこれが好きだからという思想は一旦しまい込み、その内容に合うものを選定することが大切です。
補助的な役割である挿絵が「内容にあってないよね」と思われてしまったら元も子もありませんよね;
また、時には情報量の多いものや個性が強いもの等、内容やターゲットによっては相乗効果をもたらすこともあります。
作成するときには何に対する挿絵なのかをしっかり把握しましょう。

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

ドロップシャドウ(影)とボカシ/濃淡のUI活用

『ドロップシャドウ』のほか、『ボカシ』と『透明度(アルファ)』をつかって、単純なグラフィックデザインの表現としてではなく『UI』の機能/優先度を補助する設定をしてみます。

今回の内容は、
この先である将来のUIの機能による表現を、手軽にCSSやプログラムで動的にインタラクションとして組み込んだ場合の想定ですのでご理解ください。

それでは早速ボタンUIを作ります。


ドロップシャドウの設定あれこれ

ボタン単体としてみると、Aのシンプルなドロップシャドウがない表現で十分に機能しますが、

実際には、バナー画像やサムネイル画像、テキスト本文が含まれる総合的な画面のなかでUIとして十分に認識でき機能しなければいけません。

ドロップシャドウの表現もCSSで細かく設定できます。

box-shadow: 2px 2px 4px 0px gray;

最初の「2px」部分はx座標、
次ぎの「2px」部分はy座標
次ぎの「4px」部分はボカシ具合
次ぎの「0px」部分はドロップシャドウの大きさ
次ぎの「gray」部分は色設定 ※「#000000」系の記述も可
末尾に「inset」をつけると影が内側に設定できます
※間は半角スペースを入れる

box-shadow: 2px 2px 4px 0px gray inset;

「,」(カンマ)を入れて複数ドロップシャドウを設定出来るので、「inset」でボタンの質感のテカリを再現、その他にドロップシャドウでボタンの影を設定もできます。

box-shadow: 2px 2px 4px 0px gray,2px 2px 4px 0px #ffffff inset;

↓値を変更することで、画像のAのようなパキッとした表現や、Bのようなボカシを設定して実際の影のような表現も段階で表現できます。

トレンドでは、影がさらにぼやけて広がり拡散した状態のドロップシャドウが、WEBデザイン、グラフィックデザインで多く使われています。

それでは複数課金のボタンUIでのドロップシャドウに、意味合いと優先度を設定してみます。

ドロップシャドウの表現を揃えれば、優先度は横並びとなり、上下左右の設置位置による些細な優先度だけが存在している状況です。

この並びのボタンUIにドロップシャドウのボケ具合の程度で差異を出すと、コントラストの違いにより、ボカシが弱く濃い左上のボタンの優先度が高くなります。

次に、
実際の影の付き方を再現して、ボタンに「高さ」と「奥行き」の距離感を設定してみます。

手前に飛び出て見える感もありますが、微妙な表現の違いにとどまっており、4つのボタンの優先度に大きな違いはありません。

さらに、
ボタンの面部分とそのボタンから落ちるドロップシャドウの距離を離して違いをだしてみました。

ここまでの表現は現在のブラウザCSSでも設定できますが、これから先の内容を動的インタラクティブなUIとして現在機能させるには、JavaScript/jQueryなどの重い処理を利用し疑似的に力技で処理する必要があり、ユーザー体験にも処理が重く読み込みに時間もかかりデメリットがあります。

今後のブラウザ側の機能追加とデバイス側の処理速度向上が必要です。


ボカシの設定あれこれ

「ボカシ」表現自体は、OSネイティブアプリレベルではホーム画面やsafariブラウザ上部領域の透かし処理などのエフェクト処理として確認出来ますが、WebのCSS3レベルでは、画像を部分的にぼかすことができず一部のブラウザのみ画像全体のボカシ処理にとどまっています。
※CSS3のfilter:blur(ぼかし)は現在SafariやGoogleのChromeなどのwebkitブラウザだけ実装されています

将来的には「視線追跡機能」等により、見ているUIパーツや優先度の高いパーツの「ピント具合」を動的に調節できる機能が実装されるとおもわれます。

他にも利用者が注力して見ている場所以外のレンダリング解像度を落とし、デバイスの処理を軽くすることでバッテリー持ちを良くしたり、閲覧レスポンスを快適にするなどUX向上メリットも期待できます。

それでは話を戻して「ボカシの優先度」をUIに活かして設定してみます。

この段階まで表現できて、やっと判断しやすい優先度に見えるようになりました。


濃淡(透過/アルファ)の設定あれこれ

最後の表現として「手前」「奥」の濃淡表現(空気遠近法)を対象UIパーツに透過/アルファの数値設定を行い、優先度の低いUIコンポーネントパーツの透明度を下げ視認性を下げてみます。

メリハリがでてわかりやすくなったところで、訴求金額の上下を逆にしてみると、また見え方が変わってみえますね;

ボタンの並び方を変更して大きさに遠近感を出すとこのような感じです↓

使いやすくユーザビリティに問題なくUIが機能できるかはこの表現が動的にインタラクションする必要があります。


さいごに

スマートフォンなどのUIにおける画面要素の「重なり構造表現」へ意識は、マテリアルデザインへの意識向上、新技術のデバイスへの組み込みにより今後さらに必要となってきます。

SF映画のなかで登場する「未来的でシンプルなUI」は、カッコいいけど簡素過ぎてわかり難いものばかりでした。今後、技術が追いついた時、それらについて適切な情報設計が出来るかどうかは、表現とUIデザインの意識次第なのではないでしょうか。

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

2019/6/19~21 第2回 Web販促 EXPO【夏】出展のお知らせ(dgiftマーケティング/dgiftSNS)

2019年6月19日(水)~21日(金)に東京ビッグサイトで開催される、第2回 Web販促 EXPO【夏】に出展いたします。

今回はWebアンケート実施や来店を促進できる「dgiftマーケティング」と、SNSキャンペーン実施をサポートする「dgiftSNS」の2サービスをご紹介。

開催期間中はサービスの魅力を体験していただくためのイベント実施を予定しています。是非この機会にお立ち寄りください。

■会期:2019年6月19日(水)~21日(金)

■時間:6月19日~20日 10:00~18:00| 21日 10:00~17:00

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

■小間番号:西3-22-39


【dgift(ディーギフト)マーケティングとは】

SMS認証を用いたギフト付きアンケート機能で見込み顧客の情報を正確に取得。リアルタイムで回答状況の確認が可能です。

さらにWチャンス機能で店舗への誘引も行える、顧客開拓を支援するマーケティングツールです。

dgiftマーケティングのサービス紹介はこちら


【dgift(ディーギフト)SNSとは】

フォロワーの獲得やリツイートを促すための、デジタルギフト付きSNSキャンペーンサービスです。
新規顧客の獲得や既存顧客との関係性強化にお役立ていただけます。

女子度高め?映えるデザインのコツ

こんにちは!ユイPです。
れ、い、わ~令和になりましたね!令和もよろしくお願いします!
元号が変わる瞬間、世の中は年越しみたいで面白かったです。

今回の記事は女子度高めな「映える」デザインをするコツです。
昨今「インスタ映え」という言葉が流行り、街中や行楽スポットにもそれ向けのコンテンツが増えていますね。
デザインにも「映え」は重要です(時と場合によりますが)。

普段そういったデザインは、インスタグラム、女性誌、化粧品やファッションなどのWEBサイト…などからインプットしています。
そこから得た情報を私なりに、普段のデザインに落とし込んでいる際のコツをご紹介していきたいと思います。
とは言え映えや可愛いの基準は人それぞれなので、こんなのもあるんだな~というテンションで参考にして頂けたら嬉しいです。

point.1 文字よりもビジュアルで「映え」

例えばこの2つ、どちらが「映え」てますか?

左の方が情報量は多くてわかりやすいけど、カラフルなアイスをより全面的に押し出した右の画像の方が「映え」てませんか?
文字でつらつらと説明を書くよりもこうしてビジュアル重視の方が印象に残りやすくなります。

point.2 手書き風にしてみる

手書き風の文字やイラスト、雑誌やグッズなどでもよく見かけます。

こういうロゴも、右のように手書きフォントにしてみると印象が変わります。
もちろんデザインによっては左の方が適している事もありますが、手書きの方がラフな感じになりますね。

コラージュ風にするというアプローチも。
他にも、手書き風の人物のイラストが取り入れられているのデザインも近年よく見かけます。イラストを使ったデザインは華やか◎可愛さ◎ですね!

point.3 文字に+してみる

例えばこれは化粧品のブランドの紹介画像のイメージです。
それぞれ商品の名前に「CHERRY」「PEACH」「APPLE」の名前がついていますが…

文字だけでなく、こんな風にモチーフをアイコンにしてみました。
こうする事で、わかりやすくかつ可愛らしくなりますね~。イメージも膨らみます。
実際に化粧品には食べ物や飲み物の名前がついているものがよくあり、パッケージにもそれが印刷されていたりするので、そういったモチーフを取り入れたものが好まれるのかなと思います。

point.4 曲線を意識する

曲線や丸みのあるモチーフを使用すると直線よりも柔らかく、優しい印象になります。
これは映えというよりかは女子度が高くなるコツです。

丸く切り抜いたり角丸長方形を使ってみたり。
直線のラインではなくゆるくカーブさせてみたり。

四角を使ったデザインにしたい時も、角をちょっとだけ、ほんのちょっとだけ丸くするだけでもいい感じになります。

上が普通のゴシック、下が丸ゴシックです。フォントも角ばったものよりも丸みのあるものを使うと可愛らしく柔らかくなります。

point.5 色味

ピンク、黄色やベージュ、オレンジなど「暖色」の色を使うと女子度の高い「映え」を作る事が出来ると思います。
水色など寒色の場合は、彩度が高すぎないパステルカラーよりの色がよく使われている印象です。ミントグリーンなんかも人気ですよね。

■トレンドは「シンプル」「単色」?
昔、携帯をラインストーンでゴテゴテに装飾したり、プリクラの落書きがキラキラ!ギラギラ!だったりした時代があったかと思いますが…。
最近はそういうデザインよりも、シンプルなものがトレンドなのかなと思います。色数も多くなく、単色でデザインされたWEBページなどもよく見かけます(2019年現在)。
特に女性はめまぐるしく流行が変わるので、トレンドをチェックして取り入れていくのも大事ですね。

以上、ユイPがお送りいたしました!
五月病に負けないよう頑張りましょう。

ツイッターの方もよろしくお願いします♪
デジマースブログ公式Twitter