Rubyistのためのズルいデザインハンズオン in RubyHiroba P4D ワークショップ

Rubyistのためのズルいデザインハンズオン in RubyHiroba P4D ワークショップ

ズルいデザインを使った Rails 用 gem "zurui-sass-rails" の使って、実際にデザインの作り方を体験できるハンズオンです。

体験用レポジトリ
https://github.com/prog4designer/zurui-hands-on

zurui-sass-rails
https://github.com/mahm/zurui-sass-rails

ズルいデザインについて - 前半のスライド
https://speakerdeck.com/ken_c_lo/zuruidezaintekunituku-in-rubyhiroba-p4dwakusiyotupu

Transcript

  1. 2.

    1 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 準備 Use Middleman

    http://middlemanapp.com 今回のハンズオン用のサンプルファイル 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
  2. 3.

    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. 4.

    3 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 趣旨 Use Haml

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

    8 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 body 全体の背景を変える //

    コメントアウトをはずしてみる Zurui Design Hands-on 1 ズルい背景パターン 15行目 background: $base-color url(/images/paper.png)
  5. 10.

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

    1 ズルい背景パターン 紙のテクスチャ http://subtlepatterns.com/paper/ body 全体の背景を変える
  6. 11.

    10 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 #hero の背景画像を変える Zurui

    Design Hands-on 1 ズルい背景パターン 59行目 background: #EACB95 url(/images/purty_wood.png) // コメントアウトをはずしてみる #hero
  7. 12.

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

    1 ズルい背景パターン 木目のテクスチャ http://subtlepatterns.com/purty-wood/ #hero の背景画像を変える このスライドと 同じテクスチャです
  8. 15.

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

    2 ズルい線 51行目 +zurui-line-right($op1: .2, $op2: .2) 黒い線の透明度 0.2 白い線の透明度 0.2
  9. 16.

    15 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ためしに Zurui Design

    Hands-on 2 ズルい線 +zurui-line-right($op1: 1, $op2: 1) とかやってみると、線の濃さが変わるのが確認できる。 背景に彫り込まれているようにみせるには、 見えるか見えないかく らいまで薄くするのがコツ !
  10. 18.

    17 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 body 全体へのテキストシャドウ //

    コメントアウトをはずしてみる Zurui Design Hands-on 3 ズルいテキストシャドウ 17行目 +zurui-ts-fff(1)
  11. 19.

    18 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 紙に彫り込まれたような 自然な立体感 17行目

    +zurui-ts-fff(1) 白いテキストシャドウ 透明度 1 (100%) Zurui Design Hands-on 3 ズルいテキストシャドウ
  12. 22.

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

    3 ズルいテキストシャドウ 40行目 +zurui-ts-000(.3) 黒いテキストシャドウ 透明度 0.3 (30%)
  13. 23.

    22 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 #hero (木目部分)にテキストシャドウ //

    コメントアウトをはずしてみる Zurui Design Hands-on 3 ズルいテキストシャドウ 60行目 +zurui-ts-000(.3)
  14. 24.

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

    3 ズルいテキストシャドウ 60行目 +zurui-ts-fff(.5) 白いテキストシャドウ 透明度 0.5 (50%) 透明度 1 -> 0.5 alpha を落として 背景の木目になじむ濃さに
  15. 26.

    25 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 header にズルいグラデーション //

    コメントアウトをはずしてみる Zurui Design Hands-on 4 ズルいグラデーション 38行目 +zurui-gradient-top-lighten($main-color, 10%)
  16. 27.

    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
  17. 30.
  18. 31.

    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% の場合省略できます。
  19. 32.

    31 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ボタン hover 時にもズルいグラデーション

    Zurui Design Hands-on 5 ズルいボタン 70行目 +zurui-gradient-top-lighten(lighten($accent-color, 5%)) 下辺が $accent-color より 5% 明るい色、 上辺が 下辺より10% 明るい色のグラデーション
  20. 33.

    32 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ちなみに、 $accent-color は

    $main-color の色相を 200° 転換 5行目参照 $accent-color: adjust-hue($main-color, 200) Zurui Design Hands-on 5 ズルいボタン
  21. 34.

    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% 程度の面積で 利用すると効果的
  22. 35.

    34 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ズルいボックスシャドウで立体感を Zurui Design

    Hands-on 5 ズルいボタン 67行目 +zurui-box-emboss($border: .3, $shadow: .1, $highlight: .2)
  23. 36.

    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
  24. 37.

    36 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ためしに +zurui-box-emboss($border: 1,

    $shadow: 1, $highlight: 1) とかやってみると、それぞれの濃さが変わるのが確認できる。 Zurui Design Hands-on 5 ズルいボタン 濃すぎ!
  25. 39.

    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
  26. 40.

    39 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 しかしこれだけでは影がつかない ! Zurui

    Design Hands-on 6 ヘッダに影をつける ヘッダよりも #hero の方が 上のレイヤーになってし まっているので 影が隠れている ! header のレイヤーを上にする必要がある
  27. 41.

    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 の指定が必要
  28. 43.

    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', ' MS Pゴシック ', sans-serif
  29. 45.

    44 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Lato http://www.google.com/fonts/specimen/Lato Zurui

    Design Hands-on 7 ズルいフォント Lato かわいい。Lato おすすめ - シンプルでかわいらしいゴシック - ウェイト (太さ)の種類が豊富 - はやりのフラット UI にも合う
  30. 46.

    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/
  31. 48.

    47 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 今日やったものの完成版 Sass がこれ

    の中の のコメントアウトを外してあげると読み込めます source/stylesheets/zurui/_sample.css.sass source/stylesheets/application.sass // @import zurui/sample
  32. 49.

    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