ズルいデザインテクニック in RubyHiroba P4Dワークショップ

少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
2013/06/02 RubyHiroba #P4Dワークショップ バージョン

内容はほとんど https://speakerdeck.com/ken_c_lo/zurui-design
と同様ですが、下記の部分に追加・訂正が入ってます。

* P4D（デザイナー向けプログラム部）の紹介
* Subtle Patternsのブックマークレットの紹介
* ズルいグレー #F8F8F8 -> #F6F6F6 に変更（前のが明るすぎた）
* ズルいデザイン用 Rails Gem "zurui-sass-rails" の紹介

後半 Rubyistのためのズルいデザインハンズオン のスライド
https://speakerdeck.com/ken_c_lo/rubyistfalsetamefalsezuruidezainhanzuon-in-rubyhiroba-p4d-wakusiyotupu

Transcript

1. 少ない手間と知識で “それなり” に見せる、 ズルいデザイン テクニック in RubyHiroba Jun. 2th, 2013 @ken_c_lo TAEKO AKATSUKA #P4Dデザイナー向けプログラミング部 ワークショップ Presents RubyHiroba Version! © @ayumiko
2. 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/ ・P4D ハッカソンで Receibo 作った => http://receibo.heroku.com/ ・ 最近は Forkwell.com のリニューアルデザインとかをお手伝い ・ Rails アプリにデザインを入れる仕事 募集中 ・Haml + Sass(.sass) + compass 好き ・ Ruby & Rails 勉強中 #P4D で教わりながら Web アプリ作ってます。 誰？
3. 2 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック We are #P4D facebook グループ （自由に参加できます） facebook https://www.facebook.com/groups/151208708350141/ ・デザイナーがプログラマにプログラミングを教わったり（Git や Rails など） ・ プログラマがデザイナーに作ってるサイトのデザインのダメ出しをされたり ・ 月 2 回開催 @ 万葉さん（神保町） / ＠ Forkwell さん（表参道） ・ 終わったあとはだいたい飲んでいる ・ たまにデザイナーとプログラマが組んでハッカソンや、温泉合宿など ・毎回、Git や Rails の環境を作ってる人がいる ・ 海老沢さん（@satococoa 主催）が女子を呼びたがる デザイナー向けプログラム部
4. 3 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 前半は大体あの出回ってるスライドと同じです 何回も聞いてくれてる方、すいません・・・ https://speakerdeck.com/ken_c_lo/zurui-design 本日の内容
5. 4 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 後半はズルいデザインを実際に体験するハンズオンやります 本日の内容 今回のハンズオン用のサンプルファイル https://github.com/prog4designer/zurui-hands-on $ gem install middleman $ git clone git@github.com:prog4designer/zurui-hands-on.git $ bundle install $ bundle exec middleman See -> http://localhost:4567 Please clone this!
6. 5 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック デザイン初心者の技術者向け 例えば…プログラマの人がハッカソンなどで、 集中して短時間でサービス開発＆ローンチしたい時に、 少ない手間でそれらしく見せたい ！ ・ベジェ曲線 （難しい ！ めんどい ！ ） ・画像加工・合成 （とりあえずありもので・・・） ・デザインの基礎知識・理論 （難しい話は後だ！ ） …などのスキル、知識がなくても、とりあえずこれやっとくと簡単にデザインがちょっ と良く見える感じの小ズルい Tips を紹介します。 趣旨
7. 6 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Use ・今日来てる方々はむしろ普通の CSS 書くより、抵抗少なそう。 ・紹介するソース例も Compass で書けるところは、Compass で紹介します。 趣旨 圧倒的に楽！ DRY! ズルい ！
8. 7 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 1 ズルい線 Zurui Design 1 ズルい線 （© @machida）
9. 8 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 《ズルい線》 とは？ Zurui Design 1 ズルい線 黒と白の線を 2 本並べることで、背景に彫り込まれたように見える線。 これがズルい線 （命名 @machida） ※下は box-shadow で書く(Compass で書いた例 ) border-bottom: 1px solid rgba(0, 0, 0, .2); 上： 黒 / 透明度 0.2 /1px の線 @include box-shadow(rgba(255, 255, 255, .3) 0 1px 0); 下： 白 / 透明度 0.3 /1px の線 よく見るアレ
10. 9 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック ここがポイント Zurui Design 1 ズルい線 ・色は、黒 （rgba(0, 0, 0, x))、 白 (rgba （255,255,255,x)) のみで、 ・背景色にあわせて透明度を調節する ・太さは 1px ・ぼかしは 0 ・濃過ぎないように。
11. 10 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 随所で活躍する、ズルい線 Zurui Design 1 ズルい線 見出しの下に引いたり、list やセクションなどの区切りに使ったり…
12. 11 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 各方向のズルい線 Zurui Design 1 ズルい線 上 左 右 下 border-bottom: 1px solid rgba(0, 0, 0, .2); @include box-shadow(rgba(255, 255, 255, .3)0 1px 0); border-top: 1px solid rgba(0, 0, 0, .2); @include box-shadow(rgba(255, 255, 255, .3) 0 1px 0 inset); border-left: 1px solid rgba(0, 0, 0, .2); @include box-shadow (rgba(255, 255, 255, .3) -1px 0 0); border-left: 1px solid rgba(0, 0, 0, .2); @include box-shadow(rgba(255, 255, 255, .3) -1px 0 0 inset); 左下向き光源を 想定した場合
13. 12 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 背景色の濃さによって、ズルい線の透明度を調節。 Zurui Design 1 ズルい線 背景色 #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);
14. 13 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック @mixin line-left($op1: .2, $op2: .3){ border-left: 1px solid rgba(0, 0, 0, $op1); @include box-shadow (rgba(255, 255, 255, $op2) -1px 0 0); } @mixin line-right($op1: .2, $op: .3){ border-left: 1px solid rgba(0, 0, 0, $op1); @include box-shadow(rgba(255, 255, 255, $op2) -1px 0 0 inset); } こういう mixin 作っておくと便利 Zurui Design 1 ズルい線 上 左 右 @mixin line-top($op1: .2, $op2: .3){ border-top: 1px solid rgba(0, 0, 0, $op1); @include box-shadow(rgba(255, 255, 255, $op2) 0 1px 0 inset); 下 @mixin line-bottom($op1: .2, $op2: .3){ border-bottom: 1px solid rgba(0, 0, 0, $op1); @include box-shadow(rgba(255, 255, 255, $op2)0 1px 0); } 透明度を引数に よく使う透明度を デフォルトに
15. 14 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 2 ズルい text-shadow Zurui Design 2 ズルい text-shadow
16. 15 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 2 ズルい text-shadow 文字が刻印されているように見えるテキストシャドウ 背景色 #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 / の影 濃い背景色 + 白抜き文字　の場合
17. 16 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 2 ズルい text-shadow 文字が刻印されているように見えるテキストシャドウ 背景色 #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 / の影 薄い （白に近い）背景色 + 濃い色の文字 の場合
18. 17 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック ここがポイント ・色は、黒、白のみで、 ・背景色にあわせて透明度を調節する ・濃い背景 + 白抜き文字 の場合 黒い影 光源と逆方向↗ ・薄い背景 + 濃い色文字 の場合 白い影　光源と同方向↙ ・太さは 1px ・ぼかしは 0 ・濃過ぎないように。辛うじて見えるかなく らいがちょうどいい。 Zurui Design 2 ズルい text-shadow
19. 18 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック こういう mixin 作っておくと便利 Zurui Design 2 ズルい text-shadow @mixin ts-000($op : .4){ text-shadow: 1px -1px rgba(0, 0, 0, $op); } @mixin ts-fff($op : .7){ text-shadow: -1px 1px rgba(0, 0, 0, $op); } 透明度を引数に よく使う透明度を デフォルトに
20. 19 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 3 ズルい背景 Zurui Design 3 ズルい背景
21. 20 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 3 ズルい背景 これらをうまく使うだけでパッと見 2 割増く らいのクオリティ ！ ノイズ 木目 紙 布 細かいドット ズルい背景パターン達 ズルい ！
22. 21 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック ◯ 使いやすい背景パターンの特徴 ・白に近い色がベースのもの （薄いグレー・アイボリー等） ・黒に近い色ベースのもの （グレー・濃紺等） ・パターンが細かいもの ・ナチュラル素材 Zurui Design 3 ズルい背景
23. 22 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック × 使いづらい背景パターンの特徴 ×大柄のパターン ×彩度が強いもの （色が鮮やかなもの） ×地の色と模様の明度差が大きいもの （模様がよく見えるもの） 強い柄、強い色のものは、中の要素とぶつかってしまうため、うまく使わないと素人っぽくなりやすい。 Zurui Design 3 ズルい背景 ズルくない
24. 23 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック ズルい背景パターンを取り揃えた有名サイト http://subtlepatterns.com/ Zurui Design 3 ズルい背景
25. 24 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 3 ズルい背景 http://bradjasper.com/subtle-patterns-bookmarklet/ ブックマークレッ トもある わかりやすい解説 -> http://review4.cc/archives/2356/ 見ているサイトの背景を簡単に SubtlePatterns の背景に変えられたりして便利
26. 25 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック もう一つついでに… ズルいグレーとは。 Zurui Design 3 ズルい背景
27. 26 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック ズルいグレーとは 限りなく白に近いグレー (#EEE 以下 ) #EEE #F6F6F6 Zurui Design 3 ズルい背景 ・殆ど白に見える明るいグレー → 白の代わりに使える。 ・これらに、ズルい線やズルいテキストシャドウを乗せると… ・ほのかに立体感が出て、一気に高級感が出る。 ・本当の白 （#FFF）と並べて使うと微妙な色の違いがオシャレ #FFF
28. 27 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 4 ズルいグラデーション Zurui Design 4 ズルいグラデーション
29. 28 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック #434343 #2d9fee #48b1f2 #222222 微妙な明度差のグラデーション ベタ塗りの一歩手前く らいの、微妙な色の差のグラデーションで 本物っぽい質感が出る Zurui Design 4 ズルいグラデーション カラーコードで 1 桁目の差が 2 く らいがいいみたい
30. 29 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 色の差が大きなグラデーションは、 実際使ってみると野暮いデザインになりがち・・・ （びしっと決まるとカッコイイけど、大胆な上級テク。 ） Zurui Design 4 ズルいグラデーション 大胆なグラデーションの使いこなしは結構難しい。 だめじゃないけど むずかしい ！
31. 30 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック グラデーションの CSS を楽につくれるズルいサイト http://www.colorzilla.com/gradient-editor/ Zurui Design 4 ズルいグラデーション
32. 31 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Sass(SCSS) にも切り替え可能 Zurui Design 4 ズルいグラデーション
33. 32 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 4 ズルいグラデーション で、作ってもいいんだけど… 　さらに mixin 化できそう。
34. 33 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 微妙な色の差グラデーション mixin @mixin gradient-top-lighten($color : #666, $lighten: 10%){ 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 ズルいグラデーション
35. 34 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 微妙な色の差グラデーション mixin Zurui Design 4 ズルいグラデーション @mixin gradient-top-darken($color : #666, $darken: 10%){ 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); 上の方が少し暗いグラデーション
36. 35 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 5 ズルい角丸 Zurui Design 5 ズルい角丸
37. 36 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 5 ズルい角丸 角丸にするだけで、 なんかオシャレ ！ ズルい ！ けど、これも使いこなすのに少しコツが…
38. 37 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 角丸、大きすぎないのがおすすめ 原則 6px 以内が使いやすい 1 つの section を囲むような通常サイズ の BOX であれば、 border-radius: 5px 〜 6px ぐらいが、最も無難でキレイです。 Zurui Design 5 ズルい角丸
39. 38 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 5 ズルい角丸 border-radius: 4px border-radius: 2 〜 3px Submit ボタン等のボタンは 小さなアイコン等のコーナー
40. 39 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック R 半径が大きい角丸は、 野暮ったいデザインになりやすいので、 あまり使わない方がよいです。 （びしっと決まるととてもカッコイイ けど、上級テク。 ） だめじゃないけど むずかしい ！ Zurui Design 5 ズルい角丸
41. 40 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Compass 使おう。 Zurui Design 5 ズルい角丸 .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); } ズルい ！
42. 41 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 6 ズルい box-shadow Zurui Design 6 ズルい box-shadow
43. 42 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック × ×色が濃すぎる ×ボケ足が長すぎる ×色つき これは NG! な box-shadow Zurui Design 6 ズルい box-shadow だめじゃないけど むずかしい ！ やり方によってはダメじゃないんですが、これも使いこなすのが難しい上級テク box-shadow はできるだけ繊細に使用した方が見栄えが良い。
44. 43 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 6 ズルい box-shadow ズルい box-shadow ① 枠線がわりに ・角度をつけずに四方に薄い alpha0.15 のシャドウ ・box と背景がともに白に近い色の時に利用しやすい @include box-shadow(rgba(0, 0, 0, .15) 0 0 2px);
45. 44 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 6 ズルい box-shadow ズルい box-shadow ② 内側にぼかして高級感 ・内側にむかってぼけ足を長く、薄いシャドウを入れることで、少し高級感、 　リアルな存在感が出る。 ・ズルい背景パターンとの併用オススメ ・リボン、ボタン等、 「モノ感」を出したい場合に有効 @include box-shadow(rgba(0, 0, 0, .2) 0 0 0 20px inset);
46. 45 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 6 ズルい box-shadow ズルい box-shadow ③ 凹み BOX （deboss） border: 1px solid rgba(0, 0, 0, .1); @include box-shadow(rgba(0, 0, 0, .1) -1px 1px 2px inset, rgba(255, 255, 255, 1) -1px 1px 0); ↗右上・内側に影　↙左下・外側にハイライト
47. 46 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック @mixin box-deboss($border: .1, $shadow: .1, $highlight: 1){ 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); } 使う時はこんな感じで。 @include box-deboss(.15, .2, .7) ③ 凹み BOX を mixin に Zurui Design 6 ズルい box-shadow borderとシャドウ、 ハイライトの透明度は 背景色によって調節したいので 引数に
48. 47 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 6 ズルい box-shadow ズルい box-shadow ④ 凸 BOX （emboss） border: 1px solid rgba(0, 0, 0, .15); @include box-shadow(rgba(0, 0, 0, .5) -1px 1px 0, rgba(255, 255, 255, 1) -1px 1px 0 inset); ↙左下・外側に影　↗右上・内側にハイライト
49. 48 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック @mixin box-emboss($border: .15, $shadow: .05, $highlight: 1){ 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 box-emboss(.15, .2, .7) ④凸 BOX を mixin に Zurui Design 6 ズルい box-shadow borderとシャドウ、 ハイライトの透明度は 背景色によって調節したいので 引数に
50. 49 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 7 ズルいボタン Zurui Design 7 ズルいボタン
51. 50 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック ここまでで出てきたズルい技を使って ボタンを作ってみる。 Zurui Design 7 ズルいボタン
52. 51 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 7 ズルいボタン .button-zurui { a $button_color: #48B1F2; display: block; @include ts-000; @include gradient-top-lighten($button_color); @include border-radius(4px); @include box-emboss(.2, .1, .3); color: rgba(255,255,255,.9); text-align: center; padding: 10px; font-size: 20px; line-height: 1em; font-weight: bold; margin: 50px 30px; &:hover @include gradient-top-lighten($button_color, 15%); text-decoration: none; color: rgba(255,255,255,1); } ズルい text-shadow ズルい角丸 ズルいグラデーション ズルい box-shadow hover でグラデーションの上を 10% → 15% に明るく
53. 52 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック Zurui Design 7 ズルいボタン @extend　で .button-zurui を継承 .button-red{ @extend .button-zurui; $button_color: #b0430a; a @include gradient-top-lighten($button_color); &:hover @include gradient-top-lighten($button_color, 15%); } 色も簡単に変えられる Zurui Design 7 ズルいボタン
54. 53 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック zurui-sass-rails by @mah_lab https://github.com/mahm/zurui-sass-rails ズルいデザイン講座 後半はこの Gem の中に入ってるのと同様の mixin を 実際に使ってみるハンズオンをやります！ ズルいプログラマが Rails 用 Gem を 作って下さいました。 （SonicGarden のズルいプログラマ）
55. 54 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック © @ayumiko 後半に、つづく！