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

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

【公共サインのユーザビリティ】信号機のない横断歩道で車が一時停止する方法

こんにちは!
今回のテーマは「【公共サインのユーザビリティ】信号機のない横断歩道で車が一時停止する方法」です。
信号機のない横断歩道で自動車やバイクや自転車などの車両(以下、車)がちゃんと一時停止する方法について、ユーザビリティの観点から考えてみました。

信号機のない横断歩道を渡ろうとした時、なかなか車が途切れず渡れない…と困った経験をした方も多いのではないのでしょうか。
非常によくある光景ですが、これは車(の運転手)が間違っているんです。

そもそも、信号機のない横断歩道で歩行者や自転車が横断しようとしている場合、自動車やバイクや自転車などの車両は一時停止をして歩行者や自転車の通行を妨げてはいけないと言う法律があります。
日本自動車連盟(JAF)がこの実態を把握すべく、2018年に調査を行ったところ、全国でこの法律を守っている運転手は8.6%しかいないと言う驚きの結果が出ました。
<参考:日本自動車連盟(JAF)>

そこで、約9割の運転手がルールを守れていないと言うことは、運転手の知識やモラル以外にも何か原因があるのでは?と仮定し、なぜルールが守れないのか、この問題を解決できるように考えていきたいと思います。


信号機のない横断歩道を改めて見てみる

信号機のない横断歩道が、現状どのようなユーザビリティになっているか見てみましょう。
車側から見た時はこのようになっているのが一般的です。

横断歩道がある事を示す青い三角形の道路標識と、車道に連続した白いラインなど道路標示が描かれているのが一般的です。
ユーザビリティのポイントとしては、この「道路標識」と「道路標示」の2つが挙げられます。

一度、2つのポイントの基礎を整理したいと思います。

まず道路標識に関してですが、こちらは種類が4つあります。
「大人が1人描いてある物」「小さい子供が2人描いてある物」「自転車が描いてある物」「人と自転車が描いてある物」です。

どれも標識の位置に「横断歩道(または自転車横断帯)がある」ことを意味しています。
この標識がある場所は歩行者(または自転車)優先です。
子供が描いてある道路標識は幼稚園や小学校の周辺で子供が多く通る道に設置されているので、子供の飛び出しなど不規則な動きに一層注意したい所でもあります。

また道路標示に関しては、「歩行者が横断する白いライン」の他に、「車の停止線」「前方に横断歩道があるので減速を促す為のひし形のマーク」がある場合もあります。

ざっくりこんな感じで整理が出来たところで、次はそれぞれの問題点を洗い出していきたいと思います。


【問題点の洗い出し】

信号機のない横断歩道のユーザビリティ「道路標識」と「道路標示」には共通の問題があります。
それは、「一見しただけでは何を意味しているか分かり辛い」と言う点です。
横断歩道を全否定したい訳ではなく、より良いユーザビリティに繋がる可能性が秘められていると私は考えています。

例えば道路交通法の知識が1ミリもない人が車を運転した時、信号機のない横断歩道で連続した白いラインだけ見ても止まる事は出来ないと思います。
ありえない例えではありますが、このような観点から問題点を洗い出すと下記のようになりました。

「道路標識」の問題点

■ 絵が何を意味するのか分かり辛い。
■ 文字の情報が一切ない。
■ 色

「道路標示」の問題点

■ 文字の情報が一切ない。
■ 歩行者が渡りたいのか判断し辛い場合がある。


良いユーザビリティとは

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

また一般的に、絵だけの情報より文字情報の方が理解されやすく、アクションを起こしやすいです。

横断歩道の良いユーザビリティとは「歩行者優先であることが分かりやすい」ことだと思います。
このような良いユーザビリティの観点を元に改善案を考えてみます。


【改善案】

「道路標識」の改善案


絵と文字で伝えます。
歩行者の絵の下に「優先」と書くことで、ぱっと見て歩行者が優先である事が分かりやすくなったのではないでしょうか。

補助標識を付けます。
絵の見易さをそのままに、文字の情報でしっかり意味を伝えることが出来ます。
ただこの場合、標識が複数ある場所だと見辛くなる可能性もあります。

警戒標識にします。
現在の横断歩道の標識は「指示標識」と言う物に分類されます。これは特定の交通方法を禁止したり指定する時に使われます。
「警戒標識」は危険な状態を予告し、注意して運転することを促す標識です。指示標識より強い警戒を促す事が出来ますので、車側が注意しやすくなります。

文字で伝えます。
文字だけにすることで歩行者優先であることが即座に分かりますね。


「道路標示」の改善案


歩行者優先と書きます。
シンプルですが分かりやすいですね。車に前方の横断歩道が歩行者優先であることを伝えられます。
道路標識と併用することでより分かりやすくなります。


横断歩道手前での一時停止を義務化します。
実現すれば一番確実で安全な方法ですが、交通量の多い道路では渋滞の原因にもなってしまいます。


おわりに

いかがでしたでしょうか?
ユーザビリティを少し変えるだけでも、歩行者優先であることが分かりやすくなりました。
そもそも車の運転手が道路交通法を守らなければいけないのですが、タイミングの問題でやむを得ず…と言う場合も多いかと思います。
マナーではなくルールであることを明示する、ユーザビリティを改善する事で、気付きのタイミングが増えたり認知度が改善する可能性があります。

実際に横断歩道のユーザビリティを改善する取り組みをしている国や地域もあります。

インドやアイスランドなどの海外では、「3D横断歩道」と言う横断歩道が導入されています。
トリックアートの原理で出来ており、遠くから見ると横断歩道が立体的に浮き出て見え、近付くと平面の横断歩道であることが分かる仕組みになっています。

細長い塊がいくつも並んで道を塞いでいるように見えるので、運転手が堪らずブレーキを踏んでしまうようなユーザビリティになっていてとても効果的です。
日本も静岡県や大阪府の一部地域で「3D横断歩道」が導入されているようです。

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

押したくなるボタンとは?UI目線で考えてみる

前に、「押せる画像・ボタンについて考えてみる」記事を書きましたが今回はそれに伴い、押せる認識がしやすくなったボタンを、ユーザーに押してもらえるようにするにはどうすれば良いのか。
気を付けるコツを個人的な解釈ではありますが書いていきたいと思います。

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

おさらい

サクッと簡単に「押せる画像・ボタンについて考えてみる」で紹介した内容をまとめてみました。

■押せない画像との差別化(左右のスペース)
・押せるボタンは画面横いっぱいまで使用せず画像の左右のスペースをあけるとべたっとした状態から浮き出てくるので差別化がしやすい。

■一目で押せると分かる様にする。
・三角マークで遷移できることを視覚化。「こちら」などのダイレクトな文言でも可。
・押せるものは角丸など。

■押せる画像は大きすぎると押せる=ボタンの認識が弱くなりやすい

■押せる色と押せない色をしっかりわけて設定することで、一目でボタンと認識しやすくなる

※細かく読みたい、気になる!方はこちらから読めます。
押せる画像・ボタンについて考えてみる

押したくなるボタンとは?①

上記のイメージ画像をみて「ボタン1」を押す際、分かり辛く、押し辛く感じる方が多いのではないでしょうか。
ボタンがギュッとつまっているので認識するのにも少々時間がかかってしまう気がします。

この場合どうすれば、ユーザーに押して貰える分かりやすいボタンに
なるのでしょうか。考えていきたいと思います。

・押せないものとの差別化、押せるマーク(>)を付けるなど、「押せるものである」と認識できる作りになってはいるが、ボタンの上下左右幅が狭く圧迫感がある。
・ボタンどうしが近いため誤タップを引き起こす可能性がある。
・引きで見た際に1つの塊に見えてしまう。

■ボタン周りのタップ領域を確保する
・ボタン周りがすっきりし、ボタンそのものがしっかりと見え、視認性がアップ。
・ボタンが上下左右並んだ際にも、タップ領域を確保することで誤タップ、押し辛さを回避。

個々のボタンをしっかり独立させ、ユーザーの目にとまり、押しやすい環境を作ることで必然と押してもらえる押しやすいボタンになるのではないでしょうか。

押したくなるボタンとは?②

上記のボタン、押せるマークがあるのでボタンなんだなと認識はできますが、押せるマークが無ければ、ボタンと認識し辛くないでしょうか。どちらかというとボタンではない別の画像に見えてしまいます。

どうしてボタンではない画像に見えてしまうのか、早速ですが見ていきましょう。

・ボタンに華美な装飾があることで見た目の情報量が多く、ボタンと認識し辛い。
・その他のコンテンツとの差別化がされ辛い。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

■必要最低限の情報量でシンプルに分かりやすく
・目的があって華美な装飾があるのであればこの限りではございませんが、装飾が強すぎるとサイト内のコンテンツとの差別化がし辛くボタンが埋もれてしまう場合も考えられます。

そのボタンの目的は何かを考えた上で、複雑にしすぎず伝わるものを用意する必要があります。ひとめ目につくだけでユーザーは装飾を重要視していません。

押したくなるボタンとは?③



パッと見て、フルーツの特集のバナーということが分かりますね。
視認性も悪くなく問題なく押せそうですが、よりユーザーへ伝わるものと考えたとき、上段の写真が入ったものが伝わる気がしませんか?

■上の写真が入っているもの
・訴求文言を補足するように写真のイメージが入っているため、今回の場合、実際にどんなものが「旬なフルーツ」に該当するのか、ユーザーがイメージしやすい。
・イメージが浮かぶと、ボタンを押して進む次のステップに入りやすく行動もしやすくなり結果的に押しやすいボタンになりやすい。

レストランなどのメニューで文字だけ書かれているよりも、合わせて料理の写真があった方が「これ、おいしそう!食べてみたい!」となりやすいですよね。

■下の写真が入っていないもの
・訴求文言の視認性は良いが写真イメージがないため、訴求文言を見ても、瞬間的にイメージはし辛い。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

押したくなるボタン

押したくなるボタンとは、目に見える形や配置の仕方など以外にも大切なポイントがございますので紹介していきます。



大半の方はAと答えるのではないでしょうか。
この場合、ユーザーメリットとして「無料」と書いてあるバナーの方が敷居が低くなるため、結果的に押しやすいボタンとなります。
もしも、ユーザーのメリットになる文言があれば簡潔に追記してあげた方が押しやすくなると考えられます。



大半の方はBと答えると思います。
この場合、スタンプが貰える点では同じ意味合いですが、そのための行動がBの方が負担が少ないですよね。Aの方は20個もアンケートに答えなければならないため、面倒くさいと感じる人が多そうです。
せっかく訴求している内容ですからユーザーに触れてもらいたいものです。そのためにはユーザーの視点にたって、スルーされない、見てもらえるものを考える必要がありそうです。



大半の方はAと答えると思います。
この場合、どちらも同じ意味をもつボタンになりますが、Aの方が、スッとボタンが目に入ってきますよね。
Bの方はボタンのサイズと載せている文言のバランスがおかしく、視認性、可読性が低下しています。
『押したくなるボタンとは?①』に記載しました“ボタン周りのタップ領域を確保する”のと同じで文言周りの視認性、可読性を保つための領域を確保する必要があります。

最後に

今回あげた内容は、ほんの一部にすぎませんが、ユーザーに押して貰えるボタンとはどんなものかを考えた時に、でてくるものは考えれば当たり前のことばかりです。逆に当たり前だからこそ見落としやすい部分でもあるので、運営者の好みではなく常にユーザー視点にたって考えることが大切になってきます。

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

Illustratorで作るロゴデザイン

ロゴとは

『ロゴ』とは、「サービス/商品」の名称をビジュアル化してブランドの顔としてつかった画像です。
デザインする場合は主に、イラレ(Illustrator)で作業しますが、ゲームやアニメのロゴの用途の場合は色数やグラデーションを多く使うなど、構成が複雑化する場合が多く、その場合はPhotoShopや3DCGソフトなどで制作する必要性があります。

主な用途
・企業ロゴ
・製品ロゴ
・サービスロゴ

身近な用途
・TV番組ロゴ
・ゲーム機ロゴ
・ゲームロゴ
・アニメロゴ

どんな文言でもロゴ(意匠)として認識しやすい個性的なビジュアル/シルエットにすることが認知の目的を達成できますが、
近年は「雰囲気」を重視して、文字数が半端なく多い作品ロゴ(むしろタイトル画像と呼ぶべきですが)が増えており、
シルエットも似通っており差別化がなくなってきています。

流行/潮流後に残るかどうかはこの先になってみないと分かりませんが、雰囲気は和の文化も感じさせます。

商標登録するということ

『商標登録』とは、「名称」を他社が使用できない「唯一」のものとして商用利用する権利(「著作権」とは性質が違う)を登録、特許庁に認めてもらい使用することです。

ここで気付きますが、「既存フォント」を使用または要所を改変アレンジしてロゴとして使うことは、その時点でオリジナルではなく、「既存フォント」から派生した類似となり、そのまま『商標登録』を行ってしまうと著作権の侵害により金銭要求発生の可能性があります。

『商標登録』するロゴを「既存フォント」でつくる場合は、必ずフォント利用規約を確認してから著作権の持ち主に連絡、契約する必要があります。(そもそも権利を全て放棄した商標利用OKのフリーフォントを使用して「ブランドの顔」をつくることは適切ではありませんね)

ロゴタイプ向きなフォント形式

ロゴタイプは「英字」で作ると、シンプルにまとまり使いやすいですが、「和文」は「英文」に比べてデザインをクールにしにくい傾向があります。

また、「明朝体」は視認性の問題からロゴタイプには向きません。

「ロゴ」は広義なことばで、「ロゴタイプ」と「シンボルマーク」を内包します。

制限のアウトプット/雰囲気のアウトプット

1970年~2000年の昭和から平成の中では「制限」の環境化でアウトプットを考えなければいけない時代がありました。

「印刷表現」だけを考えていればよかったそれ以前の産業では「デジタル」での制限制約はなく、アナログ表現での限界のなかであれば、自由にデザインが出来ました、セリフのついた「セリフ体」や「明朝体」などの表現もその時代の象徴的なタイプ表現です。

古い印刷物に個性的雰囲気を感じるのもそういった完成された表現があってと感じます。

そしてデジタル黎明期1970年~2000年は、コンピュータの登場とともに解像度の少ない「SDディスプレイ」に文字を出力することになりますが、
その制限は唐突に8ドット×8ドットと、スマホ時代の現在の環境とは天地の差があり「フォント」を表現する事は出来ず「雰囲気」はグラフィックデザインから」なくなりました。(代わりに生まれたのは無垢なドットのレトログラフィック)

2000年はじめの、モバイル/携帯電話(フィーチャーフォン)では一時期進んでいた家庭用ゲーム機や据え置機器解像度の高解像度化(VGA640×480)は技術の制限によりQVGA (240x320)の解像度しかなく、漢字の正しい画数などの表現もままならず(「魔」などの文字も、部首「まだれ」中を「マ」にするなど;)「雰囲気」は二の次でした。

携帯電話にも高解像(VGA640×480)端末が登場してきますが、「下位互換」の制約はついて回り、高解像度端末も表面上物でしかなく、内部処理/基本アーキテクチャは低下移動度を踏まえる必要がありました。

制約がなくなり、「文字のデザイン」が行われるようななったのは2012年ごろから登場したスマートフォンからです。

私は昭和生まれのグラフィックデザイナーですので、デザインの根幹には、日本人が得意とされてきた制約の中でのデザインがあります。
常に制約を考慮して仕事をおこなってきましたが、

これからは、表現、雰囲気の時代です。

やれること、使える色、容量も増え、時間もかかりとても大変な時代になりましたが、
これから紹介するロゴ制作方法は、従来のシンプルな商標登録もできるやりかたです。

それでは、まずは「ロゴタイプ」をillustrator CCをつかい、画像中心に作り方を紹介していきます。

illustratorでのロゴタイプの作り方

文字の基本ガイドをつくりあたりとしガイドをロック、別レイヤーを上に作り、その上に「線」で文字のラフを大胆に置いていきます。

置き終わったら縦軸横軸のポイントを可能な限り揃えておくと統一感が出ます。

作った線の幅を太くしてロゴらしい存在感にします。

線を太くすることで高さがまたズレてしまうため、ガイドレイヤーを頼りに再度調整します。

調整に時間がかかる場合もありますが、この状態でシルエット自体は完成形に近くなりました。

文字のそれぞれに特徴的な形ががあり、縦長だったり、横長だったり、逆三角形だっだりとシルエットがありますので、文字の面積差が均等になるように、大きくしたり小さくしたり調節してみると文字のバランスが良くなります。

真四角は特に大きく見えるので小さく、丸型は小さく見えるので大きくするのが基本です。

それでは、先ほどの調整ルールで文字の大きさを整えてみます。

画像を見ていただくと分かりますが、今回は説明用に大げさに調整をおこなっていますので、実際作業される場合はもう少し抑えて調整してみて下さい。
「ザ」「イ」は説明する目的で縦長になってしまっています


※細かい調整なため細部を拡大(スマホはピンチイン)して確認ください

変更前後を比較すると、大きすぎた「ロ」「ゴ」「ン」が小さくなってます。
「ザ」「イ」下を他の文字と揃えてしまっても問題ありません。


※細かい調整なため細部を拡大(スマホはピンチイン)して確認ください

さらに「錯視」の資格調整を行っていきます。
変更前後で縦某の細さが緩和され、横棒と同程度の太さで見えるようになりました。
※錯視については個人差があります

「錯視」についてはコチラの記事を参照ください。

それでは、素の状態と各調整を行った状態を比較してみます。
※しつこいようですが、「ザ」「イ」は下の棒の高さを他の文字と揃えてしまっても問題ありません;説明用にあえて長くしてます。

最終整えを行っていきます。

「濁点部分」は少々情報量が多いので小さくし、文字の本体の優先度をあげます。
「ザ」「イ」は下の棒を調整します。

次に、文字の角のエッジを少々丸くして仕上げていきます。
角を丸くすることで、尖り(バリ)がなくなり柔らかく優しいシルエットになります。
※高級家具の角もそういった加工がされており、危険性がなくなり触り心地も良くなります

それではベーシックな基本形が出来たので、バリエーションをつくってみます。

ワンポイントのアクセントカラー(挿し色)入れてロゴタイプ部分の完成です。
挿し色は色分布割合を少なくするようにします。

「ロゴタイプ」の横に「シンボル」を配置すれば「ロゴ」の完成です。

ロゴをみるひとは目線の行きやすいシンボルをキッカケにロゴタイプに視線をずらしロゴを認識すると思いますので、シンボルはキャッチーなビジュアルが望ましいのではないでしょうか。


以上でロゴ作りの説明を終わります。

さいごに

今回は比較的簡単な直線の組み合わせでロゴタイプを作りましたが、曲線を使う場合は「角度」や「長さ」「太さ」をルール化して統一化する決めの流れは今回と同じです。

今後、曲線や太さのルールが複雑なロゴのillustratorでの作り方も追記していきます。
デジマースのネモトでした。