誰かに見てもらうための、簡単なデザイン

デザインが苦手な人でも、見た目良いものができる簡単なTips

よく「デザインはセンスだー!」と言われますが、センスって何やねんってなることがあります。
センスは人それぞれ違うし、抽象的なんですよね…。私も、センスあるの?と言われると、自信もって「あります!」とは言えないこともあります。ボツいっぱい出した後とか、アイディア出てこない時とか。
すみませんすみませんってなります。

センスがあればデザインはできるのか、といえば、そうではなくて、ある程度トレンドを意識して、それに外れないものを作れば、それなりに良い物ができると思います。重要なのは、センスではなくトレンド感知能力かと。そのトレンドを自分なりに消化する力は「センス」かもしれませんが。

全くの持論ですが、センスはぼんやりしててよく分からなくても、トレンドは身近なものから知ることができます。雑貨屋、服屋、本屋、インテリアショップ、チラシ、ホームページ…そういうものから吸収できます。

吸収しても上手く活かせるのか?と言われれば、人によるのかもしれませんが、「これをやればよく見えるよ!」という指標にはなるかと思います。
今回は、この記事を書いている現在の「トレンド」を中心に、デザインが苦手な方でも、この点を気をつければそれなりに良く見える、オシャレなものが作れるよっていうような小技を書いていきます。
小技といっても、大きく分けて4つ、「配置」「色」「透過」「模様」。これさえすれば見た目良いデザインができそうな気がするので、その4つを軸に書いていきます。

56_easy-design-tips_02

配置について

写真や文章などの要素をどうやって配置するか…。配置とかトレンドないんじゃないの?と思われがちですが、これ、あるんですよねー。
配置は注意して見ないと分かりづらい点もあるのですが、法則みたいなものはあるので、今のトレンドに見合った配置をちょっと紹介します。

余白を活かす

余白を上手く活かしたデザイン、と聞いてパッと思いつくのがAppleではないでしょうか。
iPhoneやiPodなどのデザインを見ても、余計なものを極力なくし、空間を作って、その中に必要なものを配置している、というイメージがあります。

余計なものがないと、それはそれで最初見た時に、どこを押せばいいのかとか、どういう操作をすれば自分のやりたいことができるのかとか、この画面(紙面)に本当に自分が求めている情報があるのか?とか、不安になってしまうこともあるのですが、デザインとしてはスッキリ綺麗です。
最近はこの傾向が求められている…と思います。

designa_hp

デザインあなどは、もう余白めっちゃ取ってる…というか空間活かしまくりですね。このホームページで紹介されている作品も、空間を活かしたものが多いです。

designa_kaisan

解散! – デザインあ
こんな感じです。
背景を多めにとり、その中に見せたいものをポンと置く。空間の使い方の参考になるかも。

printpac_hp

印刷のことなら印刷通販【プリントパック】
ちなみに空間を作らず、ガチガチに情報を詰めるとこんな感じになります。
伝わりたいことは1画面で伝わり、またインパクトもありますが、情報が探しにくく、ごちゃっとした印象を与えてしまいます。時には情報を探すことを諦めてしまうかもしれません。
しかし、安い!ということと、色んな商品があるということは、雰囲気的に伝わってくるかと思います。

このように詰め込むか、空間を活かしシンプルに作るか…というのは時と場合にもよるかもですが、両者では与える印象が全然違います。ので、ちょっと極端ですが参考として…。
今はどちらかというと、情報を詰め込むより、削ぎ落としてシンプルにする傾向にあると思います。

グリッド配置

iPhoneが出た頃から言われ続けている「グリッド配置(グリッドレイアウト)」
マス目に整列させるように、要素を規則正しく並べて置くことです。
スマホのアプリの配置とか、電卓のテンキーとかがそんな感じです。
グリッドレイアウトは、トレンドというか、もうベーシックとして落ち着いた感じもあります…。

グリッド(マス目)配置を行うのであれば、前述した「余白を活かす」を使うことが必要になります。余白を作らずガッチガチに詰めてしまうと、境界が分かりづらくなり、折角のグリッド配置の良さが感じられないかもしれません…。

56_easy-design-tips_04

上の例だと、左側はギチギチした感じがしますが「このボタンを押せばこの効果が得られる」というのがわかります。
右の例はスッキリしていますが、左ほど詳しい説明はありません。でもなんとなく「このボタンを押したらこうなりそう」という想像はできるのではないでしょうか。
前の余白の話から続きますが、これが「余計なものをとる」ことであり、グリッド配置を活かすということだと思います。

グリッド配置を使う時は、余計なものを落とし、余白を大事にする方が、見た目がきれいに仕上がります。

あとは、グリッドというからには、きちんと規則正しく並べることも大事です。このように正方形を規則正しく並べたデザインじゃなくても良いですが、長方形だけでも、正方形と長方形が混じっていても、ラインを決めて、それにきちんと沿って並べることが大事です。
外枠をきれいに並べるだけではなく、中に説明文や画像を入れるのであれば、それも全て同じレイアウトで入れたほうが、グリッドデザインらしいです。

Apple_iphone5s_cap

Apple – iPhone 5s – あなたには想像を超えた力がある
Appleのホームページも、グリッド配置が使われています。規則正しく並べ慣れ、適度に余白を取って文字と画像が並べられています。

大きく、小さく、を使い分ける

タイポグラフィ(文字を並べたデザイン)をする時などに実感するのですが、文字をどーんと配置する、ちょこんと配置するだけでも、デザイン上級者に見えます。
中途半端な大きさで物を配置するのは、あんまり良くないってことですかね。
いや、良くないことはないのですが、どーんと大きく、そしてちょこんと小さくすると、あまり手間をかけずに上級者っぽく見えるので、紹介します。

56_easy-design-tips_07

とりあえず、普通に文字とスイカを並べてみました。

56_easy-design-tips_10

どーんと大きくしたものと、小さくちょこんと配置したもの。大きさ変えただけです。
なんかこの2つのほうが「デザインしたった!」って感じがしないですか?
イラストや文字は特に手を加えてないんですけど、大きさと配置を変えるだけで、なんだかデザイン上級者に見えます。
大胆ですけど、これは手軽にできると思うので、一味足りない時などに試してみてはいかがでしょうか。
これはトレンドじゃなくて、昔からあるような気もしますけど…。

配置まとめ

  • ・余白をとって配置する。ぎちぎちに詰めない。
  • ・グリッドデザイン。一定のラインや規則にそって配置する。
  • ・余計な情報はカットして、シンプルにまとめる
  • ・大胆に大きく、小さくを使い分ける。

色について

配置も大事なんですが、ものの印象を決めるのは色だと思っています。
やっぱり色は目を引く一番の要素ですし、配色がおかしければ一気にダサくなります。
というわけで、トレンドの色を取り入れると、簡単にきれいなデザインができるんじゃないかと。

トレンドの色とは

私は、ファッションや雑貨を配色の参考にすることが多いです。
ファションも雑貨も時代を反映していますし、実際ウケてるかウケてないかも分かりやすいと思うので、結構使えると思っています(ファッション誌の好きなコーディネートランキングとか、売れてる雑貨ランキングとかが分かりやすいかもです)。

ファッションでいうと、今はギャルが勢力を失いかけ、ゆるふわ女子なるものが増えているようです。
雑貨やインテリアでいうと、ロハスや北欧系、南仏系が人気。ナチュラルな感じですね。
つまり、ギャルファッションやバブル時代にあるような、はっきりした色使い・ゴージャスなものよりも、自然を感じさせるような、ナチュラルなふんわりした色が人気だということ。
ただ、ナチュラルな色合いでまとめてしまうとパンチがなくなるので、差し色ではっきりした色を使っていかないといけません。

NATURAL_KITCHEN_hp

雑貨 ナチュラルキッチン NATURAL KITCHEN
女子に大人気の100均、ナチュラルキッチン。全体的にほんわかした感じでまとめていますが、写真の赤やピンクなどがアクセントになっています。

CECIL_McBEE_hp

CECIL McBEE(セシルマクビー)|公式ブランドサイト
昔はギャル系ファッションといえばセシルマクビーの名前が挙がり、黒・白色中心の服も展開していたのですが、今でもその路線はあるようですが、淡い色を取り入れて大人しい感じの商品展開が多くなっています。
このサイトも余計なものを取り除いてシンプルな構成ですね。色はベージュで大人しめと思いきや、ギャルファッション時代からのセシルのテーマカラーでもある黒をアクセントにしていて、ブランドらしさを出しています。
この黒とベージュのコントラストも良いなぁと思う点で、淡い色ばかりでまとめずに、黒という差し色を入れて、コントラストをつけています。見て欲しい部分に挿し色を使うと、視線の誘導もできます。

トレンドの色は、季節によって変わることもあるんですが、今の流行りはこのようなブランドに見られるような、ナチュラルな色+目を引く差し色だと思います。
つまり、背景などのベースを淡い色合い、もしくは少しくすんだ色合いにし、パッとした鮮やかな色を差し色で入れると、それっぽいものが出来るのではないかと。

ナチュラルカラーとは

ナチュラルカラーは、主に自然界にあるような自然、自然素材の色を指します。
山のあざややかな緑、空の薄い青、雲の自然なグレー、麦畑の黄金色…などなど。
具体的にどの色がナチュラルカラーなのか?と言われると沢山あるのですが、淡い色、くすんだ色が多いような気がします。
前の記事でも書いたんですが、自然にあふれた色を使うといい感じです。

slide_PHOTOHITO

スライドショー – 風景・自然ギャラリー – 写真共有サイト:PHOTOHITO
こういった自然の写真を扱うギャラリーの写真を参考にして、色を決めていってもよいかもです。

白以外の背景も試す

デザインする時、何かと背景を白にしてしまいがちなんですが、背景に薄く色をつけるだけで、なんだかランクアップします。

56_easy-design-tips_13

うっすらと色をつけてみました。これだけでちょっとオシャレになった気が。
背景に濃い色を使うと、インパクトがつき、色の調整などがタイヘンな時がありますが、薄い色はなじみやすく、使いやすいので、あまり失敗なく取り入れられます。ただ多用するとボケた感じになります。
しかし手軽にできるので、背景がただの白だったら味気ないなーという時に使ってみると良いかもしれません。

56_easy-design-tips_16

さらに、うっすいグラデーションにするのもオススメです。これも簡単に綺麗に見えます。
ぱっと見て「グラデなの?」というくらい、色の境界が分かりにくいものなど、ほんのちょっとの差のように感じるんですが、これが結構きれいに見せてくれるんですよね。
この例はすべてグラデーションです。真ん中のピンクとグレーのグラデーション以外は分かりづらいと思いますが、上の方がうっすら薄い色になっています。
この「やんわりしたグラデーション」がオシャレに見えるコツなのです。

色まとめ

  • ・ベースは淡い色、くすんだ色で。差し色はパッと目を引く色でコントラストをつける。
  • ・白背景だけではなく、薄い色や、やんわりとしたグラデーションを使う。

透過について

透過…物を透けさせる。
透ける効果、多用するとウザいですが、透けさせることで上級者っぽく見えます。

56_easy-design-tips_18

そのまんまと、透過した丸を組み合わせてみたもの。
透過させた方が、デザイン的に上級者!って感じがします。
実際透過はできるソフトとできないソフトがあると思うので、上級技術といったらそうなのかもですが…。

56_easy-design-tips_22

写真と文字などを組み合わせる時は、透過はバツグンに効果を発揮します(と思います)。
透かせるだけでオシャレ度がアップするんですよね。
なんでもかんでも透かすと意味が分からなくなりますが、物を重ねる時には、透過…オシャレに見せる1つの要素です。

みんな大好きドロップシャドウ。
Officeソフトなどでも手軽に影をつけられるようになったので、影がかかったPOP等もよく見るようになりましたが、影も使い方次第ではダサくなると思うんですよね…。使い方、といってもちょっとした注意みたいなもので、すぐに実践できます。

56_easy-design-tips_26

ドロップシャドウですが、一番左の例のように、明らかに影!くろい!みたいな感じだとちょっと野暮ったく見えます。
これも、やわらかい感じで影をつけると良いかと。具体的にどのようにすればいいかというと、

  • ・影の色を選べる場合は、真っ黒ではなく、グレーや、影が落ちる先(背景)に近い色を使う。
  • ・ぼかし範囲を大きくする
  • ・影をななめに落とすのではなく、そのものの周りぼんやりとあるようにつける(影の落ちる距離を短くする)

です。
真ん中の例は、影の色を薄くし、ぼかし範囲を大きくしています。ちょっとやわらかい感じになったのではないでしょうか。
一番右のものは、影が落ちる距離を短くして、周りにぼんやりと影ができるようにしています。
一番右のものが比較的スマートで、今けっこう使われている影の使い方かな…と思います。

56_easy-design-tips_29

透過したものに影をつけるのもおしゃれ上級者です。なにこれきれい!
普通に四角形を描いて、それを透過させて、周りにうっすらと影をつけるだけ。このちょっとした手間でランクアップすることができます。

模様について

画面が白かったり、寂しかったり、色をべったり塗っただけの効果じゃ満足できない!なんて時があります。
そこで活用するのが模様。困った時は模様。
でも模様ってどうやって作ったらいいの?どんな柄がいいの?などあると思います。
私的には2種類を押さえておいたらトレンドに乗れると思っています。

ぶっちゃけストライプとドット

ストライプとドットは間違いない気がします。
というか、服も雑貨も、ストライプとドットはオシャレグッズの定番柄です。
オシャレに見えるし、嫌いな女子はいないのです。
女子が「カワイイ!」と思うものは、男性にとってもカワイイのです。
カワイイ!が必要なくても、ストライプとドットなら何とかしてくれます。

汎用性が非常に高い、ストライプ

ストライプ、すげぇよお前。
ストライプ柄は、ほんとよく見かけますし、ウケが良いので私もよく使いますが、バリエーションも豊富にできます。
線の太さや向き、色を変えるだけで、印象を変えることができます。たったの線1本だけで、表現力が無限に広がるのです…!
ストライプ教、すばらしい!

56_easy-design-tips_32_2

なんかフランスの香りがする縦ストライプ、マリンボーダー的な横ストライプ、イギリス紳士みたいな斜めストライプ…(例えがさっぱり分からねぇ)、線幅や色、角度を変えるだけで全然違った印象になります。そしてオシャレ!

ネタが無い時に手軽にオシャレできます。線(四角形)を繰り返し並べるだけなので、手間もあまりかかりません。

定番だけど使い道がいっぱい、ドット

ストライプ同様、ドットも汎用性があります。
ドットというと「子供っぽい」「女の子っぽい」と言われることがありますが、色や大きさを変えると雰囲気がガラッと変わります。
ちょっとメンズっぽいドットを中心にサンプルを作ってみます。

56_easy-design-tips_34

くすんだ色を使うと、男の人向けのプロダクトでも使えそう。
黒白のドットは、BEAMSとかでよく見かけそう(見かけたかも)。
ピンクや黄色など、明るい色を使い、粒を大きくすれば、女の子らしいドット柄になると思います。
原色系を使うと、子供服とかにありそうです。
アパレルでも雑貨でも定番の柄ですが、定番だけあって安定のオシャレ感。取り入れやすく調整もしやすい模様です。

あんまり難しく考える必要はない

以上、「配置」「色」「透過」「模様」の簡単なTipsを紹介しました。基本的で、なんというかほんとに簡単なんですけど…。
見た目良いものや、オシャレなものを作るのに、あまり難しく考える必要はないと思います。今はフラットデザインやミニマルデザインに見られるような、シンプルなデザインが流行っている傾向がありますし、上でも紹介したように、法則的なものはあるので、それに沿ってやっていくと出来ると思います。
私もまだまだ勉強中です。これからのトレンドはどうなるのかな。

それでは!Have a nice design!!