39
私がデザインをする時に 気をつけていること たにゃん @_signaless 131021日月曜日

1019 design point

Embed Size (px)

DESCRIPTION

今まで紙系のデザインを中心にやってきた私が、デザインする際に気をつけていることを、配色・インスピレーション・レイアウトに分けて紹介しています。基本的なことばっかりです…。

Citation preview

Page 1: 1019 design point

私がデザインをする時に気をつけていること

たにゃん @_signaless

13年10月21日月曜日

Page 2: 1019 design point

自己紹介

たにゃん (@_signaless)

アニヲタ → 腐女子 → デザイナー

→ 腐女子 ← イマココ。この人のせいでね!

紙デザインが主。

(Web系勉強中)

デザイン系ブログやってます

簡デザ http://kandeza.com/

13年10月21日月曜日

Page 3: 1019 design point

今回のお話しは…

私がデザインをする上で気をつけていること(考え

方)をお話します。ブログのまとめになったような気

がしないでもない。

配色・インスピレーション・レイアウトが主です。

一応勉強はしていますが、社会に出てから野放し状態

で1人でやっています。ので、私の考え方が必ずしも

正しいわけではありません…。1つの方法として捉え

て頂ければ幸いです。

ツッコミお待ちしております。で は G O ! !

13年10月21日月曜日

Page 4: 1019 design point

配 色

13年10月21日月曜日

Page 5: 1019 design point

色の決め方(私流)

まずは使いたい色を1つ決める!(大体でOK)

そしたら…

色相環を

使います

※色相環…色をスペクトル順(グラデーションみたいな感じ)

に円形に並べたもの

13年10月21日月曜日

Page 6: 1019 design point

色相環で何が分かるかと言うと…

類似色と補色が分かります。

13年10月21日月曜日

Page 7: 1019 design point

類似色を使う

そのものが持つ雰囲気を壊さず、更に「らしさを活

かす」配色ができる。

補色を使う

そのものを浮き立たせ「ぱっと目立たせる」配色が

できる

13年10月21日月曜日

Page 8: 1019 design point

ケーキ写真の類似色(赤

系)を使うと、全体的に

イチゴ!って感じはする

けど、色に写真が埋もれ

てしまって、写真はあま

り目立たない。

赤の反対色(補色)を使

うと、イチゴ!って感じ

はあまりしないけれど、

写真はよく目立つ。

使ってみた。

これを使い分けます

13年10月21日月曜日

Page 9: 1019 design point

もはやアタリマエ…かもしれませんが、

「目立たせなくても良い(雰囲気に溶けこませたい)」

「目立たせたい(パッと目に留まるようにしたい)」

を使い分けることによって、メリハリが出ます。

色相環は、決めた1色の「目立たせない色」「目立たせる

色」をパッと見で分からせてくれる

全体的にまとまった感じがいいのか、にぎやかにしたい

のか…を最初に考えておくことも大切かと。

こんな感じかな?

13年10月21日月曜日

Page 10: 1019 design point

こ れ …

しかしそれだけではない

色、キツくね? ギラギラしてる…( ✧!✧)

13年10月21日月曜日

Page 11: 1019 design point

明るさと鮮やかさを調整して、ギラギラを抑えます。

個人的には、ちょっとくすんだ色を多めに使うと、

結構まとまるような気がしてます。

それに加えて、白(超明るい)と黒(超暗い)を使います。

原色だけでない、明度と彩度

13年10月21日月曜日

Page 12: 1019 design point

同じ色の濃淡で、主張を抑えた飾り付けをする

(背景向き)

目立たせたいところは「補色」を使う

黒や白はそれだけで目立つ色。そこまで派手すぎ

ず、だけど馴染みがいいので、私は最終手段だと

思っています。

13年10月21日月曜日

Page 13: 1019 design point

私は、長い文章を書く時は類似色で、短い文章でガツンと伝えたい時は補色で、という風に使い分けたりもします。(長い文章は、補色だと読みづらい…)

13年10月21日月曜日

Page 14: 1019 design point

配色、以上。

13年10月21日月曜日

Page 15: 1019 design point

インスピレーション

13年10月21日月曜日

Page 16: 1019 design point

どうやってデザインを考えてるの?

うーん…( ´∀`)

パクれ(・∀・)!

えっΣ(゚Д゚)!?13年10月21日月曜日

Page 17: 1019 design point

というのは冗談です(半分本気です)

出かけたり、ネットサーフィンしたり、本読んだり

すると「いいなコレ」と思うようなデザインに遭遇

することがあると思います。

そういうのをメモったり写真撮ったり(私は写真撮

る派)、そうやってアイディアをストックしていき

ます。

割と異業種からデザインを学ぶのがオススメです。

新鮮な感じがしますよ~。私はファッション、イン

テリア、食品など小売業からよくパク…学んでま

す。(小売は時代をよく反映していると思う)

13年10月21日月曜日

Page 18: 1019 design point

最近のインスピレーション写真

ストローで出来た文字。色も雰囲気もカワユス( ́ ∀` )

なかなかない配色…。(ロッテリア・貞子シェーキ)

13年10月21日月曜日

Page 19: 1019 design point

最近のインスピレーション写真

個性的なフォント&電灯も良い

バブルを彷彿とさせる

よく考えられたロゴ13年10月21日月曜日

Page 20: 1019 design point

こんな感じで、撮りためた写真からネタをもらってます。

色だけでもマネすると、そこから「ああしよう、こうしよう」というイメージが湧いたりして、後が作りやすくなったりする。

丸パクリはダメだけど、そうやって真似して作っていくうちに、だんだん自分の中でのストックができてくるし、応用もできてくる。(自分なりに消化されるというか)経験値が上がるってことだね(・∀・)!

それいいの(;´!`)!?

13年10月21日月曜日

Page 21: 1019 design point

インスピレーション、以上。

13年10月21日月曜日

Page 22: 1019 design point

レイアウト

13年10月21日月曜日

Page 23: 1019 design point

メリハリ

リズム感

分かりやすさ

私がレイアウトで大事だと思ってること

ザックリしすぎ( ゚д゚)13年10月21日月曜日

Page 24: 1019 design point

ある程度、法則があります

「近接」「整列」「コントラスト」「反復」

(デザインの4原則)

んじゃ1つ1つ見てみようかー

ノンデザイナーズ・デザインブックに書いてあります!

これをすれば、ある程度のことはできます。

ていうか、多分みんな無意識にやってます。

13年10月21日月曜日

Page 25: 1019 design point

近 接

関係のあるものは近づけ、そうでないものは遠ざける

)))

同じコンテンツは、フォントの色や大きさが違えども、1つのかたまりになっている。

13年10月21日月曜日

Page 26: 1019 design point

要は、関係あるもの、関係ないものは区別して、

視覚的にもちゃんと分かるようにしましょう、と

いうこと。余白やボーダーが活躍します。

ツイッターの画面も、細かいところに

近接が使われています

13年10月21日月曜日

Page 27: 1019 design point

これ簡単。右揃え、左揃え、中央揃えとかきっちり

しようね、ってことです。

整 列

きっちり揃えてます。

傾けてるけど、中は揃えてます。

13年10月21日月曜日

Page 28: 1019 design point

揃えるラインを決める(グリッドとか)

傾けたり、写真などバラバラに配置したい時も、一定のルールを決める

整列させると見やすいし、この画像だと、

大きい写真がメイン、小さく並んだ写真は前菜って

いうことが何となく伝わる。

ルール決めした整列?かな?(iPhoneの写真コラージュアプリ使用)

13年10月21日月曜日

Page 29: 1019 design point

見出しは大きく、伝えたい部分は色を変える、など

変化をつけること。

コントラスト

よくあるよね!13年10月21日月曜日

Page 30: 1019 design point

コントラストをつける方法は、

「色を変える」「大きさを変える」

「フォントを変える」「背景に色をつける」

コントラストをきつくすればするほど、効果が大き

く、際立ちます(視線の誘導効果もあり)。

これとか、めっちゃコントラスト使ってるよね13年10月21日月曜日

Page 31: 1019 design point

同じ要素を繰り返し使っ

て、統一感を出すこと。

反 復

極端に言えばこういうことかな。

13年10月21日月曜日

Page 32: 1019 design point

このスライドなんかでもそうですが、テーマを決め

て、同じデザインを繰り返し使っていくということ

ですね。

facebookやブログのデザインが分かりやすいかな13年10月21日月曜日

Page 33: 1019 design point

そんなんをきっちりやって、出来たんがこれだ。

近接・整列・コントラスト・反復が分かるかな?13年10月21日月曜日

Page 34: 1019 design point

これをしっかりすることで、まぁ見やすくな

りますわな。なるよね。

あと、大事だと思ってるのがリズム感。

きちんと整列され、コントラストをつけてメ

リハリのあるのもは、

見出し→写真→本文、見出し→写真→本文、

と、一定のリズムで順序良く見ていけるの

で、見てる側からしたら頭に入っていきやす

いと思う。

13年10月21日月曜日

Page 35: 1019 design point

レイアウト、以上。

13年10月21日月曜日

Page 36: 1019 design point

「色」は視覚的に情報を伝えやすいツールで、分か

りやすく、また外せないものです。

なので、まず「色」をしっかり決めて作る。

発想力…というよりは観察眼の方が必要かもしれ

ぬ。

基本に忠実に。ルールを決めてそれに則ってやる。

まとめ

こんな感じですかね…。

13年10月21日月曜日

Page 37: 1019 design point

私の発表、以上。

13年10月21日月曜日

Page 38: 1019 design point

ローソン

google

クックパッド

twitter

オシャレウォーカー

葡萄屋晴治郎facebookページ

画像ソース☆

13年10月21日月曜日

Page 39: 1019 design point

ご清聴ありがとうございました。

13年10月21日月曜日