Movatterモバイル変換


[0]ホーム

URL:


Yuko Taniguchi, profile picture
Uploaded byYuko Taniguchi
9,238 views

1019 design point

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

Download to read offline
私がデザインをする時に気をつけていることたにゃん @_signaless13年10月21日月曜日
自己紹介たにゃん (@_signaless)アニヲタ → 腐女子 → デザイナーいでね!人 せ→ 腐女子 ← イマココ。 の のこ紙デザインが主。(Web系勉強中)デザイン系ブログやってます簡デザ http://kandeza.com/13年10月21日月曜日
今回のお話しは…私がデザインをする上で気をつけていること(考え方)をお話します。ブログのまとめになったような気がしないでもない。配色・インスピレーション・レイアウトが主です。一応勉強はしていますが、社会に出てから野放し状態で1人でやっています。ので、私の考え方が必ずしも正しいわけではありません…。1つの方法として捉えて頂ければ幸いです。ツッコミお待ちしております。13年10月21日月曜日ではGO!!
配 色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日月曜日
近 接関係のあるものは近づけ、そうでないものは遠ざける)))13年10月21日月曜日同じコンテンツは、フォントの色や大きさが違えども、1つのかたまりになっている。
要は、関係あるもの、関係ないものは区別して、視覚的にもちゃんと分かるようにしましょう、ということ。余白やボーダーが活躍します。ツイッターの画面も、細かいところに近接が使われています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日月曜日

Recommended

PDF
こみつく会
PDF
去年の11/10のKOFで万年筆実験の話しをしてきました!
PDF
第71回名古屋アジャイル勉強会「迷わず描けよ、描けば分かるさ!」ワークショップ資料
PPTX
デザイン!!
PPTX
ラジオのはなし~Co-Create一般社団法人化一周年記念イベント~
PDF
ママファブ第5回目
PDF
160228 nagohack
 
ODP
自分の軌跡を持ち歩こう
PDF
伝えあう図解術
KEY
ノンデザイナーのための配色理論
PPT
05 Script
PPTX
Bi_スライド_卓展2017
PDF
ライトノベル作家が体験した、ノベルゲームの制作方法
PPTX
100925kosenconf
PDF
色んな人の目線を体験できるマーケティングサービス「共感VR(仮)」
PPT
091009可能性発見
PDF
出会い系を作ろうと思い立ってXXXなサイトを見ていたらDQNとつきあうことになった話
PPTX
綴じ卓_スライド_卓展2017
PDF
20180425 GOJAS Meetup Spring Special - KotomiTanaka
PDF
Tips of Design
PDF
デベロッパーも 知ってると便利 デザインの基本
PDF
Contrast rule-1.0
PDF
デザインに正解はないけれど
PDF
Webデザインのための配色セオリー
PPTX
1114 澤埜穂月,安井杏奈「紙面デザインについて」
KEY
Random 110828031841-phpapp02
PDF
【Schoo web campus】webデザインの基礎 1限目
PDF
What is "design"?
PDF
Presentation design
PPTX
エンジニア向け即効デザイン講座

More Related Content

PDF
こみつく会
PDF
去年の11/10のKOFで万年筆実験の話しをしてきました!
PDF
第71回名古屋アジャイル勉強会「迷わず描けよ、描けば分かるさ!」ワークショップ資料
PPTX
デザイン!!
PPTX
ラジオのはなし~Co-Create一般社団法人化一周年記念イベント~
PDF
ママファブ第5回目
PDF
160228 nagohack
 
ODP
自分の軌跡を持ち歩こう
こみつく会
去年の11/10のKOFで万年筆実験の話しをしてきました!
第71回名古屋アジャイル勉強会「迷わず描けよ、描けば分かるさ!」ワークショップ資料
デザイン!!
ラジオのはなし~Co-Create一般社団法人化一周年記念イベント~
ママファブ第5回目
160228 nagohack
 
自分の軌跡を持ち歩こう

What's hot

PDF
伝えあう図解術
KEY
ノンデザイナーのための配色理論
PPT
05 Script
PPTX
Bi_スライド_卓展2017
PDF
ライトノベル作家が体験した、ノベルゲームの制作方法
PPTX
100925kosenconf
PDF
色んな人の目線を体験できるマーケティングサービス「共感VR(仮)」
PPT
091009可能性発見
PDF
出会い系を作ろうと思い立ってXXXなサイトを見ていたらDQNとつきあうことになった話
PPTX
綴じ卓_スライド_卓展2017
伝えあう図解術
ノンデザイナーのための配色理論
05 Script
Bi_スライド_卓展2017
ライトノベル作家が体験した、ノベルゲームの制作方法
100925kosenconf
色んな人の目線を体験できるマーケティングサービス「共感VR(仮)」
091009可能性発見
出会い系を作ろうと思い立ってXXXなサイトを見ていたらDQNとつきあうことになった話
綴じ卓_スライド_卓展2017

Similar to 1019 design point

PDF
20180425 GOJAS Meetup Spring Special - KotomiTanaka
PDF
Tips of Design
PDF
デベロッパーも 知ってると便利 デザインの基本
PDF
Contrast rule-1.0
PDF
デザインに正解はないけれど
PDF
Webデザインのための配色セオリー
PPTX
1114 澤埜穂月,安井杏奈「紙面デザインについて」
KEY
Random 110828031841-phpapp02
PDF
【Schoo web campus】webデザインの基礎 1限目
PDF
What is "design"?
PDF
Presentation design
PPTX
エンジニア向け即効デザイン講座
PDF
「オリジナル時計」事前課題用テキスト
PDF
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
20180425 GOJAS Meetup Spring Special - KotomiTanaka
Tips of Design
デベロッパーも 知ってると便利 デザインの基本
Contrast rule-1.0
デザインに正解はないけれど
Webデザインのための配色セオリー
1114 澤埜穂月,安井杏奈「紙面デザインについて」
Random 110828031841-phpapp02
【Schoo web campus】webデザインの基礎 1限目
What is "design"?
Presentation design
エンジニア向け即効デザイン講座
「オリジナル時計」事前課題用テキスト
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip

1019 design point


[8]ページ先頭

©2009-2025 Movatter.jp