Web関連

4つのポイントを押さえて、シンプルにデザインする

0

デザインをするときに、「シンプルなデザインでお願いします。」と担当さんから要望をいただく機会が数多くありませんか。
私も要望の通りデザインをしたはずが、「うーん、ちょっとイメージと違います…」とご指摘をいただくことがありました。
なぜ担当さんのイメージと違っていたのでしょうか。
そもそも、シンプルなデザインってなんでしょうか?
Webで調べて出てきた説明がこちら
「シンプルとは簡単、扱いやすい、単純な、基本的」
この説明だけ見ても分かりづらいですね…
ものすごく簡単にいうと「パッと見て分かりやすいデザイン」を一般的には指すことが多いです。
「そうは言われてもよく分からない」と声が聞こえてきそうですが、難しく感じるのは正しいです。
シンプルなデザインとは見た目以上に考えて作られており、一つ間違えるとデザインされていないように見えてしまいます。しかし、デザインを作る時に意識していることを知ると「なるほど!だからシンプルは分かりやすく多くの人に好まれるのか」と思うことが多くあります。
今回は特にここを気をつけて作っている「4つのポイント」をバナーを例にまとめました。
※バナーとはリンク付きの広告を指す、リンク先のサイトやページを紹介する画像のこと。

1.情報の整理

シンプルなデザインは、まず要素が少なく最低限の情報でまとめられています。文章が長かったり、見ても何の情報が書かれているかわからないとそもそも読み飛ばされてしまう可能性が高いです。なので、まずは伝えたい情報を整理し、優先度をつけていきます。
例)
「商品30%OFFで冬のセールを開催します。期間は1/15から1/22まで、商品をまとめ買いするとさらにお得になります!」
→下記のように単語や一つのまとまりで区切っていくとより分かりやすいです。
1. 夏のSALE
2. 30%OFF
3. 1/15~1/22
4. まとめ買いでさらにお得!
この時にバナーに載せる情報は、何がお客様にとって欲しい情報になるか、担当さんとしてはどこをアピールしたいのか、
「誰のため」の情報を伝えるのかを明確にします。意味や文字数的に別の言葉に置き換えると伝わりやすい場合は提案もするとよいでしょう。ただし、商品名を変えるなどの意味が違ってしまう変更は誤った情報になりますので駄目です。

2.文字の強弱

情報の優先度が決まったら、指定されたバナーサイズに文字を配置していきます。作りたいバナーサイズに、文字やキャッチコピーを置いていきます。置いたら先程つけた優先度順から文字を大きくしていきます。その時に文字サイズは最低でも10px以上はないと読めません。またフォントも作成するバナーのイメージに合わせます。
その時におすすめのフォントはヒラギノ角ゴシック、游ゴシックは癖があまりなく読みやすい、非常に使いやすいです。
参考画像01.jpg

3.見やすさ、余白

最初はシンプルに作ろうとすると、こんなにも余白が空いていいのだろうか、もっと要素やデザインを足したほうがいいか、と感じますが不安にならずに、むしろやり過ぎかなと思えるくらいが丁度いいです。無理に余白を埋めてしまうと、せっかく優先度をつけた情報が他の要素に気を取られてしまい、見ている人が分からなくなってしまいます。
そんな時に思い出してほしいのが、シンプルとは「ぱっと見てわかるデザイン」です。
少しでも「これなんの情報だろうか」と感じたら、余白が足りず見にくくなっています。作った後は並べた要素を画面から離れて見たり、余白のありなしで比べて見ると、どちらが見やすいか気づきます。
参考画像02.jpg
余白はどちらかに偏っているよりも、上下の余白が揃っているとよりスッキリとします。

4.色

次に色ですが、要素に入っているのは「夏」ですので、季節感を出すをためにさわやか、涼しげなカラー系から色を選んだり、特に目立たせたい「SALE」に赤など入れると目を引きやすくなります。この時に注意してほしい点としては色数を増やさない、目立つ色同士の組み合わせは避けることです。
色数が多いと見ている側へ伝える情報が増えてしまうため、なるべく2~3色にするとまとめやすいです。
色の組み合わせも赤と黄色は目立つので使いたくなるのですが、主張が強いため他の要素を無視して目を引きます。なので、目立つ色は1色だけにして選ぶと優先度がつけやすいです。
参考画像03.jpg
他にも下線や丸の飾りや商品のモチーフを入れてみるとよりイメージが伝わりやすくなります。
例に出すと「世界のお菓子」なら地球のイラストを入れると要素との関連性と分かりやすくなります。文字だけを配置するよりも楽しそうな雰囲気を出すことができます。
複数のバナーの要素を参考に組み合わせてると、オリジナリティが上がり、より良いデザイン生まれます。
また作業に詰まってしまったら別パターンを作ってみたり、時間を置いてみるのも大事です。
最後になりましたが、普段デザインの参考に使っているサイトやアプリをご紹介します。
Pinterest https://www.pinterest.jp/
いろんなジャンルのデザインと、自分好みにデザインをまとめられてるので使いやすいです。自分だけではなく他の人がまとめたデザインも見れるので、よりデザインの幅が広がります。また、アプリもあるのでスマホからもチェックが出来ます。
マイフェバ https://www.my-fav.jp/
関西、北陸、瀬戸内(せとうち)の旅行サイトをまとめたものになりますが、特集ごとのページやバナーのデザインがとても可愛いです。写真の使い方や、文字の入れ方、装飾などお手本となるものがたくさんあり毎日訪れたくなります。
Muuuuu https://muuuuu.org/
こちらバナーではなく、サイトをまとめたものになりますが、デザインとクオリティが高いサイトがまとめられており、更新も多いので最新のトレンドを探しやすいです。
それでは、今回ご紹介したポイントを参考にシンプルなデザインを作ってみてください。

0

気付いてますか?ビジネスで愛されるタブレット端末前のページ

スマートフォン専用サイトに力を入れないといけないワケ次のページ

ピックアップ記事

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

関連記事

  1. Web関連

    360度見れる動画?!新しい動画時代の始まり!

    皆さんはYoutubeを見たことはありますか?スマートフォンが普及し…

  2. Web関連

    顔までも分かる!?DNAの可能性とは。

    はじめまして!映画が好きなコンサルの瀧川です。唐突ですが今回はDNA…

  3. Web関連

    イラスト制作における時短への取り組み ~イラストのディレクションをしていて気づいた事~

    働き方改革が謳われるようになってから、様々な業務の効率化が急がれたり、…

  4. Web関連

    Webサイトと未来をつなぐ「VR」

    PS4といえば、去年SONYから発表された「PlayStation V…

  5. Web関連

    写真から情報漏洩!?セキュリティ対策とは?

    「写真から位置情報が特定される」というニュースや噂を聞いたことがあるの…

  6. Web関連

    【Web制作】WordPressを使ったCMS構築の料金はいくらになるのか計算してみる

    こんにちは小森です。今回はWordpressを使ったCMS構築…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    吊り橋効果で認知度向上!口コミで話題の会社になる方法
  2. Web関連

    広告によるストレスを減らすネイティブ広告
  3. Web関連

    空腹注意! 飲食業界に関わって学んだこと!
  4. Web関連

    ポジティブでいることは成功への近道?! Web制作会社だからこそ求められる理由と…
  5. SEO関連

    SEO・LPO・EFO対策をしたい!
PAGE TOP