さあ、デザインをはじめよう。DevLOVE関西

瀬口理恵（せぐちりえ）＠rie05
1983年大阪うまれ大阪そだち 
5DGの屋号でフリーランスデザイナーしてます
!
Web全般＆AppUI＆DTP少々/デジハリ講師業
@rie05 /rie.seguchi
制作環境はMac、Photoshopが好きです。
自己紹介

本日の資料は
Slideshareにアップしております
http://www.slideshare.net/rie05
自由にお持ち帰りください
本日の資料

さいしょに１
デザイン、知っておくべきこと2
実例から見るデザイン3
時短でプロっぽく見せるコツ4
アジェンダ
デザイナーの頭の中5
さいごに6

さいしょに
１
さいしょに

センスがない
自分には
さいしょに
と思っていませんか？

デザインセンスはつくれます（超重要）
さいしょに

センスがない＝センスを磨いていない
さいしょに
知識をつけましょう、
呼び起こしましょう！

デザイン、知っておくべきこと
2

良いデザイン
と聞いて何を思い浮かべますか？

１．情報が整理されている
２．機能的である
３．ユーザーフレンドリー

答えがない
と思っていませんか？
デザインには

アート
・表現する・万人に理解される必要はない
・ユーザーがすることは特にない・主観的
デザイン
・伝える・万人に理解され機能的であるべき
・ユーザーが触る動かす・客観的

アーティスト＝デザイナー

Design is not just what it looks like and feels like. Design is how it works. 
デザインとは、単にどのように見えるか、
どのように感じるかということではない。
どう機能するかだ。
!
‐ スティーブ・ジョブズ
©Apple

デザイン基本4原則
なんとなく意識するだけで、ぜんぜん違う。

基本4原則
１.近接
関連するものは近づけて関連の薄いものは離す
２.整列
配置は揃えてあげる
３.反復
繰り返すことによって統一感をもたせる
４.コントラスト
色の濃淡やフォントの種類や大小など要素の違うものは差を明確につける

近接
6月27日の日記
DevLOVE関西に初めてお邪魔しました。どんな人達と会えるのかな？
ちょっと緊張しています。
6月28日の日記
PHPカンファレンス2014が開催されるらしい。デザイナーでもWordPress
使うし興味あるから行ってみよう。
違うもの
なので離す
関連しているので近づける
・・・関連するものは近づけ薄いものは離す

整列
アメリカンショートヘアー
スコティッシュフォールド
ロシアンブルー
コーニッシュレックス
・・・配置を揃えて統一する

整列
アメリカンショートヘアー
コーニッシュレックス
スコティッシュフォールド
ロシアンブルー
・・・配置を揃えて統一する

反復・・・要素要素を反復（繰り返し使い）
統一性を出す
■フォントは数種類と決めてそれ以外極力使わない
■色も基本カラーセットを決めておく
■特徴があるモチーフなどを繰り返し使う

コントラスト・・・要素の違うものは差をつける
仮面ライダーオーズ
私が1番好きなコンボはラトラータです。強いよね！
ガタキリバも捨てがたい。それよりアンクかっこいい。

仮面ライダーオーズ
私が1番好きなコンボはラトラータです。強いよね！
ガタキリバも捨てがたい。それよりアンクかっこいい。
コントラスト・・・要素の違うものは差をつける

時に大胆に、しっかりと大小や明暗を
分けたほうがかっこいい！

色・配色
色が与えるイメージは絶大です

悪い例
こんにちは！こんにちは！×読めない
×うるさい

デザイナーは
・なぜその色を選んだか
・配色の意図
を説明できるように制作しています

生命力・情熱・愛・パワー・刺激・怒り
安全・調和・健康・治療
静けさ・冷静・安らぎ・誠実・リラックス
幸福・喜び・エネルギー・熱意・陽気・活力
好奇心・協力・幸福・栄光
高貴な・威厳・忠誠・優雅

青と緑を使った例）病院・・・安らぎ、治療

紫を使った例）アパレルブランド・・・高貴な、優雅

青を使った例）政治・・・誠実さ、冷静

ターゲットや用途に合わせて
メインカラーを決定する
でも落とし穴があるよ

うちのイメージ緑だから。
みどり使ってね。
クライアント

×Bad!!
Badな理由：緑つかいすぎ。
メインカラーを決めても使いすぎると
素人っぽい垢抜けない感じに…

×Bad!!
Badな理由：緑がまぶしい。
緑といっても色々な緑があります。
メインに使うカラーとしては明度彩度が高すぎます。

4種類の色を決めよう
１.メインカラー
全体のイメージとなるカラー。使いすぎ注意。
２.背景色
白や黒、無彩色かメインカラーと同系統の薄い色が無難
３.基本の文字色
背景色とのコントラストは気をつけて、読みやすさ重視
４.強調色
アクセントになるカラー。メインカラーと補色の関係が吉

メインカラー選びは慎重に
標準色（明度、彩度が高すぎる色）は避けた方が無難
☓目にやさしくない
☓安易に選んでいるように見えます
☓PowerPointのカラーパレットから選んだの？

メインカラー
背景色基本の文字色
強調色
慣れてきたらもう1色増やしたり、
背景色に少し色をいれてみたりチャレンジ

Windowsのエクセルとか、パワーポイントの
カラーパレットから適当に色をとってくるのは
もう卒業しましょう！
Color Trends + Palettes :: COLOURlovers
http://www.colourlovers.com/

フォント・文字組み
侮れないフォントと少しの手間で見栄え向上

書体選択は、
「視認性」「可読性」「判読性」
を常に意識する

ゴシック体
太めのゴシック体はタイトルや見出しとしても最適
Webサイトでの標準文字はこちら推奨
明朝体
細い明朝体は長い文書を読ませる時に最適
新聞で使われています。少し高級感が出たりします

文字詰めをちゃんとする
１.ひらがなやカタカナ

２.句読点や記号
、や。や「」です
文字間隔を調整すると引き締まります

文字詰め前
文字詰め後

メリハリをつけてみる
１.円・記号・単位など
２.助詞
は、を、が、に、の、など
強調する必要のないものは小さく

サンプル

行動心理学
人はどう見るのか？どう感じるのか？

目が受け取る情報と
脳が伝える情報には誤差がある
カニッツァの三角形

ミュラ・リヤー錯視

人はパターンを見つけたがる
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?

オペレーターにはならず、
いかにデザインとして提案していけるか、
そこに価値を見てもらえるか。
デザイナーとして日々修行です。

♥デザインはWebやアプリとユーザーを繋ぐ1番最初
の架け橋。とっても大事！
さいごに
♥少しのコツと見る目を養うことで、ダサいデザイン
からサヨナラできます
♥デザイナーとエンジニアが少しずつ歩み寄ることで
良い制作物を世に出せれば幸いです

さあ、デザインをはじめよう。DevLOVE関西

さあ、デザインをはじめよう。DevLOVE関西

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to さあ、デザインをはじめよう。DevLOVE関西

Similar to さあ、デザインをはじめよう。DevLOVE関西 (20)

More from rie05

More from rie05 (7)

さあ、デザインをはじめよう。DevLOVE関西