$30 off During Our Annual Pro Sale. View Details »

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

More Decks by ken_c_lo / TAEKO AKATSUKA

Other Decks in Design

Transcript

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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% 明るい色のグラデーション

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    Zurui Design Hands-on 6 ヘッダに影をつける
    ヘッダよりも
    #hero の方が
    上のレイヤーになってし
    まっているので
    影が隠れている

    header のレイヤーを上にする必要がある

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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/

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide