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

関連記事

  1. Web関連

    【Web制作】ビッグデータって結局なに?身近なビッグデータを考える

    ビッグデータ関連書籍が数多書店に並び、テレビでも新聞でも騒がれて久しい…

  2. Web関連

    医療出版業界のWebコンバージョンアップ戦略

    ティファナは、業種を絞らず様々なクライアントとお付き合いをさせて頂いて…

  3. Web関連

    動画の効果は凄かった!

    動画共有サービスYouTubeには、「企業が公開した動画で人気のあるも…

  4. Web関連

    それ、時短ツールでもっと早くできるかも!

    年末年始、GW、夏期休暇など長期の休みの前後、Web担当の方はかなり忙…

  5. Web関連

    まだググってるの?情報過多の社会で生き抜くための検索スキル。

    みなさんは何か調べたい時や知りたい時は、先ず何をしますか?インター…

  6. Web関連

    「QRコード」+「Webサイト」=「顧客獲得」

    今回はリアルとネットをつなぐO2Oマーケティングにも良く利用されるQR…

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    キャッシュレス決済はウィズコロナでのウイルス対策に繋がっている?
  2. Web関連

    世界を変える17のゴール!ちょっとかっこいいSDGsのあれこれ
  3. サービス・新技術

    持つべきなのか?運転免許証+マイナンバーカード
  4. Web関連

    WordPressのプラグイン PS Disable Auto Formatti…
  5. AI関連

    仕事がなくなる?AIに負けない人材になるためには
PAGE TOP