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

WCAF Vol.11 「Design」 in 福井 で発表させていただきました。
内容は大体、前回の大阪バージョンと同じです。
http://wcaf.doorkeeper.jp/events/7028

少ない装飾で素材の魅力を生かす、ズルいWebデザイン実践編
https://speakerdeck.com/ken_c_lo/shao-naizhuang-shi-desu-cai-falsemei-li-wosheng-kasu-zuruiwebdezainshi-jian-bian

Transcript

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