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

[大阪] プログラマー向けデザイン勉強会で発表させていただきました。
http://connpass.com/event/3086/

---
[あわせて読みたい]

KSSで作るパターンライブラリ by @machida
https://speakerdeck.com/machida/kssdezuo-rupatanraiburari

【アイコンを200こ描いた振り返り！】アイコンから知るデザインのヒントby @awayuki
http://www.slideshare.net/awayukin/awayuki-pmd01-share

ビジュアルデザインまでのデザインワーク by @yokotak0527
http://www.slideshare.net/YokotaKenji/ss-26460108

Transcript

1. 少ない手間と知識で “それなり” に見せる、 ズルいデザイン テクニック 2013 Semi-Flat version ＋ in Programmer meets Design in Osaka #dmp @ken_c_lo TAEKO AKATSUKA
2. 2 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Hello Osaka. Photo by http://www.flickr.com/photos/72782973@N00/4670383270/ 好き やねん 大阪 ！
3. 3 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Hello Osaka. Photo by http://www.flickr.com/photos/72782973@N00/4670383270/ 多分 7 年ぶりくらいに大阪来ました。来れてうれしい！ 今回で 2 回目だけど、もしかしたら東京よりも好きかも。 電車の中とか、みんなしゃべってていいよね。 知らない人が話しかけてくることも、東京よりも多い感じ。 なんか好きなんですよ、大阪。
4. 4 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Thank you @kamiyam Photo by http://www.flickr.com/photos/72782973@N00/4670383270/ かみやん、実は今まで会ったことなかったんですが、 Twitter で仲良くしてもらって、今回呼んでいただいて大阪の発表が実現しました。 他にも、Twitter で知っててずっとお会いしたいと思ってた方々が 今日、何人か来てくださってて、お会いできたのすごくうれしいです ！ ありがとう ！ かみやん、呼んでくれてありがとう ！
5. 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 を使ったチーム開発に参加 で、誰やねん？
6. 2 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version http://www.atmarkit.co.jp/ait/kw/zurui_design.html @IT で 「ズルいデザイン」連載中
7. 3 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version We are #P4D facebook グループ （自由に参加できます） facebook https://www.facebook.com/groups/151208708350141/ ・デザイナーがプログラマにプログラミングを教わったり（Git や Rails など） ・ プログラマがデザイナーに作ってるサイトのデザインのダメ出しをされたり ・ 月 2 回開催・ 終わったあとはだいたい飲んでいる ・ たまにデザイナーとプログラマが組んでハッカソンや、温泉合宿など ・毎回、Git や Rails の環境を作ってる人がいる ・ 主催の海老沢さん（@satococoa ）がやたらと女子を呼びたがる デザイナー向けプログラム部 in 東京
8. 4 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 今回の内容 Pure、やめました ！ ごめんなさい ！ めんどく …諸事情あり、途中でやめました。すみません… そのかわり、もっとピュアな意味でのデザインの話します Pure とは？ Twitter Bootstrap みたいな感じの、よりシンプル・軽量な CSS フレームワーク （YUI 製） http://purecss.io/ これに、ズルいデザイン組み込めるようにしたら、便利そうじゃーん…とか思ったのだが…
9. 5 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version デザイン初心者の技術者向け 例えば…プログラマの人がハッカソンなどで、集中して短時間でサービス開発したい時に、 少ない手間でそれらしく見せたい ！ ・ベジェ曲線 （難しい ！ めんどい ！ ） ・画像加工・合成 （とりあえずありもので・・・） ・デザインの基礎知識・理論 （難しい話は後だ！ ） …などのスキル、知識がなくても、とりあえずこれやっとくと簡単にデザインがちょっ と良く見える感じの小ズルい Tips を紹介します。 今回の内容
10. 6 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ということで、あの出回ってるスライドと大体同じですが… https://speakerdeck.com/ken_c_lo/zurui-design
11. 7 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version フラッ トデザインの流行に合わせて ズルいデザイン、オワコンと言われないように、 今回大幅に改訂 + 追加を加えました ！
12. 8 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 「フラッ トデザインは難しい」 問題 ・ボタン等、アフォーダンスの必要性 （え？押せるの？） ・コンテンツ部分とフレーム部分、メリハリを付けるのが困難 ・寂しくなりがち、手抜きに見えがち問題 プロでも、うまくやるのは難しい… でも、フラットデザインの醸すモダンな雰囲気は取り入れたい どうすれば？
13. 9 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 「セミフラッ トデザイン」 の提唱 フラットっぽく見えながら適度なメリハリとアフォーダンスを ・控えめなグラデーション・テクスチャ ・ 控えめな立体感 ・さりげないリッチ感 今風の見た目、しかもわかりやすい UI を保つにはどうしたらいいの？ こんな感じのやつを、 「セミフラットデザイン」 と呼びたい （勝手に）
14. 10 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 全体的にフラットデザインぽい雰囲気にしつつ、 控えめな質感や立体感でメリハリをつける よく見ると、うっすらテクスチャ がついてる 押せるところには立体感をさりげ なく セミフラット：大体こんな感じの雰囲気のやつです
15. 11 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Use 圧倒的に楽！ DRY! ズルい ！ Sass(SCSS)
16. 12 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 1 ズルい線 改訂版 semi-flat version 前回スライドより、より控えめな感じに濃度を微調整
17. 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 を利用→
18. 14 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルい線の断面図 背景の面 ズルい線 背景の面に彫り込まれた溝 光源と逆方向の面は 光が当たってハイライトに 光源と同方向の面は 影になる 光源 Zurui Design 1 ズルい線
19. 15 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ここがポイント ・色は、黒 （rgba(0, 0, 0, x))、 白 (rgba （255,255,255,x)) のみで、 ・背景色にあわせて透明度を調節する ・太さは 1px ・ぼかしは 0 ・濃過ぎないように。 Zurui Design 1 ズルい線
20. 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 ズルい線
21. 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 ズルい線
22. 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 ズルい線
23. 19 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 2 ズルい text-shadow 改訂版 semi-flat version 前回スライドより、より控えめな感じに濃度を微調整
24. 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
25. 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
26. 22 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ここがポイント ・色は、黒、白のみで、 ・背景色にあわせて透明度を調節する ・濃い背景 + 白抜き文字 の場合 黒い影 光源と逆方向↗ ・薄い背景 + 濃い色文字 の場合 白い影　光源と同方向↙ ・太さは 1px ・ぼかしは 0 ・濃過ぎないように。辛うじて見えるかなく らいがちょうどいい。 Zurui Design 2 ズルい text-shadow
27. 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
28. 24 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 3 ズルい背景 改訂版 semi-flat version セミフラットデザイン向けのオススメ背景パターンを追加
29. 25 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version これらをうまく使うだけでパッと見 2 割増く らいのクオリティ ！ ノイズ 木目 紙 布 細かいドット ズルい背景パターン達 ズルい ！ Zurui Design 3 ズルい背景
30. 26 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ◯ 使いやすい背景パターンの特徴 ・白に近い色がベースのもの （薄いグレー・アイボリー等） ・黒に近い色ベースのもの （グレー・濃紺等） ・パターンが細かいもの ・ナチュラル素材 Zurui Design 3 ズルい背景
31. 27 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version × 使いづらい背景パターンの特徴 ×大柄のパターン ×彩度が強いもの （色が鮮やかなもの） ×地の色と模様の明度差が大きいもの （模様がよく見えるもの） 強い柄、強い色のものは、中の要素とぶつかってしまうため、うまく使わないと素人っぽくなりやすい。 ズルくない Zurui Design 3 ズルい背景
32. 28 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルい背景パターンを取り揃えた有名サイト http://subtlepatterns.com/ Zurui Design 3 ズルい背景
33. 29 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version http://bradjasper.com/subtle-patterns-bookmarklet/ ブックマークレッ トもある わかりやすい解説 -> http://review4.cc/archives/2356/ 見ているサイトの背景を簡単に SubtlePatterns の背景に変えられたりして便利 Zurui Design 3 ズルい背景
34. 30 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version もう一つついでに… ズルいグレーとは。 Zurui Design 3 ズルい背景
35. 31 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルいグレーとは 限りなく白に近いグレー (#EEE 以下 ) #EEE #F6F6F6 ・殆ど白に見える明るいグレー → 白の代わりに使える。 ・これらに、ズルい線やズルいテキストシャドウを乗せると… ・ほのかに立体感が出て、一気に高級感が出る。 ・本当の白 （#FFF）と並べて使うと微妙な色の違いがオシャレ #FFF Zurui Design 3 ズルい背景
36. 32 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version セミフラッ トにオススメの背景パターン 6 選 from subtlepatterns 控えめなテクスチャがオススメです。 Zurui Design 3 ズルい背景 http://subtlepatterns.com/cardboard-flat/ 色を上に乗せて使ってもよい。 （色は Photoshop とかで乗せてください。乗算が良い）
37. 33 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 3 ズルい背景 http://subtlepatterns.com/retina-dust/ http://subtlepatterns.com/gray-lines/ http://subtlepatterns.com/brilliant/
38. 34 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 3 ズルい背景 http://subtlepatterns.com/worn-dots/ http://subtlepatterns.com/blizzard/ http://subtlepatterns.com/paper/
39. 35 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 4 ズルいグラデーション 改訂版 semi-flat version 前回スライドより、より控えめな感じに mixin の濃度差を微調整
40. 36 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version #434343 #2d9fee #48b1f2 #222222 微妙な明度差のグラデーション ベタ塗りの一歩手前く らいの、微妙な色の差のグラデーションで 本物っぽい質感が出る カラーコードで 1 桁目の差が 2 く らいがいいみたい Zurui Design 4 ズルいグラデーション
41. 37 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 色の差が大きなグラデーションは、 実際使ってみると野暮いデザインになりがち・・・ （びしっと決まるとカッコイイけど、大胆な上級テク。 ） 大胆なグラデーションの使いこなしは結構難しい。 だめじゃないけど むずかしい ！ Zurui Design 4 ズルいグラデーション
42. 38 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version グラデーションの CSS を楽につくれるズルいサイト http://www.colorzilla.com/gradient-editor/ Zurui Design 4 ズルいグラデーション
43. 39 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Sass(SCSS) にも切り替え可能 Zurui Design 4 ズルいグラデーション
44. 40 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version で、作ってもいいんだけど… 　さらに mixin 化できそう。 Zurui Design 4 ズルいグラデーション
45. 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 ズルいグラデーション
46. 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 ズルいグラデーション
47. 43 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 5 ズルい配色 NEW 今回から新規に追加しました
48. 44 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 5 ズルい配色 キーになる色は Sass で変数にして一括管理しよう メインカラー アクセントカラー ベースカラー テキストカラー 重要なボタンなど （目立つ色） 少ない面積に使用すると効果的 （全体の面積の 5% く らい） 背景色。 白か黒に近い色が一般的で使いやすい。 薄いグレーやアイボリー等もよい サイトのイメージを表す色 （あの赤いサイトだよねー） ヘッダやロゴ色、リンク、見出しの色等、 全体の 10 〜 20% 程度の面積で 利用すると効果的
49. 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 で変数にして一括管理しよう もとの変数の色を変えれば、各要素の色を変えなくても一気に色が変えられる
50. 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% 程度の面積で 利用すると効果的
51. 47 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version フラッ トデザインぽい配色 Flat UI colors から選ぶと便利 http://flatuicolors.com/ Zurui Design 5 ズルい配色
52. 48 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version でも、そのままだと鮮やかすぎて使いこなしが難しい → Sass の deaturate を使って彩度を少し落とす 鮮やか過ぎる色は、主張が強く、うまく使いこなすのが難しい。 少しだけ彩度を落としてあげることで、他の色と仲良くしやすくなり、 使いこなしの難易度が下がる。 Zurui Design 5 ズルい配色 $main-color: desaturate(#25b89a, 10%); 彩度を落とす 10%
53. 49 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 6 ズルい角丸
54. 50 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 角丸にするだけで、 なんかオシャレ ！ ズルい ！ けど、これも使いこなすのに少しコツが… Zurui Design 6 ズルい角丸
55. 51 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 角丸、大きすぎないのがおすすめ 原則 6px 以内が使いやすい 1 つの section を囲むような通常サイズ の BOX であれば、 border-radius: 5px 〜 6px ぐらいが、最も無難でキレイです。 Zurui Design 6 ズルい角丸
56. 52 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version border-radius: 4px border-radius: 2 〜 3px Submit ボタン等のボタンは 小さなアイコン等のコーナー Zurui Design 6 ズルい角丸
57. 53 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version R 半径が大きい角丸は、 野暮ったいデザインになりやすいので、 あまり使わない方がよいです。 （びしっと決まるととてもカッコイイ けど、上級テク。 ） だめじゃないけど むずかしい ！ Zurui Design 6 ズルい角丸
58. 54 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 5 ズルい角丸
59. 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 ズルい角丸
60. 56 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 7 ズルい box-shadow 改訂版 semi-flat version 前回スライドより、より控えめな感じに mixin シャドウ濃度を微調整
61. 57 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version × ×色が濃すぎる ×ボケ足が長すぎる ×色つき これは NG! な box-shadow だめじゃないけど むずかしい ！ やり方によってはダメじゃないんですが、これも使いこなすのが難しい上級テク box-shadow はできるだけ繊細に使用した方が見栄えが良い。 Zurui Design 7 ズルい box-shadow
62. 58 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルい box-shadow ① 枠線がわりに Zurui Design 7 ズルい box-shadow ・セクションの囲み、ボックス罫線の代わりに利用するのがおすすめ ・borderよりも繊細で柔らかな表現になる
63. 59 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ・シャドウには角度を付けない四方で、薄い alpha0.15 のシャドウ ・ぼかしは 2px で、線よりも少しふわっとした表現に ・box と背景がともに白に近い色の時に利用しやすいです ズルい box-shadow ① 枠線がわりに .box { @include box-shadow(rgba(0, 0, 0, .15) 0 0 2px); }
64. 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);
65. 61 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルい box-shadow ② 内側にぼかして高級感 ・内側にむかってぼけ足を長く、薄いシャドウを入れることで、少し高級感、 　リアルな存在感が出る。 ・ズルい背景パターンとの併用オススメ ・リボン、ボタン等、 「モノ感」を出したい場合に有効 Zurui Design 7 ズルい box-shadow
66. 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); }
67. 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);
68. 64 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルい box-shadow ③ 凹み BOX （deboss） Zurui Design 7 ズルい box-shadow ・浅い凹みのある box 表現 ・フォームのテキストエリアなど、入力を促したい場所に利用すると効果的
69. 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); }
70. 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);
71. 67 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルい box-shadow ④ 凸 BOX （emboss） Zurui Design 7 ズルい box-shadow ・ボタン等のクリックやタップを促す箇所に使うと効果的 ・シャドウやハイライトを控えめにすれば、フラットな UI の中でもマッチ
72. 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 の線 （薄い線を入れることによって、 輪郭が締まります）
73. 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とシャドウ、 ハイライトの透明度は 背景色によって調節したいので 引数に
74. 70 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 8 ズルいボタン 改訂版 semi-flat version 前回スライドより、数点改良しました。
75. 71 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ここまでで出てきたズルい技を使って ボタンを作ってみる。 Zurui Design 8 ズルいボタン
76. 72 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 前回から数点改良し、より汎用的に便利になりました。 ・文字サイズの変更、またそれに併せてボタンサイズの変更に対応 ・i タグを使ったアイコン用の Webフォントに対応 ・今回は font-awesome を使って解説しています ・フラットデザインの流行にに合わせ、立体感やグラデーションをより 控えめに、かつ padding を大きめに取ったボタンスタイル ・input type="submit" や button タグにも対応 ・色の変更もさらに簡単に。文字色の変更にも対応 Zurui Design 8 ズルいボタン
77. 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 にする。 →クソ長い ！ １つひとつのコード説明、割愛。 詳細は @IT の連載に書きました。 http://www.atmarkit.co.jp/ait/ articles/1309/12/news001.html Zurui Design 8 ズルいボタン
78. 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 ズルいボタン
79. 75 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version リンクタグで使いたい時 submit ボタンで使いたい時 ボタンタグで使いたい時 .button{ a { @include button; } input[type="submit"] { @include button; } button { @include button; } Zurui Design 8 ズルいボタン mixin にしておくことで、 色んなマークアップで 同じスタイルが使えるように
80. 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 指定を変えることで、文字とボタンの大きさが変更できます。 ボタンの大きさを変えてみよう
81. 77 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 赤いボタン 黒いボタン .button-red { a { @include button($color: #ef662f); } } .button-black { a { @include button($color: #444); } } Zurui Design 8 ズルいボタン 引数の ＄color 指定を変えることで、ボタンの色が変更できます。 ボタンの色を変えてみよう
82. 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 を変えることで、文字色の変更もできます 白いボタンは、ベースの色が薄く、 テキスト色が黒いので、少しシャドウやハイライトを 調整しています。 ボタンの色を変えてみよう
83. 79 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Font-Awesome とは？ Zurui Design 8 ズルいボタン Webフォントアイコンをボタンにつけてみよう 数百種類ものアイコンが Webフォントで提供されているサービスです。頻繁にバージョンアップがあり、そのたびに アイコンの種類が増えます。MIT ライセンスによって提供されています。 Font-Awesome をボタンに入れてみる
84. 80 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 8 ズルいボタン 　font-awesome は HTMLで i タグの class にアイコンの名前を付けて使用します。 リンクのボタンにアイコンを利用するには、このような HTML に こんなアイコンのついたボタンになります。 <i class="icon-circle-arrow-right"></i> <p class="button"> <a href="#"> <i class="icon-circle-arrow-right"></i> ズルいボタン </a> </p>
85. 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 ズルいボタン
86. 82 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 9 ズルいフキダシ NEW 今回から新規に追加しました
87. 83 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 9 ズルいフキダシ よくあるアレ よくあるアレ …を、mixin で汎用化して、 色・位置・三角形の大きさを都度、調節出来るようにしたい。 うん、しよう。 この三角形の部分
88. 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 使う時はこんな感じで
89. 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 線の色
90. 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 あとで見といてください
91. 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 あとで見といてください
92. 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 あとで見といてください
93. 89 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 10 ズルい数字 NEW 今回から新規に追加しました
94. 90 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ポイントになる英数字を大きく見せてメリハリを出す Zurui Design 10 ズルい数字
95. 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; }
96. 92 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 数字を span.num でマークアップ 数字を span.num でマークアップ Zurui Design 10 ズルい数字 <p class="price"> ¥<span class="num">2,610</span> </p> .num{ @include num-font; font-size: 200%; }
97. 93 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 11 ズルいフラッ トデザイン NEW 今回から新規に追加しました
98. 94 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 10 ズルいフラットデザイン フラットデザインがうまくいく 8 つの法則 フラットデザインはごまかしがきかない分、 うまく成り立たせるために制約とパターンがある。 うまくいくパターンを、既存のフラットデザインから読み取ってみる。 ・寂しくならない ・手抜きに見えない ・使いやすさを担保
99. 95 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 法則 1 色ベタ面が表示画面の半分以上を占める かつ、色ベタ面の幅は画面の端まで 100% 幅である Zurui Design 10 ズルいフラットデザイン 同系色で背景にうっすらイラスト描いてるのもよくある
100. 96 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 法則 2 写真が表示画面の半分以上を占める かつ、写真の幅は画面の端まで 100% 幅である 法則 1 の色ベタ面の代わりに写真を利用している Zurui Design 10 ズルいフラットデザイン ぼかすのもよくある 上に色乗せて文字読みやすくするのもよくある
101. 97 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 法則 3 メインカラー + ごく一部にアクセントカラー メインカラーは 画面の半分以上を占める : アクセントカラーは 5% 未満 ※色選びのポイントは、 「ズルい配色」参照 白抜き文字 / 黒文字 いずれも載せられるような色がメインカラーに使いやすい 一番重要なボタン等に大体アクセントカラーが使われている Zurui Design 10 ズルいフラットデザイン
102. 98 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 法則 4 アイボリー / ベージュ背景 + カラフル 上に乗せるカラフルな色も、背景色に合わせて、少し彩度を落としている。 ※彩度の落とし方： 「ズルい配色」参照 (desaturate) Zurui Design 10 ズルいフラットデザイン
103. 99 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 法則 4 アイボリー / ベージュ背景 + カラフル 上に乗せるカラフルな色も、背景色に合わせて、少し彩度を落としている。 ※彩度の落とし方： 「ズルい配色」参照 (desaturate) Zurui Design 10 ズルいフラットデザイン
104. 100 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version これら、フラットデザインの法則 今風のデザインテイスト & 使いやすくコンテンツが馴染む UI セミフラットデザイン ズルいデザイン ＋ ↓ Zurui Design 10 ズルいフラットデザイン
105. 101 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Thank you Osaka. Photo by http://www.flickr.com/photos/72782973@N00/4670383270/ あ り が と う ご ざ い ま し た