狠狠撸

狠狠撸Share a Scribd company logo
さあ、デザインをはじめよう。顿别惫尝翱痴贰関西
瀬口理恵(せぐちりえ)@rie05
1983年大阪うまれ大阪そだち?
5DGの屋号でフリーランスデザイナーしてます
!
Web全般&AppUI&DTP少々/デジハリ講師業
@rie05 /rie.seguchi
制作環境はMac、Photoshopが好きです。
自己紹介
本日の資料は
狠狠撸shareにアップしております
http://www.slideshare.net/rie05
自由にお持ち帰りください
本日の資料
さいしょに1
デザイン、知っておくべきこと2
実例から见るデザイン3
时短でプロっぽく见せるコツ4
アジェンダ
デザイナーの头の中5
さいごに6
さいしょに
1
さいしょに
センスがない
自分には
さいしょに
と思っていませんか?
デザインセンスはつくれます(超重要)
さいしょに
センスがない=センスを磨いていない
さいしょに
知識をつけましょう、
呼び起こしましょう!
デザイン、知っておくべきこと
2
デザイン、知っておくべきこと
良いデザイン
と聞いて何を思い浮かべますか?
デザイン、知っておくべきこと
1.情報が整理されている
2.機能的である
3.ユーザーフレンドリー
デザイン、知っておくべきこと
答えがない
と思っていませんか?
デザイン、知っておくべきこと
デザインには
デザイン、知っておくべきこと
アート
?表現する?万人に理解される必要はない
?ユーザーがすることは特にない?主観的
デザイン
?伝える?万人に理解され機能的であるべき
?ユーザーが触る動かす?客観的
デザイン、知っておくべきこと
アーティスト=デザイナー
デザイン、知っておくべきこと
アーティスト=デザイナー
デザイン、知っておくべきこと
Design is not just what it looks like and feels like. Design is how it works.?
デザインとは、単にどのように見えるか、
どのように感じるかということではない。
どう機能するかだ。
!
‐ スティーブ?ジョブズ
?Apple
デザイン、知っておくべきこと
デザイン基本4原則
なんとなく意識するだけで、ぜんぜん違う。
デザイン、知っておくべきこと
基本4原則
1.近接
??関連するものは近づけて関連の薄いものは離す
2.整列
??配置は揃えてあげる
3.反復
??繰り返すことによって統一感をもたせる
4.コントラスト
??色の濃淡やフォントの種類や大小など要素の違うものは差を明確につける
デザイン、知っておくべきこと
近接
6月27日の日記
顿别惫尝翱痴贰関西に初めてお邪魔しました。どんな人達と会えるのかな?
ちょっと緊張しています。
6月28日の日記
PHPカンファレンス2014が開催されるらしい。デザイナーでもWordPress
使うし興味あるから行ってみよう。
違うもの
なので離す
関連しているので近づける
???関連するものは近づけ薄いものは離す
デザイン、知っておくべきこと
近接
6月27日の日記
顿别惫尝翱痴贰関西に初めてお邪魔しました。どんな人達と会えるのかな?
ちょっと緊張しています。
6月28日の日記
PHPカンファレンス2014が開催されるらしい。デザイナーでもWordPress
使うし興味あるから行ってみよう。
違うもの
なので離す
関連しているので近づける
???関連するものは近づけ薄いものは離す
デザイン、知っておくべきこと
整列
アメリカンショートヘアー
スコティッシュフォールド
ロシアンブルー
コーニッシュレックス
???配置を揃えて統一する
デザイン、知っておくべきこと
整列
アメリカンショートヘアー
コーニッシュレックス
スコティッシュフォールド
ロシアンブルー
???配置を揃えて統一する
デザイン、知っておくべきこと
整列
アメリカンショートヘアー
コーニッシュレックス
スコティッシュフォールド
ロシアンブルー
???配置を揃えて統一する
デザイン、知っておくべきこと
反復 ???要素要素を反復(繰り返し使い)
???統一性を出す
■フォントは数種類と決めてそれ以外極力使わない
■色も基本カラーセットを決めておく
■特徴があるモチーフなどを繰り返し使う
デザイン、知っておくべきこと
コントラスト ???要素の違うものは差をつける
仮面ライダーオーズ
私が1番好きなコンボはラトラータです。強いよね!
ガタキリバも捨てがたい。それよりアンクかっこいい。
デザイン、知っておくべきこと
仮面ライダーオーズ
私が1番好きなコンボはラトラータです。強いよね!
ガタキリバも捨てがたい。それよりアンクかっこいい。
コントラスト ???要素の違うものは差をつける
デザイン、知っておくべきこと
時に大胆に、しっかりと大小や明暗を
分けたほうがかっこいい!
デザイン、知っておくべきこと
基本4原則
1.近接
??関連するものは近づけて関連の薄いものは離す
2.整列
??配置は揃えてあげる
3.反復
??繰り返すことによって統一感をもたせる
4.コントラスト
??色の濃淡やフォントの種類や大小など要素の違うものは差を明確につける
デザイン、知っておくべきこと
色?配色
色が与えるイメージは絶大です
デザイン、知っておくべきこと
悪い例
こんにちは!こんにちは!×読めない
×うるさい
デザイン、知っておくべきこと
デザイナーは
?なぜその色を選んだか
?配色の意図
を説明できるように制作しています
デザイン、知っておくべきこと
生命力?情熱?愛?パワー?刺激?怒り
安全?調和?健康?治療
静けさ?冷静?安らぎ?誠実?リラックス
幸福?喜び?エネルギー?熱意?陽気?活力
好奇心?協力?幸福?栄光
高貴な?威厳?忠誠?優雅
デザイン、知っておくべきこと
青と緑を使った例)病院???安らぎ、治療
デザイン、知っておくべきこと
紫を使った例)アパレルブランド???高貴な、優雅
デザイン、知っておくべきこと
青を使った例)政治???誠実さ、冷静
デザイン、知っておくべきこと
ターゲットや用途に合わせて
メインカラーを決定する
でも落とし穴があるよ
デザイン、知っておくべきこと
うちのイメージ緑だから。
みどり使ってね。
クライアント
デザイン、知っておくべきこと
デザイン、知っておくべきこと
×Bad!!
Badな理由:緑つかいすぎ。
メインカラーを決めても使いすぎると
素人っぽい垢抜けない感じに…
デザイン、知っておくべきこと
×Bad!!
Badな理由:緑がまぶしい。
緑といっても色々な緑があります。
メインに使うカラーとしては明度彩度が高すぎます。
デザイン、知っておくべきこと
4種類の色を決めよう
1.メインカラー
??全体のイメージとなるカラー。使いすぎ注意。
2.背景色
??白や黒、無彩色かメインカラーと同系統の薄い色が無難
3.基本の文字色
??背景色とのコントラストは気をつけて、読みやすさ重視
4.強調色
??アクセントになるカラー。メインカラーと補色の関係が吉
デザイン、知っておくべきこと
メインカラー選びは慎重に
標準色(明度、彩度が高すぎる色)は避けた方が無難
?目にやさしくない
?安易に選んでいるように見えます
?PowerPointのカラーパレットから選んだの?
デザイン、知っておくべきこと
メインカラー
背景色 基本の文字色
強調色
慣れてきたらもう1色増やしたり、
背景色に少し色をいれてみたりチャレンジ
デザイン、知っておくべきこと
Windowsのエクセルとか、パワーポイントの
カラーパレットから適当に色をとってくるのは
もう卒業しましょう!
Color Trends + Palettes :: COLOURlovers
http://www.colourlovers.com/
デザイン、知っておくべきこと
フォント?文字組み
侮れないフォントと少しの手間で見栄え向上
デザイン、知っておくべきこと
書体選択は、
「視認性」「可読性」「判読性」
を常に意識する
デザイン、知っておくべきこと
ゴシック体
太めのゴシック体はタイトルや見出しとしても最適
Webサイトでの標準文字はこちら推奨
明朝体
細い明朝体は長い文書を読ませる時に最適
新聞で使われています。少し高級感が出たりします
デザイン、知っておくべきこと
文字詰めをちゃんとする
1.ひらがなやカタカナ
??
2.句読点や記号
??、や。や「」です
文字間隔を調整すると引き締まります
デザイン、知っておくべきこと
文字詰め前
文字詰め後
デザイン、知っておくべきこと
メリハリをつけてみる
1.円?記号?単位など??
2.助詞
??は、を、が、に、の、など
強調する必要のないものは小さく
デザイン、知っておくべきこと
サンプル
デザイン、知っておくべきこと
行動心理学
人はどう見るのか?どう感じるのか?
デザイン、知っておくべきこと
目が受け取る情報と
脳が伝える情報には誤差がある
カニッツァの三角形
デザイン、知っておくべきこと
ミュラ?リヤー錯視
デザイン、知っておくべきこと
人はパターンを見つけたがる
8個の点より2個ずつ4ブロックに見る
デザイン、知っておくべきこと
人は顔認識専門の脳領域がある
人の目線の先を見る
習性があります
デザイン、知っておくべきこと
?
目線の先に読ませたい文字
?!
訴求力が弱い
デザイン、知っておくべきこと
最も訴求力のあるのはこっちを
しっかりと見つめている目
笑顔なども効果的
デザイン、知っておくべきこと
一度に処理できる情報には限界がある
人は30%の時間はボンヤリしているそうです
りんご
バナナ
桃MELON
ビワ
さくRAんぼ
デザイン、知っておくべきこと
段階的開示
その時必要な情報だけ与える
終わりを見せてSTEPに分ける
実例から见るデザイン
3
実例から见るデザイン
最近のデザイントレンド
フラットデザイン
実例から见るデザイン
スキューモーフィズムから
フラットへ
実例から见るデザイン
実例から见るデザイン
最近のデザイントレンド
ポリゴンスタイル
実例から见るデザイン
最近のデザイントレンド
ブラーエフェクト
実例から见るデザイン
最近のデザイントレンド
ラージフォト
実例から见るデザイン
実例から见るデザイン
流行は常にアンテナを張り巡らせておく
时短でプロっぽく见せるコツ
4
时短でプロっぽく见せるコツ
黒白しかない、もしくは1色を使いすぎ
悪い例その1
ワイヤーフレーム段階かな?黒と白、
もしくはグレーしかない画面…
※意図的なものは除く
!
配色フェーズでもあった、
メインカラーに頼りすぎたデザインなど
时短でプロっぽく见せるコツ
やりすぎな装飾
悪い例その2
デザインをがんばろうとして
てんこ盛りになっているのを
たまに見かけますが、
!
装飾はすればいい
というものではありません。
时短でプロっぽく见せるコツ
グラデーションやシャドウかけすぎ
悪い例その3
Photoshopのフィルタやレイヤースタイルなど、
初期値そのまま使ってしまうと強すぎてダサくなります
ダメな例 良い例
时短でプロっぽく见せるコツ
1pxのコダワリ
たかが1px、されど1px。
时短でプロっぽく见せるコツ
时短でプロっぽく见せるコツ
注目
时短でプロっぽく见せるコツ
拡大中
时短でプロっぽく见せるコツ
时短でプロっぽく见せるコツ
メインのオレンジカラー
ハイライト
境界線に暗めのオレンジカラー
分解すると…
ほのかなグラデ
うっすらパターン
入ってる?入ってる入ってる、くらい
时短でプロっぽく见せるコツ
时短でプロっぽく见せるコツ
时短でプロっぽく见せるコツ
種明かし
グラデはこれくらい
!
パターンは白のドットをうっすらかけてます
(不透明度で調整)
ふわっとシャドウ
さりげなく使わないとダサくなる諸刃効果
时短でプロっぽく见せるコツ
时短でプロっぽく见せるコツ
时短でプロっぽく见せるコツ
シャドウ=黒じゃなくてもいい
この白いボックス(左)の後ろのレイヤーに、
背景より同系色で少し暗めにぼかした
レイヤーが隠れています
リスト部分のコツ
単調にならないように
时短でプロっぽく见せるコツ
时短でプロっぽく见せるコツ
アイコンや?■などの記号装飾
アイコン要素はメリハリになり、規則性も生まれる万能装飾
ボタン文字に一手間
特に大事なボタンには
时短でプロっぽく见せるコツ
时短でプロっぽく见せるコツ
文字の下にシャドウをいれる
时短でプロっぽく见せるコツ
デザイナーの头の中
5
デザイナーの头の中
普段やっていること
良いデザインや発想を磨くために
デザイナーの头の中
なんでもデザイン的な目で見てみる
デザイナーの头の中
参考になるものを研究する、真似てみる
パクリはダメですが、良いデザインのものをたくさん見て感性を磨きます。
生活の中にたくさん良いデザインのものは溢れてます!
デザイナーの头の中
ストックする
気に入ったデザイン、
いいと思ったものは
ストックしておきます
デザイナーの头の中
DEMO
デザイナーとの付き合い方
プログラマさんとは歩み寄りたいです
デザイナーの头の中
デザイナーの头の中
ターゲットは?
どんな場面で使われる?
競合のデザイントレンドは?
!
何を解決してほしいのか?
デザイナーの領域
デザイン力
UI
エンジニアの領域
プログラム
ノウハウ
実装知識
壁
デザイナーの头の中
デザイナーに言うと	  ?
嫌われるセリフ集
デザイナーの头の中
11回ざっくり	  ?
作ってみてください
からの
デザイナーの头の中
なんか違う???
デザイナーの头の中
すごく多いんですが、
1回やってみてからの丸投げは危険です…
デザイナーの头の中
簡単でいいんで	  ?
パパっと	  ?
やっちゃって	  ?
ください
デザイナーの头の中
パパっとは作れません…
(なんだか軽視されてるようで、
悲しくなってしまいます)
デザイナーの头の中
バーンって感じと	  ?
キラキラ?風で、	  ?
でもシンプルにして
デザイナーの头の中
言ってる意味がわかりません…
デザイナーの头の中
デザイナーの头の中
「1回作ってみて」は
「見てみないと分からない」から
「なんか違う」は
イメージや想像は個人差があるから
原因
デザイナーの头の中
「パパっと」は
作る工程や考えを知らないから
デザイン要望がうまく伝わらないのは
イメージがふんわりしているから
原因
デザイナーの头の中
デザインは全部
デザイナー任せ!をやめよう
デザイナーの头の中
ふんわりしてるイメージをいかに具体的に
引き出せるかもデザイナーの手腕です!
Cute?
SIMPLE?
デザイナーの头の中
デザイナーの头の中
オペレーターにはならず、
いかにデザインとして提案していけるか、
そこに価値を見てもらえるか。
デザイナーとして日々修行です。
さいごに
6
さいごに
?デザインはWebやアプリとユーザーを繋ぐ1番最初
の架け橋。とっても大事!
さいごに
?少しのコツと見る目を養うことで、ダサいデザイン
からサヨナラできます
?デザイナーとエンジニアが少しずつ歩み寄ることで
良い制作物を世に出せれば幸いです
さあ、デザインをはじめよう。顿别惫尝翱痴贰関西

More Related Content

さあ、デザインをはじめよう。顿别惫尝翱痴贰関西