Web関連

作成する資料をちょっと良くできる!デザインの2ポイント

0

最近は自粛&自粛で運動不足に拍車がかかっている、デザイナーの松平です!
皆さんはいかがお過ごしでしょうか?
外出すること自体がはばかれるので、自宅で過ごす人がほとんどではないかなと思います。
意外と生活って自宅で完結できるんだなと、元々インドア派の私も驚くことばかりです。
今までよりプライベートに使える時間が増えたので、こういう時こそ出来るのが、”勉強”だと思います。
勉強というと構えてしまう人も多いとは思いますが、インプットを増やす機会にはちょうど良い機会です!
このコラムでは、通常の業務にも使うことができるデザインの考え方を説明します。
デザインの考え方は、資料作成など「クリエイティブ関係ないんじゃない?」というところにも活用が可能です。
資料などを良くする、初めの一歩としての考え方を2つ紹介します!

1つ目:視線誘導

デザインの良し悪しを測る一つの指標として、「伝えたい情報が相手へ明確に伝わっているか」を考える必要があります。(この伝えたい情報は、その時々によって異なります。)
伝わりにくいデザインは見た相手に対して、読みにくさや不安感を与え、また目を向けてもらえない可能性すらあるのです。
ところで、人は文字情報を見た時に一番最初にどこに目がいくかご存知でしょうか?
それは、「左上」とされています。
なぜなら、横書き文字の場合左上から始まっているからです。この文章もそうですよね。
こうした人間行動学に基づいて考えると、一番最初に伝えたい情報は「左上」におくこと(または左上を支点としておくこと)で、目に入りやすくなります。
こうした視線の動きを活用した法則が二つあります。

・Zの法則

左上を最初として、右上→左下→右下と流れる視線の動きを指します。
Zのような視線の流れをするので、Zの法則と呼ばれています。
これは、チラシやバナー等によく用いられています。

・Fの法則

左上を最初として、左下→右上→左下→右上と流れる視線の動きを指します。
Fのような視線の流れをするので、Fの法則と呼ばれています。
例としては、このコラムのようなWebページに主に用いられています。
またこのほかにも「Nの法則」もあり、これは縦書きである日本ならではの視線の流れになっています。
こうした視線誘導を意識することで、見た相手が読んでいて疲れたり、迷ったりしないような資料やデザインを作成することが出来ます。

2つ目:デザインの4つの基本原則

デザインを作成する上で、大切な基本のことが4つあります。
それは、「近接」「整列」「反復」「コントラスト」です。4つまとめて「デザインの4つの基本原則」と呼ばれています。
言葉自体はしっかりと覚えなくても大丈夫ですが、これらを意識するだけでもパッと見て分かりやすい資料を作成することが可能です。
この4つの基本原則について、簡単に説明します!

・近接

近接とは、同じ情報の要素は近くに配置することです。
人は近くにあるもの同士を無意識のうちに同じグループと見るようになっています。
こうした無意識を活用することによって、情報のまとまり(グループ)が出来るので、パッと見て分かりやすくすることが可能です。
また、余白を有効活用することによって、近接はより効果を増します。

・整列

整列は読んで字のごとく「整える・揃える」ことです。
「上揃え」「右揃え」「左揃え」「中央揃え」「下揃え」など、揃え方にも様々ありますが、揃えることにより、精錬されたイメージをつけることが可能です。
また整列を活用することによって、自然な視線の流れを作ることが出来るので、前述の視線誘導を意識的に作ることが出来ます。

・反復

反復は、似た情報の並びの場合、同じように配置することでまとまりあるものにすることです。
例えば、「写真」「商品名」「値段」が記載されたメニューがあったとして、全部が統一感なくバラバラに配置されていたら、とても読みにくいですよね。
作成段階でルールを設け、そのルールに従って2つ目、3つ目…と作ることによって、統一感が出るので、パッとみた時に見やすいものにすることが可能です。

・コントラスト

コントラストは、「対比」という意味の言葉です。
分かりにくいなと感じる人もいるとは思いますが、「強弱」をつけることがコントラストをつけると考えておくと分かりやすいと思います。
例として、セールの広告を出したい時に、一番アピールしたいことは何になるでしょう。
それは、セールのタイトルであったり、内容を簡潔にまとめたキャッチコピーであったりするのではないでしょうか?
上記のような一番にアピールしたい情報を大きく・目立つように配置することで、情報同士でコントラストをつけることに繋がります。
コントラストをつけるポイントとしては、情報の大きさに差をつけること、色で差をつけることなどがあります。
目立たせたい・アピールしたいというところは、大きく配置をしたり、また色を変えたりすることがコントラストをつける為の一歩になります。

さいごに

デザインの基本として、「視線誘導」と「デザインの4つの基本原則」を説明しました。
デザインの基本と大きくいってはいますが、これはどの仕事にも活用できる方法だと思います。
説明した法則は、人が無意識に感じ取ったりしていることばかりです。
こうした内容を意識的に行うことで、より相手の立場に立ち、思いやりを持った仕事が行えます。
時間が多くある今だからこそ、ちょっとしたことを意識して、より良い資料等の作成を心がけましょう!

0

デバイスでもっと快適にイラストライフを目指す!!前のページ

デジタルシフトするアフターコロナの新しい時代のビジネスモデル「DX」とは?次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. 新しい販売形態であるDtoCについて考えてみる
  3. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    Webにもつながる、オタク御用達のニュースアプリを使ってみた。

    年末の慌しさで大好きなアニメやゲームを楽しむどころか、最新ニュース…

  2. Web関連

    こんなリクルートサイトは困る!就職活動中の学生が避けるサイトとは?

    大企業から中小企業まで数多くのリクルートサイトが存在しますが「この職場…

  3. Web関連

    やっぱりスニーカーが好き!オススメスニーカーECサイト3選!

    さて、すっかり夏の陽気になってきましたね!夏と言えばアウトドア、フェス…

  4. Web関連

    【ホームページ制作】GUIの歴史を辿ってみた

    みなさんはGUIという言葉はご存じでしょうか?ぐいぐい~。GU…

  5. Web関連

    レスポンシブとは少し違う、アダプティブWebデザイン

    この記事を読んでいる方は「レスポンシブWebデザイン」というワードを耳…

  6. Web関連

    今さら聞けない!アクセスログ解析のやり方コラム ~3つの基本指標編~

    つい先日、よく行くクライアント先まで外出に行く途中、電車の中で一緒にい…

おすすめ記事

最近の記事

  1. 持つべきなのか?運転免許証+マイナンバーカード
  2. RPAから始める業務効の自動化 働き方改革への選択肢の一つに…
  3. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  4. 約1年間のウィズコロナ生活で大きく変わったもの
  5. スマートストアにより、小売業は激変する

アーカイブ

「いいね」を押された記事

  1. サービス・新技術

    凄すぎた!CES2020に登場したVRゴーグル
  2. AIさくらさん

    【人工知能(AI)×顧客満足度】ユーザーフレンドリーなWebサイト接客に欠かせな…
  3. Web関連

    コンバージョンを上げるABテストとは!?
  4. AI関連

    非接触AI技術が世界を救う?
  5. Web関連

    コミュニケーションの要!?「可愛げ」とは
PAGE TOP