ズルいデザイン ハンズオン in RubyHiroba Jun. 2th, 2013 Rubyistのための #P4Dデザイナー向けプログラミング部 Presents @ken_c_lo TAEKO AKATSUKA いそのー、 Sass やろうぜー © @ayumiko

1 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 準備 Use Middleman http://middlemanapp.com 今回のハンズオン用のサンプルファイル https://github.com/prog4designer/zurui-hands-on $ gem install middleman $ git clone [email protected]:prog4designer/zurui-hands-on.git $ bundle install $ bundle exec middleman See -> http://localhost:4567

2 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 趣旨 zurui-sass-rails by @mah_lab https://github.com/mahm/zurui-sass-rails ズルいデザインの Rails 用 Gem zurui-sass-rails の mixin の使い方を、ハンズオンで実際に体験。 今日からあなたの Rails アプリにズルいデザインが導入できる！ ※今回の middleman のサンプルには zurui-sass-rails と同様の 　Sass ファイルがバンドル済みです。 Use

3 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 趣旨 Use Haml Sass(indented syntax) compass 今回は使いませんがサンプルコード のソースは Haml になってます 巷では SCSS の方が主流ですが、 Rubyist の方なら、 、と 個人的により便利だと思う Sass 記法 （インデント記法）を今回は使います Thanks @machida 今回の Middleman のサンプルは machida さんの作ったものから Fork してズルいデザイン用に作りました。

4 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 これが…

5 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 こうなる！

6 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 今回はこのファイルを編集して ズルいデザインを体験します。 Open /source/stylesheets/zurui/_tryout.css.sass

7 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 1 ズルい背景パターン

8 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 body 全体の背景を変える // コメントアウトをはずしてみる Zurui Design Hands-on 1 ズルい背景パターン 15行目 background: $base-color url(/images/paper.png)

9 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 1 ズルい背景パターン 紙のテクスチャ http://subtlepatterns.com/paper/ body 全体の背景を変える

10 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 #hero の背景画像を変える Zurui Design Hands-on 1 ズルい背景パターン 59行目 background: #EACB95 url(/images/purty_wood.png) // コメントアウトをはずしてみる #hero

11 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 1 ズルい背景パターン 木目のテクスチャ http://subtlepatterns.com/purty-wood/ #hero の背景画像を変える このスライドと 同じテクスチャです

12 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 2 ズルい線

13 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ヘッダナビゲーションにズルい線 // コメントアウトをはずしてみる Zurui Design Hands-on 2 ズルい線 51行目 +zurui-line-right($op1: .2, $op2: .2)

14 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 2 ズルい線 51行目 +zurui-line-right($op1: .2, $op2: .2) 黒い線の透明度 0.2 白い線の透明度 0.2

15 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ためしに Zurui Design Hands-on 2 ズルい線 +zurui-line-right($op1: 1, $op2: 1) とかやってみると、線の濃さが変わるのが確認できる。 背景に彫り込まれているようにみせるには、 見えるか見えないかく らいまで薄くするのがコツ !

16 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 3 ズルいテキストシャドウ

17 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 body 全体へのテキストシャドウ // コメントアウトをはずしてみる Zurui Design Hands-on 3 ズルいテキストシャドウ 17行目 +zurui-ts-fff(1)

18 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 紙に彫り込まれたような 自然な立体感 17行目 +zurui-ts-fff(1) 白いテキストシャドウ 透明度 1 （100%） Zurui Design Hands-on 3 ズルいテキストシャドウ

19 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 紙テクスチャ以外の場所がちょっと変！ 木目ベースだとハイライトが濃すぎる… 白文字がにじんでしまった… Zurui Design Hands-on 3 ズルいテキストシャドウ

20 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ヘッダのテキストシャドウ // コメントアウトをはずしてみる Zurui Design Hands-on 3 ズルいテキストシャドウ 40行目 +zurui-ts-000(.3)

21 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 3 ズルいテキストシャドウ 40行目 +zurui-ts-000(.3) 黒いテキストシャドウ 透明度 0.3 (30%)

22 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 #hero （木目部分）にテキストシャドウ // コメントアウトをはずしてみる Zurui Design Hands-on 3 ズルいテキストシャドウ 60行目 +zurui-ts-000(.3)

23 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 3 ズルいテキストシャドウ 60行目 +zurui-ts-fff(.5) 白いテキストシャドウ 透明度 0.5 (50%) 透明度 1 -> 0.5 alpha を落として 背景の木目になじむ濃さに

24 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 4 ズルいグラデーション

25 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 header にズルいグラデーション // コメントアウトをはずしてみる Zurui Design Hands-on 4 ズルいグラデーション 38行目 +zurui-gradient-top-lighten($main-color, 10%)

26 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 4 ズルいグラデーション 38行目 +zurui-gradient-top-lighten($main-color, 10%) 下辺が $main-color(#b13b23), 上辺が $main-colorより10% 明るいグラデーション $main-color より 10% 明るい $main-color

27 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 5 ズルいボタンを作ってみよう

28 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ボタンにテキストシャドウをつける Zurui Design Hands-on 5 ズルいボタン 66行目 +zurui-ts-000(.3)

29 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ボタンにズルいグラデーションを適用 Zurui Design Hands-on 5 ズルいボタン 64行目 +zurui-gradient-top-lighten($accent-color)

30 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 5 ズルいボタン 64行目 +zurui-gradient-top-lighten($accent-color) 下辺が $accent-color, 上辺が $main-colorより10% 明るいグラデーション ($accent-color, 10%) と同じ意味ですが、 ズルいグラデーションはデフォルトが 10% 明るく / 暗く に設定しているので、10% の場合省略できます。

31 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ボタン hover 時にもズルいグラデーション Zurui Design Hands-on 5 ズルいボタン 70行目 +zurui-gradient-top-lighten(lighten($accent-color, 5%)) 下辺が $accent-color より 5% 明るい色、 上辺が 下辺より10% 明るい色のグラデーション

32 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ちなみに、 $accent-color は $main-color の色相を 200° 転換 5行目参照 $accent-color: adjust-hue($main-color, 200) Zurui Design Hands-on 5 ズルいボタン

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

34 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ズルいボックスシャドウで立体感を Zurui Design Hands-on 5 ズルいボタン 67行目 +zurui-box-emboss($border: .3, $shadow: .1, $highlight: .2)

35 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 5 ズルいボタン 67行目 +zurui-box-emboss($border: .3, $shadow: .1, $highlight: .2) 線の透明度 0.3 $shadow $highlight 影の透明度 0.1 ハイライトの透明度 0.2

36 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ためしに +zurui-box-emboss($border: 1, $shadow: 1, $highlight: 1) とかやってみると、それぞれの濃さが変わるのが確認できる。 Zurui Design Hands-on 5 ズルいボタン 濃すぎ！

37 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 6 おまけ 1) ヘッダに影をつける

38 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 header にズルいグラデーション Zurui Design Hands-on 6 ヘッダに影をつける 43行目 +box-shadow(rgba(0,0,0,.2) 0 2px 5px) 黒 / 透明度 0.2 / 下に 2px / ぼかし 5px の影 Compass

39 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 しかしこれだけでは影がつかない ！ Zurui Design Hands-on 6 ヘッダに影をつける ヘッダよりも #hero の方が 上のレイヤーになってし まっているので 影が隠れている ！ header のレイヤーを上にする必要がある

40 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 header のレイヤーを z-index: 2 に Zurui Design Hands-on 6 ヘッダに影をつける 41-42行目 position: relative z-index: 2 ヘッダが、body 内の他の要素よりも上のレイヤーになる → 影がみえる ！ ※ z-index （レイヤー）の指定には、 position の指定が必要

41 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 7 おまけ 2) ズルいフォント

42 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 全体のフォントを変えてみよう Zurui Design Hands-on 7 ズルいフォント 8行目 12行目 @import url(http://fonts.googleapis.com/css?family=Lato) font-family: 'Lato', Arial, ' メイリオ ', Meiryo ,' ヒラギノ角ゴ Pro W3' ,'Hiragino Kaku Gothic Pro', ' ＭＳ Ｐゴシック ', sans-serif

43 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Lato http://www.google.com/fonts/specimen/Lato Zurui Design Hands-on 7 ズルいフォント

44 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Lato http://www.google.com/fonts/specimen/Lato Zurui Design Hands-on 7 ズルいフォント Lato かわいい。Lato おすすめ - シンプルでかわいらしいゴシック - ウェイト （太さ）の種類が豊富 - はやりのフラット UI にも合う

45 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Lato http://www.google.com/fonts/specimen/Lato Zurui Design Hands-on 7 ズルいフォント これも Lato http://designmodo.github.io/Flat-UI/

46 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 まとめ

47 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 今日やったものの完成版 Sass がこれ の中の のコメントアウトを外してあげると読み込めます source/stylesheets/zurui/_sample.css.sass source/stylesheets/application.sass // @import zurui/sample

48 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 zurui-sass-rails by @mah_lab https://github.com/mahm/zurui-sass-rails 帰ったらぜひ使ってみてください For Rails Rails 以外（Middleman など） Gemfile に追加 以下のコマンドを実行して、ローカルに _ zurui-sass.sass をダウンロード application.css.sass 的なファイルに追加 Compass の使える環境で _zurui-sass. sass をインポート group :assets do gem 'sass-rails' gem 'compass-rails' gem 'zurui-sass-rails' end curl https://raw.github.com/mahm/zurui-sass- rails/master/vendor/assets/stylesheets/_zurui- sass.sass > _zurui-sass.sass @import compass/utilities @import compass/css3 @import zurui-sass @import compass/utilities @import compass/css3 @import zurui-sass

49 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 © @ayumiko Enjoy!