Web関連

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

デザインをするときに、「シンプルなデザインでお願いします。」と担当さんから要望をいただく機会が数多くありませんか。
私も要望の通りデザインをしたはずが、「うーん、ちょっとイメージと違います…」とご指摘をいただくことがありました。
なぜ担当さんのイメージと違っていたのでしょうか。
そもそも、シンプルなデザインってなんでしょうか?
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/
こちらバナーではなく、サイトをまとめたものになりますが、デザインとクオリティが高いサイトがまとめられており、更新も多いので最新のトレンドを探しやすいです。
それでは、今回ご紹介したポイントを参考にシンプルなデザインを作ってみてください。

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    ストレージ仮想化ってなんですか?

    こんにちはシステムエンジニアの小森です。ある日、誰かが言いました。…

  2. Web関連

    ホームページ制作会社が教えるインフォグラフィックの基礎、ピクトグラムの作り方

    デザイナーに限らず、インフォグラフィック好き!という方、多いのではない…

  3. Web関連

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

    こんにちは。2月~4月にかけて花粉症で目の痒さに悩まされるデザ…

  4. Web関連

    みんな大好き!スターウォーズの見どころを語ってみた

    皆さんもご存知だとは思いますが、「スターウォーズ フォースの覚醒」が公…

  5. Web関連

    Webデザイナーのあなたへ Web用フリー素材サイト5選

    こんにちは!デザイナーのイゲタです。デザイン制作をする中でつま…

  6. Web関連

    富士山から習うサイトのモバイル対応の必要性

    電車での移動時間、お昼の休憩時間、ちょっとしたスキマ時間に使用するスマ…

おすすめ記事

最近の記事

  1. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  2. 約1年間のウィズコロナ生活で大きく変わったもの
  3. スマートストアにより、小売業は激変する
  4. 【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
  5. AI技術の普及により移動も安全に

アーカイブ

  1. Web関連

    アプリを使ってタイムスリップ!昔の上田を見てみよう
  2. Web関連

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

    【人工知能(AI)×介護】人工知能が高齢化社会の介護サービス充実化に貢献
  4. Web関連

    注意!悪意あるwebサイト改ざんに気づく方法
  5. Web関連

    Facebook広告は効果的?設定方法や成功事例について調べてみた
PAGE TOP