私達の脳が文字を理解するスピード

ここで、私たちの脳が文字を理解するスピードを見てみましょう。
人が「 読むと同時に理解できる最大の文字数」は、MAX13文字程度なのだそうです。平均すると１０文字。

もちろんこれは平均値ですから人によって個人差はあると思いますし、場面によっても違いがあるんですね。

商店街などガヤガヤしていて情報が交錯しているところでは、一秒間に約5文字程度。

宝石店やブランドショップみたいな整理整頓されたラグジュアリーな空間においては、13文字程度。

映画の字幕は、独特のルールが存在していて、1秒間4文字までに抑えられているそうです。

意外と少な目ですよね？

ちなみに、ブログのタイトルも13文字程度にとどめておくとよいと思います。

私達の脳が画像を理解するスピード

次、画像の場合はどうでしょうか？

脳が画像を見て意味を理解するまでの間時間ですね約1000分の13秒です。

13ミリ秒ともいいます。

意識的な思考だとこの速さなんですが、感覚的な情報処理ですと、毎秒約１ギガビットに達するのだそうです。

もう１秒と、かからないんですね。

スピード対決

もう少し、わかりやすく比較したいと思います。

画像だと1000分の13秒。対して文字だと10文字で1秒。比較したくても、ちょっと想像しづらいですので、これを、歩く速さや乗り物に喩（たと）えてみたいと思います。

文字を読んで理解する速さを、人が歩く速さ。約時速3キロメートルとしますと・・・

画像処理の速さは、どのくらいだと思われますか？？

車なのか？　新幹線なのか？　ジェット機なのか？

ちょっと考えてみてください。

脳が画像を処理する速さは、文字の1000倍です。

正解は、F15戦闘機です。マッハ2.5　おおよそ時速3000キロ。

東京から北海道まで、約20分で行けちゃう速さなんですね。

もちろん、これは例え話なのですけど、このくらい処理スピードに差があるんだよという事を、イメージしていただけたと思います。

脳が画像を処理する速さは、文字の1000倍です。

とてもじゃないですが、文字は画像の処理スピードに敵うようなレベルではありませんよね。画像に勝てそうにない差がついています。

実は、 マサチューセッツ工科大学（MIT）によれば・・・脳に送られる情報の90％が視覚情報なんだそうです。つまりは、人間が取得して脳に送信されるデータの9割が、目から入ってくるものだ、という事なんですね。

ほとんど目から。

理由は人類の進化の歴史に

人類が地球に誕生するのは約20万年前（ホモ・サピエンスと限定すると15万年前）なんですけれども、その人類が言語を使ってコミュニケーションをとるようになってからは、まだ8万年しか経っていないんです。

処理スピードの違いは、その進化の積み重ねの差なんですね。

進化の過程で言語能力を獲得したとはいえ、歴史の半分くらいは、言葉を使わないで生活してた為、処理スピードに違いがあるのは致し方のない事だと思います。

伝達スピードが違うと言う事は分かりました、そして人間が取得する情報の9割が視覚から入ってくるものだと言うこともわかりました。ではそれらが、インスピレーションや印象にどう影響を与えるのかをちょっと見ていきましょう。

投稿脳が文字と画像を理解するスピードはTaniweb制作の最初に登場しました。

私たちの脳が言葉や画像をどう処理していくのかを見ていきたいと思います。

説明に入る前に、、、ちょっと次に表示する画像を3秒ずつ眺めてみてください。

全部で6枚あります。

以下の画像を、3秒眺めてみて下さい。

さて、いかがでしたか？
皆さん、この写真と説明を見せられた時、「説明文が間違っている」から書き換えなければならない、と思いませんでしたか？

言葉と写真の内容が矛盾する時、写真の方を重視する

「説明文が間違っている」から書き換えなければならない。

写真を差し替えたっていい筈と思いますが、そうは思わなかったですよね？間違っているのは、写真ではなくて、説明文の方だ！と思いませんでしたか？

人間の脳は、このように言葉と写真の内容が矛盾する時、言語情報よりも、視覚情報の方を優先するようになっているんです。もっと云うと、言語情報よりも非言語情報の方を、重要視するシステムになっているんです。

言語情報よりも非言語情報（聴覚・嗅覚・視覚）の方を、重要視する

たとえば、明らかにガスが漏れているような匂いがしている時。周辺が、ガス漏れの臭いで充満しちゃってる時・・・

身体が危険を感じて、冷や汗が出たりガタガタ震えが出たりしているにもかかわらず、誰かが、「大丈夫ですよ〜」「大丈夫です〜」「これは焼き鳥のにおいです〜」「安心してくださいー」って言われて、信じられます？

無理ですよね？
嘘つけ！って思いませんか？

耳から入る情報も同じなんですよ。

ワンちゃんが、すっごい吠えまくってるんだけど、

飼い主さんが・・・

「うちのワンコは、人懐っこくて。誰にでも甘えたがるんですう」って言われたらどうですか？

めちゃ吠えとるやん！って思いますよね？

明らかに高いところが苦手そうな人に、大丈夫ですか？っ聞いた時・・・

真っ青な顔で「だ・だ・だ・・大丈夫です・・・」って言われてもね。

大丈夫やないやろーってなりませんか？

人間の脳内って、どうやっても、非言語優先社会なんですね。

デザインの本やマーケティングの本をよく読む方は、「画像優位性効果」というのを聞いたことがあると思います。

文字だけよりも、画像やイラストを文章に添えた方が、記憶されやすいというものです。画像の方が優先的に処理されるので、印象に残りやすいからなんですね。

どうしてなのでしょうか？
その理由を探ってみたいと思います。
（次回の記事へつづく）

投稿脳の視覚情報処理についてはTaniweb制作の最初に登場しました。

発注される側の方、WEB担当者、デザイン初学者の方に

ここまで、WEBサイトを企画する時のお話を記事に綴ってまいりました。いよいよ、ここからはデザインの話へ移ります。

ただ、デザインする前に「言葉と画像の基礎知識」を知っておいて欲しいんです。実際のデザイン作業の前に、この記事を読んで再確認して欲しいな、と思う内容をお伝えしていきます。

デザインする際に必ず取り扱うのが、「文字と写真」ですよね？もちろん色や書体やレイアウトも、イメージに関するので、そこもお伝えしたいと思います。

プロじゃないけれども、チラシやバナーを制作する機会が多い方。突然、通販担当になってしまった方はもちろん、独学でデザインを勉強なさってる方も参考にして頂けると思います。

デザインの基本とは

これからお話する内容の主題がデザインにまつわる内容ですから、デザインする際の、基本要素を押さえておきたいと思います。いろんな考えの方がいらっしゃると思うのですが、私が考える、デザインの基本要素は・・・色と書体とレイアウトです。

写真は色の中に含まれるとお考えください。

この3つの要素の中で、言葉や文字を伝える為に使われるのが書体ですね。言語情報です。

色やレイアウトというのは、文字情報ではありませんので、非言語情報を伝える役割を担うと思ってください。

たいていの場合のデザイン制作物は、言語と非言語が混在している状態になっています。

2つは全く違うものに思えますから、それぞれの特徴を知っておきたいですよね。これから、この言語と非言語について理解を深めて参りましょう。

言葉とイメージの基礎知識

脳の視覚情報処理について

https://www.taniweb.jp/blog/marketing/19241/

脳が文字と画像を理解するスピード

https://www.taniweb.jp/blog/19248/

伝達スピード と 影響の度合い

https://www.taniweb.jp/blog/marketing/19252/

文字と画像の情報量の違い

https://www.taniweb.jp/blog/19250/

ミラーニューロンの心的効果

https://www.taniweb.jp/blog/19256/

情報整理

デザインにおける情報整理

https://www.taniweb.jp/blog/19258/

色の話

色の不思議

https://www.taniweb.jp/?p=19260

色の心理効果

https://www.taniweb.jp/blog/20402/

皆が同じ色を見ているとは限らない

https://www.taniweb.jp/blog/20465/

文字の話

文字の話

デザインの際の禁則処理

レイアウト

基本のレイアウト

ネガティブスペースとガター

先人たちから学ぶデザインの定義

最後に

先人たちから学ぶデザインの定義

投稿デザインの前に読んで欲しい！言葉とイメージの基礎知識はTaniweb制作の最初に登場しました。

生活や仕事に欠かせない数字。
特に、他者と共通認識を持つ際に数字は欠かせないものです。

約6000年前のメソポタミア地方で発明されたバビロニア数字が最初だそうです。現代人が普段使っているアラビア数字は、約2000年前に誕生しました。
ゼロという概念が生まれるのは７世紀に入ってからのことです。

7といえば、人間が一度に記憶できる数（マジカルナンバー）として有名ですね。
アメリカの心理学者ジョージ・ミラーが1956年に発表した「7」(±2)という論文によって提唱され、「5〜9」の数字が、人間の記憶に留まりやすいとされていました。

現代のように広告が溢れかえっている世界では、最初の1〜２行でユーザーの心を掴まなくては、その後何をアピールしても反応して貰えないという事になってしまいます。よって、マーケティングの世界でも数字を効果的に使う法則や心理操作が盛んに研究されるようになりました。今日はその中からいくつかご紹介いたします。

数字の持つ特徴とは

〈特徴１〉視認性が高い

数字は文字の中で視認性が高く、戦略的に目立たせることができます。

〈特徴2〉イメージしやすい

抽象的に説明するよりも、具体的な数字がある方がイメージしやすい。

〈特徴3〉信憑性が高まる

数字を示した方が、信憑性が高まり、信用されやすい。

いかがですか？
抽象的な表現をされるよりも、具体的に言ってもらった方が、理解が進むと思いませんか？

もう少し歩けば出口ですと伝えられるよりも、あと５０メートルですと距離を数字で表してもらった方が、頭の中でイメージがし易くなり、不安が減ると思います。

人は分からないもの、不明なもの、隠されているもの、大雑把な表現には不安を感じ、はっきりしている事、明示されること、数字で表されているものに、信頼感を感じ生き物なのだと思います

こういった特徴も踏まえ、デザインする際に活用できる心理効果や法則を5つご紹介いたします。

01. 端数の法則

人は、抽象的な数より具体的な数字の方が信用される傾向があります。切りの良い数字より中途半端な数字の方が説得力があるように感じるからかもしれませんね。

よくありがちな「1,980円」などの中途半端な価格設定も端数効果の応用。

02. アンカリング効果

アンカリング効果(Anchoring Effect)とは、先に与えられた情報がその後の意思決定に影響するという認知バイアスの一種です。セールや見積もりの値引きなどで活用できます。

最初に見た価格や条件などを基準としてそれに引っ張られてしまう様子が、まるで海にいかり（アンカー）を下ろした船のようであることから。

03. フレーミング効果

フレーミング効果とは、提示の仕方により最終的な意思決定が左右される現象のこと。つまり、同じ事柄でも表現が違えば、受ける印象が変わってくるというものです。

04. フレーミング効果とプロスペクト理論の掛け合わせ

損をすることに注目させるか？
得することに注目させるか？
それぞれで、ユーザーの意思決定に違いがでるという理論を
フレーミング効果の活用に応用してみましょう。

どちらも当たる確率は2％と同じですが、ユーザーが得することにこだわるのか、損することを避けたいのかで選択の傾向が代わります。

安く買うか？　購入した後、さらにポイントバックを受けるのか。

05. 視覚的な大きさを変える

絵や写真の方が、文章よりも脳に届くスピードが早いことはよく知られていますね。数字も、もとより視認性の高いものですが、さらに他の文字より大きくして区別することで、脳の中で図案化され伝達スピードが高まると思っています。

デザインの標準ガイドラインとして「約物（やくもの」は小さく表記するというのがあります。数値を強調したい場合、単位が大きすぎる数値に目が行かなくなりインパクトが弱くなることがあります。そうなると数値を記憶しづらくなりますので、単位や約物を小さく表記するのです。

※約物とは、句読点、括弧、引用符、その他特殊記号のこと

視認性が高く、具体的なイメージを想起しやすい数字。デザイン戦略において重要なツールでもあります。うまく活用して集客やマーケティングに有効利用してください。

投稿数字を使ったデザインに活用できる心理効果はTaniweb制作の最初に登場しました。

投稿ゴシック体と明朝体はどちらが読みやすいのかはTaniweb制作の最初に登場しました。

規則正しくグリッドに沿ったデザインを、グリッドデザインといいますが、その反対に自由に好きなようにレイアウトすることを、ノングリッドデザイン（Non-Grid Design　または　Non-Grid Layout　または　Non-Grid System)といいます。日本ではこの他に、フリーレイアウトともいいますが、こちらは和製英語だと思います、海外のデザイナーには通じませんので要注意です。

私が、個人的に一番気に入っているノングリッドデザインは、ここにある、かな手本忠臣蔵のようなもの。（江戸時代のいわゆる絵草紙は、これと似たようなスタイルです）
おそらく、絵師が先に絵を描きあげ、後から文章を挿入しているのだと思いますが、すごくダイナミックな構成だと思いませんか！？

この場面は、炭小屋に隠れていた、高武蔵守師直（吉良上野介）を見つけたところの場面だと思います。

「師」のマークは、劇中の役名、高武蔵守師直のことで、史実上では、吉良上野介にあたります。
「矢」は、役名が矢間十太郎・・・史実上は・・・多分、武林唯七かな？？？（自信がないですが）

写真/仮名手本忠臣蔵 8巻. 初篇 - 国立国会図書館デジタルコレクション　パブリックドメイン　http://dl.ndl.go.jp/info:ndljp/pid/10303463

こんなんじゃ読みにくいじゃん〜って、思われるかもしれませんが、読む順番は小さいイラスト（印）で指示がでています、なかなか機能的なんです。

文章の読み始めには必ず「つづき」のマークがあり、ページの最後には「続く」のマークが入ります。

まず、「つづき」のマークがついているところから読み進めてゆくと、文章（段落）の終わりに、小さなイラストがあるのに気づくと思います。仮に、▲と□を組み合わせた家のようにみえるイラストがあったとしましょう。これを「家のイラスト」とここでは呼ぶことにします。すると、次に読むべき場所は、「家のイラスト」が文章の頭に来ている箇所です。

すべての段落の終わりには、小さなイラストが付いていますから、それを頼りに文章を読み進めることができます。

最近の雑誌などでは、読みやすさ優先で、縦書きでもグリッドデザインが採用されることが多いため、こういったレイアウトを見かけることは滅多にありません。
でも、テレビもラジオも写真もインターネットも無い時代に、不思議と臨場感が伝わってくる、大胆かつ無駄のないレイアウトだとおもいませんか？

ただ、出版するとなると、文字数を制限枚数の中に収めなければならなかったりして、紙面のデザイナー（文章と絵の配分を考える人）は、相当な経験値が必要だっただろうな〜と思います。
調整が難しい作業ですよね。

当時のデザイナーの苦労も鑑みつつ、古典のディテールの美しさも堪能できるので、よろしければ、国立国会図書館の以下のURLを覗いてみてください。

[gallery size="large" ids="10692,10693,10694,10695,10696,10683,10684"]

仮名手本忠臣蔵 8巻. 初篇 - 国立国会図書館デジタルコレクション　パブリックドメイン　http://dl.ndl.go.jp/info:ndljp/pid/10303463

※1
日本人はながらく縦書き文化でしたが、1700年台終わりごろ、オランダ語の文字を模倣して日本語の文章を横書きするものが現れはじめ、1885年に発行された外国語の辞書で日本語の横書きが登場しているそうです。
（参考/Wikipedia https://ja.wikipedia.org/wiki/%E7%B8%A6%E6%9B%B8%E3%81%8D%E3%81%A8%E6%A8%AA%E6%9B%B8%E3%81%8D）

投稿個人的に一番気に入っているノングリッドデザイン。はTaniweb制作の最初に登場しました。

Bootstrapは、便利で使いやすいフレームワークですが、標準のままでは、日本語は読みづらいですよね。そこで、制作する際には、日本語でキレイに表示されるように調整いたしますが、フォントが代わるとやはり、印象も変わってきます。
よく利用されるWEBフォントをBootstrapに導入すると、どんな風になるのでしょうか？8種類のタイポグラフィで読み比べて見ましょう！

Bootstrapにおける、文字レイアウトの初期設定

Bootstrap3におけるデフォルトのフォントサイズは、14px。 行間（line-height）は、1.428です。
デフォルトの見出しには、font-weight: 500;　 line-height: 1.1;　 color: inherit;がセットされています。
フォントサイズは以下の通り。

• h1,.h1 {font-size: 36px;}
• h2,.h2 { font-size: 30px;}
• h3,.h3 { font-size: 24px;}
• h4,.h4 {font-size: 18px;}
• h5,.h5 {font-size: 14px;}
• h6,.h6 {font-size: 12px;}

全く調整なし、初期設定のままの場合

[su_row class=""]
[su_column size="1/2" center="no" class=""][su_label]英語[/su_label]
[/su_column]
[su_column size="1/2" center="no" class=""]

[su_label]日本語[/su_label]
[/su_column]
[/su_row]

一般的なブラウザ用として、フォント＆文字サイズ＆上下余白、スマホ用にタップエリアなどを調整した場合

[su_row class=""]
[su_column size="1/2" center="no" class=""][su_label]英語　Arial[/su_label]
[/su_column]
[su_column size="1/2" center="no" class=""][su_label]日本語　游ゴシック優先[/su_label]
[/su_column]
[/su_row]

多言語フォント　Noto Sans

[su_row class=""]
[su_column size="1/2" center="no" class=""][su_label]Noto Sans　英語[/su_label]

[/su_column]
[su_column size="1/2" center="no" class=""][su_label]Noto Sans　日本語[/su_label]
[/su_column]
[/su_row]

その他のWEBフォント　英語

[su_row class=""]
[su_column size="1/2" center="no" class=""][su_label]Quicksand[/su_label]

[/su_column]
[su_column size="1/2" center="no" class=""][su_label]Lato[/su_label]

[/su_column]
[/su_row]

その他のWEBフォント　日本語

[su_row class=""]
[su_column size="1/2" center="no" class=""][su_label]Typebank TBちび丸ゴシックPlusK Pro R（Typekit/Typesquare）[/su_label]

[/su_column]
[su_column size="1/2" center="no" class=""][su_label]モリサワ　A-OTF UD新丸ゴ Pr6N　（Typekit/Typesquare）[/su_label]

[/su_column]
[/su_row]

[su_row class=""]
[su_column size="1/2" center="no" class=""][su_label]モリサワ　A-OTF UD黎ミン Pr6N　（Typekit/Typesquare）[/su_label]

[/su_column]
[su_column size="1/2" center="no" class=""]
[/su_column]
[/su_row]

投稿Bootstrap3-フォント設計の見本-8種類のタイポグラフィで読み比べはTaniweb制作の最初に登場しました。

クラシックなデザインは、伝統的、古典的、重厚な雰囲気のもので、対象となるユーザーは伝統を重んじ、本物志向であるが、やや保守的なところもある比較的年配の大人。オーソドックスな美しさを表すときにも用いられます。

クラシックなデザインのイメージボード

※このイメージボードは、これまでの制作実績や、アクセサリーなどの写真を、テイスト別のコラージュしたものです。参考文献：日本カラーデザイン研究所編「カラーイメージスケール」（著/小林重順）

投稿クラシックなデザインはTaniweb制作の最初に登場しました。

エレガントなデザインは、上品で優雅、繊細なフェミニンさなどが表現されていて、デザイン素材としては、曲線、抽象化された花柄、シルクのようなしなやかさ、サテンの光沢などが用いられ、香り高いイメージも付け加えられることが多いです。

エレガントなデザインのイメージボード

※このイメージボードは、これまでの制作実績や、アクセサリーなどの写真を、テイスト別のコラージュしたものです。参考文献：日本カラーデザイン研究所編「カラーイメージスケール」（著/小林重順）

投稿エレガントなデザインはTaniweb制作の最初に登場しました。

アンティークなデザインは、ナチュラルな要素もあり、クラシックな雰囲気も持ち合わせいるように思えますが、よりシャビー（使い古した）で枯れたもの、時間を経過して自然に劣化した風合いを楽しむという点をデザインに取り入れているところが特徴です。古いものの味わい深い魅力を表現できなければ、可愛くもなく、単なるみすぼらしい感じになってしまいますので、流行のカフェ風インテリアなどを参考にアイボリーやホワイトなどを上手くつかい、さわやかさを出す工夫が必要です。

アンティークなデザインのイメージボード

※このイメージボードは、これまでの制作実績や、アクセサリーなどの写真を、テイスト別のコラージュしたものです。参考文献：日本カラーデザイン研究所編「カラーイメージスケール」（著/小林重順）

投稿アンティークなデザインはTaniweb制作の最初に登場しました。