レイアウトのやり方/文字/画像【情報量が極端に少ない場合】

バナー画像などを作成する状況で、組み込む情報量が少なくレイアウトに困ることがあります。

  • メイン訴求のビジュアル素材がない
  • 文章量が少ない
  • 公式ではない画像要素の追加が難しい

ビジュアル素材がそもそもない状況はさすがに稀ですが、
文章量が少ない状況は多く、また、確定したテキスト情報は変更できないため、なかなか苦しい作業になりがちです。

今回はさっくりと確認できる記事で紹介します。
まずはテキストレイアウトについて確認していきます。

ビジュアルとテキストを均等に配置(1)

文字情報量が極端に少ない画像レイアウトのやり方
均等に配置しているので大きな問題はないですが、平均的すぎます。


ビジュアルとテキストを均等に配置(2)

文字情報量が極端に少ない画像レイアウトのやり方
均等間隔で配置されているのでビジュアルを見た後の目線の誘導に不安が残り、文言の優先度もまだまだ設定できます。


文言の優先度と目線の誘導を設定(1)

文字情報量が極端に少ない画像レイアウトのやり方
左のメインビジュアルを見た後の目線移動を自然にするために、文言の上部余白(A)を下部余白(D)よりも、やや広めにとっています※今回はサンプルとして広めに確保してます

文言の優先度順は下記。

  1. 曲名 50px
  2. アーティスト名 36px
  3. 詳細情報 20px

文言の優先度と目線の誘導を設定(2)

文字情報量が極端に少ない画像レイアウトのやり方
適応させてみました。
上部余白を少々広くとってますが、
「曲名」を中心に優先度のメリハリを付けたので、注目するポイントが定まり目線の移動が安定しました。


「カタカナ」と「漢字」のバランス調整

文字情報量が極端に少ない画像レイアウトのやり方
カタカナ/ひらがな/英字については、文字自体の情報量が漢字と比較してシンプルなため、少々小さくすることで文字のチープ加減を軽減させることができます。


カタカナの場合

文字情報量が極端に少ない画像レイアウトのやり方

英字の場合

文字情報量が極端に少ない画像レイアウトのやり方
また、英字にすることで文字の意味合いが薄れ、純粋にビジュアル的なシルエットとして見ることもできます。

それでは、本題である文字情報量が極端に少ない画像を見てみます↓


文字情報量が極端に少ない画像

文字情報量が極端に少ない画像レイアウトのやり方
この状態は非常にシンプルで、レイアウトのバランスとりも非常に難しくなります。

したがって、
このまま進めるよりも、文字情報量を増やす試みが適切です。


ビジュアル的要素に置き換える

文字情報量が極端に少ない画像レイアウトのやり方
ロゴ画像などのビジュアル要素は、画を華やかに変化させてくれます。


詳細情報を追加する

文字情報量が極端に少ない画像レイアウトのやり方
詳細情報を追加で貰うことが何よりも改善できます。


さらに詳細情報を追加する

文字情報量が極端に少ない画像レイアウトのやり方
さらに画像の説得力を演出するために、権利者表記などを追加することも有効です。


さいごに

文字情報入りの画像を制作する場合は、優先度(文字サイズ)が異なるメリハリある文言で訴求することが望ましく、可能であれば豊富な文字情報から有効な情報だけを残す調整/精査ができると、なお効果的です。

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

デザイナーとクライアントが円滑に依頼のやりとりを始めるには

こんにちは、藻です。
今回のテーマは 「デザイナーとクライアントが円滑に依頼のやりとりを始めるには」です。

バナー業務を中心に最近はUIデザインなど業務の幅が広がってきました。
その中でこのように依頼・案件を進めるとスムーズだ…!と気づいた点がいくつかございました。
デザイナー側ももちろん、クライアント側も「こう依頼したらいいのか!」など参考にしてみてくださいね。

ずばり最初にお伝えしますが、必要なのはこの5つです。

今回はこれらのポイントに沿ってご紹介します!


1.締切をはじめに提示する。

お互いに「これいつまでだ…?」と認識にずれがあるとなかなか効率よく進みません。お互いに余裕かな…と思っていたらぎりぎりという可能性もあります。
クライアント側はまず締切を提示し、デザイナー側はその締切までで可能かを確認してゴールを設定します。また、複雑な依頼の場合は締切自体もこまめに作成していると良いです。
たとえばロゴ制作であれば

といった具合の分け方です。これでお互いに確認しつつ安心して進めることができます。

2.参考画像を共有する。

作り始める前に、イメージする雰囲気の画像があれば、双方で可能な限り複数共有します。
色のイメージのみでも、テイストでも構いません。
このあたりの〇〇を!など指定しておくと完成した際にイメージとの大きなずれが発生しにくいです。イメージする広告もあるとなおスムーズかと思われます(パクリにはならないよう注意…)。

3.使用したいカラー・テーマカラーを決めて共有する。

ひとまず1色は決まっているとイメージを考えやすいです。カラーコードでこの辺の色味!などがあればコードごと送ってしまえば間違いはありません。写真の色味でもいいかもしれませんね。
例えば、「青緑」を使って作成していく場合もこのように伝えるとイメージの共有が確かになります。

言い方は同じでも想像しているカラーリングの雰囲気がまったく違うということも起こりがちです。テイスト自体も変わってしまうことが考えられるため意識していきたいです。

余談ですが、配色に困った際のおすすめはAdobeの出しているAdobe Color CCというWebサイトです。コミュニティに参加しているデザイナーたちが、各々が作成したカラーやテーマを公開・共有しているため、アイデアとして見るのにかなり便利です。

4.入れてほしい文言・イメージなどがある場合は共有する。

デザイナー側がクライアント側の望む範囲まで理解ができていることがもちろん一番ではありますが、
必ずしも深く理解しきれていないこともあります。
デザイナー側はわからないことがあればはじめのうちに聞き、ビジョンを明確にする必要があります。
進めてから理解できていない箇所があると進行の遅れはもちろん、デザインにもずれが出てきます。
クライアント側もこれは確実に入っていてほしい…という内容があれば先に伝えるとお互いに修正を減らすことができます。

5.デザイナー側からも提案をする。

クライアントの要望に沿うことはもちろんですが、イメージを崩さないでこうした方がいいな…と依頼を受けた時点でデザイナー側が思うこともあるはずです。
その際はクライアントの要望に沿ったものにプラスして、簡単にでもはじめから別案をお送りしてみるのも良いです。あくまで簡単であることが重要で、必要以上に固めてしまうのはおすすめしません。
必ず元の案自体を消さないように注意してください。
基本的に完全にいらない!となるまではアートボードを追加するなどで対応し、いつでもやり直しや修正ができるよう備えておくことで素早く対応ができます。

※完成してからではなく、途中経過は必ず送ることを薦めます。
お互いに満足がいくようなコミュニケーションを取ることで、よりよいものが作れるはずです。


おわりに

この5点を押さえると、かなり依頼に使う要素がまとまるはずです。
重要なのはある程度の融通を利かせるのは大事ですが、お任せで作らないということです。
具体的なイメージを持ち、共有していればそれだけクライアント側もデザイン側も望んだものが製作できます。
とにかく依頼のやりとりでは抽象表現を避けることがおすすめです。後からやっぱりこんなはずじゃなかった…と修正が多くなればなるほどに、両者に負担が掛かる上に時間も掛かってしまいます。
はじめのうちから決められるところは決めてやりとりを進められるといいですね(*^_^*)

簡単・見やすいレイアウト!バナーの装飾5つのテクニック

こんにちは!藻です。
今回のテーマは 「簡単・見やすいレイアウト!バナー装飾5のポイント」です。
広告から動画サイトのサムネイルなど幅広く目を留めてもらいたいところで作ることを避けられない「バナー」。
ちょっとした装飾の工夫やレイアウトのコツを押さえておくと、ただ文字を打つだけよりもぐんと見やすくなります。

今回は特に押さえておきたい5つのアイデア をレイアウト案も合わせてご紹介します!


1.帯をつける

縦に、横に、斜めに長方形を外側からはみ出るように引くだけでできます。幅一直線に引けばインパクトも大。目立たせることができます。

2.図形の中に入れてみる

帯と似たような使い方にはなりますが、これも簡単でおすすめです!円や四角、三角などの図形を用意しその中に文字を配置します。フォントサイズは図形ギリギリではなくある程度の余白を残した方が見やすいです。また、フリー素材で可愛いレースの図形などがあるのでそういったものをダウンロードして使うのも◎。
図形は角からはみ出すようにしたりといった帯の使い方を応用してもポイントとして扱いやすいです。

3.フォントを使い分ける

多くのフォントを使いすぎても見にくくなり、バランスが悪くなったりとしてしまいます。しかしゴシック体と明朝体を組み合わせたり、一部だけフォントを遊ばせてもメリハリがついて見やすくなります。特に目立たせたいところはゴシック体などの太いものを使うと良いです。

4.左右に飾りをつける

簡単な図形や線を置くだけで変化がついて見やすくなります。ポップな印象も与えやすく、デザインの邪魔になることもあまりありません。

5.バナーを色や外枠などで思い切って区切る

余白を作るとただ大きくするよりも見やすくなります。また、使い方によってデザイン自体にもゆとりや勢いが生まれます。
写真やイラストを使う際は文言のスペースを確保しやすくなります。

また、上記のテクニックを使い、色や図形で区切ったり使い過ぎると画面が重たくなります。その際は代わりに線で区切るのもおすすめです!ライトな印象になります。

全体として大切なのは文字やパーツ自体はなるべく揃えて配置をすることです。
あえてはずす箇所はポイントとしてあるのはインパクトがあり良いですが、全体がばらばらになると見づらい&読みにくい印象を与えてしまいます。
逆に言えば、揃ってさえいればある程度の見やすさは守ることができます。


実際に作ってみる

それでは実際に5つのテクニックを使って全く異なるジャンルのサンプルを3点作成しました!
それぞれ要素を見ていきましょう。
①バレンタイン特集でのチョコレート販促のバナー

少ない文言でもパッとそれぞれの文字が目に入りやすくなっているかと思います。また、色合いなどは写真の色を使うなど、テーマで揃えると雰囲気がまとまりやすくなります。

②飲食店のハッピーアワーの告知バナー

お洒落なバーのような想定で作成しました。文言は多めですが、余白を思い切りとって落ち着きがあるように意識しました。

③冬の旅行特集の宣伝バナー

今回は図形をぐにゃぐにゃっとしたものを取り入れました。PhotoshopでもIllustratorでも、曲線ツールを使うと簡単に作成できます。旅行といえば楽しげになるように…と遊んだ要素が多めです。

このように意識していくだけでもメリハリのある見やすいバナーが考えやすくなると思います!


おわりに

いかがでしたでしょうか?
ここ一年たくさんバナーを作っていく中で絶対これはやる!といったレイアウトのテクニックを絞って紹介させていただきました٩(๑^o^๑)۶
どうしてもうまくまとまらないな…どうしよう…と悩んだときはぜひこの5つを思い出して挑戦してみてくださいね。
以上、まだまだ模索しながらバナーを作成し続ける藻でした。

わかりやすいパワポ(パワーポイント)資料レイアウト

今回は、PowerPoint(パワーポイント/パワポ)などの資料作成について、極力シンプルで情報量少なくわかりやすいレイアウトを紹介します。


目次


テキスト構成

まずはページに乗せるテキスト情報を箇条書きで設定します。
載せる情報を先に「メモ帳」などで作成してまとめ、決めておくことで、効率的にレイアウト作業に集中出来ます。

文字量は多めにしておき、後ほど短く集約して伝わる(読んでもらえる)文章量に落とし込みます。

【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる

箇条書きしていた文章をコピペしてザックリと配置していきます。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる

各項目名の文字サイズを説明文より一回り大きく変更して優先度を高くします。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる

さらに、各項目名の中でも優先度順に文字サイズを一回り大きくします。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる

説明分の方にも優先度順に文字サイズを変更してしき、長めに用意していた文章を要約して短くして伝えられる文章量に落とし込みます。

表題やキャッチコピーは1行で、

大項目は2行で、

その他の説明文も最大3行~4行でまとめる意識を持てれば、伝わる文章量の出来上がりです。
※みっちり長々と書かれた文章は読む気力を削いでしまいます。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
この状態でテキストの設定は完了です。

続いて、目線の誘導と関連項目のグループ化がおこなえる、余白設定(ホワイトスペース)を施します。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
余白設定はレイアウトの要です。
詰め込みがちな資料に十分な空間を持たせることで、読み手(資料を確認する人)に「わかりやすさ」と「親しみやすさ」をイメージしてもらえます。

【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
ここまでシンプル化出来れば必然的にわかりやすい文章量とレイアウトになり、装飾が無くても伝わる状態になっています。


面と線を使った装飾

それでは、「面」と「線」を使った装飾に移りますが、
構成のNG例を展開します。

【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
面を使った題名の装飾例ですが、
「圧迫感」「威圧感」があり、構成も一辺倒なため、固い印象を与えてしまいます。

【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
こちらは、やってしまいがちな枠線の入れ子オンパレードです。

目が回りますし、注力ポイントも判別できず、不鮮明で不安な印象を与えます。

【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
こちらは、装飾表現は被りもなく特徴的/説明的で問題ないですが、テキスト文章量の要約を怠った際に見られる状態です。

多くを伝えよう、よりよく分析しようと気持ちが先行すると、読み手を意識出来ない圧倒的な文字量を構成してしまいます。

そうなると、「読みたくない」「読まれない資料」が出来上がってしまい、プレゼンの際にも文字を追うことで気が飛び、頭に入ってきません。

表現の被り、「面」と「線」の優先度/訴求力に注意して装飾すればレイアウトの完成です。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
「面」と「線」の優先度については、塗りの面積量で判断できます。

塗り面積の狭い「線の表現」は、
塗り面積の広い「面の表現」には勝てません。

より目立たせたい項目には塗りの表現を施し、文字を白抜きしてコントラストを高めて存在感を増します。

装飾が完了したら、最後に色で華を添えて仕上げです!
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
「ブランドカラー」「サービスカラー」をメインカラーとして多くを使い印象付けをし、挿し色アクセントカラーで「トピックポイント」際立てます。

「赤」は警戒色/警報色ですので、適切に使って親しみやすさを維持させましょう。

「見やすく」「わかりやすく」「親しみやすい」資料に見えますでしょうか。


さいごに

資料を作るとき、多くを伝えたくなり、それぞれ情報の優先度が平均化してしまいます。

取っ掛かりのワードをストレスなく見てもらうことで、次の優先度の訴求に関心が生まれ自然と目が移動します。

細部の細かい文字や説明まで読んでもらえれば十分な訴求が完了していることと思われます。

今回の情報が、毎日の資料制作にプラスになれば幸いです。
次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

初心者向け文字とデザイン|比率違いのバナーの作り方

こんにちは!
今回のテーマは「初心者向け文字とデザイン|比率違いのバナーの作り方」です。
文字デザインの中でも、同じデザインで比率違いのバナーを作る時に使える文字組みのコツについてまとめてみました。

Web向けのバナーや広告を作る際、複数の比率のバナーが必要になることが多いです。
バナーの形は、横長、縦長、正方形、細い、小さい、など。また、スマホ向けかパソコン向けか用途によって様々です。

何も考えずに文字を組んでしまうと、サイズによっては読みづらくて何が伝えたいのかよく分からないバナーになってしまいます。
また、比率が大きく変わった時にデザインを調整するのが大変になることも…。

複数サイズのバナーが必要な時に役立つ、簡単に比率違いのバナーを作るコツを書いていきたいと思います!


訴求する文章と規定を確認

まず始めに複数の比率のバナーを作る時は、訴求したいキャッチコピーなどの文章と、必要サイズとその規定(有れば)をしっかり確認してください。
何故なら、バナーのサイズによっては入れたい文章が全て入りきらない…と言う事象が発生してしまうからです。
特に広告の場合、1200×628と320×50など大きくサイズが違うバナーが必要になることもあります。サイズが大きい方のバナーには入る文章でも、小さい方だとどうしても全て入れるのが難しくなってしまいます。

これをまず確認しないと、1200×628のバナーデザインをガチガチに作ってから320×50を作ろうとした時、視認性を確保しつつ文字を入れることが出来ない…となってデザインのやり直しが発生してしまうことも。

対処方としては2つあります。
①どのサイズのバナーでも統一して入れられる文章を用意する。
②大きいサイズ用の文章と、小さいサイズ用に簡略化した文章の2種類を用意する。

ただ、広告を作る場合は基本的に①の方法が無難です。
ABテストなど広告効果の分析がしたい時に不適切だったり、広告規定で文字の面積が厳密に決められている場合があり、そもそも長い文章が入れられないことも多いからです。

②の方法で進めたい時は、簡略化前の訴求内容と乖離しすぎないように注意が必要です。

バナーが広告なのかそうでないのか、必要なサイズはどれなのかを確認してから状況に合わせて調整してみてください。

次の項目からは例として、②のケースを想定して文字組みをしてみます。


優先順位を決める

バナーに入れる要素の優先順位を決めます。バナーを作る上でとても大切なポイントです。
なぜ優先順位を決めるかと言うと、優先度に合わせて表現に強弱を付けることで分かりやすいバナーを作ることが出来るからです。

バナーに必要な要素をザックリ整理すると、テキストと画像の2種類です。
中でもテキストは情報量が多くなりがちで、ゴチャつきやすい部分でもあります。

テキストの一例としては「50%OFF SALE」「初月無料」などメリットを訴求する文言の他、キャンペーン概要や企業情報、細かい注釈などを入れることが多いです。
CTAのために「今すぐチェック」などのクリックを誘導する表現を使う場合もあります。
沢山の情報をそのまま配置しただけだと内容が頭に入りづらく、メリットをちゃんと認識してもらえない可能性が高くなってしまいます。

スマホでWebページを見ている時に上の図のようなバナーが不意に出てきて、読むぞ!と思うでしょうか?
このままだと、あまり読む気は起きないと思います…。
クリックしてもらえないどころか最悪の場合、認識すらされずにスクロールされてお終いです。

そうならないために、ユーザーにとってのメリットや伝えたい訴求ポイントなど、1番見て欲しい部分の優先度を最も高く設定します。
あとは条件や必要事項など、全ての要素に順位を付けてください。

ちなみに、この順位はあくまで優先度の順番であって並び順ではないことを頭の片隅に置いておいてください。
テキストの並び順は、文章として違和感がないように後ほど調整します。


文字の大きさに強弱を付ける

優先順位ごとに文字のサイズや太さを変えます。
優先度の1番高い文字は、他の文字サイズと最も差を付けて大きく目立つようにしてください。1〜2px単位の細かい調整はせず、誰が見ても明らかに大きさが違うと分かるサイズが良いです。
優先度が2番目に高い文字も1番目と差を付けつつ、その他の文字より明らかに大きくなるようにしてください。

ただ、全ての文字に大きな差異を付ける必要はないです。
優先度1、2までは前述の通りですが、それ以下の文字は読みやすさに合わせて調整します。
日付や注釈など、優先度が1番低くなりやすい事務的な要素は、視認性に気をつけつつかなり小さくしてしまっても大丈夫です。
Webで見やすいフォントサイズの最小値は20pxくらいなので、そこから小さくなり過ぎないサイズを設定すると良いです。

調整を行ったのが下記の画像ですが、いかがでしょうか?
文字の大きさに強弱を付けただけでも読みやすさが違ってきたかと思います。

フォントサイズを記載していますが、調整しているうちに変化していく要素なのでサイズ感の参考程度に見てください。


表現と配置の調整

次に、装飾などを付けて表現に強弱を付けます。
装飾といっても華美である必要はなく、丸や四角などの単純な図形でも十分です。

装飾を付けると同時に、配置も調整を行ってください。
文章として違和感なく読める状態に整えるのが目的です。並び順を変える他、横や斜めにずらしても良いです。
文字の多さや単調さを軽減させるイメージで調整してみてください。


最終調整

最後の調整として、より読みやすいように色やエフェクトなどの細かい部分を整えていきます。

これで1つ目のバナーは完成しました!
最初のバナーよりメリットが分かりやすくなり、ユーザーの目に留まるようなバナーになったのではないでしょうか?


アートボードを複製して別サイズのバナーを作る

1つ目のバナーが出来たら、アートボードを複製して別サイズのバナーを作ってください。
新規で作ると作業効率が良くないので、可能であればアートボードをパーツごと複製すると作りやすいです。

アートボードのサイズを調整したら、それに合わせて文字や装飾のサイズと配置も変えていきます。

この工程のポイントは、1つ目のバナーを作った時に決めた「優先順位が1番高い文字は1番目立つようにする」などの優先順位のルールを守ることです。
比率が近ければ問題ないと思いますが、比率が大きく違うバナーを調整する時に崩れやすいポイントでもあります。

また、テキストを省略する時のポイントですが、文章の簡略化、バナーへの記載が義務付けられていない要素の削除が適切かと思います。


おわりに

いかがでしたでしょうか?
バナーを作る時に大きなポイントになるのが文字組みです。
比率が複数必要になった時のことを想定して作っているのとそうでないのとでは、後々のデザインのしやすさやが変わってきます。
バナーを作る際はぜひ試してみてください!

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

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

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@デジマースブログ

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

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

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

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

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デザインの意識次第なのではないでしょうか。

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

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

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

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

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

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

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

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

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

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

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

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

point.3 文字に+してみる

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

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

point.4 曲線を意識する

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

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

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

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

point.5 色味

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

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

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

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