Slide 1
Slide 1 text
少ない手間と知識で
“それなり”
に見せる、
ズルいデザイン
テクニック 2013
Semi-Flat version
＋
@ken_c_lo
TAEKO AKATSUKA
@WCAF Vol.11 Design in Fukui
Slide 2
Slide 2 text
2
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
味を占めました。
遠征は楽しい。
旅行ぽいし、普段会えない人に会える。
Photo by http://www.flickr.com/photos/72782973@N00/4670383270/
普段は、東京らへんに住んでおり、仕事をしています。
9 月に大阪で、ズルいデザインの発表をさせていただいて、
Slide 3
Slide 3 text
3
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Hello Fukui.
≧ [ ﾟ∀ﾟ ] ≦
福井、一回だけ子供のころ、鯖江に来たことがありそれ以来です。
東尋坊も行きました。
はー、カニよ。カニ ≧ [ ﾟ∀ﾟ ] ≦
Slide 4
Slide 4 text
4
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Thank you @shirokuro331
大阪の時に、ささきさんにはじめてお会いした時に、今回の WCAF 行きが実現しました。
ありがとうございます
！
ささきさん、呼んでくれてありがとう
！
Slide 5
Slide 5 text
1
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
東京で、フリーランスで Web デザイン＆グラフィックデザインしてます
赤塚 妙子 Taeko Akatsuka
@ken_c_lo（ケンシロウと…読むけど正直後悔しています）
twitter https://twitter.com/ken_c_lo/
rss http://d.hatena.ne.jp/ken_c_lo/
github https://github.com/taea/
・ 最近は Forkwell.com のリニューアルデザインとかをお手伝い
・Haml + Sass(.sass) + compass 好き
・ Rails アプリにデザインを入れる仕事
・ Git + GitHub を使ったチーム開発に参加
…で、誰なの？
Slide 6
Slide 6 text
2
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
http://www.atmarkit.co.jp/ait/kw/zurui_design.html
@IT で
「ズルいデザイン」連載中
Slide 7
Slide 7 text
3
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
今回の内容
出回ってるスライドと同じ事を再演…
の予定だったんですが、
前日に新ネタを思いついてしまって、
慌ててスライドを作ったら意外と間に合ってしまったので、
両方、やります。
（ズルいデザインは、スライド見れば大体わかるのでちょっと駆け足でお送りします。
）
Slide 8
Slide 8 text
4
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
デザイン初心者の技術者向け
例えば…プログラマの人がハッカソンなどで、集中して短時間でサービス開発したい時に、
少ない手間でそれらしく見せたい
！
・ベジェ曲線
（難しい
！
めんどい
！
）
・画像加工・合成 （とりあえずありもので・・・）
・デザインの基礎知識・理論
（難しい話は後だ！
）
…などのスキル、知識がなくても、とりあえずこれやっとくと簡単にデザインがちょっ
と良く見える感じの小ズルい Tips を紹介します。
今回の内容
Slide 9
Slide 9 text
5
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ということで、あの出回ってるスライドと大体同じですが…
https://speakerdeck.com/ken_c_lo/zurui-design
Slide 10
Slide 10 text
6
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
フラッ
トデザインの流行に合わせて
ズルいデザイン、オワコンと言われないように、
今回大幅に改訂 + 追加を加えました
！
Slide 11
Slide 11 text
7
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
「フラッ
トデザインは難しい」 問題
・ボタン等、アフォーダンスの必要性
（え？押せるの？）
・コンテンツ部分とフレーム部分、メリハリを付けるのが困難
・寂しくなりがち、手抜きに見えがち問題
プロでも、うまくやるのは難しい…
でも、フラットデザインの醸すモダンな雰囲気は取り入れたい
どうすれば？
Slide 12
Slide 12 text
8
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
「セミフラッ
トデザイン」
の提唱
フラットっぽく見えながら適度なメリハリとアフォーダンスを
・控えめなグラデーション・テクスチャ
・ 控えめな立体感
・さりげないリッチ感
今風の見た目、しかもわかりやすい UI を保つにはどうしたらいいの？
こんな感じのやつを、
「セミフラットデザイン」
と呼びたい
（勝手に）
Slide 13
Slide 13 text
9
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
全体的にフラットデザインぽい雰囲気にしつつ、
控えめな質感や立体感でメリハリをつける
よく見ると、うっすらテクスチャ
がついてる
押せるところには立体感をさりげ
なく
セミフラット：大体こんな感じの雰囲気のやつです
Slide 14
Slide 14 text
10
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Use
圧倒的に楽！
DRY!
ズルい
！
Sass(SCSS)
Slide 15
Slide 15 text
11
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design
1
ズルい線
改訂版
semi-flat version
前回スライドより、より控えめな感じに濃度を微調整
Slide 16
Slide 16 text
12
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
《ズルい線》 とは？
Zurui Design 1 ズルい線
黒と白の半透明の線を 2 本並べることで、背景に彫り込まれたように見える線。
これがズルい線 （命名 @machida）
※下は box-shadow で書く(Compass で書いた例 )
border-bottom: 1px solid rgba(0, 0, 0, .2);
上： 黒 / 透明度 0.1 /1px の線
@include box-shadow(rgba(255, 255, 255, .3) 0 1px 0);
下： 白 / 透明度 0.5 /1px の線
よく見るアレ
compass の mixin を利用→
Slide 17
Slide 17 text
13
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ズルい線の断面図
背景の面
ズルい線
背景の面に彫り込まれた溝
光源と逆方向の面は
光が当たってハイライトに
光源と同方向の面は
影になる
光源
Zurui Design 1 ズルい線
Slide 18
Slide 18 text
14
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ここがポイント
・色は、黒
（rgba(0, 0, 0, x))、
白 (rgba
（255,255,255,x)) のみで、
・背景色にあわせて透明度を調節する
・太さは 1px
・ぼかしは 0
・濃過ぎないように。
Zurui Design 1 ズルい線
Slide 19
Slide 19 text
15
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
各方向のズルい線
コードの詳細はあとで配布するスライドで見てみてください。
上
左
右
下 border-bottom: 1px solid rgba(0, 0, 0, .1);
@include box-shadow(rgba(255, 255, 255, .5)0 1px 0);
border-top: 1px solid rgba(0, 0, 0, .1);
@include box-shadow(rgba(255, 255, 255, .5) 0 1px 0 inset);
border-left: 1px solid rgba(0, 0, 0, .1);
@include box-shadow (rgba(255, 255, 255, .5) -1px 0 0);
border-left: 1px solid rgba(0, 0, 0, .1);
@include box-shadow(rgba(255, 255, 255, .5) -1px 0 0 inset);
左下向き光源を
想定した場合
Zurui Design 1 ズルい線
Slide 20
Slide 20 text
16
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
背景色の濃さによって、ズルい線の透明度を調節。
背景色 #333
白： alpha 0.1
@include box-shadow(rgba(255, 255, 255, .1) 0 1px 0);
黒： alpha 1.0
border-bottom: 1px solid rgba(0, 0, 0, 1);
背景色 #EEE
白： alpha 1.0
@include box-shadow(rgba(255, 255, 255, 1) 0 1px 0);
黒： alpha 0.1
border-bottom: 1px solid rgba(0, 0, 0, .1);
背景色 #D46582
白： alpha 0.2
@include box-shadow(rgba(255, 255, 255, .1) 0 1px .2);
黒： alpha 0.2
border-bottom: 1px solid rgba(0, 0, 0, .2);
背景色 #FFC300
白： alpha 0.3
@include box-shadow(rgba(255, 255, 255, .3) 0 1px 0);
黒： alpha 0.1
border-bottom: 1px solid rgba(0, 0, 0, .1);
Zurui Design 1 ズルい線
Slide 21
Slide 21 text
17
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
こういう mixin 作っておくと便利
@mixin line-left($black: .1, $white: .5){
border-left: 1px solid rgba(0, 0, 0, $black);
@include box-shadow (rgba(255, 255, 255, $white) -1px 0 0);
}
@mixin line-right($black: .1, $white: .5){
border-left: 1px solid rgba(0, 0, 0, $black);
@include box-shadow(rgba(255, 255, 255, $white) -1px 0 0 inset);
}
上
左
右
@mixin line-top($black: .1, $white: .5){
border-top: 1px solid rgba(0, 0, 0, $black);
@include box-shadow(rgba(255, 255, 255, $white) 0 1px 0 inset);
下 @mixin line-bottom($black: .1, $white: .5){
border-bottom: 1px solid rgba(0, 0, 0, $black);
@include box-shadow(rgba(255, 255, 255, $white)0 1px 0);
}
透明度を引数に
よく使う透明度を
デフォルトに
Zurui Design 1 ズルい線
Slide 22
Slide 22 text
18
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design
2
ズルい text-shadow
改訂版
semi-flat version
前回スライドより、より控えめな感じに濃度を微調整
Slide 23
Slide 23 text
19
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
文字が刻印されているように見えるテキストシャドウ
光源とは逆方向に黒い半透明のシャドウ
背景色 #333
text-shadow: 1px -1px 0 rgba(0,0,0,1);
右上（光源と逆）方向に
黒 alpha 1.0 / 1px / ぼかし 0 / の影
背景色 #B0430B
text-shadow: 1px -1px 0 rgba(0,0,0,.5);
右上（光源と逆）方向に
黒 alpha 0.5 / 1px / ぼかし 0 / の影
濃い背景色 + 白抜き文字 の場合
Zurui Design 2 ズルい text-shadow
Slide 24
Slide 24 text
20
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
文字が刻印されているように見えるテキストシャドウ
背景色 #EEE 背景色 #FFC300
text-shadow:
-1px 1px 0 rgba(255, 255, 255, 1);
text-shadow:
-1px 1px 0 rgba(255, 255, 255, .4);
左下
（光源と同じ）方向に
白 alpha 1.0 / 1px / ぼかし 0 / の影
左下
（光源と同じ）方向に
白 alpha 4.0 / 1px / ぼかし 0 / の影
薄い
（白に近い）背景色 + 濃い色の文字 の場合
Zurui Design 2 ズルい text-shadow
Slide 25
Slide 25 text
21
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ここがポイント
・色は、黒、白のみで、
・背景色にあわせて透明度を調節する
・濃い背景 + 白抜き文字 の場合 黒い影 光源と逆方向↗
・薄い背景 + 濃い色文字 の場合 白い影 光源と同方向↙
・太さは 1px
・ぼかしは 0
・濃過ぎないように。辛うじて見えるかなく
らいがちょうどいい。
Zurui Design 2 ズルい text-shadow
Slide 26
Slide 26 text
22
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
こういう mixin 作っておくと便利
@mixin ts-000($op : .2){
text-shadow: 1px -1px rgba(0, 0, 0, $op);
}
@mixin ts-fff($op : .5){
text-shadow: -1px 1px rgba(0, 0, 0, $op);
}
透明度を引数に
よく使う透明度を
デフォルトに
Zurui Design 2 ズルい text-shadow
Slide 27
Slide 27 text
23
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design
3
ズルい背景
改訂版
semi-flat version
セミフラットデザイン向けのオススメ背景パターンを追加
Slide 28
Slide 28 text
24
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
これらをうまく使うだけでパッと見 2 割増く
らいのクオリティ
！
ノイズ 木目 紙 布 細かいドット
ズルい背景パターン達
ズルい
！
Zurui Design 3 ズルい背景
Slide 29
Slide 29 text
25
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
◯
使いやすい背景パターンの特徴
・白に近い色がベースのもの
（薄いグレー・アイボリー等）
・黒に近い色ベースのもの
（グレー・濃紺等）
・パターンが細かいもの
・ナチュラル素材
Zurui Design 3 ズルい背景
Slide 30
Slide 30 text
26
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
×
使いづらい背景パターンの特徴
×大柄のパターン
×彩度が強いもの
（色が鮮やかなもの）
×地の色と模様の明度差が大きいもの
（模様がよく見えるもの）
強い柄、強い色のものは、中の要素とぶつかってしまうため、うまく使わないと素人っぽくなりやすい。
ズルくない
Zurui Design 3 ズルい背景
Slide 31
Slide 31 text
27
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ズルい背景パターンを取り揃えた有名サイト
http://subtlepatterns.com/
Zurui Design 3 ズルい背景
Slide 32
Slide 32 text
28
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
http://bradjasper.com/subtle-patterns-bookmarklet/
ブックマークレッ
トもある
わかりやすい解説 -> http://review4.cc/archives/2356/
見ているサイトの背景を簡単に SubtlePatterns の背景に変えられたりして便利
Zurui Design 3 ズルい背景
Slide 33
Slide 33 text
29
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
もう一つついでに…
ズルいグレーとは。
Zurui Design 3 ズルい背景
Slide 34
Slide 34 text
30
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ズルいグレーとは
限りなく白に近いグレー (#EEE 以下 )
#EEE #F6F6F6
・殆ど白に見える明るいグレー → 白の代わりに使える。
・これらに、ズルい線やズルいテキストシャドウを乗せると…
・ほのかに立体感が出て、一気に高級感が出る。
・本当の白
（#FFF）と並べて使うと微妙な色の違いがオシャレ
#FFF
Zurui Design 3 ズルい背景
Slide 35
Slide 35 text
31
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
セミフラッ
トにオススメの背景パターン 6 選
from subtlepatterns
控えめなテクスチャがオススメです。
Zurui Design 3 ズルい背景
http://subtlepatterns.com/cardboard-flat/
色を上に乗せて使ってもよい。
（色は Photoshop とかで乗せてください。乗算が良い）
Slide 36
Slide 36 text
32
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design 3 ズルい背景
http://subtlepatterns.com/retina-dust/
http://subtlepatterns.com/gray-lines/
http://subtlepatterns.com/brilliant/
Slide 37
Slide 37 text
33
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design 3 ズルい背景
http://subtlepatterns.com/worn-dots/
http://subtlepatterns.com/blizzard/
http://subtlepatterns.com/paper/
Slide 38
Slide 38 text
34
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design
4
ズルいグラデーション
改訂版
semi-flat version
前回スライドより、より控えめな感じに mixin の濃度差を微調整
Slide 39
Slide 39 text
35
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
#434343
#2d9fee
#48b1f2
#222222
微妙な明度差のグラデーション
ベタ塗りの一歩手前く
らいの、微妙な色の差のグラデーションで
本物っぽい質感が出る
カラーコードで
1 桁目の差が 2
く
らいがいいみたい
Zurui Design 4 ズルいグラデーション
Slide 40
Slide 40 text
36
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
色の差が大きなグラデーションは、
実際使ってみると野暮いデザインになりがち・・・
（びしっと決まるとカッコイイけど、大胆な上級テク。
）
大胆なグラデーションの使いこなしは結構難しい。
だめじゃないけど
むずかしい
！
Zurui Design 4 ズルいグラデーション
Slide 41
Slide 41 text
37
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
グラデーションの CSS を楽につくれるズルいサイト
http://www.colorzilla.com/gradient-editor/
Zurui Design 4 ズルいグラデーション
Slide 42
Slide 42 text
38
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Sass(SCSS) にも切り替え可能
Zurui Design 4 ズルいグラデーション
Slide 43
Slide 43 text
39
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
で、作ってもいいんだけど…
さらに mixin 化できそう。
Zurui Design 4 ズルいグラデーション
Slide 44
Slide 44 text
40
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
微妙な色の差グラデーション mixin
@mixin gradient-top-lighten($color : #666, $lighten: 5%){
background-color: $color;
@include filter-gradient(lighten($color, $lighten), $color,
vertical);
@include background-image(linear-gradient(lighten($color,
$lighten) 0%, $color 100%));
使うときは引数で下のベースになる色だけ指定して 1 行で書ける
@include gradient-top-lighten(#222);
上の方が少し明るいグラデーション
Zurui Design 4 ズルいグラデーション
Slide 45
Slide 45 text
41
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
微妙な色の差グラデーション mixin
@mixin gradient-top-darken($color : #666, $darken: 5%){
background-color: $color;
@include filter-gradient(darken($color, $darken), $color,
vertical);
@include background-image(linear-gradient(darken($color,
$darken) 0%, $color 100%));
}
使うときは (ry
@include gradient-top-lighten(#48B1F2);
上の方が少し暗いグラデーション
Zurui Design 4 ズルいグラデーション
Slide 46
Slide 46 text
42
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design
5
ズルい配色
NEW
今回から新規に追加しました
Slide 47
Slide 47 text
43
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design 5 ズルい配色
キーになる色は Sass で変数にして一括管理しよう
メインカラー
アクセントカラー
ベースカラー
テキストカラー
重要なボタンなど
（目立つ色）
少ない面積に使用すると効果的
（全体の面積の 5% く
らい）
背景色。
白か黒に近い色が一般的で使いやすい。
薄いグレーやアイボリー等もよい
サイトのイメージを表す色
（あの赤いサイトだよねー）
ヘッダやロゴ色、リンク、見出しの色等、
全体の 10 〜 20% 程度の面積で
利用すると効果的
Slide 48
Slide 48 text
44
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design 5 ズルい配色
$main-color: #b13b23; // メインカラー
$accent-color: adjust-hue($main-color, 200); // アクセントカラー
$base-color: #FFF; // ベースカラー（背景色）
$text-color: #4a2d08; // テキストカラー（テキスト色）
a{ color: $main-color; }
キーになる色は Sass で変数にして一括管理しよう
もとの変数の色を変えれば、各要素の色を変えなくても一気に色が変えられる
Slide 49
Slide 49 text
45
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design 5 ズルい配色
$accent-color: adjust-hue($main-color, 200); //アクセントカラー
色相を転換 200°
$accent-color
#236ab0
200°
$main-color
#b03b23
アクセントカラー：目立つ色
重要なボタンなど
少ない面積に使用すると効果的
（全体の面積の 5% く
らい）
メインカラー：中心となる色
サイトのイメージを表す色
（あの赤いサイトだよねー）
ヘッダやロゴ色、リンク、見出しの色等、
全体の 10 〜 20% 程度の面積で
利用すると効果的
Slide 50
Slide 50 text
46
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
フラッ
トデザインぽい配色
Flat UI colors から選ぶと便利
http://flatuicolors.com/
Zurui Design 5 ズルい配色
Slide 51
Slide 51 text
47
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
でも、そのままだと鮮やかすぎて使いこなしが難しい
→ Sass の deaturate を使って彩度を少し落とす
鮮やか過ぎる色は、主張が強く、うまく使いこなすのが難しい。
少しだけ彩度を落としてあげることで、他の色と仲良くしやすくなり、
使いこなしの難易度が下がる。
Zurui Design 5 ズルい配色
$main-color: desaturate(#25b89a, 10%);
彩度を落とす 10%
Slide 52
Slide 52 text
48
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design
6
ズルい角丸
Slide 53
Slide 53 text
49
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
角丸にするだけで、
なんかオシャレ
！ ズルい
！
けど、これも使いこなすのに少しコツが…
Zurui Design 6 ズルい角丸
Slide 54
Slide 54 text
50
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
角丸、大きすぎないのがおすすめ
原則 6px 以内が使いやすい
1 つの section を囲むような通常サイズ
の BOX であれば、
border-radius:
5px 〜 6px
ぐらいが、最も無難でキレイです。
Zurui Design 6 ズルい角丸
Slide 55
Slide 55 text
51
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
border-radius:
4px
border-radius:
2 〜 3px
Submit ボタン等のボタンは
小さなアイコン等のコーナー
Zurui Design 6 ズルい角丸
Slide 56
Slide 56 text
52
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
R 半径が大きい角丸は、
野暮ったいデザインになりやすいので、
あまり使わない方がよいです。
（びしっと決まるととてもカッコイイ
けど、上級テク。
）
だめじゃないけど
むずかしい
！
Zurui Design 6 ズルい角丸
Slide 57
Slide 57 text
53
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design 5 ズルい角丸
Slide 58
Slide 58 text
54
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Compass 使おう。
.hoge{
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
}
.hoge{
@include border-radius(6px);
}
ズルい
！
Zurui Design 6 ズルい角丸
Slide 59
Slide 59 text
55
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design
7
ズルい box-shadow
改訂版
semi-flat version
前回スライドより、より控えめな感じに mixin シャドウ濃度を微調整
Slide 60
Slide 60 text
56
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
×
×色が濃すぎる
×ボケ足が長すぎる
×色つき
これは NG! な box-shadow
だめじゃないけど
むずかしい
！
やり方によってはダメじゃないんですが、これも使いこなすのが難しい上級テク
box-shadow はできるだけ繊細に使用した方が見栄えが良い。
Zurui Design 7 ズルい box-shadow
Slide 61
Slide 61 text
57
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ズルい box-shadow ① 枠線がわりに
Zurui Design 7 ズルい box-shadow
・セクションの囲み、ボックス罫線の代わりに利用するのがおすすめ
・borderよりも繊細で柔らかな表現になる
Slide 62
Slide 62 text
58
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
・シャドウには角度を付けない四方で、薄い alpha0.15 のシャドウ
・ぼかしは 2px で、線よりも少しふわっとした表現に
・box と背景がともに白に近い色の時に利用しやすいです
ズルい box-shadow ① 枠線がわりに
.box {
@include box-shadow(rgba(0, 0, 0, .15) 0 0 2px);
}
Slide 63
Slide 63 text
59
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ズルい box-shadow ① 枠線がわりに
→ mixin で汎用化
使う時はこんな感じで
（透明度 0.3 のシャドウをつける）
@mixin zurui-box($shadow: 0.15) {
@include box-shadow(rgba(0, 0, 0, $shadow) 0 0 2px);
}
@include zurui-box(.3);
Slide 64
Slide 64 text
60
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ズルい box-shadow ② 内側にぼかして高級感
・内側にむかってぼけ足を長く、薄いシャドウを入れることで、少し高級感、
リアルな存在感が出る。
・ズルい背景パターンとの併用オススメ
・リボン、ボタン等、
「モノ感」を出したい場合に有効
Zurui Design 7 ズルい box-shadow
Slide 65
Slide 65 text
61
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ズルい box-shadow ② 内側にぼかして高級感
Zurui Design 7 ズルい box-shadow
.ribbon {
@include box-shadow(rgba(0, 0, 0, .2) 0 0 0 20px inset);
}
Slide 66
Slide 66 text
62
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ズルい box-shadow ② 内側にぼかして高級感
→ mixin で汎用化
Zurui Design 7 ズルい box-shadow
@mixin rich-box($shadow: .2){
@include box-shadow(rgba(0, 0, 0, $shadow) 0 0 0 20px
inset);
}
使う時はこんな感じで
（透明度 0.1のシャドウをつける）
@include rich-box(.1);
Slide 67
Slide 67 text
63
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ズルい box-shadow ③ 凹み BOX
（deboss）
Zurui Design 7 ズルい box-shadow
・浅い凹みのある box 表現
・フォームのテキストエリアなど、入力を促したい場所に利用すると効果的
Slide 68
Slide 68 text
64
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ズルい box-shadow ③ 凹み BOX
（deboss）
Zurui Design 7 ズルい box-shadow
・光源の方向に影、光源とは逆方向にハイライト
・右上・内側に影：alpha 0.05 ／ぼかし 2px の黒い box-shadow 左下
・外側にハイライト：alpha .8 ／ぼかし 0 の白い box-shadow
.box {
border: 1px solid rgba(0, 0, 0, .1);
@include box-shadow(rgba(0, 0, 0, .05) -1px 1px 2px inset,
rgba(255, 255, 255, .8) -1px 1px 0);
}
Slide 69
Slide 69 text
65
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ズルい box-shadow ③ 凹み BOX
（deboss）
→ mixin で汎用化
Zurui Design 7 ズルい box-shadow
@mixin deboss-box($border: .1, $shadow: .05, $highlight: .8) {
border: 1px solid rgba(0,0,0,$border);
@include box-shadow(rgba(0,0,0,$shadow) -1px 1px 2px inset,
rgba(255,255,255,$highlight) -1px 1px 0);
}
borderとシャドウ、
ハイライトの透明度は
背景色によって調節したいので
引数に
使う時はこんな感じで
@include deboss-box(.15, .2, .7);
Slide 70
Slide 70 text
66
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ズルい box-shadow ④ 凸 BOX
（emboss）
Zurui Design 7 ズルい box-shadow
・ボタン等のクリックやタップを促す箇所に使うと効果的
・シャドウやハイライトを控えめにすれば、フラットな UI の中でもマッチ
Slide 71
Slide 71 text
67
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ズルい box-shadow ④ 凸 BOX
（emboss）
Zurui Design 7 ズルい box-shadow
.box {
border: 1px solid rgba(0, 0, 0, .1);
@include box-shadow(rgba(0, 0, 0, .05) -1px 1px 0, rgba(255, 255, 255, .5)
-1px 1px 0 inset);
}
・光源とは逆方向に影、光源の方向にハイライト
・左下・外側に影：alpha 0.05 ／ぼかし 0 の box-shadow
・右上・内側にハイライト alpha 0.5 ／ぼかし 0 の box-shadow
・
ボックスの周りに、
黒い alpha 0.15 の線 （薄い線を入れることによって、
輪郭が締まります）
Slide 72
Slide 72 text
68
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ズルい box-shadow ④ 凸 BOX
（emboss）
→ mixin で汎用化
Zurui Design 7 ズルい box-shadow
@mixin emboss-box($border: .1, $shadow: .05, $highlight: .5) {
border: 1px solid rgba(0, 0, 0, $border);
@include box-shadow(rgba(0, 0, 0, $shadow) -1px 1px 0, rgba(255, 255,
255, $highlight) -1px 1px 0 inset);
}
使う時はこんな感じで
@include emboss-box(.15, .2, .7);
borderとシャドウ、
ハイライトの透明度は
背景色によって調節したいので
引数に
Slide 73
Slide 73 text
69
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design
8
ズルいボタン
改訂版
semi-flat version
前回スライドより、数点改良しました。
Slide 74
Slide 74 text
70
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ここまでで出てきたズルい技を使って
ボタンを作ってみる。
Zurui Design 8 ズルいボタン
Slide 75
Slide 75 text
71
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
前回から数点改良し、より汎用的に便利になりました。
・文字サイズの変更、またそれに併せてボタンサイズの変更に対応
・i タグを使ったアイコン用の Webフォントに対応
・今回は font-awesome を使って解説しています
・フラットデザインの流行にに合わせ、立体感やグラデーションをより
控えめに、かつ padding を大きめに取ったボタンスタイル
・input type="submit" や button タグにも対応
・色の変更もさらに簡単に。文字色の変更にも対応
Zurui Design 8 ズルいボタン
Slide 76
Slide 76 text
72
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
@mixin button($color: #48B1F2, $font-size: 16px, $text-color: white) {
display: inline-block;
background-origin: border-box;
position: relative;
font-weight: bold;
@include ts-000(.1);
@include gradient-top-lighten($color, 5%);
@include border-radius(4px);
@include emboss-box($border: .1, $shadow: .1, $highlight: .2);
color: rgba($text-color, .9);
text-align: center;
font-size: $font-size;
padding: 0 ($font-size * 2);
height: $font-size * 3;
line-height: $font-size * 3;
i {
font-size: 130%;
margin-right: 5px;
color: rgba($text-color, .5);
}
&:hover {
@include gradient-top-lighten(lighten($color, 5%), 5%);
text-decoration: none;
color: $text-color;
i {
color: $text-color;
}
}
&:active {
@include gradient-top-lighten($color, 5%);
top: 1px;
}
}
汎用的に使えるように、
まずは mixin にする。
→クソ長い
！
１つひとつのコード説明、割愛。
詳細は @IT の連載に書きました。
http://www.atmarkit.co.jp/ait/
articles/1309/12/news001.html
Zurui Design 8 ズルいボタン
Slide 77
Slide 77 text
73
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
上下 padding が文字の大きさの 1 倍
padding が大きめのボタンが今時
フォントサイズに合わせて padding サイズが変わるようにした
左右 padding が文字の大きさの 2 倍
padding: 0 ($font-size * 2);
height: $font-size * 3;
line-height: $font-size * 3;
Zurui Design 8 ズルいボタン
Slide 78
Slide 78 text
74
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
リンクタグで使いたい時
submit ボタンで使いたい時
ボタンタグで使いたい時
.button{
a {
@include button;
}
input[type="submit"] {
@include button;
}
button {
@include button;
}
Zurui Design 8 ズルいボタン
mixin にしておくことで、
色んなマークアップで
同じスタイルが使えるように
Slide 79
Slide 79 text
75
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
大きいボタン 小さいボタン
.button-large {
a {
@include button($font-size: 24px);
}
}
.button-small {
a {
@include button($font-size: 12px);
}
}
Zurui Design 8 ズルいボタン
引数の ＄font-size 指定を変えることで、文字とボタンの大きさが変更できます。
ボタンの大きさを変えてみよう
Slide 80
Slide 80 text
76
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
赤いボタン 黒いボタン
.button-red {
a {
@include button($color: #ef662f);
}
}
.button-black {
a {
@include button($color: #444);
}
}
Zurui Design 8 ズルいボタン
引数の ＄color 指定を変えることで、ボタンの色が変更できます。
ボタンの色を変えてみよう
Slide 81
Slide 81 text
77
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
白いボタン
.button-white {
a {
@include button($color: #f6f6f6, $text-color: #444)
@include ts-fff(0)
@include ts-000(.1)
@inlude emboss-box(.05, .05, 1)
}
Zurui Design 8 ズルいボタン
引数の ＄text-color を変えることで、文字色の変更もできます
白いボタンは、ベースの色が薄く、
テキスト色が黒いので、少しシャドウやハイライトを
調整しています。
ボタンの色を変えてみよう
Slide 82
Slide 82 text
78
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Font-Awesome とは？
Zurui Design 8 ズルいボタン
Webフォントアイコンをボタンにつけてみよう
数百種類ものアイコンが Webフォントで提供されているサービスです。頻繁にバージョンアップがあり、そのたびに
アイコンの種類が増えます。MIT ライセンスによって提供されています。
Font-Awesome をボタンに入れてみる
Slide 83
Slide 83 text
79
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design 8 ズルいボタン
font-awesome は HTMLで i タグの class にアイコンの名前を付けて使用します。
リンクのボタンにアイコンを利用するには、このような HTML に
こんなアイコンのついたボタンになります。
Slide 84
Slide 84 text
80
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
@mixin button($color: #48....) {
・
・
i {
font-size: 130%; // テキストより 130% 大きく
margin-right: 5px; // 右マージンあける
color: rgba($text-color, .5); // 半透明に
}
・
・
}
アイコン、そのまま置くと、
あまりカッコ良くないので
mixin 中で i タグに調整を加えた。
Zurui Design 8 ズルいボタン
Slide 85
Slide 85 text
81
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design
9
ズルいフキダシ
NEW
今回から新規に追加しました
Slide 86
Slide 86 text
82
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design 9 ズルいフキダシ
よくあるアレ
よくあるアレ
…を、mixin で汎用化して、
色・位置・三角形の大きさを都度、調節出来るようにしたい。
うん、しよう。
この三角形の部分
Slide 87
Slide 87 text
83
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
@mixin balloon-left($size: 6px, $color: #FFF, $top: 6px){
position: relative;
&:after{
position: absolute;
content: "";
display: block;
border: $size solid transparent
border-right: $size solid $color;
top: $top;
left: -1 * $size * 2;
}
}
@include balloon-left($size: 10px, $color: #EEE, $top: 25px;)
Zurui Design 9 ズルいフキダシ
$top
$size
左方向のフキダシの mixin
使う時はこんな感じで
Slide 88
Slide 88 text
84
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
@mixin balloon-left-border($size: 6px, $color: #FFF, $top: 6px,
$border-color: #CCC, $border: 1px){
position: relative;
$size2 : $size + $border;
@include balloon-left($size, $color, $top)
&:before{
position: absolute;
content: "";
display: block;
border: $size2 solid transparent;
border-right: $size2 solid $border-color;
top: $top - $border;
left: -1 * $size2 * 2;
}
}
Zurui Design 9 ズルいフキダシ
左方向のフキダシの mixin + border 付き
$border
線の太さ
$border-color
線の色
Slide 89
Slide 89 text
85
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
@mixin balloon-right($size: 6px, $color: #FFF, $top:
6px){
position: relative;
&:after{
position: absolute
content: ""
display: block
border: $size solid transparent;
border-left: $size solid $color;
top: $top;
right: -1 * $size * 2;
}
}
@mixin balloon-right-border($size: 6px, $color: #FFF,
$top: 6px, $border-color: #CCC, $border: 1px){
position: relative;
$size2 : $size + $border';
@include balloon-right($size, $color, $top);
&:before{
position: absolute;
content: "";
display: block;
border: $size2 solid transparent;
border-left: $size2 solid $border-color;
top: $top - $border;
right: -1 * $size2 * 2;
}
}
Zurui Design 9 ズルいフキダシ
右方向のフキダシ 右方向のフキダシ + border
あとで見といてください
Slide 90
Slide 90 text
86
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
@mixin balloon-top($size: 6px, $color: #FFF,
$left: 6px){
position: relative;
&:after{
position: absolute;
content: "";
display: block;
border: $size solid transparent;
border-bottom: $size solid $color;
top: -1 * $size * 2;
left: $left;
}
}
@mixin balloon-top-border($size: 6px, $color: #FFF,
$left: 6px, $border_color: #CCC, $border: 1px){
position: relative;
$size2 : $size + $border;
@include balloon-top($size, $color, $left);
&:before{
position: absolute;
content: "";
display: block;
border: $size2 solid transparent;
border-bottom: $size2 solid $border-color;
top: -1 * $size2 * 2;
left: $left - $border;
}
}
Zurui Design 9 ズルいフキダシ
上方向のフキダシ 上方向のフキダシ + border
あとで見といてください
Slide 91
Slide 91 text
87
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
@mixin balloon-bottom($size: 6px, $color: #FFF,
$left: 6px){
position: relative;
&:after{
position: absolute;
content: "";
display: block;
border: $size solid transparent;
border-top: $size solid $color;
bottom: -1 * $size * 2;
left: $left;
}
}
@mixin balloon-bottom-border($size: 6px, $color:
#FFF, $left: 6px, $border-color: #CCC, $border: 1px){
position: relative;
@include balloon-bottom($size, $color, $left);
$size2 : $size + $border;
&:before {
position: absolute;
content: "";
display: block;
border: $size2 solid transparent;
border-top: $size2 solid $border-color;
bottom: -1 * $size2 * 2;
left: $left - $border;
}
}
Zurui Design 9 ズルいフキダシ
下方向のフキダシ 下方向のフキダシ + border
あとで見といてください
Slide 92
Slide 92 text
88
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design
10
ズルい数字
NEW
今回から新規に追加しました
Slide 93
Slide 93 text
89
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
ポイントになる英数字を大きく見せてメリハリを出す
Zurui Design 10 ズルい数字
Slide 94
Slide 94 text
90
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
数字専用のフォントを mixin 化しておく
DIN Medium http://fontzone.net/font-details/din-medium
Zurui Design 10 ズルい数字
@mixin num-font {
font-family: Arial, Helvetica,sans-serif;
font-weight: bold;
}
@font-face{
font-family: 'DIN Medium';
src: url('fonts/DIN_Medium.ttf');
}
@mixin num-font{
font-family: 'DIN Medium', 'Helvetica Neue', Arial,
'Liberation Sans', FreeSans, sans-serif;
}
Slide 95
Slide 95 text
91
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
数字を span.num でマークアップ
数字を span.num でマークアップ
Zurui Design 10 ズルい数字
¥2,610
.num{ @include num-font; font-size: 200%; }Slide 96
Slide 96 text
92
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design
11
ズルいフラッ
トデザイン
NEW
今回から新規に追加しました
Slide 97
Slide 97 text
93
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Zurui Design 10 ズルいフラットデザイン
フラットデザインがうまくいく法則
フラットデザインはごまかしがきかない分、
うまく成り立たせるために制約とパターンがある。
うまくいくパターンを、既存のフラットデザインから読み取ってみる。
・寂しくならない
・手抜きに見えない
・使いやすさを担保
Slide 98
Slide 98 text
94
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
法則 1 色ベタ面が表示画面の半分以上を占める
かつ、色ベタ面の幅は画面の端まで 100% 幅である
Zurui Design 10 ズルいフラットデザイン
同系色で背景にうっすらイラスト描いてるのもよくある
Slide 99
Slide 99 text
95
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
法則 2 写真が表示画面の半分以上を占める
かつ、写真の幅は画面の端まで 100% 幅である
法則 1 の色ベタ面の代わりに写真を利用している
Zurui Design 10 ズルいフラットデザイン
ぼかすのもよくある 上に色乗せて文字読みやすくするのもよくある
Slide 100
Slide 100 text
96
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
法則 3 メインカラー + ごく一部にアクセントカラー
メインカラーは 画面の半分以上を占める : アクセントカラーは 5% 未満
※色選びのポイントは、
「ズルい配色」参照
白抜き文字 / 黒文字 いずれも載せられるような色がメインカラーに使いやすい
一番重要なボタン等に大体アクセントカラーが使われている
Zurui Design 10 ズルいフラットデザイン
Slide 101
Slide 101 text
97
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
法則 4 アイボリー / ベージュ背景 + カラフル
上に乗せるカラフルな色も、背景色に合わせて、少し彩度を落としている。
※彩度の落とし方：
「ズルい配色」参照 (desaturate)
Zurui Design 10 ズルいフラットデザイン
Slide 102
Slide 102 text
98
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
法則 5 大きい文字と小さい文字の差が大きい
大きい文字は大きく、小さい文字は小さく、ジャンプ率が高くメリハリがある
Zurui Design 10 ズルいフラットデザイン
Slide 103
Slide 103 text
99
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
これら、フラットデザインの法則
今風のデザインテイスト &
使いやすくコンテンツが馴染む UI
セミフラットデザイン
ズルいデザイン
＋
↓
Zurui Design 10 ズルいフラットデザイン
Slide 104
Slide 104 text
100
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
Thank you
もうちょっとだけ、続くんじゃ ≧ [ ﾟ∀ﾟ] ≦