ヤフージャパンプレミアム広告賞受賞

自社書籍

新卒採用情報

長期インターンシップ募集

採用情報

Bigmac 社長ブログ

スタッフ厳選!!おすすめ情報

ITAL株式会社

twitter
@Bigmac_work
google+
rss
rss
a
follow us in feedly
hatena.bookmark
このエントリーをはてなブックマークに追加

スタッフ厳選おすすめ情報

デザイン

おすすめ情報

2017年1月29日

グラフィックデザインの定番レイアウト手法10選

グラフィックデザインの定番レイアウト手法10選

レイアウトとは元々、[lay out]=[lay(動詞)+out(副詞)]で
「広げる」「設計する」という意味を持つことばです。
デザインでいう「レイアウト」は、
あるスペースに何かを配置することを指します。

レイアウトに触れる場面は、実は私達の生活の中に
たくさん潜んでいます。
例えば、机の引き出しの中のものの配置を
決めることもレイアウト。
町づくりで、郵便局や学校、住宅などの場所を
どこにするか決めることもレイアウトなのです。

町づくりで一番大事なことは「暮らしやすさ」です。
レイアウトは、この「やすさ」を考えることが重要です。
印刷物のレイアウトで大切なのは「分かりやすさ」です。

この記事では、ポスターやチラシなどの印刷物の内容を、
見る人により的確にわかりやすく伝えるために
レイアウトの手法をご紹介していきます。

レイアウトの役割とは?

手法の説明に入る前に、
レイアウトの役割について考えてみましょう。
レイアウトを分かりやすくする目的は
なんだと思いますか?

それは、見る人によい印象をもってもらうことです。
良い印象を持ってもらうと、

  • 新商品の広告の場合・・・
    その商品がより多くの人に知られて売上が上がる
  • 映画のポスターの場合・・・来場者数が増える
  • 雑誌の場合・・・読者が心地よく有益な情報を得られ、
    また読みたいと思ってもらえる

その為には、雰囲気の演出や情報の伝え方に工夫が必要です。
雰囲気の演出と一言にいっても、
「しずかな雰囲気」「インパクトのある表現」
「ゆったりした感じ」など様々な手法があります。

その中から、その印刷物の内容に最適な演出をよく考えて、
見る人の気持ちを揺さぶる事ができれば、
そのレイアウトは役目を果たしていると言えるでしょう。

活用できるレイアウトの手法

ジャンプ率

ジャンプ率のイラスト

ジャンプ率とは、配置した要素の大小サイズ比のことで、
大きな要素と小さな要素の差が大きいとき、
「ジャンプ率が高い」といいます。

反対に、大小の差がそれほど無い場合は、
「ジャンプ率が低い」状態です。
ジャンプ率が高いと、躍動感や賑やかさを
感じさせることが出来ます。

逆に、落ち着きを表現したい場合などは、
ジャンプ率が小さくしましょう。

図形や画像だけではなく、
文字にもジャンプ率を応用することができます。

強調したい見出し部分などの文言を大きくしたり、
接続詞(例「〇〇と〇〇」の「と」)を小さくすることで
緩急が生まれ、内容が素早く見る人に伝わります。

【向いている内容】
要素が多めで賑やかな雰囲気

視線を誘導

視線を誘導するレイアウトのイラスト

配置する要素には、読み進めるべき順番が
想定されているものです。
その順番を妨げず、自然に視線を誘導するのも
レイアウトの大事な役目です。

また、配置の工夫や余白の活用などで
スムーズな流れがつくられたレイアウトは、
内容を理解し整理する手助けにもなります。

基本的に紙面を見た時の人の視線は、上から下に移動します。
また、右開きの本では右から左へ、
左開きの本では、左から右への視線の流れが生じます。
パンフレットや冊子などのページレイアウトでは、
この流れに沿って要素を配置するとよいでしょう。

この流れと異なる動きのレイアウトをする場合は、
少し工夫が必要です。
例えばですが、商品とその商品の説明文が載っているページで、
読んでいる説明文がどの商品のものなのか
わかりづらい場合があったとします。
その場合は、説明文から引き出し線(矢印)などを引っ張ることで、
スムーズに説明文と商品を結びつけることが出来ます。

その他に、文章の多いレイアウトの場合、
段落の頭文字だけを大きくする「ドロップキャップ」という
手法を使うことで、読みやすくすることが出来ます。

【向いている内容】
要素が多めで複雑なレイアウト

逆三角形

逆三角形のレイアウトのイラスト

レイアウトでは、要素を配置したときの
紙面全体の構図への配慮も大切です。
レイアウトに慣れないうちには、典型的な構図を参考にすると、
バランスよく仕上げられます。
その一つが逆三角形の構図です。

逆三角形の点に配置する要素を大きく、
その他を小さくすること手法で、紙面に動きを出しながら、
ほどよい緊張感を生み出し、全体を引き締めることが出来ます。

逆三角形は不安定な構図なので、
もうすこし安定したイメージを表現した場合は、
逆二等辺三角形にすることで、緊張感を和らげることが出来ます。
また、安定した三角形の構図では、落ち着きを表現できます。

【向いている内容】
3つ以上の要素がある場合

ユニット化

ユニット化のイラスト

ユニット化とは、商品や店舗を紹介する紙面などで、
一つの情報を小さな枠組みに割り当て、
あらかじめ決めておいた枠内の配置ルールに沿って、
レイアウトする手法のことです。

ユニット化のメリットは、膨大な情報を
きれいにまとまって見せられることです。

枠で囲む以外にも、線で区切ったり、境界部分の余白を
しっかりとることでも区分けすることが出来ます。
ただ、ユニット化したレイアウトは機能的な反面、
単調にも感じられやすいため、ユニットを変形させたり
デザインを工夫して遊びを加えましょう。

【向いている内容】
要素が多めで、情報がひとつひとつ明確に区分けできる場合のみ。

グリッドシステム

グリッドシステムのイラスト

グリッドシステムとは、紙面を水平・垂直に等分割して
格子状のガイドをつくる手法で、
冊子などで読み物が複数ページで展開されるような場合、
このガイドに沿って配置を行うと、
レイアウトが統一され読みやすくなります。

ページ内でグリットに沿わせた箇所が多いほど
新聞のような堅い印象になり、
部分的にずらす箇所を増やすほど動きが生まれます。

【向いている内容】
要素が多め

パターン化

パターン化のイラスト

同じ図形を繰り返し並べるなど、
規則的な反復表現のことをパターン化と言います。

心地よいリズム感を生み出すパターンは、
テキスタイルのデザインでよく見かける手法です。
紙面の場合では、背景にドットやストライプを敷いたり、
連続写真でストーリー性を生み出す手法で使われます。

等間隔で配置したパターンのように規則性を強調すると、
まとまりを感じさせることが可能です。
パターン表現は単調になりがちですが、アクセントを入れたり、
1つおきに図形の色やサイズを変えることで、
規則的な中にも変化をつけることができます。

【向いている内容】
要素が多めで賑やかな雰囲気

アクセント

アクセントのイラスト

アクセントを効果的に機能させるためには、
一瞬見ただけでわかる大胆な変化の表現が必要です。

アクセントの数は増やしすぎると、
散漫でインパクトが弱まり逆効果になるので、数は絞りましょう。
アクセントの例をふたつ紹介します。

    • 繰り返しのパターンの中に
      一箇所だけ違うデザインの要素を置く
    • モノクロのレイアウトに一点だけカラーの要素を置く

【向いている内容】
すべての要素に効かせられるが、要素が多い場合は工夫が必要。

ホワイトスペース

white-space

ホワイトスペースとは、紙面にある余白のことです。
なんとなく余ってしまったスペースではなく、
意図的につくられたものです。

ゆったりした静かな雰囲気や、上質さの演出、
視線の滞在時間を長くするなど、余白は多くの役割を果たします。
注目させたい要素の周りに広く余白をつくり、
要素自体もシンプルなデザインにすることで
余白を最大限生かすことができます。

全く余白のない紙面は読みづらく、窮屈で圧迫感を感じさせます。
余白を多くとる部分と要素を集中させる部分を
紙面の中にバランス良く盛り込みましょう。

【向いている内容】
要素が少なめで静かな雰囲気

シンメトリー

シンメトリーのイラスト

シンメトリーは、古くから使われている
定番レイアウトのひとつで、
図形を反転させて構成される左右対称・上下対称や、
図形を回転させて構成される点対称などがあります。
上質で静かな雰囲気を出すにはもってこいのレイアウトです。

また、写真や図形だけでなく、
メニュー表などの文字のレイアウトにも使えます。
書体も上品な明朝体やセリフ体、筆記体などを用いると、
より高級な印象に仕上がります。

【向いている内容】
画像が少なめで静かな雰囲気

対比

対比のイラスト

2つの要素を並べると、人はそれらを見比べて
何らかの関係性を読み取ろうとします。

この対比の効果をうまく生かすことで、それぞれを強調したり、
時間の流れなどのストーリー性を演出できます。
サイズ差や色の違いなど、対比させたい要素を
的確にレイアウトすることがコツです。

対比の例をふたつ紹介します。
・リアルな人の顔の写真と、
その人のイラストの顔を隣り合わせて配置する
・同じ場所で違う時代にとったふたつの写真を上下に配置する

【向いている内容】
要素が少なめでシンプルなレイアウト

まとめ

以上、10個のレイアウト手法をご紹介しました。
今まで、何も考えずになんとなくレイアウトをしていた
デザイナーの方は、まずはこの10個の手法の中から
当てはまるものを選んでデザインすると
いいのではないのかなと思います。

レイアウトを上達させるには、できるだけ多くのデザインを見て、
自分がいいと思うデザインにはどういうレイアウト手法が
取り入れられているのか、『考えながら見る』ことが大事です。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年1月4日

Webデザイナーがこだわるべき情報設計とは

information-design-webdesigner-should-consider

Webデザインを制作するとき、
みなさんはどんなことに気をつけているでしょうか?
もちろんデザイン性や
クライアントの要望に沿うことも
大事なことと言えますが、
それ以前に
まずはWebデザイナーなら知っておいて欲しい
過程が、「情報設計」です。
「情報設計」と聞くと、
デザインとはかけ離れて聞こえるかもしれませんが、
情報設計にこだわることで
ユーザーにとって使いやすく、
わかりやすいサイトができあがってきます。
この情報設計の過程は、
Webサイト制作をしていく中で
ワイヤーフレームやサイトマップの作成以前に
取りかかるべき工程です。
そしてしっかりと情報設計を行った上で
ページ構成・サイト構成といった
ワイヤーフレームやサイトマップを
作成していくのが良い手順だといえます。
今回は
その情報設計について詳しく紹介していきたいと思います。

情報設計とは何か?

Webデザインを制作したとき、
「なぜこういうデザインにしたのか?」
と聞かれて、あなたは即答できるでしょうか?
情報設計とは、簡単に言ってしまえば
利用者にとってわかりやすく、使い勝手がよい
設計をしていくことを指します。
情報設計をしていくことで、
デザインができあがったとき、
ボタンひとつにしても、
「なぜここにこのデザインで
ボタンを置いたのか?」
という質問にも答えられるようになるでしょう。
制作する上で必要な情報をまとめ、
ユーザにとってわかりやすく、
使い勝手がいいように設計をしていくこと、
更にはユーザーをゴールまで
きちんと誘導できるような設計を
していくことが、
情報設計といえます。

情報設計の流れ

実際に情報設計する際に、
まずはクライアントのヒアリングで
詳しく色々な情報を聞き出していきましょう。
その中でも最低限こちらは
考慮していくべきというポイントを
挙げていきたいと思います。

なぜWebサイトを作るorリニューアルするのか?

Webサイトを制作するにあたり、
まずはなぜサイトを作りたい、
もしくはリニューアルをしたいと思い、依頼したのか?
その点は必ずヒアリングしていただきたい項目です。
なぜなら、
その「きっかけ」が
今回制作するサイトの課題であり、
改善するポイントであるからです。
例えば、
・訪問数が少ない
・必要な情報が載せきれていないためユーザーが不満に思っている
・ECサイトの売り上げを伸ばしたい
・企業の認知度をあげたい
などなど、
Webサイトを制作する上で期待している効果が
どういったものなのか?
何を問題と感じているのか?
そういった点を明確にしていきましょう。
企業サイトの場合などには、
とりあえず案内できるホームページが欲しい、という
クライアントも多くいるかと思います。
そういった方にも、
せっかく作るのであれば、
ホームページを通してどういうことを
伝えていきたいか?
を必ず聞くべきだと思います。
例えば、採用情報をサイトにしっかりと載せていき
サイトからの応募も受け付けたいなども
出てくるかもしません。
特にサイトを作る目的がなく、
案内できるものでいいのであれば、
最近はテンプレートなどもあり、
専門知識がなくてもWebサイトが作れてしまうので、
自社で簡単に作ってしまった方が
コストもかからず良いとは思いませんか?
それでも費用をかけて制作会社にお願いをする、
ということは少なからず制作をすることで何かを
求めているということは理解しなければいけません。
それが何なのか、
それに応えるためにはどうしていけばいいのか
クライアントと一緒に考えていくことが
大事だと思います。

原因を分析しよう

こちらはサイトのリニューアルの際に
特に重要となってきます。
現行サイトで、問題と感じているものが
なぜ発生しているのか?
どこで発生しているのか?
問題点の分析をしていきましょう。
この分析においては、
制作会社によっては他部署がしてくれたり、
また何かツールを使ったりと
様々な方法があります。

戦略をたてよう

現状の問題点やその原因の分析、
把握ができたところで
どうしていくべきなのか戦略をたてていきましょう。
その中で、競合他社との比較、
差別化、
または対象となるユーザー(ペルソナ)の設定など
を考えていく必要があります。
そして、ゴールの設定、
そこまでの誘導など様々なことを
この段階で整理していきます。
ゴールに向けての施策を練っていき、
しっかりとした目的・目標をもった
Webサイトを制作していきましょう。

Webサイトの設計をしよう

施策とゴール、
今回制作するWebサイトの目的・目標を
明確にしたところで、
ようやくWebサイトの中身を考えていきます。
設計前の情報整理がないと、
設計をする際にそもそもの目的がブレてしまったり、
クライアントの意向にばかり沿った設計に
なってきてしまいがちなので、
まずはここまでの過程(情報整理)を
必ずしっかりと行い、
クライアントにもそれを共有していきましょう。

必要なコンテンツを洗い出そう

まずは現行サイトを参考にコンテンツを洗い出し、
その中でも必要なコンテンツ、
必要でないコンテンツ、
または載せていきたいコンテンツなどを
整理していきましょう。
ゴールを明確にしていることで、
そのコンテンツがゴールに向けて
必要なのかどうか検討しやすくなると思います。
また、この時に重要なのが、
必ずしも全ての情報を
Webサイトに載せるべきではない、
ということです。
コンテンツが多くなれば多くなるほど、
ユーザーに何を伝えたいのか?が
わかりにくくなり、
結局のところ何のためのWebサイトなのかが
わからなくなってしまうことが
多々あります。
ユーザーにとって本当に必要なのかどうか
Webサイトに載せるべき情報なのかどうかを
この工程でじっくりと考えていきましょう。

コンテンツを見せる流れを考えよう

コンテンツを見せていく中でも、
その流れによって
伝わりやすさが格段に違ってきます。
どんな流れで見せていけば
ユーザーがわかりやすく、
納得してくれるのかを考えましょう。

サイト構成・ページ構成を作成しよう

必要なコンテンツと流れ(重要なコンテンツ)を整理したところで、
ようやくサイト構成とページ構成を作成していきます。
この工程がいわゆる
サイトマップ・ワイヤーフレームの作成となります。

ここまでの一連の流れが
「情報設計」となります。
これ、全部Webデザイナーがやる仕事なの!?と
思われる方も多いかもしれません。
制作会社によって異なってくるとは思いますが、
制作側との認識の違いを
減らしていくためにも、
制作側もこの流れを必ず知っていなくてはいけません。
その中で、
ヒアリング・情報整理までは他部署で行い
その情報を制作側に落とし込むという
制作会社も多いのではないでしょうか?
情報設計に全て携われないとしても
最低でも情報の落とし込みをして、
実際の制作担当が
しっかりとそのWebサイトを制作する
目的やゴールがわかっていないと
結局中身がブレたサイトができあがってしまいます。

Webデザイナーとして、
デザイン・構築をすることが全てではありません。
指示通りにデザインをおこして
構築するだけなら知識さえあれば
誰でもできることです。
言ってしまえば、
ここまでは学生の範囲です。
お仕事としてこなしていくのであれば、
それ以上が求められるのは
当然のことですよね。
自分が満足するだけのデザインでは
もちろんお仕事とはいえませんし、
もちろんクライアントのことだけを
考えたデザインでもいけません。
Webデザイナーとして大事なのは
その先にユーザーがいることを
踏まえた上で、
そのWebサイトの目的を達成できるような
デザイン・設計をしていくことです。
その一歩として、
まずは情報設計を自分の中でしていってみるのも
良い方法なのではないかと思います。
ぜひ実践してみてください。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年1月3日

そのデザイン、マークアップ意識してる?文書構造を理解せずしてWebデザインを作るな!

そのデザイン、マークアップ意識してる?文書構造を理解せずしてWebデザインを作るな!

あなたはどんなWebデザイナー?

もしあなたが「Webデザイナー」という職業ならば、
自分の作ったデザインを、きちんとコーディングできますか?

「Webデザイナー」がどこまで手広くやるかは
昔からよく議論されている内容ではありますが、
「Webデザイナー」「コーダー」が完全分業という考えは、
今はもうだいぶ古くなってきているのではないでしょうか。
(決して完全分業を否定しているわけではありません)

どちらかに特化した人材は作ることはできますが、
どちらにしても、双方の手法を知らないと、
結局両者への負担が大きくなったり、
意味のないコードが増えたり、
デザイン通りのサイトにならなかったり、
SEOを無視したソースの汚いサイトが
出来上がってしまったりなど
マイナス面が大きくなってしまいます。

Webデザイナーを含む、Webクリエイターの相関図

Webクリエイター相関図

上図のとおり「Webクリエイター」という括りの中には
複数の職種が存在しています。

デザインしかできないWebデザイナーか、
コードしか書けないコーダーから始まり、その次のステップに
多少のコードなら書けるWebデザイナーと、
多少のデザイン修正ならできるコーダーと、
html・cssをより深く理解したマークアップエンジニア、
よりシステムが絡むフロントエンドエンジニアが位置します。

マークアップエンジニア

ここで出てきた「マークアップエンジニア」とは、
HTML5でのコーディング、
CSS3でのデザインあてはもちろんのこと、
コンテンツの内容をきちんと理解しながら
デザインや文章を構造化し、
検索エンジンにもフレンドリーなマークアップをするなど、
ディレクターやデザイナーの意図を汲み取り
かつ改善の提案ができるレベルでのコーディングが
できる人材のことを指します。

フロントエンドエンジニア

また、「フロントエンドエンジニア」とは
Web標準やアクセシビリティに配慮した
質の高いコーディングを行い、
長期的に見た保守性にも優れた
設計をできることが前提となります。
その他、UI(ユーザーインターフェース)にも
意識した実装に気を配りつつ、
画像素材の用意やデザイン設計といった
Webサイトやページデザインなどの
Webデザイナーとしての役割も
求められることがあります。
企業によってはこの職種がシステム部分を理解し
触るケースも多く、簡単に言えば、
プログラマ寄りのWebクリエイターと言えますね。

かくゆう私は「デザイナー」兼「マークアップエンジニア」
という立場になるかと思うのですが、
最近は実作業に集中するよりは、
ディレクション業務の方が主なため、
「コードが書けるデザイナー」
「簡単なデザイン修正ができるコーダー」を
育て上げることに現在は熱意を注いでいます。
(※熱意はあってもその分時間を
費やせているわけではありませんが、、)

「デザイナー」兼「コーダー」兼
できれば「マークアップエンジニア」まで
になれれば最高ですが、現在弊社には
「デザイナーのひよっこ(or卵)」
「コーダーのひよっこ(or卵)」
レベルのスタッフが大半なので、まずは欲張らずに、
「サイト(ページ)構成を理解した上で、
きれいなデザインが作れて、
htmlとcssを使ってコーディングできる」
レベルのお話をしましょう。

こんな人はWebデザイナーと名乗らないで欲しい

私が一番Webデザイナーとして危険だと思うのは、
デザインしかできなくて無理難題なデザインや、
ページ構成を無視したデザインが上がってきて、
ひとりよがりのデザインだけたたきつけて、
コーダーやマークアップエンジニアを
泣かせるデザイナーです。

決して否定しているわけではないですが、
最近は「Webデザイナーです」と名乗ると
最低限のコードは書けると思われることがほとんどなので、
そういった方は自分の首を絞めないためにも、
「コードはかけませんがWebデザイナーです」
とでも言っておきましょう。

さて、デザインしかできないWebデザイナーについて、
何がダメなのかきちんと理由を紐解いてみましょう。

デザインの理由や構成を説明できない

こういったタイプの人は、
「どうしてそのデザインにしたの?」
「ここ、どう組むかわかってる?」
という質問を投げかけた時に、悩んで黙り込んだり、
曖昧な返事しかできないことが非常に多いです。

たとえ業務上、完全分業であっても、
きちんとコードを思い描いてデザインして欲しいですね。
html構成を初心者であれば手書きで、
できるようになってきたら頭の中でもいいので
最初に決めてから、デザインして下さい。

誰のためのデザイン・サイトなのか理解できていない

これはどんなデザインを作る時もですが、
そのデザインは、必ず誰かのために
作らなくてはいけないものです。

ペルソナを設定する、とよく言いますが、
まさしくこれのことですね。
設定したペルソナになりきって、
「どうすれば心に響くか」を考えたり、
詳細なペルソナ設定がまだ難しければ、
せめて年齢層・性別・地域くらいは焦点を絞って、
「どうすればこのターゲット層に対してアプローチできるか」
を考えながらデザインすることが重要です。

ここで勘違いしてはいけないのが、
「クライアントのため」のデザインでは
全くないということです。

ここを履き違えると、膨大なクライアントからの修正依頼を
全て鵜呑みにして、エンドユーザーには全く響かない
サイトデザインになってしまったりします。

さて、ここで質問です。

すこしコードもわかるようになってきたWebデザイナーは
どういった分類となるのでしょう?

Webデザイナーは2種類に分けられる

Webデザイナーには、Webデザインと
初歩的なコーディングまでしか出来ないデザイナーと、
マークアップエンジニアの領域も手広くこなすデザイナーの
2種類に分けられます。

デザインしかできないWebデザイナーとは
言わばコーダーから一歩踏み込んだばかりの
人の事と言えるでしょう。

もしくは、デザイン学校卒業の学生や、
印刷会社などでグラフィックデザインを学び
「印刷は下火だしもういいや、Webしてみたい!」
と転職を決意し、この世界に足を踏み入れた
タイプの人に該当します。

そもそも原点回帰するなら、Webデザインとは、
グラフィックアートやイラストとは違い、
最終的にはhtml化をしないといけない媒体です。

つまりいくらデザイン単体で優れていても、
html化するにあたって、構造が複雑すぎたり、
いくつものjsや無駄なcssをばりばりに使って
ユーザービリティが下がってしまっては
エンドユーザーにストレスを与えるだけの、
無駄なデザインとなってしまうのです。

だからこそ、マークアップを
最初から意識しているWebデザイナーと
そうでないWebデザイナーで分けられるのです。

当然の話ではありますが、
前者のデザインしか出来ないWebデザイナーでも
最低限度のHTMLの知識はあるので、
Webサイトデザインとしてはあらかた形にはなりますが、
根底からマークアップを理解し制作した
Webデザイナーのサイトデザインの場合は、
デザイン要素とマークアップ要素が
完璧に合致し素晴らしいWebサイトになるのです。

ですので、採用の際など特に、
一概にWebデザイナーと言っても
優れているか否かを見極める際は
「マークアップエンジニアの範疇もこなせるか?」
という基準に基づき、見定めることも重要です。

まとめ

2017年を迎えたWebデザイナーの皆様、
あなたがどこを目指したいか、目指すべきか
決意を新たにしていただけたでしょうか。

今年は去年よりも一歩踏み込み
コーディングを前提とし、html構造をより深く理解し、
さらなるステップとしてSEOやアクセシビリティ、
保守性やエンドユーザーへの訴求にも配慮した
Webデザインをできるよう、邁進してください。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2016年12月30日

ビジュアルウェイトとは?

what-is-visual-weight

みなさんビジュアルウェイトという言葉は知っていますか?
重さは、見た目だけでなく、色にも重さがあります。
一目でみて重たそう、軽そうと感じるのは何故でしょうか。
今回はそんなビジュアルウェイトについて
書いていきたいと思います。

見た目の重さ?

生活の中で、重たそう、軽そうと印象に繋がるものもは
見た目の大きさです。
当たり前ですが、大きければ大きいほど重く感じます。
逆に小さければ小さいほど軽く感じます。

それではグラフィックの中ではどうでしょうか?
グラフィックの中で占領する
大きさが大きければ大きいほど重く感じます。
逆に小さければ小さいほど軽く感じます。
ところがそこに色彩が加われば、
見た目の大きさだけでなく、
色によって重さが変わります。
つまり人は見た目の大きさではなく、
色によって重さを感じ取っていることが分かります。

色の重さの関係性とは?

先ほどの話であったように、
人は見た目の大きさだけでなく
色によって重さを感じ取っています。
つまり、同じ大きさのもがあったとしても
色によっては重さが違うということです。
例をだしていきます。

1大きさ

形が大きいものと小さいものがあったら、
どちらが重たそうと感じるでしょうか?
よほどのことがない限り、
大きい方が重たいと感じます。
よくある話ですね。

2色の重さ

例えば同じ大きさのもがあったとします。
色は白と黒。どちらが重く感じるでしょうか?
大体の人が黒と答えるはずです。
コントラストの強いもの、
強烈な色のものが一番重く感じるということです。
明度が高いほど軽く感じ、低いほど重く感じます。
では、黒背景の場合はどうなるでしょうか?
この場合色が強烈なのは白ですね。
つまり、黒背景の場合は白が強く出て、
重く感じるということです。
また、赤は黒と同じくらいに重く感じます。

3サイズが違うもの

今まではサイズが同じもので比べてきました。
それでは、サイズが違い、
色も違うものはどうなるでしょうか?
例えば大きいものが白で、
小さいものが黒の箱が置いてあるとします。
どちらが重く感じますか?
大きい箱の方が重く感じそうですが、
この場合は小さく黒い箱の方が重く感じます。
先ほど書いた通り、
人は色によって重さを感じ取っているので、
色が強烈な黒の方が重く感じます。
サイズが変わっても、
小さい黒の方に重さの比重がかかってしまいます。

4テクスチャが加わると

同じ大きさでも、
テクスチャが加わるだけで見た目の重さが変わってきます。
テクスチャがあるのとないのでは、
ある方が重く感じます。

5縁が加わると

今度は縁を加えてみます。
同じ色のものでも、
黒い縁があるものとないものではどう感じますか?
黒い縁がある物の方が重く感じますよね。
黒は近くの色まで重く感じさせてしまう性質があるからです。

デザインに活かそう

早速デザインに活かしてみましょう。
ここは重く感じるなと思ったら、
サイズだけでなく色を変えてみたり、
強く見せたい所には縁をつけてみたりと
様々な所に活かすことが可能です。
ですが、途中で色や縁を加えた場合は
一度全体を見直すことが必要です。
また、黒は特に近くの色を重く感じさせる力があるので、
黒の近くに配置するときは注意が必要です。

その他のビジュアルウェイト

私たちの生活の中にも
ビジュアルウェイトは活かされています。
例えば、引越屋や宅配便のダンボール箱です。
ダンボール箱といえば薄い茶色を
思い浮かべる人は多いと思います。
実際、引越屋や宅配便のダンボール箱はどうでしょうか?
白色の物が多いですよね。
これもビジュアルウェイトが関係しています。
白は茶色に比べ明度が高いので、軽く感じます。
重たい荷物も白いダンボール箱に入れるだけで、
軽いと錯覚します。

他にも囲碁の碁石も黒の方が少し大きく作られています。
この場合、白は膨張色なので黒に比べて
大きく感じ取られてしまうためです。
ファッションで例えるなら、
白は膨張色のためあまり選ばれないと
いわれていることと同じです。

色の大きさや重さは
私たちの生活の中でも活かされることが分かりますね。

まとめ

いかがでしたでしょうか?
色にまつわる不思議な話はたくさんありますね。
そしてデザインだけでなく、
私たちの生活にも活かされていることが分かります。
よく見るダンボールも
そんな意味があったなんてと驚かされました。
私自身も色の重さは明度くらいだろうと思っていたので、
この記事を書いていくうちに、
縁やテクスチャを加えるだけで、
こんなにも見た目の重さが変わることを知ることができました。
これからの自分自身のデザインに活かしていきたいと思います。
もちろんデザインやダンボールだけでなく、
ファッションにも活かせるはずです。
色彩力を磨いて、
自分のファッションにも活かしてみてはいかがでしょうか?
色彩やその意味を調べて活かすだけで、
見えているものも変わってくるはずです。
この記事を読んで、
少しでも色彩について興味を持っていただけたら幸いです。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2016年12月20日

デザインと心理学の関係

relationship-between-design-and-psychology皆さん、デザインと心理学は違うものだと分けていませんか?実は深い関係性があります。

心理と色は関係は深い

ここでは、心理学に則った効果的なwebデザインを紹介していきます。Webページの記事を初めて見た時、直感的に利用者の脳内に働きかけるものが色(カラー)です。それぞれの色には人間が直感的に感じるイメージが存在します。

たとえば、WEBサイトを見に行ったとき、赤いボタンと緑のボタンが並んでいたとしましょう。どちらか一つ押さないといけないと言われたらあなたはどちらを押しますか?おそらくは緑のボタンではないでしょうか?信号機のように緑には「安全」や「健全」などの機能、影響、背景が無意識に連想できます。逆に赤には「注意」や「危険」のイメージがあります。ボタンを押したらどのような展開になるのか想定できない状況でわざわざ危険と感じるボタンを押す人はそういないと思います。

しかし、意味がわかった状況だと結果は一転します。対応例として、買い物をするためにアプリ、ホームページやWebサイトを訪れた場合は、赤い商品購入ボタンの方が売上が上がるという結果が出ています。実は赤色には危険というイメージの他に、活動的や行動力などのイメージもあります。そのため、購買意欲を掻き立てるというマーケティング結果があります。

このように配色によって人間の感じ方は様々です。最初に、そのWEBサイトが見てくれる人にどのような印象を与えているかはWebデザイナーたちのセンスと技術と経験ももちろんですが、ターゲットを射抜くための色設計で決まると言っても過言ではないほどの心理と色は関係は深いです。それでは、デザインを考える上でおさえておきたい豆知識をまとめました。

視覚階層

視覚階層とは、人間の目が、対象物を把握する順番を指すことで、良質なウェブデザインを支える要素の中でも、特に重要度が高いです。なぜ、視覚階層が重要なのかといいますとビジュアルによる判断は何が重要で自分にとって必要かどうか、何が違うのかを決定づけることができるからです。

あるデザイン要素のウエイトを強くすることで、それらが重要なポイントと対象者は認識します。デザインの基本原理を理解することで、ユーザーの感覚順応に作用しリーチすることができる可能性が高まります。階層において情報は取り込みやすく、そしてより製品が分かりやすいことが重要です。じっくりと考慮された階層は、ユーザーが感情に混乱することなく、安心感を持つことができスムーズに情報内容を理解できるでしょう。さらにデザイン要素まとめることで、統一感を表現できデザイン面が良くなります。

黄金律

見た目が美しくなると言われているバランスの黄金律は、1:1.618です。世界的に有名な古代ギリシャのパンテノン神殿が良い参考例です。

また、フィボナッチ数と呼ばれる、二つの数字0と1から始まる数列で、一つ前の数を次々に加算た数列の法則もあります。
(0、1、1、2、3、5、8、13、21…)

この2つの法則は、全く関係がないように見えるものの、同じ数字を導き出します。この黄金律もデザインにおいて重要です。

ヒックの法則

ヒックの法則は、選択肢を増やすと、それだけ意思を決定する時間が長くなります。メニューにあまりに多くの選択肢が用意されていると、選ぶのに困ります。しかし、2つしか選択肢がないなら決定までにかかる時間は遥かに短くなると思いませんか?

Webサイト訪問者が利用する際に選択肢が多いと使いにくくなります。最悪、全く使ってもらえなくなる場合もあります。そのため、UXデザイナーはより楽しいUXを提供するため、選択肢を少なくする必要があります。ウェブデザインを改善目的を明確にする上で、気を散らす選択肢の削除は、継続的に実施しなければなりません。

三分割法

三分割法とは2本の横線と2本の縦線でスペースを同じ9つの大きさに区切って考え、重要な構成要素を線、もしくは、線が交差する点に画像などを配置する手法です。中心に置くより上記のところに置いたほうが周辺視野を考えてもデザインが良くなります。デザインに画像を利用する有効な手段です。なぜなら視覚的な要素は、テキストよりも遥かに迅速にアイデアを伝えることが出来るからです。

余白&清潔感のあるデザイン

余白は、画面ページの「手をつけない・装飾しない」スペースです。グラフィック、縁、溝、カラムの間のスペース、そして、文字や視覚要素の列の間のスペース等が該当します。「空白」のスペースと認識するべきではない余白は、余白の中のオブジェクトの存在感を引き立てる効果がありデザインにおける大事な要素の一つです。

余白においてのキーポイントが、階層の利用です。会社のブランドメインカラーや写真、広告の文字であれ、色であれ、ブランドロゴ、画像情報の階層が欠かせません。テキストやグラフィックで埋め尽くされた余白のないページは、いくらベースカラーや配置にこだわっていてもゴチャゴチャした印象や散らかった印象を与えてしまい、また、メインのサービスが伝わりにく、読みにくい印象を与えます。十分に余白のスペースを確保すると「清潔感」が生まれます。清潔感のあるウェブサイトは、明確なメッセージを伝える上で重要ですが、コンテンツを少なくすればいいわけではありません。清潔感のあるデザインとは、スペースを有効に活用するデザインをさします。

カラースキーム

色彩計画のことを言います。色のもつ心理的、生理的、物理的効果や性質を利用し、全体的にまとまりのある見やすい雰囲気作りなど、目的を理解した上で見合った配色設計を行うことです。主に建築、インテリアウェブデザインなどでよく使われます。

ハロー効果

ハロー効果とは、ある対象物を評価する際に目立ちやすい特徴にひっぱられて、他の特徴までも高評価してしまう、あるいはマイナスな印象を受けて低評価してしまう心理現象のことを言います。光背効果、後光効果とも呼ばれます。このように、他の特徴や要素の影響力によって、判断を歪めてしまう認知バイアスのひとつです。Webマーケティングでハロー効果活用することでお客さんが好むタイプを理解し、一番最初に提示することで、全体の印象を良くすることができます。

まとめ

上記のポイントを研究し、検索ユーザーのことを考え操作しやすいUXデザインを作っていきましょう。

このエントリーをはてなブックマークに追加
メルマガ登録