Slide 1

Slide 1 text

少ない手間と知識で “それなり” に見せる、 ズルいデザイン テクニック 2013 Semi-Flat version + in Programmer meets Design in Osaka #dmp @ken_c_lo TAEKO AKATSUKA

Slide 2

Slide 2 text

2 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Hello Osaka. Photo by http://www.flickr.com/photos/72782973@N00/4670383270/ 好き やねん 大阪 !

Slide 3

Slide 3 text

3 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Hello Osaka. Photo by http://www.flickr.com/photos/72782973@N00/4670383270/ 多分 7 年ぶりくらいに大阪来ました。来れてうれしい! 今回で 2 回目だけど、もしかしたら東京よりも好きかも。 電車の中とか、みんなしゃべってていいよね。 知らない人が話しかけてくることも、東京よりも多い感じ。 なんか好きなんですよ、大阪。

Slide 4

Slide 4 text

4 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Thank you @kamiyam Photo by http://www.flickr.com/photos/72782973@N00/4670383270/ かみやん、実は今まで会ったことなかったんですが、 Twitter で仲良くしてもらって、今回呼んでいただいて大阪の発表が実現しました。 他にも、Twitter で知っててずっとお会いしたいと思ってた方々が 今日、何人か来てくださってて、お会いできたのすごくうれしいです ! ありがとう ! かみやん、呼んでくれてありがとう !

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 We are #P4D facebook グループ (自由に参加できます) facebook https://www.facebook.com/groups/151208708350141/ ・デザイナーがプログラマにプログラミングを教わったり(Git や Rails など) ・ プログラマがデザイナーに作ってるサイトのデザインのダメ出しをされたり ・ 月 2 回開催・ 終わったあとはだいたい飲んでいる ・ たまにデザイナーとプログラマが組んでハッカソンや、温泉合宿など ・毎回、Git や Rails の環境を作ってる人がいる ・ 主催の海老沢さん(@satococoa )がやたらと女子を呼びたがる デザイナー向けプログラム部 in 東京

Slide 8

Slide 8 text

4 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 今回の内容 Pure、やめました ! ごめんなさい ! めんどく …諸事情あり、途中でやめました。すみません… そのかわり、もっとピュアな意味でのデザインの話します Pure とは? Twitter Bootstrap みたいな感じの、よりシンプル・軽量な CSS フレームワーク (YUI 製) http://purecss.io/ これに、ズルいデザイン組み込めるようにしたら、便利そうじゃーん…とか思ったのだが…

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

6 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ということで、あの出回ってるスライドと大体同じですが… https://speakerdeck.com/ken_c_lo/zurui-design

Slide 11

Slide 11 text

7 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version フラッ トデザインの流行に合わせて ズルいデザイン、オワコンと言われないように、 今回大幅に改訂 + 追加を加えました !

Slide 12

Slide 12 text

8 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 「フラッ トデザインは難しい」 問題 ・ボタン等、アフォーダンスの必要性 (え?押せるの?) ・コンテンツ部分とフレーム部分、メリハリを付けるのが困難 ・寂しくなりがち、手抜きに見えがち問題 プロでも、うまくやるのは難しい… でも、フラットデザインの醸すモダンな雰囲気は取り入れたい どうすれば?

Slide 13

Slide 13 text

9 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 「セミフラッ トデザイン」 の提唱 フラットっぽく見えながら適度なメリハリとアフォーダンスを ・控えめなグラデーション・テクスチャ ・ 控えめな立体感 ・さりげないリッチ感 今風の見た目、しかもわかりやすい UI を保つにはどうしたらいいの? こんな感じのやつを、 「セミフラットデザイン」 と呼びたい (勝手に)

Slide 14

Slide 14 text

10 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 全体的にフラットデザインぽい雰囲気にしつつ、 控えめな質感や立体感でメリハリをつける よく見ると、うっすらテクスチャ がついてる 押せるところには立体感をさりげ なく セミフラット:大体こんな感じの雰囲気のやつです

Slide 15

Slide 15 text

11 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Use 圧倒的に楽! DRY! ズルい ! Sass(SCSS)

Slide 16

Slide 16 text

12 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 1 ズルい線 改訂版 semi-flat version 前回スライドより、より控えめな感じに濃度を微調整

Slide 17

Slide 17 text

13 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 18

Slide 18 text

14 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルい線の断面図 背景の面 ズルい線 背景の面に彫り込まれた溝 光源と逆方向の面は 光が当たってハイライトに 光源と同方向の面は 影になる 光源 Zurui Design 1 ズルい線

Slide 19

Slide 19 text

15 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ここがポイント ・色は、黒 (rgba(0, 0, 0, x))、 白 (rgba (255,255,255,x)) のみで、 ・背景色にあわせて透明度を調節する ・太さは 1px ・ぼかしは 0 ・濃過ぎないように。 Zurui Design 1 ズルい線

Slide 20

Slide 20 text

16 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 21

Slide 21 text

17 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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); 背景色 #B0430B 白: 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 22

Slide 22 text

18 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 23

Slide 23 text

19 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 2 ズルい text-shadow 改訂版 semi-flat version 前回スライドより、より控えめな感じに濃度を微調整

Slide 24

Slide 24 text

20 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 25

Slide 25 text

21 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 26

Slide 26 text

22 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ここがポイント ・色は、黒、白のみで、 ・背景色にあわせて透明度を調節する ・濃い背景 + 白抜き文字 の場合 黒い影 光源と逆方向↗ ・薄い背景 + 濃い色文字 の場合 白い影 光源と同方向↙ ・太さは 1px ・ぼかしは 0 ・濃過ぎないように。辛うじて見えるかなく らいがちょうどいい。 Zurui Design 2 ズルい text-shadow

Slide 27

Slide 27 text

23 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 28

Slide 28 text

24 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 3 ズルい背景 改訂版 semi-flat version セミフラットデザイン向けのオススメ背景パターンを追加

Slide 29

Slide 29 text

25 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version これらをうまく使うだけでパッと見 2 割増く らいのクオリティ ! ノイズ 木目 紙 布 細かいドット ズルい背景パターン達 ズルい ! 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 × 使いづらい背景パターンの特徴 ×大柄のパターン ×彩度が強いもの (色が鮮やかなもの) ×地の色と模様の明度差が大きいもの (模様がよく見えるもの) 強い柄、強い色のものは、中の要素とぶつかってしまうため、うまく使わないと素人っぽくなりやすい。 ズルくない Zurui Design 3 ズルい背景

Slide 32

Slide 32 text

28 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルい背景パターンを取り揃えた有名サイト http://subtlepatterns.com/ Zurui Design 3 ズルい背景

Slide 33

Slide 33 text

29 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version http://bradjasper.com/subtle-patterns-bookmarklet/ ブックマークレッ トもある わかりやすい解説 -> http://review4.cc/archives/2356/ 見ているサイトの背景を簡単に SubtlePatterns の背景に変えられたりして便利 Zurui Design 3 ズルい背景

Slide 34

Slide 34 text

30 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version もう一つついでに… ズルいグレーとは。 Zurui Design 3 ズルい背景

Slide 35

Slide 35 text

31 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルいグレーとは 限りなく白に近いグレー (#EEE 以下 ) #EEE #F6F6F6 ・殆ど白に見える明るいグレー → 白の代わりに使える。 ・これらに、ズルい線やズルいテキストシャドウを乗せると… ・ほのかに立体感が出て、一気に高級感が出る。 ・本当の白 (#FFF)と並べて使うと微妙な色の違いがオシャレ #FFF Zurui Design 3 ズルい背景

Slide 36

Slide 36 text

32 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version セミフラッ トにオススメの背景パターン 6 選 from subtlepatterns 控えめなテクスチャがオススメです。 Zurui Design 3 ズルい背景 http://subtlepatterns.com/cardboard-flat/ 色を上に乗せて使ってもよい。 (色は Photoshop とかで乗せてください。乗算が良い)

Slide 37

Slide 37 text

33 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 3 ズルい背景 http://subtlepatterns.com/retina-dust/ http://subtlepatterns.com/gray-lines/ http://subtlepatterns.com/brilliant/

Slide 38

Slide 38 text

34 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 3 ズルい背景 http://subtlepatterns.com/worn-dots/ http://subtlepatterns.com/blizzard/ http://subtlepatterns.com/paper/

Slide 39

Slide 39 text

35 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 4 ズルいグラデーション 改訂版 semi-flat version 前回スライドより、より控えめな感じに mixin の濃度差を微調整

Slide 40

Slide 40 text

36 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version #434343 #2d9fee #48b1f2 #222222 微妙な明度差のグラデーション ベタ塗りの一歩手前く らいの、微妙な色の差のグラデーションで 本物っぽい質感が出る カラーコードで 1 桁目の差が 2 く らいがいいみたい Zurui Design 4 ズルいグラデーション

Slide 41

Slide 41 text

37 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 色の差が大きなグラデーションは、 実際使ってみると野暮いデザインになりがち・・・ (びしっと決まるとカッコイイけど、大胆な上級テク。 ) 大胆なグラデーションの使いこなしは結構難しい。 だめじゃないけど むずかしい ! Zurui Design 4 ズルいグラデーション

Slide 42

Slide 42 text

38 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version グラデーションの CSS を楽につくれるズルいサイト http://www.colorzilla.com/gradient-editor/ Zurui Design 4 ズルいグラデーション

Slide 43

Slide 43 text

39 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Sass(SCSS) にも切り替え可能 Zurui Design 4 ズルいグラデーション

Slide 44

Slide 44 text

40 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version で、作ってもいいんだけど…  さらに mixin 化できそう。 Zurui Design 4 ズルいグラデーション

Slide 45

Slide 45 text

41 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 46

Slide 46 text

42 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 47

Slide 47 text

43 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 5 ズルい配色 NEW 今回から新規に追加しました

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

45 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 50

Slide 50 text

46 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 51

Slide 51 text

47 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version フラッ トデザインぽい配色 Flat UI colors から選ぶと便利 http://flatuicolors.com/ Zurui Design 5 ズルい配色

Slide 52

Slide 52 text

48 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version でも、そのままだと鮮やかすぎて使いこなしが難しい → Sass の deaturate を使って彩度を少し落とす 鮮やか過ぎる色は、主張が強く、うまく使いこなすのが難しい。 少しだけ彩度を落としてあげることで、他の色と仲良くしやすくなり、 使いこなしの難易度が下がる。 Zurui Design 5 ズルい配色 $main-color: desaturate(#25b89a, 10%); 彩度を落とす 10%

Slide 53

Slide 53 text

49 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 6 ズルい角丸

Slide 54

Slide 54 text

50 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 角丸にするだけで、 なんかオシャレ ! ズルい ! けど、これも使いこなすのに少しコツが… Zurui Design 6 ズルい角丸

Slide 55

Slide 55 text

51 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 角丸、大きすぎないのがおすすめ 原則 6px 以内が使いやすい 1 つの section を囲むような通常サイズ の BOX であれば、 border-radius: 5px 〜 6px ぐらいが、最も無難でキレイです。 Zurui Design 6 ズルい角丸

Slide 56

Slide 56 text

52 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version border-radius: 4px border-radius: 2 〜 3px Submit ボタン等のボタンは 小さなアイコン等のコーナー Zurui Design 6 ズルい角丸

Slide 57

Slide 57 text

53 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version R 半径が大きい角丸は、 野暮ったいデザインになりやすいので、 あまり使わない方がよいです。 (びしっと決まるととてもカッコイイ けど、上級テク。 ) だめじゃないけど むずかしい ! Zurui Design 6 ズルい角丸

Slide 58

Slide 58 text

54 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 5 ズルい角丸

Slide 59

Slide 59 text

55 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 60

Slide 60 text

56 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 7 ズルい box-shadow 改訂版 semi-flat version 前回スライドより、より控えめな感じに mixin シャドウ濃度を微調整

Slide 61

Slide 61 text

57 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version × ×色が濃すぎる ×ボケ足が長すぎる ×色つき これは NG! な box-shadow だめじゃないけど むずかしい ! やり方によってはダメじゃないんですが、これも使いこなすのが難しい上級テク box-shadow はできるだけ繊細に使用した方が見栄えが良い。 Zurui Design 7 ズルい box-shadow

Slide 62

Slide 62 text

58 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルい box-shadow ① 枠線がわりに Zurui Design 7 ズルい box-shadow ・セクションの囲み、ボックス罫線の代わりに利用するのがおすすめ ・borderよりも繊細で柔らかな表現になる

Slide 63

Slide 63 text

59 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ・シャドウには角度を付けない四方で、薄い alpha0.15 のシャドウ ・ぼかしは 2px で、線よりも少しふわっとした表現に ・box と背景がともに白に近い色の時に利用しやすいです ズルい box-shadow ① 枠線がわりに .box { @include box-shadow(rgba(0, 0, 0, .15) 0 0 2px); }

Slide 64

Slide 64 text

60 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 65

Slide 65 text

61 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルい box-shadow ② 内側にぼかして高級感 ・内側にむかってぼけ足を長く、薄いシャドウを入れることで、少し高級感、  リアルな存在感が出る。 ・ズルい背景パターンとの併用オススメ ・リボン、ボタン等、 「モノ感」を出したい場合に有効 Zurui Design 7 ズルい box-shadow

Slide 66

Slide 66 text

62 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 67

Slide 67 text

63 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 68

Slide 68 text

64 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルい box-shadow ③ 凹み BOX (deboss) Zurui Design 7 ズルい box-shadow ・浅い凹みのある box 表現 ・フォームのテキストエリアなど、入力を促したい場所に利用すると効果的

Slide 69

Slide 69 text

65 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 70

Slide 70 text

66 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 71

Slide 71 text

67 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルい box-shadow ④ 凸 BOX (emboss) Zurui Design 7 ズルい box-shadow ・ボタン等のクリックやタップを促す箇所に使うと効果的 ・シャドウやハイライトを控えめにすれば、フラットな UI の中でもマッチ

Slide 72

Slide 72 text

68 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 73

Slide 73 text

69 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 74

Slide 74 text

70 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 8 ズルいボタン 改訂版 semi-flat version 前回スライドより、数点改良しました。

Slide 75

Slide 75 text

71 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ここまでで出てきたズルい技を使って ボタンを作ってみる。 Zurui Design 8 ズルいボタン

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

73 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 にする。 →クソ長い ! 1つひとつのコード説明、割愛。 詳細は @IT の連載に書きました。 http://www.atmarkit.co.jp/ait/ articles/1309/12/news001.html Zurui Design 8 ズルいボタン

Slide 78

Slide 78 text

74 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 79

Slide 79 text

75 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version リンクタグで使いたい時 submit ボタンで使いたい時 ボタンタグで使いたい時 .button{ a { @include button; } input[type="submit"] { @include button; } button { @include button; } Zurui Design 8 ズルいボタン mixin にしておくことで、 色んなマークアップで 同じスタイルが使えるように

Slide 80

Slide 80 text

76 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 81

Slide 81 text

77 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 赤いボタン 黒いボタン .button-red { a { @include button($color: #ef662f); } } .button-black { a { @include button($color: #444); } } Zurui Design 8 ズルいボタン 引数の $color 指定を変えることで、ボタンの色が変更できます。 ボタンの色を変えてみよう

Slide 82

Slide 82 text

78 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 83

Slide 83 text

79 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Font-Awesome とは? Zurui Design 8 ズルいボタン Webフォントアイコンをボタンにつけてみよう 数百種類ものアイコンが Webフォントで提供されているサービスです。頻繁にバージョンアップがあり、そのたびに アイコンの種類が増えます。MIT ライセンスによって提供されています。 Font-Awesome をボタンに入れてみる

Slide 84

Slide 84 text

80 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 8 ズルいボタン  font-awesome は HTMLで i タグの class にアイコンの名前を付けて使用します。 リンクのボタンにアイコンを利用するには、このような HTML に こんなアイコンのついたボタンになります。

ズルいボタン

Slide 85

Slide 85 text

81 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 86

Slide 86 text

82 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 9 ズルいフキダシ NEW 今回から新規に追加しました

Slide 87

Slide 87 text

83 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 9 ズルいフキダシ よくあるアレ よくあるアレ …を、mixin で汎用化して、 色・位置・三角形の大きさを都度、調節出来るようにしたい。 うん、しよう。 この三角形の部分

Slide 88

Slide 88 text

84 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 89

Slide 89 text

85 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 90

Slide 90 text

86 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 91

Slide 91 text

87 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 92

Slide 92 text

88 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 93

Slide 93 text

89 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 10 ズルい数字 NEW 今回から新規に追加しました

Slide 94

Slide 94 text

90 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ポイントになる英数字を大きく見せてメリハリを出す Zurui Design 10 ズルい数字

Slide 95

Slide 95 text

91 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 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 96

Slide 96 text

92 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 数字を span.num でマークアップ 数字を span.num でマークアップ Zurui Design 10 ズルい数字

¥2,610

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

Slide 97

Slide 97 text

93 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 11 ズルいフラッ トデザイン NEW 今回から新規に追加しました

Slide 98

Slide 98 text

94 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 10 ズルいフラットデザイン フラットデザインがうまくいく 8 つの法則 フラットデザインはごまかしがきかない分、 うまく成り立たせるために制約とパターンがある。 うまくいくパターンを、既存のフラットデザインから読み取ってみる。 ・寂しくならない ・手抜きに見えない ・使いやすさを担保

Slide 99

Slide 99 text

95 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 法則 1 色ベタ面が表示画面の半分以上を占める かつ、色ベタ面の幅は画面の端まで 100% 幅である Zurui Design 10 ズルいフラットデザイン 同系色で背景にうっすらイラスト描いてるのもよくある

Slide 100

Slide 100 text

96 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 法則 2 写真が表示画面の半分以上を占める かつ、写真の幅は画面の端まで 100% 幅である 法則 1 の色ベタ面の代わりに写真を利用している Zurui Design 10 ズルいフラットデザイン ぼかすのもよくある 上に色乗せて文字読みやすくするのもよくある

Slide 101

Slide 101 text

97 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 法則 3 メインカラー + ごく一部にアクセントカラー メインカラーは 画面の半分以上を占める : アクセントカラーは 5% 未満 ※色選びのポイントは、 「ズルい配色」参照 白抜き文字 / 黒文字 いずれも載せられるような色がメインカラーに使いやすい 一番重要なボタン等に大体アクセントカラーが使われている Zurui Design 10 ズルいフラットデザイン

Slide 102

Slide 102 text

98 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 法則 4 アイボリー / ベージュ背景 + カラフル 上に乗せるカラフルな色も、背景色に合わせて、少し彩度を落としている。 ※彩度の落とし方: 「ズルい配色」参照 (desaturate) Zurui Design 10 ズルいフラットデザイン

Slide 103

Slide 103 text

99 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 法則 4 アイボリー / ベージュ背景 + カラフル 上に乗せるカラフルな色も、背景色に合わせて、少し彩度を落としている。 ※彩度の落とし方: 「ズルい配色」参照 (desaturate) Zurui Design 10 ズルいフラットデザイン

Slide 104

Slide 104 text

100 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version これら、フラットデザインの法則 今風のデザインテイスト & 使いやすくコンテンツが馴染む UI セミフラットデザイン ズルいデザイン + ↓ Zurui Design 10 ズルいフラットデザイン

Slide 105

Slide 105 text

101 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Thank you Osaka. Photo by http://www.flickr.com/photos/72782973@N00/4670383270/ あ り が と う ご ざ い ま し た