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

たにゃん @_signaless

13年10月21日月曜日

自己紹介

たにゃん (@_signaless)

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

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

紙デザインが主。

（Web系勉強中）

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

簡デザ http://kandeza.com/

13年10月21日月曜日

今回のお話しは…

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

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

がしないでもない。

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

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

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

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

て頂ければ幸いです。

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

13年10月21日月曜日

配　色

13年10月21日月曜日

色の決め方（私流）

まずは使いたい色を1つ決める！（大体でOK）

そしたら…

色相環を

使います

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

に円形に並べたもの

13年10月21日月曜日

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

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

13年10月21日月曜日

類似色を使う

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

かす」配色ができる。

補色を使う

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

できる

13年10月21日月曜日

ケーキ写真の類似色（赤

系）を使うと、全体的に

イチゴ！って感じはする

けど、色に写真が埋もれ

てしまって、写真はあま

り目立たない。

赤の反対色（補色）を使

うと、イチゴ！って感じ

はあまりしないけれど、

写真はよく目立つ。

使ってみた。

これを使い分けます

13年10月21日月曜日

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

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

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

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

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

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

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

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

こんな感じかな？

13年10月21日月曜日

こ れ …

しかしそれだけではない

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

13年10月21日月曜日

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

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

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

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

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

13年10月21日月曜日

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

（背景向き）

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

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

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

思っています。

13年10月21日月曜日

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

13年10月21日月曜日

配色、以上。

13年10月21日月曜日

インスピレーション

13年10月21日月曜日

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

うーん…( ´∀｀)

パクれ(・∀・)！

えっΣ(゚Д゚)！？13年10月21日月曜日

というのは冗談です（半分本気です）

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

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

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

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

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

ます。

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

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

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

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

13年10月21日月曜日

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

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

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

13年10月21日月曜日

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

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

バブルを彷彿とさせる

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

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

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

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

それいいの(；´!｀)！？

13年10月21日月曜日

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

13年10月21日月曜日

レイアウト

13年10月21日月曜日

メリハリ

リズム感

分かりやすさ

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

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

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

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

（デザインの4原則）

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

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

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

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

13年10月21日月曜日

近　接

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

)))

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

13年10月21日月曜日

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

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

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

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

近接が使われています

13年10月21日月曜日

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

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

整　列

きっちり揃えてます。

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

13年10月21日月曜日

揃えるラインを決める（グリッドとか）

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

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

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

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

ルール決めした整列？かな？（iPhoneの写真コラージュアプリ使用）

13年10月21日月曜日

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

変化をつけること。

コントラスト

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

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

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

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

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

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

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

同じ要素を繰り返し使っ

て、統一感を出すこと。

反　復

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

13年10月21日月曜日

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

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

ですね。

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

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

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

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

りますわな。なるよね。

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

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

リハリのあるのもは、

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

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

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

いと思う。

13年10月21日月曜日

レイアウト、以上。

13年10月21日月曜日

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

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

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

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

ぬ。

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

まとめ

こんな感じですかね…。

13年10月21日月曜日

私の発表、以上。

13年10月21日月曜日

ローソン

google

クックパッド

twitter

オシャレウォーカー

葡萄屋晴治郎facebookページ

画像ソース☆

13年10月21日月曜日

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

13年10月21日月曜日