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

関連記事

  1. Web関連

    プリントケーキで思い出に残るお誕生日を!

    今回は、お誕生日や結婚記念日など特別な日にぴったりのユニークなプリント…

  2. Web関連

    最近よく聞くセルフサービスBIについて調べてみた

    いきなりですが、皆さんセルフサービスBIというものがどんなものかご存知…

  3. Web関連

    【web制作】プロトタイプの前段階「POC」とは?

    突然ですが、皆さんは「POC」という言葉を聞いたことはあります…

  4. Web関連

    「なんでついて来るの!」あのストーカー広告について整理してみる

    女性A:「このサイトの広告...いつもどのサイトにも表示されている..…

  5. Web関連

    【クレーム解消】Web制作会社が教える苦情対応マニュアル

    さて、今回のコラムは苦情対応についてまとめてみました。苦情対応で大…

  6. Web関連

    料理が上手い人は仕事も出来るのか

    今回はちまたでまことしやかに囁かれている「料理が上手い人は仕事もできる…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    Webデザインの95%はフォントで決まる?!Webデザイナーなら知っておきたい3…
  2. Web関連

    システム開発で大事なテストプロセス改善のポイント
  3. AI関連

    「モノ消費」よりも心に残る「コト消費」が広がる理由は?
  4. Web関連

    脱・マンネリ化!仕事が楽しくなる3つのスイッチ
  5. Web関連

    日本の経済の牽引頭である車業界、今後どうなっちゃうの?
PAGE TOP