ズルいデザインテクニック2013 + セミフラット version - in 福井

少ない手間と知識で
“それなり”
に見せる、
ズルいデザイン
テクニック 2013
Semi-Flat version
＋
@ken_c_lo
TAEKO AKATSUKA
@WCAF Vol.11 Design in Fukui

View Slide

2
少ない手間と知識で“それなり”
に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
味を占めました。
遠征は楽しい。
旅行ぽいし、普段会えない人に会える。
Photo by http://www.flickr.com/photos/72782973@N00/4670383270/
普段は、東京らへんに住んでおり、仕事をしています。
9 月に大阪で、ズルいデザインの発表をさせていただいて、

View Slide

3
Hello Fukui.
≧ [ ﾟ∀ﾟ ] ≦
福井、一回だけ子供のころ、鯖江に来たことがありそれ以来です。
東尋坊も行きました。
はー、カニよ。カニ ≧ [ ﾟ∀ﾟ ] ≦

View Slide

4
Thank you @shirokuro331
大阪の時に、ささきさんにはじめてお会いした時に、今回の WCAF 行きが実現しました。
ありがとうございます
！
ささきさん、呼んでくれてありがとう
！

View Slide

1
東京で、フリーランスで 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 を使ったチーム開発に参加
…で、誰なの？

View Slide

2
http://www.atmarkit.co.jp/ait/kw/zurui_design.html
@IT で
「ズルいデザイン」連載中

View Slide

3
今回の内容
出回ってるスライドと同じ事を再演…
の予定だったんですが、
前日に新ネタを思いついてしまって、
慌ててスライドを作ったら意外と間に合ってしまったので、
両方、やります。
（ズルいデザインは、スライド見れば大体わかるのでちょっと駆け足でお送りします。
）

View Slide

4
デザイン初心者の技術者向け
例えば…プログラマの人がハッカソンなどで、集中して短時間でサービス開発したい時に、
少ない手間でそれらしく見せたい
！
・ベジェ曲線
（難しい
！
めんどい
！
）
・画像加工・合成（とりあえずありもので・・・）
・デザインの基礎知識・理論
（難しい話は後だ！
）
…などのスキル、知識がなくても、とりあえずこれやっとくと簡単にデザインがちょっ
と良く見える感じの小ズルい Tips を紹介します。
今回の内容

View Slide

5
ということで、あの出回ってるスライドと大体同じですが…
https://speakerdeck.com/ken_c_lo/zurui-design

View Slide

6
フラッ
トデザインの流行に合わせて
ズルいデザイン、オワコンと言われないように、
今回大幅に改訂 + 追加を加えました
！

View Slide

7
「フラッ
トデザインは難しい」問題
・ボタン等、アフォーダンスの必要性
（え？押せるの？）
・コンテンツ部分とフレーム部分、メリハリを付けるのが困難
・寂しくなりがち、手抜きに見えがち問題
プロでも、うまくやるのは難しい…
でも、フラットデザインの醸すモダンな雰囲気は取り入れたい
どうすれば？

View Slide

8
「セミフラッ
トデザイン」
の提唱
フラットっぽく見えながら適度なメリハリとアフォーダンスを
・控えめなグラデーション・テクスチャ
・控えめな立体感
・さりげないリッチ感
今風の見た目、しかもわかりやすい UI を保つにはどうしたらいいの？
こんな感じのやつを、
「セミフラットデザイン」
と呼びたい
（勝手に）

View Slide

9
全体的にフラットデザインぽい雰囲気にしつつ、
控えめな質感や立体感でメリハリをつける
よく見ると、うっすらテクスチャ
がついてる
押せるところには立体感をさりげ
なく
セミフラット：大体こんな感じの雰囲気のやつです

View Slide

10
Use
圧倒的に楽！
DRY!
ズルい
！
Sass(SCSS)

View Slide

11
Zurui Design
1
ズルい線
改訂版
semi-flat version
前回スライドより、より控えめな感じに濃度を微調整

View Slide

12
《ズルい線》とは？
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 を利用→

View Slide

13
ズルい線の断面図
背景の面
ズルい線
背景の面に彫り込まれた溝
光源と逆方向の面は
光が当たってハイライトに
光源と同方向の面は
影になる
光源

View Slide

14
ここがポイント
・色は、黒
（rgba(0, 0, 0, x))、
白 (rgba
（255,255,255,x)) のみで、
・背景色にあわせて透明度を調節する
・太さは 1px
・ぼかしは 0
・濃過ぎないように。

View Slide

15
各方向のズルい線
コードの詳細はあとで配布するスライドで見てみてください。
上
左
右
下 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);
左下向き光源を
想定した場合

View Slide

16
背景色の濃さによって、ズルい線の透明度を調節。
背景色 #333
白： alpha 0.1
黒： 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
背景色 #D46582
白： alpha 0.2
@include box-shadow(rgba(255, 255, 255, .1) 0 1px .2);
黒： alpha 0.2
背景色 #FFC300
白： alpha 0.3
黒： alpha 0.1

View Slide

17
こういう 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);
}
透明度を引数に
よく使う透明度を
デフォルトに

View Slide

18
Zurui Design
2
ズルい text-shadow
改訂版
semi-flat version
前回スライドより、より控えめな感じに濃度を微調整

View Slide

19
文字が刻印されているように見えるテキストシャドウ
光源とは逆方向に黒い半透明のシャドウ
背景色 #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

View Slide

20
文字が刻印されているように見えるテキストシャドウ
背景色 #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 / の影
薄い
（白に近い）背景色 + 濃い色の文字の場合

View Slide

21
ここがポイント
・色は、黒、白のみで、
・背景色にあわせて透明度を調節する
・濃い背景 + 白抜き文字の場合黒い影光源と逆方向↗
・薄い背景 + 濃い色文字の場合白い影　光源と同方向↙
・太さは 1px
・ぼかしは 0
・濃過ぎないように。辛うじて見えるかなく
らいがちょうどいい。

View Slide

22
こういう 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);
}
透明度を引数に
よく使う透明度を
デフォルトに

View Slide

23
Zurui Design
3
ズルい背景
改訂版
semi-flat version
セミフラットデザイン向けのオススメ背景パターンを追加

View Slide

24
これらをうまく使うだけでパッと見 2 割増く
らいのクオリティ
！
ノイズ木目紙布細かいドット
ズルい背景パターン達
ズルい
！
Zurui Design 3 ズルい背景

View Slide

25
◯
使いやすい背景パターンの特徴
・白に近い色がベースのもの
（薄いグレー・アイボリー等）
・黒に近い色ベースのもの
（グレー・濃紺等）
・パターンが細かいもの
・ナチュラル素材

View Slide

26
×
使いづらい背景パターンの特徴
×大柄のパターン
×彩度が強いもの
（色が鮮やかなもの）
×地の色と模様の明度差が大きいもの
（模様がよく見えるもの）
強い柄、強い色のものは、中の要素とぶつかってしまうため、うまく使わないと素人っぽくなりやすい。
ズルくない

View Slide

27
ズルい背景パターンを取り揃えた有名サイト
http://subtlepatterns.com/

View Slide

28
http://bradjasper.com/subtle-patterns-bookmarklet/
ブックマークレッ
トもある
わかりやすい解説 -> http://review4.cc/archives/2356/
見ているサイトの背景を簡単に SubtlePatterns の背景に変えられたりして便利

View Slide

29
もう一つついでに…
ズルいグレーとは。

View Slide

30
ズルいグレーとは
限りなく白に近いグレー (#EEE 以下 )
#EEE #F6F6F6
・殆ど白に見える明るいグレー → 白の代わりに使える。
・これらに、ズルい線やズルいテキストシャドウを乗せると…
・ほのかに立体感が出て、一気に高級感が出る。
・本当の白
（#FFF）と並べて使うと微妙な色の違いがオシャレ
#FFF

View Slide

31
セミフラッ
トにオススメの背景パターン 6 選
from subtlepatterns
控えめなテクスチャがオススメです。
http://subtlepatterns.com/cardboard-flat/
色を上に乗せて使ってもよい。
（色は Photoshop とかで乗せてください。乗算が良い）

View Slide

32
http://subtlepatterns.com/retina-dust/
http://subtlepatterns.com/gray-lines/
http://subtlepatterns.com/brilliant/

View Slide

33
http://subtlepatterns.com/worn-dots/
http://subtlepatterns.com/blizzard/
http://subtlepatterns.com/paper/

View Slide

34
Zurui Design
4
ズルいグラデーション
改訂版
semi-flat version
前回スライドより、より控えめな感じに mixin の濃度差を微調整

View Slide

35
#434343
#2d9fee
#48b1f2
#222222
微妙な明度差のグラデーション
ベタ塗りの一歩手前く
らいの、微妙な色の差のグラデーションで
本物っぽい質感が出る
カラーコードで
1 桁目の差が 2
く
らいがいいみたい
Zurui Design 4 ズルいグラデーション

View Slide

36
色の差が大きなグラデーションは、
実際使ってみると野暮いデザインになりがち・・・
（びしっと決まるとカッコイイけど、大胆な上級テク。
）
大胆なグラデーションの使いこなしは結構難しい。
だめじゃないけど
むずかしい
！

View Slide

37
グラデーションの CSS を楽につくれるズルいサイト
http://www.colorzilla.com/gradient-editor/

View Slide

38
Sass(SCSS) にも切り替え可能

View Slide

39
で、作ってもいいんだけど…
　さらに mixin 化できそう。

View Slide

40
微妙な色の差グラデーション 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);
上の方が少し明るいグラデーション

View Slide

41
微妙な色の差グラデーション 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);
上の方が少し暗いグラデーション

View Slide

42
Zurui Design
5
ズルい配色
NEW
今回から新規に追加しました

View Slide

43
Zurui Design 5 ズルい配色
キーになる色は Sass で変数にして一括管理しよう
メインカラー
アクセントカラー
ベースカラー
テキストカラー
重要なボタンなど
（目立つ色）
少ない面積に使用すると効果的
（全体の面積の 5% く
らい）
背景色。
白か黒に近い色が一般的で使いやすい。
薄いグレーやアイボリー等もよい
サイトのイメージを表す色
（あの赤いサイトだよねー）
ヘッダやロゴ色、リンク、見出しの色等、
全体の 10 〜 20% 程度の面積で
利用すると効果的

View Slide

44
$main-color: #b13b23; // メインカラー
$accent-color: adjust-hue($main-color, 200); // アクセントカラー
$base-color: #FFF; // ベースカラー（背景色）
$text-color: #4a2d08; // テキストカラー（テキスト色）
a{ color: $main-color; }
キーになる色は Sass で変数にして一括管理しよう
もとの変数の色を変えれば、各要素の色を変えなくても一気に色が変えられる

View Slide

45
$accent-color: adjust-hue($main-color, 200); //アクセントカラー
色相を転換 200°
$accent-color
#236ab0
200°
$main-color
#b03b23
アクセントカラー：目立つ色
重要なボタンなど
少ない面積に使用すると効果的
（全体の面積の 5% く
らい）
メインカラー：中心となる色
サイトのイメージを表す色
（あの赤いサイトだよねー）
ヘッダやロゴ色、リンク、見出しの色等、
全体の 10 〜 20% 程度の面積で
利用すると効果的

View Slide

46
フラッ
トデザインぽい配色
Flat UI colors から選ぶと便利
http://flatuicolors.com/

View Slide

47
でも、そのままだと鮮やかすぎて使いこなしが難しい
→ Sass の deaturate を使って彩度を少し落とす
鮮やか過ぎる色は、主張が強く、うまく使いこなすのが難しい。
少しだけ彩度を落としてあげることで、他の色と仲良くしやすくなり、
使いこなしの難易度が下がる。
$main-color: desaturate(#25b89a, 10%);
彩度を落とす 10%

View Slide

48
Zurui Design
6
ズルい角丸

View Slide

49
角丸にするだけで、
なんかオシャレ
！ズルい
！
けど、これも使いこなすのに少しコツが…
Zurui Design 6 ズルい角丸

View Slide

50
角丸、大きすぎないのがおすすめ
原則 6px 以内が使いやすい
1 つの section を囲むような通常サイズ
の BOX であれば、
border-radius:
5px 〜 6px
ぐらいが、最も無難でキレイです。

View Slide

51
border-radius:
4px
border-radius:
2 〜 3px
Submit ボタン等のボタンは
小さなアイコン等のコーナー

View Slide

52
R 半径が大きい角丸は、
野暮ったいデザインになりやすいので、
あまり使わない方がよいです。
（びしっと決まるととてもカッコイイ
けど、上級テク。
）
むずかしい
！

View Slide

53

View Slide

54
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);
}
ズルい
！

View Slide

55
Zurui Design
7
ズルい box-shadow
改訂版
semi-flat version
前回スライドより、より控えめな感じに mixin シャドウ濃度を微調整

View Slide

56
×
×色が濃すぎる
×ボケ足が長すぎる
×色つき
これは NG! な box-shadow
むずかしい
！
やり方によってはダメじゃないんですが、これも使いこなすのが難しい上級テク
box-shadow はできるだけ繊細に使用した方が見栄えが良い。
Zurui Design 7 ズルい box-shadow

View Slide

57
ズルい box-shadow ① 枠線がわりに
・セクションの囲み、ボックス罫線の代わりに利用するのがおすすめ
・borderよりも繊細で柔らかな表現になる

View Slide

58
・シャドウには角度を付けない四方で、薄い alpha0.15 のシャドウ
・ぼかしは 2px で、線よりも少しふわっとした表現に
・box と背景がともに白に近い色の時に利用しやすいです
.box {
@include box-shadow(rgba(0, 0, 0, .15) 0 0 2px);
}

View Slide

59
→ mixin で汎用化
使う時はこんな感じで
（透明度 0.3 のシャドウをつける）
@mixin zurui-box($shadow: 0.15) {
@include box-shadow(rgba(0, 0, 0, $shadow) 0 0 2px);
}
@include zurui-box(.3);

View Slide

60
ズルい box-shadow ② 内側にぼかして高級感
・内側にむかってぼけ足を長く、薄いシャドウを入れることで、少し高級感、
　リアルな存在感が出る。
・ズルい背景パターンとの併用オススメ
・リボン、ボタン等、
「モノ感」を出したい場合に有効

View Slide

61
.ribbon {
@include box-shadow(rgba(0, 0, 0, .2) 0 0 0 20px inset);
}

View Slide

62
@mixin rich-box($shadow: .2){
@include box-shadow(rgba(0, 0, 0, $shadow) 0 0 0 20px
inset);
}
（透明度 0.1のシャドウをつける）
@include rich-box(.1);

View Slide

63
ズルい box-shadow ③ 凹み BOX
（deboss）
・浅い凹みのある box 表現
・フォームのテキストエリアなど、入力を促したい場所に利用すると効果的

View Slide

64
（deboss）
・光源の方向に影、光源とは逆方向にハイライト
・右上・内側に影：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);
}

View Slide

65
（deboss）
@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);

View Slide

66
ズルい box-shadow ④ 凸 BOX
（emboss）
・ボタン等のクリックやタップを促す箇所に使うと効果的
・シャドウやハイライトを控えめにすれば、フラットな UI の中でもマッチ

View Slide

67
（emboss）
.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 の線（薄い線を入れることによって、
輪郭が締まります）

View Slide

68
（emboss）
@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とシャドウ、
ハイライトの透明度は
背景色によって調節したいので
引数に

View Slide

69
Zurui Design
8
ズルいボタン
改訂版
semi-flat version
前回スライドより、数点改良しました。

View Slide

70
ここまでで出てきたズルい技を使って
ボタンを作ってみる。
Zurui Design 8 ズルいボタン

View Slide

71
前回から数点改良し、より汎用的に便利になりました。
・文字サイズの変更、またそれに併せてボタンサイズの変更に対応
・i タグを使ったアイコン用の Webフォントに対応
・今回は font-awesome を使って解説しています
・フラットデザインの流行にに合わせ、立体感やグラデーションをより
控えめに、かつ padding を大きめに取ったボタンスタイル
・input type="submit" や button タグにも対応
・色の変更もさらに簡単に。文字色の変更にも対応

View Slide

72
@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

View Slide

73
上下 padding が文字の大きさの 1 倍
padding が大きめのボタンが今時
フォントサイズに合わせて padding サイズが変わるようにした
左右 padding が文字の大きさの 2 倍
padding: 0 ($font-size * 2);
height: $font-size * 3;
line-height: $font-size * 3;

View Slide

74
リンクタグで使いたい時
submit ボタンで使いたい時
ボタンタグで使いたい時
.button{
a {
@include button;
}
input[type="submit"] {
@include button;
}
button {
@include button;
}
mixin にしておくことで、
色んなマークアップで
同じスタイルが使えるように

View Slide

75
大きいボタン小さいボタン
.button-large {
a {
@include button($font-size: 24px);
}
}
.button-small {
a {
@include button($font-size: 12px);
}
}
引数の＄font-size 指定を変えることで、文字とボタンの大きさが変更できます。
ボタンの大きさを変えてみよう

View Slide

76
赤いボタン黒いボタン
.button-red {
a {
@include button($color: #ef662f);
}
}
.button-black {
a {
@include button($color: #444);
}
}
引数の＄color 指定を変えることで、ボタンの色が変更できます。
ボタンの色を変えてみよう

View Slide

77
白いボタン
.button-white {
a {
@include button($color: #f6f6f6, $text-color: #444)
@include ts-fff(0)
@include ts-000(.1)
@inlude emboss-box(.05, .05, 1)
}
引数の＄text-color を変えることで、文字色の変更もできます
白いボタンは、ベースの色が薄く、
テキスト色が黒いので、少しシャドウやハイライトを
調整しています。
ボタンの色を変えてみよう

View Slide

78
Font-Awesome とは？
Webフォントアイコンをボタンにつけてみよう
数百種類ものアイコンが Webフォントで提供されているサービスです。頻繁にバージョンアップがあり、そのたびに
アイコンの種類が増えます。MIT ライセンスによって提供されています。
Font-Awesome をボタンに入れてみる

View Slide

79
　font-awesome は HTMLで i タグの class にアイコンの名前を付けて使用します。
リンクのボタンにアイコンを利用するには、このような HTML に
こんなアイコンのついたボタンになります。

ズルいボタン

View Slide

80
@mixin button($color: #48....) {
・
・
i {
font-size: 130%; // テキストより 130% 大きく
margin-right: 5px; // 右マージンあける
color: rgba($text-color, .5); // 半透明に
}
・
・
}
アイコン、そのまま置くと、
あまりカッコ良くないので
mixin 中で i タグに調整を加えた。

View Slide

81
Zurui Design
9
ズルいフキダシ
NEW

View Slide

82
Zurui Design 9 ズルいフキダシ
よくあるアレ
よくあるアレ
…を、mixin で汎用化して、
色・位置・三角形の大きさを都度、調節出来るようにしたい。
うん、しよう。
この三角形の部分

View Slide

83
@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;)
$top
$size
左方向のフキダシの mixin

View Slide

84
@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;
}
}
左方向のフキダシの mixin + border 付き
$border
線の太さ
$border-color
線の色

View Slide

85
@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-left: $size2 solid $border-color;
top: $top - $border;
right: -1 * $size2 * 2;
}
}
右方向のフキダシ右方向のフキダシ + border
あとで見といてください

View Slide

86
@mixin balloon-top($size: 6px, $color: #FFF,
$left: 6px){
position: relative;
&:after{
position: absolute;
content: "";
display: block;
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;
@include balloon-top($size, $color, $left);
&:before{
position: absolute;
content: "";
display: block;
border-bottom: $size2 solid $border-color;
top: -1 * $size2 * 2;
left: $left - $border;
}
}
上方向のフキダシ上方向のフキダシ + border

View Slide

87
@mixin balloon-bottom($size: 6px, $color: #FFF,
$left: 6px){
position: relative;
&:after{
position: absolute;
content: "";
display: block;
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);
&:before {
position: absolute;
content: "";
display: block;
border-top: $size2 solid $border-color;
bottom: -1 * $size2 * 2;
left: $left - $border;
}
}
下方向のフキダシ下方向のフキダシ + border

View Slide

88
Zurui Design
10
ズルい数字
NEW

View Slide

89
ポイントになる英数字を大きく見せてメリハリを出す
Zurui Design 10 ズルい数字

View Slide

90
数字専用のフォントを mixin 化しておく
DIN Medium http://fontzone.net/font-details/din-medium
@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;
}

View Slide

91
数字を span.num でマークアップ
数字を span.num でマークアップ

¥2,610

.num{
@include num-font;
font-size: 200%;
}

View Slide

92
Zurui Design
11
ズルいフラッ
トデザイン
NEW

View Slide

93
Zurui Design 10 ズルいフラットデザイン
フラットデザインがうまくいく法則
フラットデザインはごまかしがきかない分、
うまく成り立たせるために制約とパターンがある。
うまくいくパターンを、既存のフラットデザインから読み取ってみる。
・寂しくならない
・手抜きに見えない
・使いやすさを担保

View Slide

94
法則 1 色ベタ面が表示画面の半分以上を占める
かつ、色ベタ面の幅は画面の端まで 100% 幅である
同系色で背景にうっすらイラスト描いてるのもよくある

View Slide

95
法則 2 写真が表示画面の半分以上を占める
かつ、写真の幅は画面の端まで 100% 幅である
法則 1 の色ベタ面の代わりに写真を利用している
ぼかすのもよくある上に色乗せて文字読みやすくするのもよくある

View Slide

96
法則 3 メインカラー + ごく一部にアクセントカラー
メインカラーは画面の半分以上を占める : アクセントカラーは 5% 未満
※色選びのポイントは、
「ズルい配色」参照
白抜き文字 / 黒文字いずれも載せられるような色がメインカラーに使いやすい
一番重要なボタン等に大体アクセントカラーが使われている

View Slide

97
法則 4 アイボリー / ベージュ背景 + カラフル
上に乗せるカラフルな色も、背景色に合わせて、少し彩度を落としている。
※彩度の落とし方：
「ズルい配色」参照 (desaturate)

View Slide

98
法則 5 大きい文字と小さい文字の差が大きい
大きい文字は大きく、小さい文字は小さく、ジャンプ率が高くメリハリがある

View Slide

99
これら、フラットデザインの法則
今風のデザインテイスト &
使いやすくコンテンツが馴染む UI
セミフラットデザイン
ズルいデザイン
＋
↓

View Slide

100
Thank you
もうちょっとだけ、続くんじゃ ≧ [ ﾟ∀ﾟ] ≦

View Slide

ズルいデザインテクニック2013 + セミフラット version - in 福井

ズルいデザインテクニック2013 + セミフラット version - in 福井

ken_c_lo / TAEKO AKATSUKA

More Decks by ken_c_lo / TAEKO AKATSUKA

Other Decks in Design

Featured

Transcript